diff options
| author | Grigorii K. Shartsev <me@shgk.me> | 2024-01-16 18:39:56 +0100 |
|---|---|---|
| committer | Grigorii K. Shartsev <me@shgk.me> | 2024-01-24 14:35:31 +0100 |
| commit | 544357d0028b5237d901c252a0c7d1cc2955cb74 (patch) | |
| tree | 6f4d84e6b3e9546f8233b8ac97e98ab67d47ad5a /apps/theming/src | |
| parent | 1112b9e9a571828d908119c2401237c3cb37d1b3 (diff) | |
| download | nextcloud-server-544357d0028b5237d901c252a0c7d1cc2955cb74.tar.gz nextcloud-server-544357d0028b5237d901c252a0c7d1cc2955cb74.zip | |
fix(theming): change color button contrast on admin settings
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Diffstat (limited to 'apps/theming/src')
| -rw-r--r-- | apps/theming/src/AdminTheming.vue | 1 | ||||
| -rw-r--r-- | apps/theming/src/components/admin/ColorPickerField.vue | 42 |
2 files changed, 14 insertions, 29 deletions
diff --git a/apps/theming/src/AdminTheming.vue b/apps/theming/src/AdminTheming.vue index daef18ebdce..2face1629ef 100644 --- a/apps/theming/src/AdminTheming.vue +++ b/apps/theming/src/AdminTheming.vue @@ -51,7 +51,6 @@ :default-value="colorPickerField.defaultValue" :display-name="colorPickerField.displayName" :value.sync="colorPickerField.value" - data-admin-theming-setting-primary-color @update:theming="$emit('update:theming')" /> <!-- Default background picker --> diff --git a/apps/theming/src/components/admin/ColorPickerField.vue b/apps/theming/src/components/admin/ColorPickerField.vue index 7885bfeb233..fad40408b37 100644 --- a/apps/theming/src/components/admin/ColorPickerField.vue +++ b/apps/theming/src/components/admin/ColorPickerField.vue @@ -26,15 +26,17 @@ <div class="field__row"> <NcColorPicker :value.sync="localValue" :advanced-fields="true" + data-admin-theming-setting-primary-color-picker @update:value="debounceSave"> - <NcButton class="field__button" - type="primary" - :id="id" - :aria-label="t('theming', 'Select a custom color')" - data-admin-theming-setting-primary-color-picker> - {{ value }} + <NcButton type="secondary" + :id="id"> + <template #icon> + <Palette :size="20" /> + </template> + {{ t('theming', 'Change color') }} </NcButton> </NcColorPicker> + <div class="field__color-preview" data-admin-theming-setting-primary-color /> <NcButton v-if="value !== defaultValue" type="tertiary" :aria-label="t('theming', 'Reset to default')" @@ -60,6 +62,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js' import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' import Undo from 'vue-material-design-icons/UndoVariant.vue' +import Palette from 'vue-material-design-icons/Palette.vue' import TextValueMixin from '../../mixins/admin/TextValueMixin.js' @@ -71,6 +74,7 @@ export default { NcColorPicker, NcNoteCard, Undo, + Palette, }, mixins: [ @@ -108,28 +112,10 @@ export default { @import './shared/field.scss'; .field { - // Override default NcButton styles - &__button { - width: 230px !important; - border-radius: var(--border-radius-large) !important; - background-color: var(--color-primary-default) !important; - - // emulated hover state because it would not make sense - // to create a dedicated global variable for the color-primary-default - &:hover::after { - background-color: white; - content: ""; - position: absolute; - width: 100%; - height: 100%; - opacity: .2; - filter: var(--primary-invert-if-bright); - } - - // Above the ::after - &::v-deep * { - z-index: 1; - } + &__color-preview { + width: var(--default-clickable-area); + border-radius: var(--border-radius-large); + background-color: var(--color-primary-default); } } </style> |