scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-10-30 18:47:51 +00:00
Code Issues 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

1
app/javascript/dashboard/assets/scss/_woot.scss
View File

@@ -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';

13
app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss
View File

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

4
app/javascript/dashboard/components/SettingsSection.vue
View File

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

2
app/javascript/dashboard/components/index.js
View File

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

80
app/javascript/dashboard/components/widgets/ColorPicker.vue Normal file
View File

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

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

4
app/javascript/shared/helpers/vuex/mutationHelpers.js
View File

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

2
package.json
View File

@@ -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",

2
yarn.lock
View File

@@ -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==