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

* 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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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