diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2022-10-05 12:14:03 +0200 |
|---|---|---|
| committer | John Molakvoæ <skjnldsv@protonmail.com> | 2022-10-13 12:13:39 +0200 |
| commit | db831359d3ad10d35536bd5f0e72ba629b828471 (patch) | |
| tree | 5b953a93ef251e5ed8ea012e80e9fe1327a7b662 /apps/theming/src | |
| parent | 4b46c5a5a02b6c1c77b99cf21b9ff933fabbcc35 (diff) | |
| download | nextcloud-server-db831359d3ad10d35536bd5f0e72ba629b828471.tar.gz nextcloud-server-db831359d3ad10d35536bd5f0e72ba629b828471.zip | |
Allow to pick custom colour
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/theming/src')
| -rw-r--r-- | apps/theming/src/components/BackgroundSettings.vue | 18 |
1 files changed, 17 insertions, 1 deletions
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue index aa65a333f0f..3767cebf815 100644 --- a/apps/theming/src/components/BackgroundSettings.vue +++ b/apps/theming/src/components/BackgroundSettings.vue @@ -32,6 +32,17 @@ @click="pickFile"> {{ t('theming', 'Pick from Files') }} </button> + <NcColorPicker v-model="Theming.color" @input="pickColor"> + <button class="background color" + :class="{ active: background === Theming.color}" + tabindex="0" + :data-color="Theming.color" + :data-color-bright="invertTextColor(Theming.color)" + :style="{ backgroundColor: Theming.color, color: invertTextColor(Theming.color) ? '#000000' : '#ffffff'}" + @click="pickColor"> + {{ t('theming', 'Custom color') }} + </button> + </NcColorPicker> <!-- Default background --> <button class="background default" @@ -43,7 +54,7 @@ <!-- Default admin primary color --> <button class="background color" - :class="{ active: background.startsWith('#') }" + :class="{ active: background === Theming.defaultColor }" tabindex="0" :data-color="Theming.defaultColor" :data-color-bright="invertTextColor(Theming.defaultColor)" @@ -68,6 +79,7 @@ <script> import axios from '@nextcloud/axios' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' +import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker' import { generateUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' import { getBackgroundUrl } from '../helpers/getBackgroundUrl.js' @@ -81,6 +93,10 @@ export default { Tooltip, }, + components: { + NcColorPicker, + }, + props: { background: { type: String, |