jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Last seen indicator visual refresh 

- Last seen indicator now spans the full conversation, with subtle
shadow highlights above and below
- Scrollbars now overlap the content of the conversation, allowing last
seen indicator to touch the right edge of the window.
- The iOS and Android conversation background is now #eee instead of
white, which meant that the outgoing messages (Android) and incoming
messages (iOS) had to be updated for contrast. They now have white
backgrounds.
- Similarly, the scroll down button needed more contrast, and its
background is now white in light themes.

FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-05-31 16:08:32 -07:00
parent 0b6d5de753
commit 0d722a3186
8 changed files with 98 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
background.html
View File

@ -48,8 +48,10 @@
</button>
</script>
<script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
<div class='text'>
{{ unreadMessages }}
<div class='bar'>
<div class='text'>
{{ unreadMessages }}
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='expired_alert'>

2
stylesheets/_android.scss
View File

@ -28,7 +28,7 @@
}
.outgoing .bubble {
background-color: $grey_l;
background-color: white;
}
.outgoing .hourglass {
@include hourglass(#999);

43
stylesheets/_conversation.scss
View File

@ -16,7 +16,7 @@
}
.conversation {
background-color: #ffffff;
background-color: white;
height: 100%;
.panel {
@ -51,13 +51,17 @@
height: 100%;
width: 100%;
margin: 0;
padding: 2em 20px 0;
overflow-y: auto;
padding: 0;
overflow-y: overlay;
}
}
}
}
.discussion-container {
background-color: #eee;
}
.key-verification {
label {
display: block;
@ -295,6 +299,9 @@ li.entry .error-icon-container {
li {
max-width: 800px;
margin: 0 auto 10px;
padding-left: 1em;
// we need more padding on right side because scroll bar overlaps
padding-right: 1.5em;
&::after {
visibility: hidden;
@ -685,19 +692,27 @@ li.entry .error-icon-container {
}
.message-list .last-seen-indicator-view {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #2090ea;
margin-bottom: 15px;
// We need this extra layer of DOM nodes because scrollIntoView() doesn't honor margins
padding-bottom: 2em;
padding-top: 2em;
.bar {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
background-color: rgba(0, 0, 0, 0.05);
}
.text {
padding: 5px 10px;
// this margin-top needs to be here (not on parent) because scrollIntoView uses the
// top of the element, not counting its margin
margin-top: 2em;
margin-bottom: -12px;
background-color: white;
border-radius: 1.5em;
padding: .75em 1.25em .75em 1.25em;
}
}
@ -711,7 +726,7 @@ li.entry .error-icon-container {
width: 44px;
border-radius: 22px;
text-align: center;
background-color: $grey_l;
background-color: white;
border: none;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);

2
stylesheets/_global.scss
View File

@ -91,9 +91,11 @@ button.hamburger {
::-webkit-scrollbar {
width: 10px;
z-index: 1000;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {

15
stylesheets/_ios.scss
View File

@ -28,9 +28,6 @@ $ios-border-color: rgba(0,0,0,0.1);
}
}
}
::-webkit-scrollbar-track {
background: $grey_l;
}
}
.tool-bar {
float: left;
@ -144,7 +141,7 @@ $ios-border-color: rgba(0,0,0,0.1);
height: 11px;
right: -6px;
bottom: -3px;
background: white;
background: #eee;
}
}
}
@ -152,7 +149,7 @@ $ios-border-color: rgba(0,0,0,0.1);
border-radius: 15px;
}
.attachments img {
border: 1px solid $ios-border-color;
background-color: white;
}
.meta {
clear: both;
@ -160,13 +157,13 @@ $ios-border-color: rgba(0,0,0,0.1);
}
.message-list .incoming .bubbled {
background-color: #e6e5ea;
background-color: white;
color: black;
float: left;
&:before {
left: -1px;
background-color: #e6e5ea;
background-color: white;
}
&:after {
left: -6px;
@ -174,13 +171,13 @@ $ios-border-color: rgba(0,0,0,0.1);
}
.incoming .content {
background-color: #e6e5ea;
background-color: white;
color: black;
float: left;
.body {
&:before {
left: -1px;
background-color: #e6e5ea;
background-color: white;
}
&:after {
left: -6px;

15
stylesheets/android-dark.scss
View File

@ -193,14 +193,23 @@ $text-dark: #CCCCCC;
}
}
::-webkit-scrollbar-track {
background-color: $grey-dark_l2;
background-color: transparent;
}
.recorder {
background: $grey-dark_l2;
}
.message-list .last-seen-indicator-view .text {
background-color: $grey-dark_l3;
.message-list .last-seen-indicator-view {
.bar {
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.1);
}
.text {
background-color: $grey-dark_l3;
}
}
.discussion-container .scroll-down-button-view {

65
stylesheets/manifest.css
View File

@ -105,7 +105,11 @@ button.hamburger {
background-color: black; }
::-webkit-scrollbar {
width: 10px; }
width: 10px;
z-index: 1000; }
::-webkit-scrollbar-track {
background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
@ -971,7 +975,7 @@ input.search {
padding: 0 5px 0 4px; }
.conversation {
background-color: #ffffff;
background-color: white;
height: 100%; }
.conversation .panel {
height: calc(100% - 64px);
@ -998,8 +1002,11 @@ input.search {
height: 100%;
width: 100%;
margin: 0;
padding: 2em 20px 0;
overflow-y: auto; }
padding: 0;
overflow-y: overlay; }
.discussion-container {
background-color: #eee; }
.key-verification label {
display: block;
@ -1174,7 +1181,9 @@ li.entry .error-icon-container {
.message-container li,
.message-list li {
max-width: 800px;
margin: 0 auto 10px; }
margin: 0 auto 10px;
padding-left: 1em;
padding-right: 1.5em; }
.message-container li::after,
.message-list li::after {
visibility: hidden;
@ -1496,16 +1505,20 @@ li.entry .error-icon-container {
border-radius: 5px; }
.message-list .last-seen-indicator-view {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #2090ea;
margin-bottom: 15px; }
padding-bottom: 2em;
padding-top: 2em; }
.message-list .last-seen-indicator-view .bar {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
background-color: rgba(0, 0, 0, 0.05); }
.message-list .last-seen-indicator-view .text {
padding: 5px 10px;
margin-top: 2em;
margin-bottom: -12px;
background-color: white; }
background-color: white;
border-radius: 1.5em;
padding: .75em 1.25em .75em 1.25em; }
.discussion-container .scroll-down-button-view {
position: absolute;
@ -1516,7 +1529,7 @@ li.entry .error-icon-container {
width: 44px;
border-radius: 22px;
text-align: center;
background-color: #f3f3f3;
background-color: white;
border: none;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
.discussion-container .scroll-down-button-view button .icon {
@ -1553,8 +1566,6 @@ li.entry .error-icon-container {
color: white; }
.ios .gutter .contact.selected .last-timestamp {
color: white; }
.ios .gutter ::-webkit-scrollbar-track {
background: #f3f3f3; }
.ios .tool-bar {
float: left;
padding: 15px; }
@ -1642,29 +1653,29 @@ li.entry .error-icon-container {
height: 11px;
right: -6px;
bottom: -3px;
background: white; }
background: #eee; }
.ios .bubble .content, .ios .bubble .attachments img {
border-radius: 15px; }
.ios .bubble .attachments img {
border: 1px solid rgba(0, 0, 0, 0.1); }
background-color: white; }
.ios .bubble .meta {
clear: both; }
.ios .message-list .incoming .bubbled {
background-color: #e6e5ea;
background-color: white;
color: black;
float: left; }
.ios .message-list .incoming .bubbled:before {
left: -1px;
background-color: #e6e5ea; }
background-color: white; }
.ios .message-list .incoming .bubbled:after {
left: -6px; }
.ios .incoming .content {
background-color: #e6e5ea;
background-color: white;
color: black;
float: left; }
.ios .incoming .content .body:before {
left: -1px;
background-color: #e6e5ea; }
background-color: white; }
.ios .incoming .content .body:after {
left: -6px; }
.ios .outgoing .content, .ios .outgoing .attachments .bubbled {
@ -1770,7 +1781,7 @@ li.entry .error-icon-container {
border-radius: 5px;
box-shadow: 0 3px 3px -4px black; }
.android .outgoing .bubble {
background-color: #f3f3f3; }
background-color: white; }
.android .outgoing .hourglass {
display: inline-block;
position: relative;
@ -2128,9 +2139,13 @@ li.entry .error-icon-container {
.android-dark ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25); }
.android-dark ::-webkit-scrollbar-track {
background-color: #292929; }
background-color: transparent; }
.android-dark .recorder {
background: #292929; }
.android-dark .message-list .last-seen-indicator-view .bar {
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.1); }
.android-dark .message-list .last-seen-indicator-view .text {
background-color: #171717; }
.android-dark .discussion-container .scroll-down-button-view button {

6
test/index.html
View File

@ -22,8 +22,10 @@
</button>
</script>
<script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
<div class='text'>
{{ unreadMessages }}
<div class='bar'>
<div class='text'>
{{ unreadMessages }}
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='two-column'>