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
signalapp · Jun 1, 2017 · 0d722a3 · 0d722a3
1 parent 0b6d5de
commit 0d722a3
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 56 deletions.
diff --git a/background.html b/background.html
@@ -48,8 +48,10 @@ <h3>{{ welcomeToSignal }}</h3>
     </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'>

diff --git a/stylesheets/_android.scss b/stylesheets/_android.scss
@@ -28,7 +28,7 @@
   }
 
   .outgoing .bubble {
-    background-color: $grey_l;
+    background-color: white;
   }
   .outgoing .hourglass {
     @include hourglass(#999);

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
@@ -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);
 

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
@@ -91,9 +91,11 @@ button.hamburger {
 
 ::-webkit-scrollbar {
     width: 10px;
+    z-index: 1000;
 }
 
 ::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {

diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
@@ -28,9 +28,6 @@ $ios-border-color: rgba(0,0,0,0.1);
         }
       }
     }
-    ::-webkit-scrollbar-track {
-      background: $grey_l;
-    }
   }
   .tool-bar {
     float: left;
@@ -144,43 +141,43 @@ $ios-border-color: rgba(0,0,0,0.1);
           height: 11px;
           right: -6px;
           bottom: -3px;
-          background: white;
+          background: #eee;
         }
       }
     }
     .content, .attachments img {
       border-radius: 15px;
     }
     .attachments img {
-      border: 1px solid $ios-border-color;
+      background-color: white;
     }
     .meta {
       clear: both;
     }
   }
 
   .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;
     }
   }
 
   .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;

diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
@@ -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 {

diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
diff --git a/test/index.html b/test/index.html
@@ -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'>