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

7
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
View File

@@ -114,13 +114,12 @@ export default {
renderBodyCell: ({ row }) => (
<woot-button
variant="clear"
size="expanded"
onClick={() => this.onClickContact(row.id)}
>
<div class="row--user-block">
<Thumbnail
src={row.thumbnail}
size="36px"
size="32px"
username={row.name}
status={row.availability_status}
/>
@@ -128,7 +127,7 @@ export default {
<h6 class="sub-block-title user-name text-truncate">
{row.name}
</h6>
<span class="button clear small">
<span class="button clear small link">
{this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')}
</span>
</div>
@@ -292,7 +291,7 @@ export default {
}
.ve-table-body-td {
padding: var(--space-slab) var(--space-two) !important;
padding: var(--space-small) var(--space-two) !important;
}
.ve-table-header-th {

3
app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
View File

@@ -80,7 +80,7 @@ export default {
display: flex;
justify-content: space-between;
width: 100%;
padding: var(--space-small) var(--space-small) var(--space-small)
padding: var(--space-small) var(--space-normal) var(--space-small)
var(--space-normal);
}
@@ -96,7 +96,6 @@ export default {
.search-wrap {
width: 400px;
height: 3.8rem;
display: flex;
align-items: center;
position: relative;

14
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
View File

@@ -7,14 +7,15 @@
$t('CONTACT_PANEL.NOT_AVAILABLE')
}}</span>
<button
<woot-button
v-if="showCopy"
type="submit"
class="button nice link hollow grey-btn compact"
variant="link"
color-scheme="secondary"
icon="ion-clipboard"
class-names="icon copy-icon"
@click="onCopy"
>
<i class="icon copy-icon ion-clipboard"></i>
</button>
/>
</a>
<div v-else class="contact-info--details">
@@ -85,9 +86,6 @@ export default {
.copy-icon {
margin-left: $space-one;
&:hover {
color: $color-woot;
}
}
&.a {

6
app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
View File

@@ -9,10 +9,12 @@
<router-link
v-if="showNewButton && isAdmin"
:to="buttonRoute"
class="button icon success nice button--fixed-right-top"
class="button success button--fixed-right-top"
>
<i class="icon ion-android-add-circle"></i>
{{ buttonText }}
<span class="button__content">
{{ buttonText }}
</span>
</router-link>
</div>
</template>

9
app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
View File

@@ -44,10 +44,13 @@
</button>
</div>
<div class="medium-6 columns text-right">
<button class="button clear" @click.prevent="resetPassword">
<i class="ion-locked"></i>
<woot-button
icon="ion-locked"
variant="clear"
@click.prevent="resetPassword"
>
{{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
</button>
</woot-button>
</div>
</div>
</form>

38
app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="column content-box">
<button
class="button nice icon success button--fixed-right-top"
<woot-button
color-scheme="success"
class-names="button--fixed-right-top"
icon="ion-android-add-circle"
@click="openAddPopup()"
>
<i class="icon ion-android-add-circle"></i>
{{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
</button>
<!-- Canned Response API Status -->
</woot-button>
<!-- List Agents -->
<div class="row">
@@ -55,21 +55,27 @@
<!-- Actions -->
<td>
<div class="button-wrapper">
<woot-submit-button
<woot-button
v-if="showEditAction(agent)"
:button-text="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
icon-class="ion-edit"
button-class="link hollow grey-btn"
variant="link"
color-scheme="secondary"
icon="ion-edit"
class-names="grey-btn"
@click="openEditPopup(agent)"
/>
<woot-submit-button
>
{{ $t('AGENT_MGMT.EDIT.BUTTON_TEXT') }}
</woot-button>
<woot-button
v-if="showDeleteAction(agent)"
:button-text="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
:loading="loading[agent.id]"
icon-class="ion-close-circled"
button-class="link hollow grey-btn"
variant="link"
color-scheme="secondary"
icon="ion-close-circled"
class-names="grey-btn"
:is-loading="loading[agent.id]"
@click="openDeletePopup(agent, index)"
/>
>
{{ $t('AGENT_MGMT.DELETE.BUTTON_TEXT') }}
</woot-button>
</div>
</td>
</tr>

44
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
View File

@@ -1,12 +1,14 @@
<template>
<div class="column content-box">
<button
class="button nice icon success button--fixed-right-top"
<woot-button
color-scheme="success"
class-names="button--fixed-right-top"
icon="ion-android-add-circle"
@click="openAddPopup()"
>
<i class="icon ion-android-add-circle"></i>
{{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
</button>
</woot-button>
<!-- List Canned Response -->
<div class="row">
<div class="small-8 columns">
@@ -47,21 +49,25 @@
<td>{{ cannedItem.content }}</td>
<!-- Action Buttons -->
<td class="button-wrapper">
<div @click="openEditPopup(cannedItem)">
<woot-submit-button
:button-text="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
icon-class="ion-edit"
button-class="link hollow grey-btn"
/>
</div>
<div @click="openDeletePopup(cannedItem, index)">
<woot-submit-button
:button-text="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
:loading="loading[cannedItem.id]"
icon-class="ion-close-circled"
button-class="link hollow grey-btn"
/>
</div>
<woot-button
variant="link"
color-scheme="secondary"
icon="ion-edit"
class-names="grey-btn"
@click="openEditPopup(cannedItem)"
>
{{ $t('CANNED_MGMT.EDIT.BUTTON_TEXT') }}
</woot-button>
<woot-button
variant="link"
color-scheme="secondary"
icon="ion-close-circled"
class-names="grey-btn"
:is-loading="loading[cannedItem.id]"
@click="openDeletePopup(cannedItem, index)"
>
{{ $t('CANNED_MGMT.DELETE.BUTTON_TEXT') }}
</woot-button>
</td>
</tr>
</tbody>

28
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
View File

@@ -59,22 +59,28 @@
<router-link
:to="addAccountScoping(`settings/inboxes/${item.id}`)"
>
<woot-submit-button
<woot-button
v-if="isAdmin"
:button-text="$t('INBOX_MGMT.SETTINGS')"
icon-class="ion-gear-b"
button-class="link hollow grey-btn"
/>
icon="ion-gear-b"
variant="link"
color-scheme="secondary"
class-names="grey-btn"
>
{{ $t('INBOX_MGMT.SETTINGS') }}
</woot-button>
</router-link>
<woot-submit-button
<woot-button
v-if="isAdmin"
:button-text="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
:loading="loading[item.id]"
icon-class="ion-close-circled"
button-class="link hollow grey-btn"
variant="link"
color-scheme="secondary"
class-names="grey-btn"
:is-loading="loading[item.id]"
icon="ion-close-circled"
@click="openDelete(item)"
/>
>
{{ $t('INBOX_MGMT.DELETE.BUTTON_TEXT') }}
</woot-button>
</div>
</td>
</tr>

6
app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
View File

@@ -133,13 +133,13 @@ export default {
key: 'buttons',
title: '',
align: 'left',
renderBodyCell: (row) => (
renderBodyCell: row => (
<div class="button-wrapper">
<WootButton
variant="clear"
icon="ion-edit"
color-scheme="secondary"
classNames="hollow grey-btn"
classNames="grey-btn"
onClick={() => this.onEditClick(row)}
>
{this.$t('CAMPAIGN.LIST.BUTTONS.EDIT')}
@@ -155,7 +155,7 @@ export default {
if (this.isLoading) {
return [];
}
return this.campaigns.map((item) => {
return this.campaigns.map(item => {
return {
...item,
url: item.trigger_rules.url,

10
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
View File

@@ -1,12 +1,14 @@
<template>
<div class="row content-box full-height">
<button
class="button nice icon success button--fixed-right-top"
<woot-button
color-scheme="success"
class-names="button--fixed-right-top"
icon="ion-android-add-circle"
@click="openAddPopup()"
>
<i class="icon ion-android-add-circle"></i>
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
</button>
</woot-button>
<div class="row">
<div class="small-8 columns">
<p

39
app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="column content-box">
<button
class="button nice icon success button--fixed-right-top"
<woot-button
color-scheme="success"
class-names="button--fixed-right-top"
icon="ion-android-add-circle"
@click="openAddPopup"
>
<i class="icon ion-android-add-circle"></i>
{{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
</button>
</woot-button>
<div class="row">
<div class="small-8 columns">
<p
@@ -42,20 +43,26 @@
</div>
</td>
<td class="button-wrapper">
<woot-submit-button
:button-text="$t('LABEL_MGMT.FORM.EDIT')"
icon-class="ion-edit"
button-class="link hollow grey-btn"
<woot-button
variant="link"
color-scheme="secondary"
class-names="grey-btn"
:is-loading="loading[label.id]"
icon="ion-edit"
@click="openEditPopup(label)"
/>
<woot-submit-button
:button-text="$t('LABEL_MGMT.FORM.DELETE')"
:loading="loading[label.id]"
icon-class="ion-close-circled"
button-class="link hollow grey-btn"
>
{{ $t('LABEL_MGMT.FORM.EDIT') }}
</woot-button>
<woot-button
variant="link"
color-scheme="secondary"
icon="ion-close-circled"
class-names="grey-btn"
:is-loading="loading[label.id]"
@click="openDeletePopup(label, index)"
/>
>
{{ $t('LABEL_MGMT.FORM.DELETE') }}
</woot-button>
</td>
</tr>
</tbody>

9
app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="column content-box">
<button
class="button nice icon success button--fixed-right-top"
<woot-button
color-scheme="success"
class-names="button--fixed-right-top"
icon="ion-android-download"
@click="downloadAgentReports"
>
<i class="icon ion-android-download"></i>
{{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
</button>
</woot-button>
<div class="small-3 pull-right">
<multiselect
v-model="currentDateRangeSelection"

29
app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
View File

@@ -25,22 +25,27 @@
<router-link
:to="addAccountScoping(`settings/teams/${item.id}/edit`)"
>
<woot-submit-button
<woot-button
v-if="isAdmin"
:button-text="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
icon-class="ion-gear-b"
button-class="link hollow grey-btn"
/>
variant="link"
color-scheme="secondary"
class-names="grey-btn"
icon="ion-gear-b"
>
{{ $t('TEAMS_SETTINGS.LIST.EDIT_TEAM') }}
</woot-button>
</router-link>
<woot-submit-button
<woot-button
v-if="isAdmin"
:button-text="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
:loading="loading[item.id]"
icon-class="ion-close-circled"
button-class="link hollow grey-btn"
variant="link"
color-scheme="secondary"
icon="ion-close-circled"
class-names="grey-btn"
:is-loading="loading[item.id]"
@click="openDelete(item)"
/>
>
{{ $t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT') }}
</woot-button>
</div>
</td>
</tr>