diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue')
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue | 97 |
1 files changed, 50 insertions, 47 deletions
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue index 65eb5a110a3..7c95c2b8f4c 100644 --- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue +++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue @@ -1,41 +1,28 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - 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: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> - <h3 :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }"> - <label :for="labelFor"> + <div class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }"> + <h3 v-if="isHeading" class="headerbar__heading"> <!-- Already translated as required by prop validator --> - {{ accountProperty }} + {{ readable }} + </h3> + <label v-else :for="inputId"> + <!-- Already translated as required by prop validator --> + {{ readable }} </label> <template v-if="scope"> <FederationControl class="federation-control" - :account-property="accountProperty" + :readable="readable" :scope.sync="localScope" @update:scope="onScopeChange" /> </template> <template v-if="isEditable && isMultiValueSupported"> - <Button type="tertiary" + <NcButton type="tertiary" :disabled="!isValidSection" :aria-label="t('settings', 'Add additional email')" @click.stop.prevent="onAddAdditional"> @@ -43,31 +30,43 @@ <Plus :size="20" /> </template> {{ t('settings', 'Add') }} - </Button> + </NcButton> </template> - </h3> + </div> </template> <script> -import FederationControl from './FederationControl' -import Button from '@nextcloud/vue/dist/Components/Button' -import Plus from 'vue-material-design-icons/Plus' -import { ACCOUNT_PROPERTY_READABLE_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM, PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import NcButton from '@nextcloud/vue/components/NcButton' +import Plus from 'vue-material-design-icons/Plus.vue' + +import FederationControl from './FederationControl.vue' + +import { + ACCOUNT_PROPERTY_READABLE_ENUM, + PROFILE_READABLE_ENUM, +} from '../../../constants/AccountPropertyConstants.js' export default { name: 'HeaderBar', components: { FederationControl, - Button, + NcButton, Plus, }, props: { - accountProperty: { + scope: { + type: String, + default: null, + }, + readable: { type: String, required: true, - validator: (value) => Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(value) || Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(value) || value === PROFILE_READABLE_ENUM.PROFILE_VISIBILITY, + }, + inputId: { + type: String, + default: null, }, isEditable: { type: Boolean, @@ -79,15 +78,11 @@ export default { }, isValidSection: { type: Boolean, - default: false, - }, - labelFor: { - type: String, - default: '', + default: true, }, - scope: { - type: String, - default: null, + isHeading: { + type: Boolean, + default: false, }, }, @@ -99,11 +94,11 @@ export default { computed: { isProfileProperty() { - return this.accountProperty === ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED + return this.readable === ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED }, isSettingProperty() { - return Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(this.accountProperty) + return !Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(this.readable) && !Object.values(PROFILE_READABLE_ENUM).includes(this.readable) }, }, @@ -120,10 +115,13 @@ export default { </script> <style lang="scss" scoped> - h3 { + .headerbar-label { + font-weight: normal; display: inline-flex; width: 100%; margin: 12px 0 0 0; + gap: 8px; + align-items: center; font-size: 16px; color: var(--color-text-light); @@ -132,7 +130,7 @@ export default { } &.setting-property { - height: 32px; + height: 34px; } label { @@ -140,11 +138,16 @@ export default { } } + .headerbar__heading { + margin: 0; + } + .federation-control { - margin: -12px 0 0 8px; + margin: 0; } .button-vue { - margin: -6px 0 0 auto !important; + margin: 0 !important; + margin-inline-start: auto !important; } </style> |