KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Use button component in ReplyBox

Browse source 
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas 2021-06-09 14:01:43 +05:30 committed by GitHub
parent 8a0afb912c
commit f79e489a0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 117 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View file

@ -1,31 +1,24 @@
$default-button-height: 4.0rem;
.button {
align-items: center;
display: inline-flex;
height: 4.0rem;
height: $default-button-height;
margin-bottom: 0;
&.button--emoji {
align-items: center;
background: var(--b-50);
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius-large);
display: flex;
font-size: var(--font-size-small);
height: var(--space-large);
justify-content: center;
padding: var(--space-micro);
text-align: center;
width: var(--space-large);
&:hover {
background: var(--b-200);
}
}
.spinner {
padding: 0 var(--space-small);
}
.icon--emoji+.button__content {
padding-left: var(--space-small);
}
.icon--font+.button__content {
padding-left: var(--space-small);
}
// @TODDO - Remove after moving all buttons to woot-button
.icon+.button__content {
padding-left: var(--space-small);
}
@ -48,23 +41,23 @@
// Smooth style
&.smooth {
@include button-style(var(--w-100), var(--w-50), var(--w-700));
@include button-style(var(--w-50), var(--w-100), var(--w-700));
&.secondary {
@include button-style(var(--s-100), var(--s-50), var(--s-700));
@include button-style(var(--s-50), var(--s-100), var(--s-700));
}
&.success {
@include button-style(var(--g-100), var(--g-50), var(--g-700));
@include button-style(var(--g-50), var(--g-100), var(--g-700));
}
&.alert {
@include button-style(var(--r-100), var(--r-50), var(--r-700));
@include button-style(var(--r-50), var(--r-100), var(--r-700));
}
&.warning {
@include button-style(var(--y-200), var(--y-100), var(--y-900));
@include button-style(var(--y-100), var(--y-200), var(--y-900));
}
}
@ -81,6 +74,25 @@
height: var(--space-larger);
}
&.button--only-icon {
justify-content: center;
padding-left: 0;
padding-right: 0;
width: $default-button-height;
&.tiny {
width: var(--space-medium);
}
&.small {
width: var(--space-large);
}
&.large {
width: var(--space-larger);
}
}
&.link {
height: auto;
margin: 0;

21
app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
View file

@ -52,25 +52,4 @@
}
}
.file-uploads>label {
cursor: pointer;
&:hover .button--emoji {
background: var(--b-200);
}
}
.bottom-box .button--emoji.button--upload {
padding: 0;
.file-uploads {
height: 100%;
line-height: var(--space-large);
width: 100%;
}
label {
padding: var(--space-small);
}
}
}

6
app/javascript/dashboard/components/buttons/ResolveAction.vue
View file

@ -6,6 +6,7 @@
class-names="resolve"
color-scheme="success"
icon="ion-checkmark"
emoji="✅"
:is-loading="isLoading"
@click="() => toggleStatus(STATUS_TYPE.RESOLVED)"
>
@ -16,6 +17,7 @@
class-names="resolve"
color-scheme="warning"
icon="ion-refresh"
emoji="👀"
:is-loading="isLoading"
@click="() => toggleStatus(STATUS_TYPE.OPEN)"
>
@ -36,9 +38,9 @@
:color-scheme="buttonClass"
:disabled="isLoading"
icon="ion-arrow-down-b"
emoji="🔽"
@click="openDropdown"
>
</woot-button>
/>
</div>
<div
v-if="showDropdown"

24
app/javascript/dashboard/components/ui/WootButton.vue
View file

@ -6,16 +6,22 @@
@click="handleClick"
>
<spinner v-if="isLoading" size="small" />
<i v-else-if="icon" class="icon" :class="icon"></i>
<emoji-or-icon
v-else-if="icon || emoji"
class="icon"
:emoji="emoji"
:icon="icon"
/>
<span v-if="$slots.default" class="button__content"><slot></slot></span>
</button>
</template>
<script>
import Spinner from 'shared/components/Spinner.vue';
import Spinner from 'shared/components/Spinner';
import EmojiOrIcon from 'shared/components/EmojiOrIcon';
export default {
name: 'WootButton',
components: { Spinner },
components: { EmojiOrIcon, Spinner },
props: {
variant: {
type: String,
@ -29,12 +35,16 @@ export default {
type: String,
default: '',
},
emoji: {
type: String,
default: '',
},
colorScheme: {
type: String,
default: 'primary',
},
classNames: {
type: String,
type: [String, Object],
default: '',
},
isDisabled: {
@ -57,9 +67,15 @@ export default {
}
return this.variant;
},
hasOnlyIconClasses() {
const hasEmojiOrIcon = this.emoji || this.icon;
if (!this.$slots.default && hasEmojiOrIcon) return 'button--only-icon';
return '';
},
buttonClasses() {
return [
this.variantClasses,
this.hasOnlyIconClasses,
this.size,
this.colorScheme,
this.classNames,

123
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
View file

@ -1,34 +1,42 @@
<template>
<div class="bottom-box" :class="wrapClass">
<div class="left-wrap">
<button
class="button clear button--emoji"
<woot-button
:title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
icon="ion-happy-outline"
emoji="😊"
color-scheme="secondary"
variant="smooth"
size="small"
@click="toggleEmojiPicker"
/>
<file-upload
:size="4096 * 4096"
accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
@input-file="onFileUpload"
>
<emoji-or-icon icon="ion-happy-outline" emoji="😊" />
</button>
<button
v-if="showAttachButton"
class="button clear button--emoji button--upload"
:title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
>
<file-upload
:size="4096 * 4096"
accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
@input-file="onFileUpload"
>
<emoji-or-icon icon="ion-android-attach" emoji="📎" />
</file-upload>
</button>
<button
<woot-button
v-if="showAttachButton"
class-names="button--upload"
:title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
icon="ion-android-attach"
emoji="📎"
color-scheme="secondary"
variant="smooth"
size="small"
/>
</file-upload>
<woot-button
v-if="enableRichEditor && !isOnPrivateNote"
class="button clear button--emoji"
icon="ion-quote"
emoji="🖊️"
color-scheme="secondary"
variant="smooth"
size="small"
:title="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
@click="toggleFormatMode"
>
<emoji-or-icon icon="ion-quote" emoji="🖊️" />
</button>
/>
</div>
<div class="right-wrap">
<div v-if="isFormatMode" class="enter-to-send--checkbox">
@ -42,25 +50,25 @@
{{ $t('CONVERSATION.REPLYBOX.ENTER_TO_SEND') }}
</label>
</div>
<button
class="button nice primary button--send"
:class="buttonClass"
<woot-button
size="small"
:class-names="buttonClass"
:is-disabled="isSendDisabled"
@click="onSend"
>
{{ sendButtonText }}
</button>
</woot-button>
</div>
</div>
</template>
<script>
import FileUpload from 'vue-upload-component';
import EmojiOrIcon from 'shared/components/EmojiOrIcon';
import { REPLY_EDITOR_MODES } from './constants';
export default {
name: 'ReplyTopPanel',
components: { EmojiOrIcon, FileUpload },
components: { FileUpload },
props: {
mode: {
type: String,
@ -126,8 +134,7 @@ export default {
},
buttonClass() {
return {
'button--note': this.isNote,
'button--disabled': this.isSendDisabled,
warning: this.isNote,
};
},
showAttachButton() {
@ -146,9 +153,6 @@ export default {
</script>
<style lang="scss" scoped>
@import '~widget/assets/scss/variables.scss';
@import '~widget/assets/scss/mixins.scss';
.bottom-box {
display: flex;
justify-content: space-between;
@ -159,39 +163,8 @@ export default {
}
}
.button {
&.button--emoji {
margin-right: var(--space-small);
}
&.is-active {
background: white;
}
&.button--note {
background: var(--y-800);
color: white;
&:hover {
background: var(--y-700);
}
}
&.button--disabled {
background: var(--b-100);
color: var(--b-400);
cursor: default;
&:hover {
background: var(--b-100);
}
}
}
.bottom-box.is-note-mode {
.button--emoji {
background: white;
}
.left-wrap .button {
margin-right: var(--space-small);
}
.left-wrap {
@ -199,15 +172,6 @@ export default {
display: flex;
}
.button--reply {
border-right: 1px solid var(--color-border-light);
}
.icon--font {
color: var(--s-600);
font-size: var(--font-size-default);
}
.right-wrap {
display: flex;
@ -225,4 +189,13 @@ export default {
}
}
}
::v-deep .file-uploads {
label {
cursor: pointer;
}
&:hover .button {
background: var(--s-100);
}
}
</style>

16
app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.vue
View file

@ -14,19 +14,17 @@
</div>
<div class="actions">
<woot-button
variant="clear"
variant="smooth"
size="small"
icon="ion-compose"
color-scheme="secondary"
class-names="button--emoji"
@click="onEdit"
/>
<woot-button
variant="clear"
variant="smooth"
size="small"
icon="ion-trash-b"
color-scheme="secondary"
class-names="button--emoji"
@click="onDelete"
/>
</div>
@ -111,12 +109,12 @@ export default {
.actions {
display: flex;
visibility: hidden;
}
.button--emoji {
margin-left: var(--space-small);
height: var(--space-medium);
width: var(--space-medium);
.button {
margin-left: var(--space-small);
height: var(--space-medium);
width: var(--space-medium);
}
}
}

6
app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
View file

@ -23,20 +23,18 @@
</div>
<div class="actions">
<woot-button
variant="clear"
variant="smooth"
size="small"
icon="ion-compose"
color-scheme="secondary"
class-names="button--emoji"
class="action-button"
@click="onEdit"
/>
<woot-button
variant="clear"
variant="smooth"
size="small"
icon="ion-trash-b"
color-scheme="secondary"
class-names="button--emoji"
class="action-button"
@click="onDelete"
/>