[Enhancement] Select widget_color while creating inbox (#362)

* [Enhancement] Select widget_color while creating inbox * Fix codeclimate issues * Fix !important
2025-11-01 19:48:08 +00:00 · 2019-12-14 18:14:35 +05:30
parent 19852b60cd
commit 7b63cbe1f7
22 changed files with 253 additions and 122 deletions
--- a/app/javascript/dashboard/assets/images/woot-logo.svg
+++ b/app/javascript/dashboard/assets/images/woot-logo.svg
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -385,7 +385,7 @@ $helptext-font-size: $font-size-small;
 $helptext-font-style: italic;
 $input-prefix-color: $header-color;
 $input-prefix-background: $light-gray;
-$input-prefix-border: 1px solid $light-gray;
+$input-prefix-border: 1px solid $color-border;
 $input-prefix-padding: 1rem;
 $form-label-color: $header-color;
 $form-label-font-size: rem-calc(14);
@@ -402,7 +402,7 @@ $input-font-weight: $global-weight-normal;
 $input-background: $white;
 $input-background-focus: $white;
 $input-background-disabled: $light-gray;
-$input-border: 1px solid $light-gray;
+$input-border: 1px solid $color-border;
 $input-border-focus: 1px solid lighten($primary-color, 15%);
 $input-shadow: 0;
 $input-shadow-focus: 0;
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -38,7 +38,7 @@ $font-weight-black: 700;
 $nav-bar-width: 23rem;
 $header-height: 5.6rem;

-$woot-logo-padding: $space-large $space-large $space-large $space-large;
+$woot-logo-padding: $space-large $space-two;

 // Colors
 $color-woot: #1f93ff;
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -3,25 +3,26 @@
@import 'animations';

@import 'foundation-custom';
-@import 'widgets/search-box';
+@import 'widgets/billing';
+@import 'widgets/buttons';
+@import 'widgets/colorpicker';
@import 'widgets/conv-header';
-@import 'widgets/thumbnail';
@import 'widgets/conversation-card';
@import 'widgets/conversation-view';
-@import 'widgets/reply-box';
-@import 'widgets/tabs';
-@import 'widgets/login';
@import 'widgets/emojiinput';
-@import 'widgets/woot-tables';
-@import 'widgets/sidemenu';
@import 'widgets/forms';
-@import 'widgets/buttons';
-@import 'widgets/snackbar';
+@import 'widgets/login';
@import 'widgets/modal';
-@import 'widgets/states';
+@import 'widgets/reply-box';
@import 'widgets/report';
-@import 'widgets/billing';
+@import 'widgets/search-box';
+@import 'widgets/sidemenu';
+@import 'widgets/snackbar';
+@import 'widgets/states';
@import 'widgets/status-bar';
+@import 'widgets/tabs';
+@import 'widgets/thumbnail';
+@import 'widgets/woot-tables';

@import 'views/settings/inbox';
@import 'views/settings/channel';
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -1,35 +1,37 @@
 .multiselect {
-  min-height: 38px;
  margin-bottom: $space-normal;
+  min-height: 38px;

  > .multiselect__tags {
-    padding-top: $zero;
-    min-height: 38px;
-    border-radius: 0;
-    border: 1px solid $light-gray;
    @include margin(0);
+    border: 1px solid $color-border;
+    min-height: 44px;
+    padding-top: $zero;

    .multiselect__placeholder {
      padding-top: $space-small;
    }

    .multiselect__tag {
-      margin-top: $space-smaller;
+      margin-top: $space-one;
    }

    .multiselect__input {
      @include ghost-input;
-      margin-bottom: $zero;
      @include padding($zero);
+
+      margin-bottom: $zero;
    }

    .multiselect__single {
-      @include padding($space-small);
+      @include padding($space-one);
+
      margin-bottom: 0;
    }
  }

  .multiselect__select {
+    min-height: 44px;
    padding: 0;
    right: 0;
    top: 0;
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@@ -197,8 +197,9 @@
 }

 .settings-modal {
-  width: 60%;
  height: 80%;
+  max-width: 1040px;
+  width: 100%;

  .delete-wrapper {
    position: absolute;
@@ -214,7 +215,7 @@
    }
  }

-  .code-wrapper {
+  .settings--content {
    @include margin($space-medium);

    .title {
--- a/app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss
@@ -0,0 +1,13 @@
+@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;
+  }
+}
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -1,35 +1,43 @@
 .modal-mask {
-    position: fixed;
-    z-index: 9990;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, .5);
-    @include flex;
-    @include flex-align(center, middle);

+  @include flex;
+  @include flex-align(center, middle);
+  background-color: $color-white;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9990;
+}
+
+.modal--close {
+  border-radius: 50%;
+  color: $color-heading;
+  cursor: pointer;
+  font-size: $font-size-big;
+  line-height: $space-normal;
+  padding: $space-normal $space-two;
+  position: absolute;
+  right: $space-large;
+  top: $space-large;
+
+  &:hover {
+    background: $color-background;
+  }
 }

 .modal-container {
-  width: 60rem;
+  background-color: $color-white;
+  border-radius: $space-small;
  max-height: 100%;
  overflow: scroll;
  position: relative;
-  background-color: $color-white;
-  border-radius: $space-small;
-
-  .modal--close {
-    font-size: $font-size-large;
-    position: absolute;
-    right: $space-normal;
-    top: $space-small;
-    cursor: pointer;
-    color: $color-heading;
-  }
+  width: 60rem;

  .page-top-bar {
-    @include padding($space-large $space-larger 0);
+    @include padding($zero $space-two);
+
    img {
      max-height: 6rem;
    }
@@ -56,7 +64,7 @@

  form {
    align-self: center;
-    @include padding($space-medium $space-larger $space-small);
+    @include padding($space-two);
    a {
      @include padding($space-normal);
    }
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -18,7 +18,7 @@
  .logo {
    img {
      @include padding($woot-logo-padding);
-      max-height: 100px;
+      max-height: 108px;
    }
  }

--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -1,8 +1,8 @@
 <template>
  <transition name="modal-fade">
-    <div class="modal-mask" @click="close" v-if="show" transition="modal">
+    <div v-if="show" class="modal-mask" transition="modal" @click="close">
+      <i class="ion-android-close modal--close" @click="close"></i>
      <div class="modal-container" :class="className" @click.stop>
-        <i class="ion-android-close modal--close" @click="close"></i>
        <slot></slot>
      </div>
    </div>
@@ -10,24 +10,23 @@
 </template>

 <script>
-
 export default {
  props: {
    show: Boolean,
    onClose: Function,
    className: String,
  },
-  methods: {
-    close() {
-      this.onClose();
-    },
-  },
  mounted() {
-    document.addEventListener('keydown', (e) => {
+    document.addEventListener('keydown', e => {
      if (this.show && e.keyCode === 27) {
        this.onClose();
      }
    });
  },
+  methods: {
+    close() {
+      this.onClose();
+    },
+  },
 };
 </script>
--- a/app/javascript/dashboard/components/SettingsFormHeader.vue
+++ b/app/javascript/dashboard/components/SettingsFormHeader.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="row settings--form--header">
+    <div class="medium-8">
+      <p class="title">
+        {{ title }}
+      </p>
+      <p class="sub-head">
+        {{ subTitle }}
+      </p>
+    </div>
+    <div v-if="buttonText" class="medium-4 text-right">
+      <woot-submit-button
+        class="small"
+        :button-text="buttonText"
+        :loading="isUpdating"
+        @click="onClick()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    subTitle: {
+      type: String,
+      required: true,
+    },
+    buttonText: {
+      type: String,
+      required: true,
+    },
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('update');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~dashboard/assets/scss/variables';
+
+.settings--form--header {
+  border-bottom: 1px solid $color-border;
+  margin-bottom: $space-normal;
+  padding: $space-normal 0;
+}
+</style>
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -1,5 +1,10 @@
 <template>
-  <button type="submit" :disabled="disabled" :class="computedClass">
+  <button
+    type="submit"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
    <i v-if="!!iconClass" :class="iconClass" class="icon"></i>
    <span>{{ buttonText }}</span>
    <spinner v-if="loading" />
@@ -40,5 +45,10 @@ export default {
      return `button nice ${this.buttonClass || ' '}`;
    },
  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
 };
 </script>
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -26,6 +26,9 @@
          "LABEL": "Website Domain",
          "PLACEHOLDER": "Enter your website domain (eg: acme.com)"
        },
+        "WIDGET_COLOR": {
+          "LABEL": "Widget Color"
+        },
        "SUBMIT_BUTTON":"Create inbox"
      },
      "AUTH": {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -7,35 +7,45 @@
      />
      <div
        v-if="inbox.channelType === 'Channel::FacebookPage'"
-        class="code-wrapper"
+        class="settings--content"
      >
-        <p class="title">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
-        </p>
-        <p class="sub-head">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
-        </p>
+        <settings-form-header
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
+        >
+        </settings-form-header>
        <woot-code :script="messengerScript"></woot-code>
      </div>
-      <div
-        v-else-if="inbox.channelType === 'Channel::WebWidget'"
-        class="code-wrapper"
-      >
-        <p class="title">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
-        </p>
-        <p class="sub-head">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
-        </p>
-        <woot-code :script="webWidgetScript"></woot-code>
+      <div v-else-if="inbox.channelType === 'Channel::WebWidget'">
+        <div class="settings--content">
+          <settings-form-header
+            :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
+            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
+          >
+          </settings-form-header>
+          <woot-code :script="webWidgetScript"></woot-code>
+        </div>
+        <!-- <div class="settings--content">
+          <settings-form-header
+            :title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL')"
+            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+            :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+            :is-updating="isUpdating"
+            v-on:update="updateAgents"
+          >
+          </settings-form-header>
+          <Compact v-model="widgetColor" />
+        </div> -->
      </div>
-      <div class="agent-wrapper">
-        <p class="title">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS') }}
-        </p>
-        <p class="sub-head">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT') }}
-        </p>
+      <div class="settings--content">
+        <settings-form-header
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :is-updating="isUpdating"
+          @update="updateAgents"
+        >
+        </settings-form-header>
        <multiselect
          v-model="selectedAgents"
          :options="agentList"
@@ -48,12 +58,6 @@
          placeholder="Pick some"
          @select="$v.selectedAgents.$touch"
        />
-        <div @click="updateAgents()">
-          <woot-submit-button
-            :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-            :loading="isUpdating"
-          />
-        </div>
      </div>
    </div>
  </woot-modal>
@@ -68,13 +72,18 @@ import {
  createWebsiteWidgetScript,
  createMessengerScript,
 } from 'dashboard/helper/scriptGenerator';
+import SettingsFormHeader from '../../../../components/SettingsFormHeader.vue';

 export default {
+  components: {
+    SettingsFormHeader,
+  },
  props: ['onClose', 'inbox', 'show'],
  data() {
    return {
      selectedAgents: [],
      isUpdating: false,
+      widgetColor: { hex: this.inbox.widgetColor },
    };
  },
  computed: {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -34,9 +34,18 @@
          />
        </label>
      </div>
+
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+          <compact v-model="widgetColor" class="widget-color--selector" />
+        </label>
+      </div>
+
      <div class="modal-footer">
        <div class="medium-12 columns">
          <woot-submit-button
+            :disabled="!websiteUrl || !websiteName"
            :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
          />
        </div>
@@ -47,17 +56,20 @@

 <script>
 /* global bus */
+import { Compact } from 'vue-color';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';

 export default {
  components: {
    PageHeader,
+    Compact,
  },
  data() {
    return {
      websiteName: '',
      websiteUrl: '',
+      widgetColor: { hex: '#009CE0' },
      isCreating: false,
    };
  },
@@ -80,6 +92,7 @@ export default {
        website: {
          website_name: this.websiteName,
          website_url: this.websiteUrl,
+          widget_color: this.widgetColor.hex,
        },
      });
    },
--- a/app/javascript/dashboard/store/modules/sidebar.js
+++ b/app/javascript/dashboard/store/modules/sidebar.js
@@ -154,6 +154,7 @@ const mutations = {
      avatarUrl: item.avatar_url,
      pageId: item.page_id,
      websiteToken: item.website_token,
+      widgetColor: item.widget_color,
    }));
    // Identify menuItem to update
    // May have more than one object to update
@@ -174,6 +175,7 @@ const mutations = {
      avatarUrl: data.avatar_url === undefined ? null : data.avatar_url,
      pageId: data.page_id,
      websiteToken: data.website_token,
+      widgetColor: data.widget_color,
    });
  },