Skip to content
Snippets Groups Projects
Commit 88a00a91 authored by Ming Rui Zhang's avatar Ming Rui Zhang Committed by Sébastien Blin
Browse files

chatview: use new icons and fill full size 

Change-Id: Idb3110156d2abf075d7296ff0d7a9912c2cbfe8d
parent 987811a5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/web-chatview/chatview-qt.css
+ 1
− 0
View file @ 88a00a91
......@@ -16,6 +16,7 @@
--textarea-max-height: 150px;
--placeholder-text-color: #d3d3d3;
/* button properties */
--action-icon-color: var(--jami-dark-blue);
--deactivated-icon-color: #bebebe;
--action-icon-hover-color: #ededed;
--action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of jami light blue */
......
src/web-chatview/chatview.css
+ 7
− 3
View file @ 88a00a91
......@@ -31,6 +31,7 @@
--placeholder-text-color: #d3d3d3;
/* button properties */
--action-icon-color: var(--jami-dark-blue);
--deactivated-icon-color: #BEBEBE;
--action-icon-hover-color: var(--jami-light-blue);
--action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of ring light blue */
......@@ -133,7 +134,8 @@ body {
.svgicon {
display: block;
margin: auto;
height: 70%;
width: 95%;
height: 95%;
}
.nav-button {
......@@ -142,6 +144,7 @@ body {
display: flex;
cursor: pointer;
align-self: center;
align-content: center;
border-radius: 50%;
}
......@@ -149,17 +152,18 @@ body {
width: 40px;
height: 40px;
align-self: center;
align-content: center;
display: flex;
border-radius: 50%;
cursor: auto;
}
.action-button svg {
filter: invert(var(--svg-invert-percentage));
fill: var(--action-icon-color);
}
.action-button.deactivated svg {
filter: invert(50%);
fill: var(--deactivated-icon-color);
}
.message_out .filesvg {
......
src/web-chatview/chatview.html
+ 21
− 37
View file @ 88a00a91
......@@ -101,59 +101,43 @@
<div id="send_inteface_container" onresize="updateBackToBottomContainer()">
<div id="sendMessage">
<div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()">
<svg class="svgicon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Icones" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Link_Black_24dp" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.9">
<g transform="translate(6.981262, 2.084524)" id="Path">
<path d="M4.58333333,20 C2.05607096,20 0,17.943929 0,15.4166667 L0,3.33333333 C0,1.49536133 1.49536133,0 3.33333333,0 C5.17130533,0 6.66666667,1.49536133 6.66666667,3.33333333 L6.66666667,14.1666667 C6.66666667,15.3153483 5.73201496,16.25 4.58333333,16.25 C3.43465171,16.25 2.5,15.3153483 2.5,14.1666667 L2.5,4.56075033 C2.5,4.33064779 2.68636067,4.14408367 2.91666667,4.14408367 C3.14697267,4.14408367 3.33333333,4.33064779 3.33333333,4.56075033 L3.33333333,14.1666667 C3.33333333,14.855957 3.89404296,15.4166667 4.58333333,15.4166667 C5.27262371,15.4166667 5.83333333,14.855957 5.83333333,14.1666667 L5.83333333,3.33333333 C5.83333333,1.95475258 4.71191404,0.833333333 3.33333333,0.833333333 C1.95475262,0.833333333 0.833333333,1.95475263 0.833333333,3.33333333 L0.833333333,15.4166667 C0.833333333,17.4843343 2.51546225,19.1666667 4.58333333,19.1666667 C6.65120442,19.1666667 8.33333333,17.4843343 8.33333333,15.4166667 L8.33333333,4.04276529 C8.33333333,3.81266275 8.519694,3.62609863 8.75,3.62609863 C8.980306,3.62609863 9.16666667,3.81266275 9.16666667,4.04276529 L9.16666667,15.4166667 C9.16666667,17.943929 7.11059571,20 4.58333333,20 Z"></path>
</g>
</g>
</g>
<svg class="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M16.1,5.6c-0.3,0-0.6,0.3-0.6,0.6v11.2c0,1.9-1.6,3.5-3.5,3.5c-1.9,0-3.5-1.6-3.5-3.5V5.5c0-1.2,1-2.3,2.3-2.3 s2.3,1,2.3,2.3v10.6c0,0.6-0.5,1-1,1s-1-0.5-1-1V6.7c0-0.3-0.3-0.6-0.6-0.6c-0.3,0-0.6,0.3-0.6,0.6v9.4c0,1.2,1,2.2,2.2,2.2 s2.2-1,2.2-2.2V5.5c0-1.9-1.6-3.5-3.5-3.5S7.3,3.6,7.3,5.5v11.8c0,2.6,2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7V6.2 C16.7,5.8,16.4,5.6,16.1,5.6z"/>
</svg>
</div>
<div id="audioRecordButton" class="action-button nav-button" onclick="audioRecord()">
<svg class="svgicon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Icones_Fill" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Message-audio">
<path d="M12,2 C17.5228475,2 22,6.4771525 22,12 L22,22 L22,22 L12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z" id="Rectangle-Copy-3" fill="#000000"></path>
<g id="Group" transform="translate(9.000000, 7.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M3.2826376,0.0495376956 C2.15075637,0.0495376956 1.23099067,0.969303261 1.23099067,2.10118448 L1.23099067,5.11026918 C1.23099067,6.24214903 2.15075637,7.16191596 3.2826376,7.16191596 C4.41451882,7.16191596 5.33428439,6.24214903 5.33428439,5.11026918 L5.33428439,2.10118448 C5.33428439,0.969303261 4.41451882,0.0495376956 3.2826376,0.0495376956 L3.2826376,0.0495376956 Z" id="Shape"></path>
<path d="M0.277829768,3.46892297 C0.131747046,3.46666758 -0.00228293577,3.60069619 -2.62151977e-05,3.74677891 L-2.62151977e-05,5.1145366 C-2.62151977e-05,6.83681201 1.32262269,8.24623865 3.00908469,8.38435551 L3.00908469,9.35033921 L1.91487307,9.35033921 C1.76379391,9.35033921 1.64132017,9.47280884 1.64132017,9.62389211 C1.64132017,9.77497538 1.76379391,9.89744502 1.91487307,9.89744502 L4.65040212,9.89744502 C4.80148129,9.89744502 4.92395503,9.77497538 4.92395503,9.62389211 C4.92395503,9.47280884 4.80148129,9.35064011 4.65040212,9.35033921 L3.5561905,9.35033921 L3.5561905,8.38435551 C5.24265237,8.24623865 6.56529592,6.83681201 6.56529592,5.1145366 L6.56529592,3.74677891 C6.56731043,3.60225818 6.43625533,3.46933062 6.29171955,3.46933062 C6.14718377,3.46933062 6.01612321,3.60225818 6.01816665,3.74677891 L6.01816665,5.1145366 C6.01816665,6.63475216 4.80285179,7.85006565 3.2826376,7.85006565 C1.76242204,7.85006565 0.547108409,6.63475216 0.547108409,5.1145366 L0.547108409,3.74677891 C0.549351543,3.60354661 0.421062069,3.47118667 0.277829768,3.46892297 Z" id="Path"></path>
</g>
</g>
<svg class="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
<path d="M19.1,4.9C17.2,3,14.7,2,12,2S6.8,3,4.9,4.9S2,9.3,2,12s1,5.2,2.9,7.1S9.3,22,12,22h10V12C22,9.3,21,6.8,19.1,4.9z M20.6,20.6H12c-2.3,0-4.4-0.9-6.1-2.5c-1.6-1.6-2.5-3.8-2.5-6.1s0.9-4.4,2.5-6.1C7.6,4.3,9.7,3.4,12,3.4s4.4,0.9,6.1,2.5 c1.6,1.6,2.5,3.8,2.5,6.1V20.6z"/>
<path d="M15,10.3c-0.1,0.1-0.2,0.2-0.2,0.4v1.4c0,1.4-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5v-1.4c0-0.1-0.1-0.3-0.2-0.4 c-0.1-0.1-0.2-0.2-0.4-0.2l0,0c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.1-0.2,0.2-0.2,0.4v1.4c0,1.8,1.3,3.3,3.1,3.6v0.5h-0.9 c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.8c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-0.9v-0.5c1.7-0.3,3.1-1.8,3.1-3.6v-1.4 c0-0.1-0.1-0.3-0.2-0.4C15.5,10.2,15.2,10.1,15,10.3z M9.2,10.4L9.2,10.4L9.2,10.4L9.2,10.4L9.2,10.4z"/>
</g>
<g>
<path d="M12.3,13.9c-1,0-1.8-0.8-1.8-1.8V9c0-1,0.8-1.8,1.8-1.8S14.1,8,14.1,9v3.2C14.1,13.2,13.3,13.9,12.3,13.9z M12.3,8.4 c-0.3,0-0.6,0.2-0.6,0.6v3.2c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6V9C12.9,8.7,12.6,8.4,12.3,8.4z"/>
</g>
</svg>
</div>
<div id="videoRecordButton" class="nav-button action-button" onclick="videoRecord()">
<svg class="svgicon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Icones_Fill" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Message-video">
<path d="M12,2 C17.5228475,2 22,6.4771525 22,12 L22,22 L22,22 L12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z" id="Rectangle-Copy-3" fill="#000000"></path>
<g id="noun_Camera_2292906" transform="translate(7.000000, 8.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M8.92857143,0.992063492 L7.25198413,0.992063492 L6.88988095,0.27281746 C6.80555556,0.104166667 6.63690476,0 6.4484127,0 L3.47222222,0 C3.28373016,0 3.11011905,0.104166667 3.03075397,0.27281746 L2.66865079,0.992063492 L0.992063492,0.992063492 C0.446428571,0.992063492 0,1.43849206 0,1.98412698 L0,6.94444444 C0,7.49007937 0.446428571,7.93650794 0.992063492,7.93650794 L8.92857143,7.93650794 C9.47420635,7.93650794 9.92063492,7.49007937 9.92063492,6.94444444 L9.92063492,1.98412698 C9.92063492,1.43849206 9.47420635,0.992063492 8.92857143,0.992063492 Z M2.97619048,4.46428571 C2.97619048,3.36805556 3.8640873,2.48015873 4.96031746,2.48015873 C6.05654762,2.48015873 6.94444444,3.36805556 6.94444444,4.46428571 C6.94444444,5.56051587 6.05654762,6.4484127 4.96031746,6.4484127 C3.8640873,6.4484127 2.97619048,5.56051587 2.97619048,4.46428571 Z" id="Shape"></path>
<path d="M5.95238095,4.46428571 C5.95238095,3.91865079 5.50595238,3.47222222 4.96031746,3.47222222 C4.41468254,3.47222222 3.96825397,3.91865079 3.96825397,4.46428571 C3.96825397,5.00992063 4.41468254,5.45634921 4.96031746,5.45634921 C5.50595238,5.45634921 5.95238095,5.00992063 5.95238095,4.46428571 Z" id="Path"></path>
</g>
</g>
<svg class="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
<path d="M22,22H12c-2.7,0-5.2-1-7.1-2.9C3,17.2,2,14.7,2,12c0-2.7,1-5.2,2.9-7.1S9.3,2,12,2c2.7,0,5.2,1,7.1,2.9 C21,6.8,22,9.3,22,12V22z M12,3.4c-2.3,0-4.4,0.9-6.1,2.5C4.3,7.6,3.4,9.7,3.4,12c0,2.3,0.9,4.4,2.5,6.1c1.6,1.6,3.8,2.5,6.1,2.5 h8.6V12c0-2.3-0.9-4.4-2.5-6.1C16.4,4.3,14.3,3.4,12,3.4z"/>
</g>
<g transform="translate(7.000000, 9.000000)">
<path d="M7.1,7.7H0.4c-0.8,0-1.2-0.5-1.2-1V0.3c0-0.4,0.4-0.9,1.1-1l6.7,0c0.7,0,1.1,0.5,1.1,1v0.6l1.1-0.6C9.6,0,10,0,10.3,0.2 c0.2,0.1,0.5,0.3,0.5,0.8v5c0,0.5-0.3,0.8-0.5,0.9C10,7,9.6,7,9.3,6.8L8.2,6.2v0.6C8.2,7.2,7.8,7.7,7.1,7.7z M0.5,6.4l6.4,0V5.1 c0-0.2,0.1-0.4,0.3-0.6c0.2-0.1,0.4-0.1,0.6,0l1.6,0.9V1.6L7.9,2.5c-0.2,0.1-0.4,0.1-0.6,0C7,2.4,6.9,2.2,6.9,1.9V0.6l-6.4,0V6.4 z M10,5.7L10,5.7C10,5.7,10,5.7,10,5.7z"/>
</g>
</svg>
</div>
<div id="emojiButton" class=" action-button nav-button">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<div id="emojiButton" class="action-button nav-button">
<svg class="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
</svg>
</div>
<textarea id="message" autofocus onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()"
dir="auto" rows="1"></textarea>
<div id="sendButton" class="nav-button action-button" onclick="sendMessage();">
<svg class="svgicon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Send_Black_24dp" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.25">
<g id="noun_send_1433498" transform="translate(2.000000, 3.000000)">
<path d="M19.9969592,9.18267179 C19.9781751,8.90024996 19.8058243,8.65095392 19.5482413,8.53362564 L1.08667923,0.0721076923 C0.792197357,-0.0603940747 0.446309543,0.00511313413 0.220671983,0.236119592 C-0.00496557741,0.467126051 -0.0623223924,0.814458413 0.0770664103,1.10574359 L4.01937359,9.23074872 L0.0770376923,17.3557487 C-0.0623821896,17.6470495 -0.00502577103,17.9944168 0.220638232,18.2254358 C0.446302236,18.4564548 0.792229135,18.5219407 1.08671897,18.3893897 L19.5482977,9.92782564 C19.837429,9.79594495 20.0157137,9.49985813 19.9970131,9.18262051 L19.9969592,9.18267179 Z M17.3847821,9.23074872 L2.40077077,16.0977231 L5.56585821,9.56728718 C5.66919895,9.35483568 5.6691929,9.10668236 5.56584179,8.8942359 L2.40077077,2.36378718 L17.3847821,9.23074872 Z" id="Shape"></path>
</g>
</g>
<svg class="svgicon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g transform="translate(2.000000, 3.000000)">
<path id="Shape" d="M20,9c0-0.3-0.2-0.5-0.4-0.6L1.1-0.2C0.8-0.3,0.4-0.2,0.2,0s-0.3,0.6-0.1,0.9L4,9l-3.9,8.1 C-0.1,17.4,0,17.8,0.2,18c0.2,0.2,0.6,0.3,0.9,0.2l18.5-8.5C19.8,9.6,20,9.3,20,9L20,9z M17.4,9l-15,6.9l3.2-6.5 c0.1-0.2,0.1-0.5,0-0.7L2.4,2.1L17.4,9z"/>
</g>
</svg>
</div>
......
src/web-chatview/chatview.js
+ 1
− 0
View file @ 88a00a91
......@@ -2547,6 +2547,7 @@ function setTheme(theme) {
--navbar-padding-bottom: var(--navbar-padding-top);\
--textarea-max-height: 150px;\
--placeholder-text-color: #d3d3d3;\
--action-icon-color: var(--jami-dark-blue);\
--deactivated-icon-color: #BEBEBE;\
--action-icon-hover-color: var(--jami-light-blue);\
--action-critical-icon-hover-color: rgba(211, 77, 59, 0.3);\
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment