github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

V button color prop (#7140)

Browse Source 
* button type stylings

* added warning to action-archive

* changed styles to match theme

* updated to use "kind" prop

* Remove unused computed value

* Replace class

* Make button colors consistent

* Fix danger kind usage

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Jay Cammarano
2021-09-15 18:15:12 -04:00
committed by GitHub
parent 1ff2fa0110
commit 159004b52d
22 changed files with 65 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/src/components/v-button/v-button.vue
View File

@@ -20,6 +20,7 @@
tile,
'full-width': fullWidth,
},
kind,
]"
:type="type"
:disabled="disabled"
@@ -55,6 +56,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
kind: {
type: String as PropType<'normal' | 'info' | 'success' | 'warning' | 'danger'>,
default: 'normal',
},
fullWidth: {
type: Boolean,
default: false,
@@ -164,7 +169,6 @@ export default defineComponent({
return false;
});
return { sizeClass, onClick, component, isActiveRoute, toggle };
function onClick(event: MouseEvent) {
@@ -195,11 +199,6 @@ export default defineComponent({
--v-button-min-width: 140px;
}
.v-button {
display: inline-flex;
align-items: center;
}
.secondary {
--v-button-color: var(--foreground-normal);
--v-button-color-hover: var(--foreground-normal);
@@ -209,6 +208,43 @@ export default defineComponent({
--v-button-background-color-active: var(--background-normal-alt);
}
.info {
--v-button-color: var(--white);
--v-button-color-hover: var(--white);
--v-button-background-color: var(--blue);
--v-button-background-color-hover: var(--blue-125);
--v-button-background-color-active: var(--blue);
}
.success {
--v-button-color: var(--white);
--v-button-color-hover: var(--white);
--v-button-background-color: var(--success);
--v-button-background-color-hover: var(--success-125);
--v-button-background-color-active: var(--success);
}
.warning {
--v-button-color: var(--white);
--v-button-color-hover: var(--white);
--v-button-background-color: var(--warning);
--v-button-background-color-hover: var(--warning-125);
--v-button-background-color-active: var(--warning);
}
.danger {
--v-button-color: var(--white);
--v-button-color-hover: var(--white);
--v-button-background-color: var(--danger);
--v-button-background-color-hover: var(--danger-125);
--v-button-background-color-active: var(--danger);
}
.v-button {
display: inline-flex;
align-items: center;
}
.v-button.full-width {
display: flex;
min-width: 100%;

7
app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue
View File

@@ -58,7 +58,7 @@
<v-error v-if="error" :error="error" />
</v-card-text>
<v-card-actions>
<v-button type="submit" class="disable" :loading="loading" :disabled="otp.length !== 6">
<v-button type="submit" kind="warning" :loading="loading" :disabled="otp.length !== 6">
{{ t('disable_tfa') }}
</v-button>
</v-card-actions>
@@ -237,11 +237,6 @@ export default defineComponent({
text-align: center;
}
.disable {
--v-button-background-color: var(--warning);
--v-button-background-color-hover: var(--warning-125);
}
.v-error {
margin-top: 24px;
}

11
app/src/interfaces/map/map.vue
View File

@@ -31,8 +31,8 @@
</v-notice>
<template #append>
<v-card-actions>
<v-button small class="soft-reset" secondary @click="resetValue(false)">{{ t('continue') }}</v-button>
<v-button small class="hard-reset" @click="resetValue(true)">{{ t('reset') }}</v-button>
<v-button small secondary @click="resetValue(false)">{{ t('continue') }}</v-button>
<v-button small kind="danger" @click="resetValue(true)">{{ t('reset') }}</v-button>
</v-card-actions>
</template>
</v-info>
@@ -456,11 +456,4 @@ export default defineComponent({
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.v-button.hard-reset {
--v-button-background-color: var(--danger-10);
--v-button-color: var(--danger);
--v-button-background-color-hover: var(--danger-25);
--v-button-color-hover: var(--danger);
}
</style>

24
app/src/layouts/map/options.vue
View File

@@ -34,30 +34,6 @@
:disabled="geometryOptions && geometryOptions.geometryType !== 'Point'"
/>
</div>
<!-- <div class="field">
<v-drawer
v-model="customLayerDrawerOpenWritable"
:title="t('layouts.map.custom_layers')"
@cancel="customLayerDrawerOpenWritable = false"
>
<template #activator="{ on }">
<v-button @click="on">{{ t('layouts.map.edit_custom_layers') }}</v-button>
</template>
<template #actions>
<v-button v-tooltip.bottom="t('reset')" icon rounded class="delete-action" @click="resetLayers">
<v-icon name="replay" />
</v-button>
<v-button v-tooltip.bottom="t('save')" icon rounded @click="updateLayers">
<v-icon name="check" />
</v-button>
</template>
<div class="custom-layers">
<interface-input-code v-model="customLayersWritable" language="json" type="json" :line-number="false" />
</div>
</v-drawer>
</div> -->
</template>
<script lang="ts">

9
app/src/modules/collections/components/navigation-bookmark.vue
View File

@@ -49,7 +49,7 @@
<v-card-title>{{ t('delete_bookmark_copy', { bookmark: bookmark.bookmark }) }}</v-card-title>
<v-card-actions>
<v-button secondary @click="deleteActive = false">{{ t('cancel') }}</v-button>
<v-button :loading="deleteSaving" class="action-delete" @click="deleteSave">
<v-button :loading="deleteSaving" kind="danger" @click="deleteSave">
{{ t('delete_label') }}
</v-button>
</v-card-actions>
@@ -182,11 +182,4 @@ export default defineComponent({
--v-list-item-color: var(--danger);
--v-list-item-icon-color: var(--danger);
}
.action-delete {
--v-button-background-color: var(--danger-25);
--v-button-color: var(--danger);
--v-button-background-color-hover: var(--danger-50);
--v-button-color-hover: var(--danger);
}
</style>

4
app/src/modules/collections/routes/collection.vue
View File

@@ -111,7 +111,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="batchDelete">
<v-button kind="danger" :loading="deleting" @click="batchDelete">
{{ t('delete_label') }}
</v-button>
</v-card-actions>
@@ -143,7 +143,7 @@
<v-button secondary @click="confirmArchive = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-archive" :loading="archiving" @click="archive">
<v-button kind="warning" :loading="archiving" @click="archive">
{{ t('archive') }}
</v-button>
</v-card-actions>

4
app/src/modules/collections/routes/item.vue
View File

@@ -79,7 +79,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteAndQuit">
<v-button kind="danger" :loading="deleting" @click="deleteAndQuit">
{{ t('delete_label') }}
</v-button>
</v-card-actions>
@@ -113,7 +113,7 @@
<v-button secondary @click="confirmArchive = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-archive" :loading="archiving" @click="toggleArchive">
<v-button kind="warning" :loading="archiving" @click="toggleArchive">
{{ isArchived ? t('unarchive') : t('archive') }}
</v-button>
</v-card-actions>

2
app/src/modules/files/components/navigation-folder.vue
View File

@@ -106,7 +106,7 @@
</v-card-text>
<v-card-actions>
<v-button secondary @click="deleteActive = false">{{ t('cancel') }}</v-button>
<v-button :loading="deleteSaving" @click="deleteSave">{{ t('delete_label') }}</v-button>
<v-button kind="danger" :loading="deleteSaving" @click="deleteSave">{{ t('delete_label') }}</v-button>
</v-card-actions>
</v-card>
</v-dialog>

2
app/src/modules/files/routes/collection.vue
View File

@@ -77,7 +77,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="batchDelete">
<v-button kind="danger" :loading="deleting" @click="batchDelete">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

2
app/src/modules/files/routes/item.vue
View File

@@ -33,7 +33,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteAndQuit">
<v-button kind="danger" :loading="deleting" @click="deleteAndQuit">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

7
app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
View File

@@ -22,7 +22,7 @@
<v-button :disabled="deleting" secondary @click="deleteActive = null">
{{ t('cancel') }}
</v-button>
<v-button :loading="deleting" class="delete" @click="deleteCollection">
<v-button :loading="deleting" kind="danger" @click="deleteCollection">
{{ t('delete_collection') }}
</v-button>
</v-card-actions>
@@ -74,11 +74,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.v-button.delete {
--v-button-background-color: var(--danger);
--v-button-background-color-hover: var(--danger-125);
}
.ctx-toggle {
--v-icon-color: var(--foreground-subdued);

7
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -123,7 +123,7 @@
<v-card-title>{{ t('delete_field_are_you_sure', { field: field.field }) }}</v-card-title>
<v-card-actions>
<v-button secondary @click="deleteActive = false">{{ t('cancel') }}</v-button>
<v-button :loading="deleting" class="delete" @click="deleteField">{{ t('delete_label') }}</v-button>
<v-button :loading="deleting" kind="danger" @click="deleteField">{{ t('delete_label') }}</v-button>
</v-card-actions>
</v-card>
</v-dialog>
@@ -509,11 +509,6 @@ export default defineComponent({
@include form-grid;
}
.delete {
--v-button-background-color: var(--danger);
--v-button-background-color-hover: var(--danger-125);
}
.required {
position: relative;
left: -8px;

2
app/src/modules/settings/routes/data-model/fields/fields.vue
View File

@@ -30,7 +30,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteAndQuit">
<v-button kind="danger" :loading="deleting" @click="deleteAndQuit">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

2
app/src/modules/settings/routes/presets/collection/collection.vue
View File

@@ -23,7 +23,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteSelection">
<v-button kind="danger" :loading="deleting" @click="deleteSelection">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

2
app/src/modules/settings/routes/presets/item.vue
View File

@@ -43,7 +43,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteAndQuit">
<v-button kind="danger" :loading="deleting" @click="deleteAndQuit">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

2
app/src/modules/settings/routes/roles/item/item.vue
View File

@@ -28,7 +28,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteAndQuit">
<v-button kind="danger" :loading="deleting" @click="deleteAndQuit">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

2
app/src/modules/settings/routes/webhooks/collection.vue
View File

@@ -40,7 +40,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="batchDelete">
<v-button kind="danger" :loading="deleting" @click="batchDelete">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

2
app/src/modules/settings/routes/webhooks/item.vue
View File

@@ -23,7 +23,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteAndQuit">
<v-button kind="danger" :loading="deleting" @click="deleteAndQuit">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

2
app/src/modules/users/routes/collection.vue
View File

@@ -50,7 +50,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="batchDelete">
<v-button kind="danger" :loading="deleting" @click="batchDelete">
{{ t('delete_label') }}
</v-button>
</v-card-actions>

4
app/src/modules/users/routes/item.vue
View File

@@ -32,7 +32,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="deleteAndQuit">
<v-button kind="danger" :loading="deleting" @click="deleteAndQuit">
{{ t('delete_label') }}
</v-button>
</v-card-actions>
@@ -66,7 +66,7 @@
<v-button secondary @click="confirmArchive = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-archive" :loading="archiving" @click="toggleArchive">
<v-button kind="warning" :loading="archiving" @click="toggleArchive">
{{ isArchived ? t('unarchive') : t('archive') }}
</v-button>
</v-card-actions>

2
app/src/views/private/components/comments-sidebar-detail/comment-input.vue
View File

@@ -7,8 +7,6 @@
expand-on-focus
>
<template #append>
<!-- <v-icon name="alternate_email" class="add-mention" />
<v-icon name="insert_emoticon" class="add-emoji" /> -->
<v-button
:disabled="!newCommentContent || newCommentContent.length === 0"
:loading="saving"

2
app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
View File

@@ -50,7 +50,7 @@
<v-button secondary @click="confirmDelete = false">
{{ t('cancel') }}
</v-button>
<v-button class="action-delete" :loading="deleting" @click="remove">
<v-button kind="danger" :loading="deleting" @click="remove">
{{ t('delete_label') }}
</v-button>
</v-card-actions>