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

chore: Refactor button styles (#2259)

Browse Source
This commit is contained in:
Nithin David Thomas
2021-05-20 13:51:46 +05:30
committed by GitHub
parent af8e681f2a
commit c681e8a01b
32 changed files with 490 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/dashboard/components/ChatList.vue
View File

@@ -32,13 +32,14 @@
<span class="spinner"></span>
</div>
<div
<woot-button
v-if="!hasCurrentPageEndReached && !chatListLoading"
class="clear button load-more-conversations"
variant="clear"
size="expanded"
@click="fetchConversations"
>
{{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
</div>
</woot-button>
<p
v-if="
@@ -217,7 +218,7 @@ export default {
</script>
<style scoped lang="scss">
@import '~dashboard/assets/scss/app.scss';
@import '~dashboard/assets/scss/woot';
.spinner {
margin-top: var(--space-normal);
margin-bottom: var(--space-normal);

2
app/javascript/dashboard/components/layout/AvailabilityStatus.vue
View File

@@ -22,6 +22,8 @@
>
<woot-button
variant="clear"
size="small"
color-scheme="secondary"
class-names="status-change--dropdown-button"
:is-disabled="status.disabled"
@click="changeAvailabilityStatus(status.value)"

6
app/javascript/dashboard/components/layout/Sidebar.vue
View File

@@ -270,12 +270,6 @@ export default {
}
}
.change-accounts--button.button {
font-weight: $font-weight-normal;
font-size: $font-size-small;
padding: $space-small $space-one;
}
.account-selector {
cursor: pointer;
padding: $space-small $space-large;

30
app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
View File

@@ -7,30 +7,42 @@
>
<woot-dropdown-menu>
<woot-dropdown-item v-if="showChangeAccountOption">
<button
class="button clear change-accounts--button"
<woot-button
variant="clear"
size="small"
class=" change-accounts--button"
@click="$emit('toggle-accounts')"
>
{{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
</button>
</woot-button>
</woot-dropdown-item>
<woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
<button
class="button clear change-accounts--button"
<woot-button
variant="clear"
size="small"
class=" change-accounts--button"
@click="$emit('show-support-chat-window')"
>
Contact Support
</button>
</woot-button>
</woot-dropdown-item>
<woot-dropdown-item>
<router-link :to="`/app/accounts/${accountId}/profile/settings`">
<router-link
:to="`/app/accounts/${accountId}/profile/settings`"
class="button clear small change-accounts--button"
>
{{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
</router-link>
</woot-dropdown-item>
<woot-dropdown-item>
<a href="#" @click.prevent="logout">
<woot-button
variant="clear"
size="small"
class=" change-accounts--button"
@click="logout"
>
{{ $t('SIDEBAR_ITEMS.LOGOUT') }}
</a>
</woot-button>
</woot-dropdown-item>
</woot-dropdown-menu>
</div>

47
app/javascript/dashboard/components/ui/WootButton.vue
View File

@@ -1,13 +1,7 @@
<template>
<button
class="button"
:class="[
variant,
size,
colorScheme,
classNames,
isDisabled ? 'disabled' : '',
]"
:class="buttonClasses"
:disabled="isDisabled || isLoading"
@click="handleClick"
>
@@ -51,6 +45,28 @@ export default {
type: Boolean,
default: false,
},
isExpanded: {
type: Boolean,
default: false,
},
},
computed: {
variantClasses() {
if (this.variant.includes('link')) {
return `clear ${this.variant}`;
}
return this.variant;
},
buttonClasses() {
return [
this.variantClasses,
this.size,
this.colorScheme,
this.classNames,
this.isDisabled ? 'disabled' : '',
this.isExpanded ? 'expanded' : '',
];
},
},
methods: {
handleClick(evt) {
@@ -59,20 +75,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.button {
display: flex;
align-items: center;
&.link {
padding: 0;
margin: 0;
}
}
.spinner {
padding: 0 var(--space-small);
}
.icon + .button__content {
padding-left: var(--space-small);
}
</style>

64
app/javascript/dashboard/components/widgets/TableFooter.vue
View File

@@ -14,6 +14,8 @@
>
<woot-button
size="small"
variant="clear"
color-scheme="secondary"
class-names="goto-first"
:is-disabled="hasFirstPage"
@click="onFirstPage"
@@ -23,16 +25,25 @@
</woot-button>
<woot-button
size="small"
variant="clear"
color-scheme="secondary"
:is-disabled="hasPrevPage"
@click="onPrevPage"
>
<i class="ion-chevron-left" />
</woot-button>
<woot-button @click.prevent>
<woot-button
size="small"
variant="clear"
color-scheme="secondary"
@click.prevent
>
{{ currentPage }}
</woot-button>
<woot-button
size="small"
variant="clear"
color-scheme="secondary"
:is-disabled="hasNextPage"
@click="onNextPage"
>
@@ -40,6 +51,8 @@
</woot-button>
<woot-button
size="small"
variant="clear"
color-scheme="secondary"
class-names="goto-last"
:is-disabled="hasLastPage"
@click="onLastPage"
@@ -147,52 +160,11 @@ export default {
.page-meta {
font-size: var(--font-size-mini);
}
.pagination-button-group {
margin: 0;
.button {
background: transparent;
border-color: var(--color-border);
color: var(--color-body);
margin-bottom: 0;
margin-left: -2px;
font-size: var(--font-size-small);
padding: var(--space-small) var(--space-normal);
border-radius: 0;
&:hover,
&:focus,
&:active {
background: var(--s-200);
color: white;
}
&:first-child {
border-top-left-radius: var(--space-smaller);
border-bottom-left-radius: var(--space-smaller);
}
&:last-child {
border-top-right-radius: var(--space-smaller);
border-bottom-right-radius: var(--space-smaller);
}
&.small {
font-size: var(--font-size-micro);
}
&.disabled {
background: var(--s-200);
border-color: var(--s-200);
color: var(--b-900);
}
&.goto-first,
&.goto-last {
i:last-child {
margin-left: var(--space-minus-smaller);
}
}
.goto-first,
.goto-last {
i:last-child {
margin-left: var(--space-minus-smaller);
}
}
</style>

2
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
View File

@@ -75,7 +75,7 @@ export default {
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/app.scss';
@import '~dashboard/assets/scss/woot';
.conversation-details-wrap {
display: flex;

8
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@@ -12,8 +12,10 @@
<h3 class="user--name text-truncate">
{{ currentContact.name }}
</h3>
<button
class="user--profile__button clear button small"
<woot-button
class="user--profile__button"
size="small"
variant="link"
@click="$emit('contact-panel-toggle')"
>
{{
@@ -23,7 +25,7 @@
: $t('CONVERSATION.HEADER.OPEN')
} ${$t('CONVERSATION.HEADER.DETAILS')}`
}}
</button>
</woot-button>
</div>
</div>
<div

2
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
View File

@@ -95,7 +95,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/app.scss';
@import '~dashboard/assets/scss/woot';
.right {
.message-text--metadata {