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

enhancement: Changes button design for tables in settings page (#3553)

Browse source 
* enhancement: Changes button design for tables in settings page

* Minor fixes

* Review fixes
This commit is contained in:
Sivin Varghese 2021-12-16 13:00:55 +05:30 committed by GitHub
parent 9984edd3ef
commit 93f384a3ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 58 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/dashboard/assets/scss/_foundation-custom.scss
View file

@ -12,7 +12,7 @@
padding: var(--space-normal); padding: var(--space-normal);
} }
.button-wrapper .button.link.grey-btn { .button-wrapper .button.grey-btn {
margin-left: var(--space-normal); margin-left: var(--space-normal);
} }

12
app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
View file

@ -57,24 +57,26 @@
<div class="button-wrapper"> <div class="button-wrapper">
<woot-button <woot-button
v-if="showEditAction(agent)" v-if="showEditAction(agent)"
variant="link" v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
variant="smooth"
size="tiny"
color-scheme="secondary" color-scheme="secondary"
icon="edit" icon="edit"
class-names="grey-btn" class-names="grey-btn"
@click="openEditPopup(agent)" @click="openEditPopup(agent)"
> >
{{ $t('AGENT_MGMT.EDIT.BUTTON_TEXT') }}
</woot-button> </woot-button>
<woot-button <woot-button
v-if="showDeleteAction(agent)" v-if="showDeleteAction(agent)"
variant="link" v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
color-scheme="secondary" variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle" icon="dismiss-circle"
class-names="grey-btn" class-names="grey-btn"
:is-loading="loading[agent.id]" :is-loading="loading[agent.id]"
@click="openDeletePopup(agent, index)" @click="openDeletePopup(agent, index)"
> >
{{ $t('AGENT_MGMT.DELETE.BUTTON_TEXT') }}
</woot-button> </woot-button>
</div> </div>
</td> </td>

12
app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
View file

@ -50,22 +50,24 @@
</td> </td>
<td class="button-wrapper"> <td class="button-wrapper">
<woot-button <woot-button
variant="link" v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
variant="smooth"
size="tiny"
color-scheme="secondary" color-scheme="secondary"
class-names="grey-btn" class-names="grey-btn"
icon="edit" icon="edit"
@click="openEditPopup(attribute)" @click="openEditPopup(attribute)"
> >
{{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT') }}
</woot-button> </woot-button>
<woot-button <woot-button
variant="link" v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
color-scheme="secondary" variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle" icon="dismiss-circle"
class-names="grey-btn" class-names="grey-btn"
@click="openDelete(attribute)" @click="openDelete(attribute)"
> >
{{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE') }}
</woot-button> </woot-button>
</td> </td>
</tr> </tr>

13
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
View file

@ -50,23 +50,24 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<td class="button-wrapper"> <td class="button-wrapper">
<woot-button <woot-button
variant="link" v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
variant="smooth"
size="tiny"
color-scheme="secondary" color-scheme="secondary"
icon="edit" icon="edit"
class-names="grey-btn"
@click="openEditPopup(cannedItem)" @click="openEditPopup(cannedItem)"
> >
{{ $t('CANNED_MGMT.EDIT.BUTTON_TEXT') }}
</woot-button> </woot-button>
<woot-button <woot-button
variant="link" v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
color-scheme="secondary" variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle" icon="dismiss-circle"
class-names="grey-btn" class-names="grey-btn"
:is-loading="loading[cannedItem.id]" :is-loading="loading[cannedItem.id]"
@click="openDeletePopup(cannedItem, index)" @click="openDeletePopup(cannedItem, index)"
> >
{{ $t('CANNED_MGMT.DELETE.BUTTON_TEXT') }}
</woot-button> </woot-button>
</td> </td>
</tr> </tr>

12
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
View file

@ -68,25 +68,27 @@
> >
<woot-button <woot-button
v-if="isAdmin" v-if="isAdmin"
v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
variant="smooth"
size="tiny"
icon="settings" icon="settings"
variant="link"
color-scheme="secondary" color-scheme="secondary"
class-names="grey-btn" class-names="grey-btn"
> >
{{ $t('INBOX_MGMT.SETTINGS') }}
</woot-button> </woot-button>
</router-link> </router-link>
<woot-button <woot-button
v-if="isAdmin" v-if="isAdmin"
variant="link" v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
color-scheme="secondary" variant="smooth"
color-scheme="alert"
size="tiny"
class-names="grey-btn" class-names="grey-btn"
:is-loading="loading[item.id]" :is-loading="loading[item.id]"
icon="dismiss-circle" icon="dismiss-circle"
@click="openDelete(item)" @click="openDelete(item)"
> >
{{ $t('INBOX_MGMT.DELETE.BUTTON_TEXT') }}
</woot-button> </woot-button>
</div> </div>
</td> </td>

7
app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
View file

@ -24,13 +24,14 @@
</td> </td>
<td class="button-wrapper"> <td class="button-wrapper">
<woot-button <woot-button
variant="link" v-tooltip.top="$t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT')"
color-scheme="secondary" variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle" icon="dismiss-circle"
class-names="grey-btn" class-names="grey-btn"
@click="$emit('delete', hook)" @click="$emit('delete', hook)"
> >
{{ $t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT') }}
</woot-button> </woot-button>
</td> </td>
</tr> </tr>

16
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
View file

@ -43,20 +43,26 @@
</td> </td>
<td class="button-wrapper"> <td class="button-wrapper">
<woot-button <woot-button
variant="link" v-tooltip.top="
$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')
"
variant="smooth"
size="tiny"
color-scheme="secondary" color-scheme="secondary"
icon="edit" icon="edit"
@click="openEditPopup(webHookItem)" @click="openEditPopup(webHookItem)"
> >
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT') }}
</woot-button> </woot-button>
<woot-button <woot-button
variant="link" v-tooltip.top="
$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle" icon="dismiss-circle"
color-scheme="secondary"
@click="openDeletePopup(webHookItem, index)" @click="openDeletePopup(webHookItem, index)"
> >
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT') }}
</woot-button> </woot-button>
</td> </td>
</tr> </tr>

12
app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
View file

@ -44,24 +44,26 @@
</td> </td>
<td class="button-wrapper"> <td class="button-wrapper">
<woot-button <woot-button
variant="link" v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
variant="smooth"
size="tiny"
color-scheme="secondary" color-scheme="secondary"
class-names="grey-btn" class-names="grey-btn"
:is-loading="loading[label.id]" :is-loading="loading[label.id]"
icon="edit" icon="edit"
@click="openEditPopup(label)" @click="openEditPopup(label)"
> >
{{ $t('LABEL_MGMT.FORM.EDIT') }}
</woot-button> </woot-button>
<woot-button <woot-button
variant="link" v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
color-scheme="secondary" variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle" icon="dismiss-circle"
class-names="grey-btn" class-names="grey-btn"
:is-loading="loading[label.id]" :is-loading="loading[label.id]"
@click="openDeletePopup(label, index)" @click="openDeletePopup(label, index)"
> >
{{ $t('LABEL_MGMT.FORM.DELETE') }}
</woot-button> </woot-button>
</td> </td>
</tr> </tr>

12
app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
View file

@ -27,24 +27,26 @@
> >
<woot-button <woot-button
v-if="isAdmin" v-if="isAdmin"
variant="link" v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
variant="smooth"
size="tiny"
color-scheme="secondary" color-scheme="secondary"
class-names="grey-btn" class-names="grey-btn"
icon="settings" icon="settings"
> >
{{ $t('TEAMS_SETTINGS.LIST.EDIT_TEAM') }}
</woot-button> </woot-button>
</router-link> </router-link>
<woot-button <woot-button
v-if="isAdmin" v-if="isAdmin"
variant="link" v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
color-scheme="secondary" variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle" icon="dismiss-circle"
class-names="grey-btn" class-names="grey-btn"
:is-loading="loading[item.id]" :is-loading="loading[item.id]"
@click="openDelete(item)" @click="openDelete(item)"
> >
{{ $t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT') }}
</woot-button> </woot-button>
</div> </div>
</td> </td>