diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue')
| -rw-r--r-- | apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue | 55 |
1 files changed, 11 insertions, 44 deletions
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue index 16a46fee969..8acec883842 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue @@ -1,30 +1,13 @@ <!-- - - @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> <!-- TODO remove this inline margin placeholder once the settings layout is updated --> <section id="profile-visibility" :style="{ marginLeft }"> - <HeaderBar :account-property="heading" /> + <HeaderBar :is-heading="true" :readable="heading" /> <em :class="{ disabled }"> {{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }} @@ -47,9 +30,9 @@ import { loadState } from '@nextcloud/initial-state' import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from './VisibilityDropdown' -import { PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import HeaderBar from '../shared/HeaderBar.vue' +import VisibilityDropdown from './VisibilityDropdown.vue' +import { PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' const { profileConfig } = loadState('settings', 'profileParameters', {}) const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) @@ -81,7 +64,7 @@ export default { .sort(compareParams), // TODO remove this when not used once the settings layout is updated marginLeft: window.matchMedia('(min-width: 1600px)').matches - ? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim() + ? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim() : '0px', } }, @@ -101,7 +84,7 @@ export default { // TODO remove this when not used once the settings layout is updated window.onresize = () => { this.marginLeft = window.matchMedia('(min-width: 1600px)').matches - ? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim() + ? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim() : '0px' } }, @@ -121,7 +104,8 @@ export default { <style lang="scss" scoped> section { padding: 30px; - max-width: 100vw; + max-width: 900px; + width: 100%; em { display: block; @@ -134,28 +118,11 @@ section { pointer-events: none; & *, - &::v-deep * { + &:deep(*) { cursor: default; pointer-events: none; } } } - - .visibility-dropdowns { - display: grid; - gap: 10px 40px; - } - - @media (min-width: 1200px) { - width: 940px; - - .visibility-dropdowns { - grid-auto-flow: column; - } - } - - @media (max-width: 1200px) { - width: 470px; - } } </style> |