KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.js
View file

@ -20,7 +20,7 @@ module.exports = {
'jsx-a11y/anchor-is-valid': 'off',
'import/no-unresolved': 'off',
'vue/max-attributes-per-line': ['error', {
'singleline': 3,
'singleline': 20,
'multiline': {
'max': 1,
'allowFirstLine': false

18
.github/woot-logo.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

5
app/controllers/api/v1/widget/inboxes_controller.rb
View file

@ -5,7 +5,8 @@ class Api::V1::Widget::InboxesController < Api::BaseController
ActiveRecord::Base.transaction do
channel = web_widgets.create!(
website_name: permitted_params[:website_name],
website_url: permitted_params[:website_url]
website_url: permitted_params[:website_url],
widget_color: permitted_params[:widget_color]
)
@inbox = inboxes.create!(name: permitted_params[:website_name], channel: channel)
end
@ -26,6 +27,6 @@ class Api::V1::Widget::InboxesController < Api::BaseController
end
def permitted_params
params.fetch(:website).permit(:website_name, :website_url)
params.fetch(:website).permit(:website_name, :website_url, :widget_color)
end
end

21
app/javascript/dashboard/assets/images/woot-logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

4
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View file

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

2
app/javascript/dashboard/assets/scss/_variables.scss
View file

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

23
app/javascript/dashboard/assets/scss/_woot.scss
View file

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

18
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View file

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

5
app/javascript/dashboard/assets/scss/views/settings/inbox.scss
View file

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

13
app/javascript/dashboard/assets/scss/widgets/_colorpicker.scss Normal file
View file

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

54
app/javascript/dashboard/assets/scss/widgets/_modal.scss
View file

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

2
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View file

@ -18,7 +18,7 @@
.logo {
img {
@include padding($woot-logo-padding);
max-height: 100px;
max-height: 108px;
}
}

17
app/javascript/dashboard/components/Modal.vue
View file

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

58
app/javascript/dashboard/components/SettingsFormHeader.vue Normal file
View file

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

12
app/javascript/dashboard/components/buttons/FormSubmitButton.vue
View file

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

3
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
View file

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

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

2
app/javascript/dashboard/store/modules/sidebar.js
View file

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

1
app/views/api/v1/inboxes/index.json.jbuilder
View file

@ -10,6 +10,7 @@ json.data do
json.channel_type inbox.channel_type
json.avatar_url inbox.channel.try(:avatar).try(:url)
json.page_id inbox.channel.try(:page_id)
json.widget_color inbox.channel.try(:widget_color)
json.website_token inbox.channel.try(:website_token)
end
end

1
package.json
View file

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

30
yarn.lock
View file

@ -2447,6 +2447,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
inherits "^2.0.1"
safe-buffer "^5.0.1"
clamp@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
class-utils@^0.3.5:
version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@ -6250,6 +6255,11 @@ lodash.templatesettings@^4.0.0:
dependencies:
lodash._reinterpolate "^3.0.0"
lodash.throttle@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@ -6362,6 +6372,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
material-colors@^1.0.0:
version "1.2.6"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@ -9755,6 +9770,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tinycolor2@^1.1.2:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@ -10165,6 +10185,16 @@ vue-clickaway@~2.1.0:
dependencies:
loose-envify "^1.2.0"
vue-color@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.7.0.tgz#31e898370a5786fd6c3007388cb7242db6ba6988"
integrity sha512-fak9oPRL3BsYtakTGmWIS2yNRppRYNlMgGGq78CMH34ipU8fLgi/bT9JiSPcscpdTNLGracuOFuZ8OFeml+SQQ==
dependencies:
clamp "^1.0.1"
lodash.throttle "^4.0.0"
material-colors "^1.0.0"
tinycolor2 "^1.1.2"
vue-eslint-parser@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"