Feature: Ability to customise widget color (#903)

- Use Chrome style color-picker

app/javascript/dashboard/assets/scss/_woot.scss

@@ -5,7 +5,6 @@
 @import 'foundation-custom';
 @import 'widgets/billing';
 @import 'widgets/buttons';
-@import 'widgets/colorpicker';
 @import 'widgets/conv-header';
 @import 'widgets/conversation-card';
 @import 'widgets/conversation-view';

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

@@ -1,13 +0,0 @@
-@import '~dashboard/assets/scss/variables';
-
-.widget-color--selector.vc-compact {
-  border: 1px solid $color-border;
-  box-shadow: none;
-  margin-bottom: $space-normal;
-  width: 356px;
-
-  .vc-compact-color-item {
-    height: 24px;
-    width: 24px;
-  }
-}

app/javascript/dashboard/components/SettingsSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="row settings--section">
-    <div class="medium-4">
+    <div class="medium-4 small-12">
       <p class="sub-block-title">
         {{ title }}
       </p>
@@ -8,7 +8,7 @@
         {{ subTitle }}
       </p>
     </div>
-    <div class="medium-6">
+    <div class="medium-6 small-12">
       <slot></slot>
     </div>
   </div>

app/javascript/dashboard/components/index.js

@@ -3,6 +3,7 @@
 
 import Bar from './widgets/chart/BarChart';
 import Code from './Code';
+import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
@@ -17,6 +18,7 @@ import TabsItem from './ui/Tabs/TabsItem';
 const WootUIKit = {
   Bar,
   Code,
+  ColorPicker,
   DeleteModal,
   LoadingState,
   Modal,

app/javascript/dashboard/components/widgets/ColorPicker.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="colorpicker">
+    <div
+      class="colorpicker--selected"
+      :style="`background-color: ${value}`"
+      @click.prevent="toggleColorPicker"
+    />
+    <chrome
+      v-if="isPickerOpen"
+      v-on-clickaway="closeTogglePicker"
+      :disable-alpha="true"
+      :value="value"
+      class="colorpicker--chrome"
+      @input="updateColor"
+    />
+  </div>
+</template>
+
+<script>
+import { Chrome } from 'vue-color';
+import { mixin as clickaway } from 'vue-clickaway';
+
+export default {
+  components: {
+    Chrome,
+  },
+  mixins: [clickaway],
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isPickerOpen: false,
+    };
+  },
+  methods: {
+    closeTogglePicker() {
+      if (this.isPickerOpen) {
+        this.toggleColorPicker();
+      }
+    },
+    toggleColorPicker() {
+      this.isPickerOpen = !this.isPickerOpen;
+    },
+    updateColor(e) {
+      this.$emit('input', e.hex);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+.colorpicker {
+  position: relative;
+}
+
+.colorpicker--selected {
+  border-radius: $space-smaller;
+  cursor: pointer;
+  height: $space-large;
+  margin-bottom: $space-normal;
+  width: $space-large;
+}
+
+.colorpicker--chrome.vc-chrome {
+  @include elegant-card;
+
+  border: 1px solid $color-border;
+  border-radius: $space-smaller;
+  margin-top: -$space-one;
+  position: absolute;
+  z-index: 9999;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -15,7 +15,7 @@
             <label>
               {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL') }}
               <input
-                v-model.trim="inboxName"
+                v-model.trim="selectedInboxName"
                 type="text"
                 :placeholder="
                   $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
@@ -93,14 +93,11 @@
           <div class="medium-12 columns">
             <label>
               {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
-              <compact
-                v-model="inbox.widget_color"
-                class="widget-color--selector"
-              />
+              <woot-color-picker v-model="inbox.widget_color" />
             </label>
           </div>
-        </div>
-        <div>
+
+          <div class="medium-12 columns">
             <label>
               {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
               <select v-model="autoAssignment">
@@ -116,13 +113,12 @@
               </p>
             </label>
           </div>
-
+        </div>
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
           :loading="uiFlags.isUpdatingInbox"
           @click="updateInbox"
-        >
-        </woot-submit-button>
+        />
       </settings-section>
     </div>
 
@@ -150,8 +146,7 @@
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
           :loading="isAgentListUpdating"
           @click="updateAgents"
-        >
-        </woot-submit-button>
+        />
       </settings-section>
     </div>
 
@@ -196,13 +191,11 @@
 /* global bus */
 import { mapGetters } from 'vuex';
 import { createMessengerScript } from 'dashboard/helper/scriptGenerator';
-import { Compact } from 'vue-color';
 import configMixin from 'shared/mixins/configMixin';
 import SettingsSection from '../../../../components/SettingsSection';
 
 export default {
   components: {
-    Compact,
     SettingsSection,
   },
   mixins: [configMixin],
@@ -212,6 +205,7 @@ export default {
       autoAssignment: false,
       isUpdating: false,
       isAgentListUpdating: false,
+      selectedInboxName: '',
       channelWebsiteUrl: '',
       channelWelcomeTitle: '',
       channelWelcomeTagline: '',
@@ -258,6 +252,7 @@ export default {
       this.$store.dispatch('agents/get');
       this.$store.dispatch('inboxes/get').then(() => {
         this.fetchAttachedAgents();
+        this.selectedInboxName = this.inbox.name;
         this.autoAssignment = this.inbox.enable_auto_assignment;
         this.channelWebsiteUrl = this.inbox.website_url;
         this.channelWelcomeTitle = this.inbox.welcome_title;
@@ -303,10 +298,10 @@ export default {
       try {
         await this.$store.dispatch('inboxes/updateInbox', {
           id: this.currentInboxId,
-          name: this.inboxName,
+          name: this.selectedInboxName,
           enable_auto_assignment: this.autoAssignment,
           channel: {
-            widget_color: this.getWidgetColor(this.inbox.widget_color),
+            widget_color: this.inbox.widget_color,
             website_url: this.channelWebsiteUrl,
             welcome_title: this.channelWelcomeTitle,
             welcome_tagline: this.channelWelcomeTagline,
@@ -318,11 +313,6 @@ export default {
         this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       }
     },
-    getWidgetColor() {
-      return typeof this.inbox.widget_color !== 'object'
-        ? this.inbox.widget_color
-        : this.inbox.widget_color.hex;
-    },
   },
   validations: {
     selectedAgents: {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue

@@ -12,7 +12,7 @@
     <form
       v-if="!uiFlags.isCreating"
       class="row"
-      @submit.prevent="createChannel()"
+      @submit.prevent="createChannel"
     >
       <div class="medium-12 columns">
         <label>
@@ -38,6 +38,14 @@
           />
         </label>
       </div>
+
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+          <woot-color-picker v-model="channelWidgetColor" />
+        </label>
+      </div>
+
       <div class="medium-12 columns">
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL') }}
@@ -87,16 +95,6 @@
         </label>
       </div>
 
-      <div class="medium-12 columns">
-        <label>
-          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
-          <compact
-            v-model="channelWidgetColor"
-            class="widget-color--selector"
-          />
-        </label>
-      </div>
-
       <div class="modal-footer">
         <div class="medium-12 columns">
           <woot-submit-button
@@ -111,7 +109,6 @@
 </template>
 
 <script>
-import { Compact } from 'vue-color';
 import { mapGetters } from 'vuex';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
@@ -119,13 +116,12 @@ import PageHeader from '../../SettingsSubPageHeader';
 export default {
   components: {
     PageHeader,
-    Compact,
   },
   data() {
     return {
       inboxName: '',
       channelWebsiteUrl: '',
-      channelWidgetColor: { hex: '#009CE0' },
+      channelWidgetColor: '#009CE0',
       channelWelcomeTitle: '',
       channelWelcomeTagline: '',
       channelAgentAwayMessage: '',

app/javascript/shared/helpers/vuex/mutationHelpers.js

@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 export const set = (state, data) => {
   state.records = data;
 };
@@ -18,7 +20,7 @@ export const setSingleRecord = (state, data) => {
 export const update = (state, data) => {
   state.records.forEach((element, index) => {
     if (element.id === data.id) {
-      state.records[index] = data;
+      Vue.set(state.records, index, data);
     }
   });
 };

package.json

@@ -40,7 +40,7 @@
     "vue-axios": "~1.2.2",
     "vue-chartjs": "^3.4.2",
     "vue-clickaway": "~2.1.0",
-    "vue-color": "^2.7.0",
+    "vue-color": "^2.7.1",
     "vue-highlight.js": "^3.1.0",
     "vue-i18n": "~5.0.3",
     "vue-loader": "^15.7.0",

yarn.lock

@@ -10242,7 +10242,7 @@ vue-clickaway@~2.1.0:
   dependencies:
     loose-envify "^1.2.0"
 
-vue-color@^2.7.0:
+vue-color@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.7.1.tgz#ca035109ea0010f0d60b889b97d63d37ac712f2d"
   integrity sha512-u3yl46B2eEej9zfAOIRRSphX1QfeNQzMwO82EIA+aoi0AKX3o1KcfsmMzm4BFkkj2ukCxLVfQ41k7g1gSI7SlA==