keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Last seen indicator visual refresh

Browse Source 
- 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
pull/749/head
Scott Nonnenberg 8 years ago
parent 0b6d5de753
commit 0d722a3186
8 changed files with 98 additions and 56 deletions
Show Stats Download Patch File Download Diff File

6
background.html
Unescape Escape View File

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

2
stylesheets/_android.scss
Unescape Escape View File

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

43
stylesheets/_conversation.scss
Unescape Escape View File

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

2
stylesheets/_global.scss
Unescape Escape View File

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

15
stylesheets/_ios.scss
Unescape Escape View File

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

15
stylesheets/android-dark.scss
Unescape Escape View File

@ -193,14 +193,23 @@ $text-dark: #CCCCCC;
} }
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: $grey-dark_l2; background-color: transparent;
} }
.recorder { .recorder {
background: $grey-dark_l2; background: $grey-dark_l2;
} }
.message-list .last-seen-indicator-view .text { .message-list .last-seen-indicator-view {
background-color: $grey-dark_l3; .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 { .discussion-container .scroll-down-button-view {

65
stylesheets/manifest.css
Unescape Escape View File

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

6
test/index.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save