Enhancement: Update the design of inbox listing in sidebar (#511)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>

.scss-lint.yml

@@ -249,7 +249,7 @@ linters:
     enabled: false
 
   UnnecessaryMantissa:
-    enabled: true
+    enabled: false
 
   UnnecessaryParentReference:
     enabled: true

app/javascript/dashboard/assets/scss/_variables.scss

@@ -12,7 +12,7 @@ $font-size-mega: 3.4rem;
 $font-size-giga: 4.0rem;
 
 // spaces
-$zero: 0rem;
+$zero: 0;
 $space-micro: 0.2rem;
 $space-smaller: 0.4rem;
 $space-small: 0.8rem;
@@ -42,16 +42,16 @@ $woot-logo-padding: $space-large $space-two;
 
 // Colors
 $color-woot: #1f93ff;
-$color-gray: #6E6F73;
+$color-gray: #6e6f73;
-$color-light-gray: #999A9B;
+$color-light-gray: #999a9b;
-$color-border: #E0E6ED;
+$color-border: #e0e6ed;
 $color-border-light: #f0f4f5;
-$color-background: #EFF2F7;
+$color-background: #eff2f7;
-$color-background-light: #F9FAFC;
+$color-background-light: #f9fafc;
-$color-white: #FFF;
+$color-white: #fff;
-$color-body: #3C4858;
+$color-body: #3c4858;
-$color-heading: #1F2D3D;
+$color-heading: #1f2d3d;
-$color-extra-light-blue: #F5F7F9;
+$color-extra-light-blue: #f5f7f9;
 
 $primary-color: $color-woot;
 $secondary-color: #ff5216;
@@ -61,6 +61,7 @@ $alert-color: #ff4949;
 
 // Color-palettes
 
+$color-primary-light: #c7e3ff;
 $color-primary-dark: darken($color-woot, 20%);
 
 // Thumbnail

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -57,6 +57,8 @@
   }
 
   .multiselect__placeholder {
+    color: $color-gray;
+    font-weight: $font-weight-normal;
     padding-top: $space-small;
   }
 

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -34,7 +34,7 @@
   .conversation--message {
     color: $color-body;
     font-size: $font-size-small;
-    font-weight: $font-weight-light;
+    font-weight: $font-weight-normal;
     height: $space-medium;
     line-height: $space-medium;
     margin: $zero;

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -1,3 +1,83 @@
+@mixin bubble-with-tyes {
+  @include padding($space-smaller $space-one);
+  @include margin($zero);
+  background: $color-primary-light;
+  border-radius: $space-small;
+  color: $color-heading;
+  font-size: $font-size-small;
+  position: relative;
+
+  .icon {
+    bottom: $space-smaller;
+    position: absolute;
+    right: $space-small;
+  }
+
+  .message-text__wrap {
+    position: relative;
+  }
+
+  .message-text {
+    &::after {
+      content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
+      display: inline;
+    }
+  }
+
+  .audio {
+    .time {
+      margin-top: -$space-two;
+    }
+  }
+
+  .image {
+    @include flex;
+    align-items: flex-end;
+    justify-content: center;
+    text-align: center;
+
+    img {
+      @include padding($space-small);
+      max-height: 30rem;
+      max-width: 20rem;
+    }
+
+    .time {
+      margin-left: -$space-large;
+      white-space: nowrap;
+    }
+
+    .modal-image {
+      max-height: 80%;
+      max-width: 80%;
+    }
+  }
+
+  .map {
+    @include flex;
+    flex-direction: column;
+    text-align: right;
+
+    img {
+      @include padding($space-small);
+      max-height: 30rem;
+      max-width: 20rem;
+    }
+
+    .time {
+      @include padding($space-small);
+      margin-left: -$space-smaller;
+      margin-top: -$space-two;
+      white-space: nowrap;
+    }
+
+    .locname {
+      font-weight: $font-weight-medium;
+      padding: $space-smaller;
+    }
+  }
+}
+
 .conversations-sidebar {
   @include flex;
   flex-direction: column;
@@ -51,14 +131,14 @@
   .current-chat {
     @include flex;
     @include full-height;
-    flex-direction: column;
     @include flex-align(center, middle);
+    flex-direction: column;
 
     div {
       @include flex;
       @include full-height;
-      flex-direction: column;
       @include flex-align(center, middle);
+      flex-direction: column;
 
       img {
         @include margin($space-normal);
@@ -76,18 +156,19 @@
   .conv-empty-state {
     @include flex;
     @include full-height;
-    flex-direction: column;
     @include flex-align(center, middle);
+    flex-direction: column;
   }
 }
 
 .conversation-panel {
   @include flex;
   @include flex-weight(1);
-  flex-direction: column;
   @include margin($zero);
+  flex-direction: column;
   // Firefox flexbox fix
   height: 100%;
+  margin-bottom: $space-small;
   overflow-y: scroll;
 
   >li {
@@ -117,6 +198,7 @@
     }
 
     .bubble {
+      @include bubble-with-tyes;
       max-width: 50rem;
       text-align: left;
       word-wrap: break-word;
@@ -208,6 +290,7 @@
       @include padding($space-smaller $space-normal);
       @include flex-align($x: center, $y: null);
       background: lighten($warning-color, 32%);
+      border: 1px solid lighten($warning-color, 26%);
       border-radius: $space-smaller;
       font-size: $font-size-small;
 
@@ -240,87 +323,6 @@
       }
     }
 
-    .bubble {
-      @include padding($space-smaller $space-one);
-      @include margin($zero);
-      background: #c7e3ff;
-      border-radius: $space-small;
-      box-shadow: 0 .5px .5px rgba(0, 0, 0, .05);
-      color: $color-heading;
-      font-size: $font-size-small;
-      position: relative;
-
-      .icon {
-        bottom: $space-smaller;
-        position: absolute;
-        right: $space-small;
-      }
-
-      .message-text__wrap {
-        position: relative;
-      }
-
-      .message-text {
-        &::after {
-          content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
-          display: inline;
-        }
-      }
-
-      .audio {
-        .time {
-          margin-top: -$space-two;
-        }
-      }
-
-      .image {
-        @include flex;
-        justify-content: center;
-        align-items: flex-end;
-        text-align: center;
-
-        img {
-          @include padding($space-small);
-          max-height: 30rem;
-          max-width: 20rem;
-        }
-
-        .time {
-          margin-left: -$space-large;
-          white-space: nowrap;
-        }
-
-        .modal-image {
-          max-height: 80%;
-          max-width: 80%;
-        }
-      }
-
-      .map {
-        @include flex;
-        flex-direction: column;
-        text-align: right;
-
-        img {
-          @include padding($space-small);
-          max-height: 30rem;
-          max-width: 20rem;
-        }
-
-        .time {
-          @include padding($space-small);
-          margin-left: -$space-smaller;
-          margin-top: -$space-two;
-          white-space: nowrap;
-        }
-
-        .locname {
-          font-weight: $font-weight-medium;
-          padding: $space-smaller;
-        }
-      }
-    }
-
     .time {
       bottom: -$space-micro;
       color: $color-gray;

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -1,7 +1,7 @@
 .side-menu {
   i {
-    min-width: $space-two;
     margin-right: $space-smaller;
+    min-width: $space-two;
   }
 }
 
@@ -27,6 +27,26 @@
       border-radius: $space-smaller;
       color: $color-gray;
       font-size: $font-size-default;
+      font-weight: $font-weight-medium;
+    }
+
+    .active a {
+      color: $color-woot;
+    }
+  }
+
+  .nested {
+    a {
+      font-size: $font-size-small;
+      margin-bottom: $space-micro;
+      margin-top: $space-micro;
+
+      >.inbox-icon {
+        display: inline-block;
+        margin-right: $space-micro;
+        min-width: $space-normal;
+        text-align: center;
+      }
     }
   }
 }
@@ -36,17 +56,17 @@
   @include flex;
   @include space-between-column;
   @include padding($space-one $space-normal $space-one $space-one);
-  flex-direction: column;
   @include border-normal-top;
+  flex-direction: column;
   position: relative;
 
   .dropdown-pane {
     @include elegant-card;
     @include border-light;
+    display: block;
     left: 18%;
     top: -110%;
     visibility: visible;
-    display: block;
     width: 80%;
     z-index: 999;
 
@@ -79,23 +99,23 @@
     font-size: $font-size-medium;
     margin-top: $space-medium;
 
-    > span {
+    >span {
       margin-left: auto;
     }
   }
 }
 
-.menu-title + ul > li > a {
+.menu-title+ul>li>a {
   @include padding($space-micro null);
   color: $medium-gray;
   line-height: $global-lineheight;
 }
 
 .current-user {
-  align-items: center;
   @include flex;
-  flex-direction: row;
+  align-items: center;
   cursor: pointer;
+  flex-direction: row;
 
   .current-user--data {
     @include flex;
@@ -105,7 +125,7 @@
       font-size: $font-size-small;
       font-weight: $font-weight-medium;
       line-height: 1;
-      margin-bottom: $zero;
+      margin-bottom: $space-smaller;
       margin-left: $space-one;
       margin-top: $space-micro;
     }
@@ -132,7 +152,7 @@
   display: none;
   margin-right: $space-normal;
 
-  @media screen and (max-width: 1200px){
+  @media screen and (max-width: 1200px) {
     display: block;
   }
 }
@@ -141,7 +161,7 @@
   display: block;
   margin-right: $space-normal;
 
-  @media screen and (max-width: 1200px){
+  @media screen and (max-width: 1200px) {
     display: none;
   }
 }

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -150,6 +150,7 @@ export default {
           id: inbox.id,
           label: inbox.name,
           toState: frontendURL(`inbox/${inbox.id}`),
+          type: inbox.channel_type,
         })),
       };
     },

app/javascript/dashboard/components/layout/SidebarItem.vue

@@ -24,11 +24,17 @@
         v-for="child in menuItem.children"
         :key="child.id"
         active-class="active flex-container"
-        :class="computedInboxClass(child)"
         tag="li"
         :to="child.toState"
       >
-        <a>{{ child.label }}</a>
+        <a href="#">
+          <i
+            v-if="computedInboxClass(child)"
+            class="inbox-icon"
+            :class="computedInboxClass(child)"
+          ></i>
+          {{ child.label }}
+        </a>
       </router-link>
     </ul>
   </router-link>
@@ -41,6 +47,27 @@ import { mapGetters } from 'vuex';
 import router from '../../routes';
 import auth from '../../api/auth';
 
+const INBOX_TYPES = {
+  WEB: 'Channel::WebWidget',
+  FB: 'Channel::FacebookPage',
+  TWITTER: 'Channel::TwitterProfile',
+};
+const getInboxClassByType = type => {
+  switch (type) {
+    case INBOX_TYPES.WEB:
+      return 'ion-earth';
+
+    case INBOX_TYPES.FB:
+      return 'ion-social-facebook';
+
+    case INBOX_TYPES.TWITTER:
+      return 'ion-social-twitter';
+
+    default:
+      return '';
+  }
+};
+
 export default {
   props: {
     menuItem: {
@@ -75,10 +102,9 @@ export default {
   },
   methods: {
     computedInboxClass(child) {
-      if (parseInt(this.activeInbox, 10) === child.channel_id) {
+      const { type } = child;
-        return 'active flex-container';
+      const classByType = getInboxClassByType(type);
-      }
+      return classByType;
-      return ' ';
     },
     newLinkClick() {
       router.push({ name: 'settings_inbox_new', params: { page: 'new' } });

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -22,7 +22,6 @@
           :label="data.attachment.fallback_title"
           :readable-time="readableTime"
         />
-        <i v-if="data.message_type === 2" class="icon ion-person" />
         <bubble-text
           v-if="data.content"
           :message="message"