Revert "Updates sidebar on dashboard"

This reverts commit 6186d14.
gannino · Feb 11, 2020 · 2023d5d · 2023d5d
1 parent 6186d14
commit 2023d5d
Show file tree

Hide file tree

Showing 20 changed files with 112 additions and 394 deletions.
diff --git a/app/javascript/dashboard/api/conversations.js b/app/javascript/dashboard/api/conversations.js
@@ -10,8 +10,8 @@ class ConversationApi extends ApiClient {
     return axios.get(`${this.url}/${conversationID}/labels`);
   }
 
-  updateLabels(conversationID, labels) {
-    return axios.post(`${this.url}/${conversationID}/labels`, { labels });
+  createLabels(conversationID) {
+    return axios.get(`${this.url}/${conversationID}/labels`);
   }
 }
 

diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -1,5 +1,3 @@
-@import '~widget/assets/scss/mixins';
-
 //borders
 @mixin border-nil() {
   border-color: transparent;
@@ -141,7 +139,7 @@
 }
 
 @mixin elegent-shadow() {
-  box-shadow: 0 10px 25px 0 rgba(49, 49, 93, 0.15);
+  box-shadow: 0 10px 25px 0 rgba(49,49,93,0.15);
 }
 
 @mixin elegant-card() {
@@ -183,55 +181,41 @@
 // .element{
 //     @include arrow(top, #000, 50px);
 // }
-@mixin arrow($direction, $color, $size) {
-  display: block;
-  height: 0;
-  width: 0;
-  content: '';
-
-  @if $direction=='top' {
-    border-left: $size solid transparent;
-    border-right: $size solid transparent;
-    border-bottom: $size solid $color;
-  }
-
-  @else if $direction=='right' {
-    border-top: $size solid transparent;
-    border-bottom: $size solid transparent;
-    border-left: $size solid $color;
-  }
-
-  @else if $direction=='bottom' {
-    border-top: $size solid $color;
-    border-right: $size solid transparent;
-    border-left: $size solid transparent;
-  }
-
-  @else if $direction=='left' {
-    border-top: $size solid transparent;
-    border-right: $size solid $color;
-    border-bottom: $size solid transparent;
-  }
-
-  @else if $direction=='top-left' {
-    border-top: $size solid $color;
-    border-right: $size solid transparent;
-  }
-
-  @else if $direction=='top-right' {
-    border-top: $size solid $color;
-    border-left: $size solid transparent;
-  }
-
-  @else if $direction=='bottom-left' {
-    border-bottom: $size solid $color;
-    border-right: $size solid transparent;
-  }
+@mixin arrow($direction, $color, $size){
+    display: block;
+    height: 0;
+    width: 0;
+    content: '';
 
-  @else if $direction=='bottom-right' {
-    border-bottom: $size solid $color;
-    border-left: $size solid transparent;
-  }
+    @if $direction == 'top' {
+      border-left: $size solid transparent;
+      border-right: $size solid transparent;
+      border-bottom: $size solid $color;
+    } @else if $direction == 'right' {
+      border-top: $size solid transparent;
+      border-bottom: $size solid transparent;
+      border-left: $size solid $color;
+    } @else if $direction == 'bottom' {
+      border-top: $size solid $color;
+      border-right: $size solid transparent;
+      border-left: $size solid transparent;
+    } @else if $direction == 'left' {
+      border-top: $size solid transparent;
+      border-right: $size solid $color;
+      border-bottom: $size solid transparent;
+    } @else if $direction == 'top-left' {
+      border-top: $size solid $color;
+      border-right: $size solid transparent;
+    } @else if $direction == 'top-right' {
+      border-top: $size solid $color;
+      border-left: $size solid transparent;
+    } @else if $direction == 'bottom-left' {
+      border-bottom: $size solid $color;
+      border-right: $size solid transparent;
+    } @else if $direction == 'bottom-right' {
+      border-bottom: $size solid $color;
+      border-left: $size solid transparent;
+    }
 }
 
 @mixin text-ellipsis {

diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -53,16 +53,6 @@ $color-body: #3C4858;
 $color-heading: #1F2D3D;
 $color-extra-light-blue: #F5F7F9;
 
-$primary-color: $color-woot;
-$secondary-color: #FF5216;
-$success-color: #13ce66;
-$warning-color: #ffc82c;
-$alert-color: #ff4949;
-
-// Color-palettes
-
-$color-primary-dark: darken($color-woot, 20%);
-
 // Thumbnail
 $thumbnail-radius: 4rem;
 
@@ -91,6 +81,3 @@ $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !d
 
 // Ionicons
 $ionicons-font-path: '~ionicons/fonts';
-
-// Transitions
-$transition-ease-in: all 0.250s ease-in;
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -2,13 +2,7 @@
   margin-bottom: $space-normal;
   min-height: 38px;
 
-  &.multiselect--active {
-    >.multiselect__tags {
-      border-color: $color-woot;
-    }
-  }
-
-  >.multiselect__tags {
+  > .multiselect__tags {
     @include margin(0);
     border: 1px solid $color-border;
     min-height: 44px;
@@ -19,34 +13,12 @@
     }
 
     .multiselect__tag {
-
-      $vertical-space: $space-smaller+$space-micro;
       margin-top: $space-one;
-      background: $color-background;
-      color: $color-heading;
-      padding: $vertical-space $space-medium $vertical-space $space-one;
-    }
-
-    .multiselect__tag-icon {
-      line-height: $space-medium + $space-micro;
-
-      &:after {
-        color: $color-primary-dark;
-      }
-
-      &:hover {
-        background: $color-background;
-
-        &:after {
-          color: $color-woot;
-        }
-      }
     }
 
     .multiselect__input {
       @include ghost-input;
       @include padding($zero);
-      font-size: $font-size-small;
 
       margin-bottom: $zero;
     }
@@ -69,50 +41,4 @@
       top: 60%;
     }
   }
-
-  .multiselect__content .multiselect__option {
-    font-size: $font-size-small;
-    font-weight: $font-weight-normal;
-
-    &.multiselect__option--highlight {
-      font-weight: $font-weight-medium;
-    }
-  }
-}
-
-
-.sidebar-labels-wrap {
-
-  &.has-edited,
-  &:hover {
-    .multiselect {
-      cursor: pointer;
-      margin-top: $space-small;
-
-      >.multiselect__tags {
-        border-color: $color-border;
-      }
-
-      >.multiselect__select {
-        visibility: visible;
-      }
-    }
-  }
-
-  .multiselect {
-
-    >.multiselect__select {
-      visibility: hidden;
-    }
-
-    >.multiselect__tags {
-      border-color: transparent;
-    }
-
-    &.multiselect--active {
-      >.multiselect__tags {
-        border-color: $color-woot;
-      }
-    }
-  }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -24,18 +24,9 @@
     }
   }
 
-  >.icon {
+  > .icon {
     font-size: $font-size-default;
   }
-
-  &.tiny {
-    font-size: $font-size-mini;
-    padding: $space-small $space-slab;
-  }
-
-  &.round {
-    border-radius: $space-larger;
-  }
 }
 
 .button--fixed-right-top {

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -5,7 +5,6 @@
   @include flex;
   @include flex-align($x: justify, $y: middle);
   @include border-normal-bottom;
-
   // Resolve Button
   .button {
     @include margin(0);
@@ -45,7 +44,6 @@
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;
-      text-transform: capitalize;
     }
 
     .user--profile__meta {
@@ -66,7 +64,7 @@
 }
 
 .button.resolve--button {
-  >.icon {
+  > .icon {
     padding-right: $space-small;
     font-size: $font-size-default;
   }

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -47,19 +47,16 @@
   @include background-gray;
   @include margin(0);
   @include border-normal-left;
-
   .current-chat {
     @include flex;
     @include full-height;
     flex-direction: column;
     @include flex-align(center, middle);
-
     div {
       @include flex;
       @include full-height;
       flex-direction: column;
       @include flex-align(center, middle);
-
       img {
         @include margin($space-normal);
         width: 10rem;
@@ -90,7 +87,7 @@
   height: 100%;
   overflow-y: scroll;
 
-  >li {
+  > li {
     @include flex;
     @include flex-shrink;
     @include margin($zero $zero $space-smaller);
@@ -150,7 +147,7 @@
       @include flex-align(right, null);
 
       .wrap {
-        margin-right: $space-normal;
+        margin-right: $space-small;
         text-align: right;
       }
 

diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -13,7 +13,6 @@
   .tabs-title {
     a {
       font-size: $font-size-default;
-      font-weight: $font-weight-medium;
       padding-bottom: $space-slab;
       padding-top: $space-slab;
     }

diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -23,7 +23,7 @@
       src="~dashboard/assets/images/fb-badge.png"
     />
     <div
-      v-else-if="status === 'online'"
+      v-else-if="badge === 'Channel::WebWidget' && status === 'online'"
       class="source-badge user--online"
       :style="statusStyle"
     ></div>

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -8,7 +8,7 @@
         :username="chat.meta.sender.name"
       />
       <div class="user--profile__meta">
-        <h3 class="user--name text-truncate">
+        <h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
           {{ chat.meta.sender.name }}
         </h3>
         <button
@@ -93,9 +93,7 @@ export default {
       ];
     },
     viewProfileButtonLabel() {
-      return `${
-        this.isContactPanelOpen ? 'Close' : 'Open'
-      }  Conversation Details`;
+      return `${this.isContactPanelOpen ? 'Hide' : 'View'}  Profile`;
     },
   },
 

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -1,6 +1,5 @@
 {
   "CONTACT_PANEL": {
-    "CONVERSATION_TITLE": "Conversation Details",
     "BROWSER": "Browser",
     "OS": "Operating System",
     "INITIATED_FROM": "Initiated from",
@@ -11,10 +10,7 @@
     },
     "LABELS": {
       "NO_RECORDS_FOUND": "There are no labels associated to this conversation.",
-      "TITLE": "Conversation Labels",
-      "UPDATE_BUTTON": "Update Labels",
-      "ADD_BUTTON": "Add Labels",
-      "UPDATE_ERROR": "Couldn't update labels, try Again 🧐"
+      "TITLE": "Labels"
     }
   }
 }