diff options
Diffstat (limited to 'apps/theming/src/components/admin')
| -rw-r--r-- | apps/theming/src/components/admin/AppMenuSection.vue | 18 | ||||
| -rw-r--r-- | apps/theming/src/components/admin/CheckboxField.vue | 35 | ||||
| -rw-r--r-- | apps/theming/src/components/admin/ColorPickerField.vue | 100 | ||||
| -rw-r--r-- | apps/theming/src/components/admin/FileInputField.vue | 40 | ||||
| -rw-r--r-- | apps/theming/src/components/admin/TextField.vue | 23 | ||||
| -rw-r--r-- | apps/theming/src/components/admin/shared/field.scss | 23 |
6 files changed, 108 insertions, 131 deletions
diff --git a/apps/theming/src/components/admin/AppMenuSection.vue b/apps/theming/src/components/admin/AppMenuSection.vue index bed170504c9..bf229f15df4 100644 --- a/apps/theming/src/components/admin/AppMenuSection.vue +++ b/apps/theming/src/components/admin/AppMenuSection.vue @@ -1,3 +1,7 @@ +<!-- + - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <NcSettingsSection :name="t('theming', 'Navigation bar settings')"> <h3>{{ t('theming', 'Default app') }}</h3> @@ -26,6 +30,8 @@ </template> <script lang="ts"> +import type { INavigationEntry } from '../../../../../core/src/types/navigation' + import { showError } from '@nextcloud/dialogs' import { loadState } from '@nextcloud/initial-state' import { translate as t } from '@nextcloud/l10n' @@ -34,9 +40,9 @@ import { computed, defineComponent } from 'vue' import axios from '@nextcloud/axios' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' import AppOrderSelector from '../AppOrderSelector.vue' export default defineComponent({ @@ -71,9 +77,8 @@ export default defineComponent({ /** * All enabled apps which can be navigated */ - const allApps = Object.values( - loadState<Record<string, { id: string, name?: string, icon: string }>>('core', 'apps'), - ).map(({ id, name, icon }) => ({ label: name, id, icon })) + const allApps = loadState<INavigationEntry[]>('core', 'apps') + .map(({ id, name, icon }) => ({ label: name, id, icon })) /** * Currently selected app, wrapps the setter @@ -110,6 +115,7 @@ export default defineComponent({ h3, h4 { font-weight: bold; } + h4, h5 { margin-block-start: 12px; } diff --git a/apps/theming/src/components/admin/CheckboxField.vue b/apps/theming/src/components/admin/CheckboxField.vue index fa8477a7283..42d86ded4e7 100644 --- a/apps/theming/src/components/admin/CheckboxField.vue +++ b/apps/theming/src/components/admin/CheckboxField.vue @@ -1,38 +1,23 @@ <!-- - - @copyright 2022 Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <div class="field"> <label :for="id">{{ displayName }}</label> <div class="field__row"> - <NcCheckboxRadioSwitch type="switch" - :id="id" + <NcCheckboxRadioSwitch :id="id" + type="switch" :checked.sync="localValue" @update:checked="save"> {{ label }} </NcCheckboxRadioSwitch> </div> - <p class="field__description">{{ description }}</p> + <p class="field__description"> + {{ description }} + </p> <NcNoteCard v-if="errorMessage" type="error" @@ -43,8 +28,8 @@ </template> <script> -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' -import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' import TextValueMixin from '../../mixins/admin/TextValueMixin.js' @@ -90,7 +75,7 @@ export default { </script> <style lang="scss" scoped> -@import './shared/field.scss'; +@use './shared/field' as *; .field { &__description { diff --git a/apps/theming/src/components/admin/ColorPickerField.vue b/apps/theming/src/components/admin/ColorPickerField.vue index fad40408b37..4ec6d47fef6 100644 --- a/apps/theming/src/components/admin/ColorPickerField.vue +++ b/apps/theming/src/components/admin/ColorPickerField.vue @@ -1,23 +1,6 @@ <!-- - - @copyright 2022 Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> @@ -26,27 +9,35 @@ <div class="field__row"> <NcColorPicker :value.sync="localValue" :advanced-fields="true" - data-admin-theming-setting-primary-color-picker @update:value="debounceSave"> - <NcButton type="secondary" - :id="id"> + <NcButton :id="id" + class="field__button" + type="primary" + :aria-label="t('theming', 'Select a custom color')" + data-admin-theming-setting-color-picker> <template #icon> - <Palette :size="20" /> + <NcLoadingIcon v-if="loading" + :appearance="calculatedTextColor === '#ffffff' ? 'light' : 'dark'" + :size="20" /> + <Palette v-else :size="20" /> </template> - {{ t('theming', 'Change color') }} + {{ value }} </NcButton> </NcColorPicker> - <div class="field__color-preview" data-admin-theming-setting-primary-color /> + <div class="field__color-preview" data-admin-theming-setting-color /> <NcButton v-if="value !== defaultValue" type="tertiary" :aria-label="t('theming', 'Reset to default')" - data-admin-theming-setting-primary-color-reset + data-admin-theming-setting-color-reset @click="undo"> <template #icon> <Undo :size="20" /> </template> </NcButton> </div> + <div v-if="description" class="description"> + {{ description }} + </div> <NcNoteCard v-if="errorMessage" type="error" @@ -57,10 +48,13 @@ </template> <script> -import { debounce } from 'debounce' -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 { colord } from 'colord' +import debounce from 'debounce' + +import NcButton from '@nextcloud/vue/components/NcButton' +import NcColorPicker from '@nextcloud/vue/components/NcColorPicker' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' import Undo from 'vue-material-design-icons/UndoVariant.vue' import Palette from 'vue-material-design-icons/Palette.vue' @@ -72,6 +66,7 @@ export default { components: { NcButton, NcColorPicker, + NcLoadingIcon, NcNoteCard, Undo, Palette, @@ -86,10 +81,18 @@ export default { type: String, required: true, }, + description: { + type: String, + default: '', + }, value: { type: String, required: true, }, + textColor: { + type: String, + default: null, + }, defaultValue: { type: String, required: true, @@ -100,22 +103,55 @@ export default { }, }, + emits: ['update:theming'], + + data() { + return { + loading: false, + } + }, + + computed: { + calculatedTextColor() { + const color = colord(this.value) + return color.isLight() ? '#000000' : '#ffffff' + }, + usedTextColor() { + if (this.textColor) { + return this.textColor + } + return this.calculatedTextColor + }, + }, + methods: { debounceSave: debounce(async function() { + this.loading = true await this.save() + this.$emit('update:theming') + this.loading = false }, 200), }, } </script> <style lang="scss" scoped> -@import './shared/field.scss'; +@use './shared/field' as *; + +.description { + color: var(--color-text-maxcontrast); +} .field { + &__button { + background-color: v-bind('value') !important; + color: v-bind('usedTextColor') !important; + } + &__color-preview { width: var(--default-clickable-area); border-radius: var(--border-radius-large); - background-color: var(--color-primary-default); + background-color: v-bind('value'); } } </style> diff --git a/apps/theming/src/components/admin/FileInputField.vue b/apps/theming/src/components/admin/FileInputField.vue index 3d6fda9ec70..d5e0052f5bd 100644 --- a/apps/theming/src/components/admin/FileInputField.vue +++ b/apps/theming/src/components/admin/FileInputField.vue @@ -1,31 +1,14 @@ <!-- - - @copyright 2022 Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <div class="field"> <label :for="id">{{ displayName }}</label> <div class="field__row"> - <NcButton type="secondary" - :id="id" + <NcButton :id="id" + type="secondary" :aria-label="ariaLabel" data-admin-theming-setting-file-picker @click="activateLocalFilePicker"> @@ -82,10 +65,10 @@ import axios from '@nextcloud/axios' import { generateUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' -import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js' -import Delete from 'vue-material-design-icons/Delete.vue' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import Delete from 'vue-material-design-icons/DeleteOutline.vue' import Undo from 'vue-material-design-icons/UndoVariant.vue' import Upload from 'vue-material-design-icons/Upload.vue' @@ -126,7 +109,7 @@ export default { }, defaultMimeValue: { type: String, - required: true, + default: '', }, displayName: { type: String, @@ -182,9 +165,10 @@ export default { const url = generateUrl('/apps/theming/ajax/uploadImage') try { this.showLoading = true - await axios.post(url, formData) + const { data } = await axios.post(url, formData) this.showLoading = false this.$emit('update:mime-value', file.type) + this.$emit('uploaded', data.data.url) this.handleSuccess() } catch (e) { this.showLoading = false @@ -225,7 +209,7 @@ export default { </script> <style lang="scss" scoped> -@import './shared/field.scss'; +@use './shared/field' as *; .field { &__loading-icon { diff --git a/apps/theming/src/components/admin/TextField.vue b/apps/theming/src/components/admin/TextField.vue index 5e96f45a95b..6ec52733aed 100644 --- a/apps/theming/src/components/admin/TextField.vue +++ b/apps/theming/src/components/admin/TextField.vue @@ -1,23 +1,6 @@ <!-- - - @copyright 2022 Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license AGPL-3.0-or-later - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> @@ -40,7 +23,7 @@ </template> <script> -import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcTextField from '@nextcloud/vue/components/NcTextField' import TextValueMixin from '../../mixins/admin/TextValueMixin.js' diff --git a/apps/theming/src/components/admin/shared/field.scss b/apps/theming/src/components/admin/shared/field.scss index 54fc57b3ee5..2347f31f7c5 100644 --- a/apps/theming/src/components/admin/shared/field.scss +++ b/apps/theming/src/components/admin/shared/field.scss @@ -1,23 +1,6 @@ -/** - * @copyright 2022 Christopher Ng <chrng8@gmail.com> - * - * @author Christopher Ng <chrng8@gmail.com> - * - * @license AGPL-3.0-or-later - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * +/*! + * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ .field { |