LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Feature: Ability to customise widget color (#903)

Browse Source 
- Use Chrome style color-picker
This commit is contained in:
Pranav Raj S
2020-05-30 17:28:00 +05:30
committed by GitHub
parent ec197b077d
commit 47ec7ad7c9
10 changed files with 124 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View File

@@ -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,36 +93,32 @@
<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 class="medium-12 columns">
<label>
{{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
<select v-model="autoAssignment">
<option value="true">
{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
</option>
<option value="false">
{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
</option>
</select>
<p class="help-text">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
</p>
</label>
</div>
</div>
<div>
<label>
{{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
<select v-model="autoAssignment">
<option value="true">
{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
</option>
<option value="false">
{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
</option>
</select>
<p class="help-text">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
</p>
</label>
</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: {

24
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
View File

@@ -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: '',