mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Replace unicode check with new svg icon

Browse source 
A good bit of CSS was required to keep the text color changing along
with the text it is nestled within.

Also: took this opportunity to increase the contrast of the number and
verified section right under the contact name in the group members view.

FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-06-14 14:06:36 -07:00
parent 688cae6374
commit 47c5142a83
9 changed files with 74 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
background.html
View file

@ -80,7 +80,7 @@
<span class='conversation-number'>{{ number }}</span>
{{ /number }}
{{ #isVerified }}
<span class='verified'>✓ {{ verified }}</span>
<span class='verified'><span class='verified-icon'></span> {{ verified }}</span>
{{ /isVerified }}
</script>
<script type='text/x-tmpl-mustache' id='conversation'>
@ -251,7 +251,7 @@
</script>
<script type='text/x-tmpl-mustache' id='contact_name_and_number'>
<h3 class='name' dir='auto'> {{ title }} </h3>
<div class='number'>{{ #isVerified }}✓ {{ verified }} &middot;{{ /isVerified }} {{ number }}</div>
<div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} &middot;{{ /isVerified }} {{ number }}</div>
</script>
<script type='text/x-tmpl-mustache' id='contact'>
{{> avatar }}

2
images/verified-check.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M11 21.34L2.66 13l-2.83 2.83L11 27 31.736 6.425 28.83 3.8" fill-rule="nonzero" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 246 B

7
stylesheets/_conversation.scss
View file

@ -21,6 +21,13 @@
padding: 0 5px 0 4px;
}
}
.conversation-title .verified-icon {
@include color-svg('/images/verified-check.svg', white);
display: inline-block;
width: 1.25em;
height: 1.25em;
vertical-align: text-bottom;
}
.conversation {
background-color: white;

8
stylesheets/_global.scss
View file

@ -393,6 +393,14 @@ $avatar-size: 44px;
&.not-clickable {
cursor: default;
}
.verified-icon {
@include color-svg('/images/verified-check.svg', $grey);
display: inline-block;
width: 1.25em;
height: 1.25em;
vertical-align: text-bottom;
}
}

3
stylesheets/_index.scss
View file

@ -95,6 +95,9 @@
background-color: $grey_l !important;
color: $grey_d;
border-color: rgba(0,0,0,0.05);
.verified-icon {
@include color-svg('/images/verified-check.svg', $grey_d);
}
}
.tool-bar {

5
stylesheets/_ios.scss
View file

@ -65,7 +65,12 @@ $ios-border-color: rgba(0,0,0,0.1);
.conversation-title {
line-height: $header-height;
.verified-icon {
@include color-svg('/images/verified-check.svg', #454545);
}
}
.avatar { display: none; }
}
.settings h3,

10
stylesheets/android-dark.scss
View file

@ -4,6 +4,7 @@ $grey-dark_l3: darken($grey-dark_l2, 7%);
$grey-dark_l4: darken($grey-dark_l3, 8%);
$button-dark: #ccc;
$text-dark: #CCCCCC;
$text-dark_l2: darken($text-dark, 30%);
.android-dark {
.gutter .content {
@ -66,6 +67,12 @@ $text-dark: #CCCCCC;
.contact-details .name {
font-weight: 400;
}
.contact-details .number {
color: $text-dark_l2;
.verified-icon {
@include color-svg('/images/verified-check.svg', $text-dark_l2);
}
}
.group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
background-color: $grey-dark_l3;
border-color: $grey-dark;
@ -82,6 +89,9 @@ $text-dark: #CCCCCC;
.inactive .conversation-header {
background-color: $grey-dark !important;
color: $text-dark;
.verified-icon {
@include color-svg('/images/verified-check.svg', $text-dark);
}
}
.sent .status {
display: inline-block;

35
stylesheets/manifest.css
View file

@ -366,6 +366,14 @@ button.hamburger {
font-size: 0.92857em; }
.contact-details.not-clickable {
cursor: default; }
.contact-details .verified-icon {
-webkit-mask: url("/images/verified-check.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #616161;
display: inline-block;
width: 1.25em;
height: 1.25em;
vertical-align: text-bottom; }
.recipients-input {
position: relative; }
@ -852,6 +860,10 @@ img.emoji.jumbo {
background-color: #f3f3f3 !important;
color: #454545;
border-color: rgba(0, 0, 0, 0.05); }
.inactive .conversation-header .verified-icon {
-webkit-mask: url("/images/verified-check.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #454545; }
.tool-bar {
position: relative; }
@ -1013,6 +1025,15 @@ input.search {
font-weight: bold;
padding: 0 5px 0 4px; }
.conversation-title .verified-icon {
-webkit-mask: url("/images/verified-check.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white;
display: inline-block;
width: 1.25em;
height: 1.25em;
vertical-align: text-bottom; }
.conversation {
background-color: white;
height: 100%; }
@ -1613,6 +1634,10 @@ li.entry .error-icon-container {
text-align: left; }
.ios .conversation-header .conversation-title {
line-height: 64px; }
.ios .conversation-header .conversation-title .verified-icon {
-webkit-mask: url("/images/verified-check.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #454545; }
.ios .conversation-header .avatar {
display: none; }
.ios .settings h3,
@ -1955,6 +1980,12 @@ li.entry .error-icon-container {
color: #CCCCCC; }
.android-dark .contact-details .name {
font-weight: 400; }
.android-dark .contact-details .number {
color: gray; }
.android-dark .contact-details .number .verified-icon {
-webkit-mask: url("/images/verified-check.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: gray; }
.android-dark .group-member-list .members .contact, .android-dark .new-group-update .members .contact, .android-dark .attachment-previews img {
background-color: #171717;
border-color: #333333; }
@ -1999,6 +2030,10 @@ li.entry .error-icon-container {
.android-dark .inactive .conversation-header {
background-color: #333333 !important;
color: #CCCCCC; }
.android-dark .inactive .conversation-header .verified-icon {
-webkit-mask: url("/images/verified-check.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #CCCCCC; }
.android-dark .sent .status {
display: inline-block;
-webkit-mask: url("/images/check.svg") no-repeat center;

4
test/index.html
View file

@ -94,7 +94,7 @@
<span class='conversation-number'>{{ number }}</span>
{{ /number }}
{{ #isVerified }}
<span class='verified'>✓ {{ verified }}</span>
<span class='verified'><span class='verified-icon'></span> {{ verified }}</span>
{{ /isVerified }}
</script>
<script type='text/x-tmpl-mustache' id='conversation'>
@ -236,7 +236,7 @@
</script>
<script type='text/x-tmpl-mustache' id='contact_name_and_number'>
<h3 class='name' dir='auto'> {{ title }} </h3>
<div class='number'>{{ #isVerified }}✓ {{ verified }} &middot;{{ /isVerified }} {{ number }}</div>
<div class='number'>{{ #isVerified }}<span class='verified-icon'></span> {{ verified }} &middot;{{ /
</script>
<script type='text/x-tmpl-mustache' id='contact'>
{{> avatar }}