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

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

Browse Source 
* [Enhancement] Select widget_color while creating inbox

* Fix codeclimate issues

* Fix !important
This commit is contained in:
Pranav Raj S
2019-12-14 18:14:35 +05:30
committed by Sojan Jose
parent 19852b60cd
commit 7b63cbe1f7
22 changed files with 253 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: {

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

@@ -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,
},
});
},