chatview css: design updates
Refactoring of the chatview css:
- use modern CSS3 variables to avoid repeating the same values twice
- redesign the message bar
- change message bar layout to be compliant with other platforms
Change-Id: Ic00c48823736a021bdf1fec34efd836f04b7d134
Reviewed-by: Sebastien Blin <sebastien.blin@savoirfairelinux.com>
diff --git a/web/chatview.html b/web/chatview.html
index 60738c5..1caf1c2 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -17,22 +17,21 @@
</div>
<div id="container">
<div id="messages"></div>
-
<div id="sendMessage">
- <textarea id="message" autofocus placeholder="Type a message" onkeyup="grow_text_area()" rows="1" disabled="false"></textarea>
- <div class="msg-button" onclick="sendMessage()" title="Send">
- <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
- <path xmlns="http://www.w3.org/2000/svg" d="M12,11.874v4.357l7-6.69l-7-6.572v3.983c-8.775,0-11,9.732-11,9.732C3.484,12.296,7.237,11.874,12,11.874z"/>
- </svg>
+ <div class="msg-button action-button" onclick="sendFile()" title="Send File">
+ <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/>
+ <path d="M0 0h24v24H0z" fill="none"/>
+ </svg>
</div>
- <div class="msg-button" onclick="sendFile()" title="Send File">
- <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
- <path d="M0 0h24v24H0z" fill="none" />
- <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
- </svg>
+ <textarea id="message" autofocus placeholder="Type a message" onkeyup="grow_text_area()" rows="1" disabled="false"></textarea>
+ <div class="msg-button action-button" onclick="sendMessage()" title="Send">
+ <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+ <path d="M0 0h24v24H0z" fill="none"/>
+ </svg>
</div>
</div>
- </form>
</div>
</body>