Implement display of starred conversations (#362)

Refs #361

src/partials/messenger.navigation.html

@@ -65,6 +65,7 @@
     <ul>
         <li ng-repeat="conversation in ctrl.conversations() | filter:ctrl.searchConversation"
             ng-class="{'unread': conversation.unreadCount > 0,
+                'starred': conversation.isStarred,
                 'active': ctrl.isActive(conversation)}"
             ui-sref="messenger.home.conversation({ type: conversation.type, id: conversation.id, initParams: null })"
             class="conversation" ng-if="ctrl.isVisible(conversation)">

src/sass/helpers/_colors.scss

@@ -1,6 +1,7 @@
 $status-ok: #4caf50;
 $status-warning: #ff9800;
 $status-error: #f44336;
+$status-starred: #ffc107;
 $border-grey: #dddddd;
 $background-grey: lighten($border-grey, 7%);
 $material-grey: rgba(0, 0, 0, 0.54);

src/sass/sections/_navigation.scss

@@ -71,6 +71,8 @@
 }
 
 #navigation-conversations {
+    $border-width: 4px;
+    $border-count: 2;
     overflow-y: auto;
     background-color: white;
     flex: 1;
@@ -81,16 +83,39 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: (1.5 * $main-padding) $main-padding;
-        border-left: 4px solid white;
-
+        padding: (1.5 * $main-padding) $main-padding - ($border-width * ($border-count - 1));
+        border-left: $border-width * $border-count solid white;
         border-bottom: 1px solid $border-grey;
+
+        &.active, &:hover {
+            background-color: $dark-background-color;
+            border-color: $dark-background-color;
+        }
+        &:hover:not(.active) {
+            @include mouse-hand;
+        }
+
+        // Only unread
         &.unread {
-            border-left-color: $status-error;
+            border-image: linear-gradient(to right, $status-error, $status-error 50%, white 50%, white 100%) 1 100%;
+            &.active {
+                border-image: linear-gradient(to right, $status-error, $status-error 50%, $dark-background-color 50%, $dark-background-color 100%) 1 100%;
+            }
+        }
+
+        // Only starred
+        &.starred {
+            border-image: linear-gradient(to right, $status-starred, $status-starred 50%, white 50%, white 100%) 1 100%;
+            &.active {
+                border-image: linear-gradient(to right, $status-starred, $status-starred 50%, $dark-background-color 50%, $dark-background-color 100%) 1 100%;
+            }
         }
-        &.active {
-            background-color: #f5f5f5;
+
+        // Both starred and unread
+        &.starred.unread {
+            border-image: linear-gradient(to right, $status-error, $status-error 50%, $status-starred 50%, $status-starred 100%) 1 100%;
         }
+
         .avatar-box {
             margin-right: 8px;
             position: relative;
@@ -232,11 +257,6 @@
             margin-left: 4px;
         }
     }
-
-    .conversation:hover:not(.active) {
-        @include mouse-hand;
-        background-color: #f5f5f5;
-    }
 }
 
 #navigation-contacts {

src/threema.d.ts

@@ -287,6 +287,7 @@ declare namespace threema {
         receiver?: Receiver;
         avatar?: ArrayBuffer;
         isMuted?: boolean;
+        isStarred?: boolean;
     }
 
     /**