diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/ProfileVisibilitySection')
2 files changed, 229 insertions, 19 deletions
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue index c27bef347c6..e2989382bf5 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue @@ -21,18 +21,24 @@ --> <template> - <section> + <!-- TODO remove this inline margin placeholder once the settings layout is updated --> + <section + id="profile-visibility" + :style="{ marginLeft }"> <HeaderBar :account-property="heading" /> - <VisibilityDropdown v-for="parameter in visibilityArray" - :key="parameter.id" - :param-id="parameter.id" - :display-id="parameter.displayId" - :show-display-id="true" - :visibility.sync="parameter.visibility" /> - - <em :class="{ disabled }">{{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile — For example, when visibility is set to "Show to everyone" and scope is set to "Private", "Private" will be respected') }}</em> + <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.') }} + </em> + + <div class="visibility-dropdowns"> + <VisibilityDropdown v-for="param in visibilityParams" + :key="param.id" + :param-id="param.id" + :display-id="param.displayId" + :visibility.sync="param.visibility" /> + </div> </section> </template> @@ -41,8 +47,8 @@ import { loadState } from '@nextcloud/initial-state' import { subscribe, unsubscribe } from '@nextcloud/event-bus' import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from '../shared/VisibilityDropdown' -import { ACCOUNT_PROPERTY_ENUM, PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import VisibilityDropdown from './VisibilityDropdown' +import { PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' const { profileConfig } = loadState('settings', 'profileParameters', {}) const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) @@ -59,10 +65,11 @@ export default { return { heading: PROFILE_READABLE_ENUM.PROFILE_VISIBILITY, profileEnabled, - visibilityArray: Object.entries(profileConfig) - // Filter for profile parameters registered by apps in this section as visibility controls for the rest (account properties) are handled in their respective property sections - .filter(([paramId, { displayId, visibility }]) => !Object.values(ACCOUNT_PROPERTY_ENUM).includes(paramId)) - .map(([paramId, { displayId, visibility }]) => ({ id: paramId, displayId, visibility })), + visibilityParams: Object.entries(profileConfig) + .map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility })) + .sort((a, b) => a.appId === b.appId ? a.displayId.localeCompare(b.displayId) : (a.appId !== 'core' ? -1 : 1)), + // TODO remove this when not used once the settings layout is updated + marginLeft: window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim(), } }, @@ -74,6 +81,12 @@ export default { mounted() { subscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + // TODO remove this when not used once the settings layout is updated + window.onresize = () => { + this.marginLeft = window.matchMedia('(min-width: 1200px)').matches + ? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim() + : '0px' + } }, beforeDestroy() { @@ -90,11 +103,11 @@ export default { <style lang="scss" scoped> section { - padding: 10px 10px; + padding: 30px; em { display: block; - margin-top: 16px; + margin: 16px 0; &.disabled { filter: grayscale(1); @@ -110,8 +123,23 @@ section { } } - &::v-deep button:disabled { - cursor: default; + .visibility-dropdowns { + display: grid; + grid-template-rows: repeat(auto-fit, 44px); + gap: 10px 40px; + } + + @media (min-width: 1200px) { + width: 940px; + + .visibility-dropdowns { + grid-auto-flow: column; + height: 320px; + } + } + + @media (max-width: 1200px) { + width: 470px; } } </style> diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue new file mode 100644 index 00000000000..5c982fd1f24 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue @@ -0,0 +1,182 @@ +<!-- + - @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/>. + - +--> + +<template> + <div + class="visibility-container" + :class="{ disabled }"> + <label :for="inputId"> + {{ t('settings', '{displayId}', { displayId }) }} + </label> + <Multiselect + :id="inputId" + class="visibility-container__multiselect" + :options="visibilityOptions" + track-by="name" + label="label" + :value="visibilityObject" + @change="onVisibilityChange" /> + </div> +</template> + +<script> +import { showError } from '@nextcloud/dialogs' +import { loadState } from '@nextcloud/initial-state' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' + +import Multiselect from '@nextcloud/vue/dist/Components/Multiselect' + +import { saveProfileParameterVisibility } from '../../../service/ProfileService' +import { validateStringInput } from '../../../utils/validate' +import { VISIBILITY_PROPERTY_ENUM } from '../../../constants/ProfileConstants' + +const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) + +export default { + name: 'VisibilityDropdown', + + components: { + Multiselect, + }, + + props: { + paramId: { + type: String, + required: true, + }, + displayId: { + type: String, + required: true, + }, + visibility: { + type: String, + required: true, + }, + }, + + data() { + return { + initialVisibility: this.visibility, + profileEnabled, + } + }, + + computed: { + disabled() { + return !this.profileEnabled + }, + + inputId() { + return `profile-visibility-${this.paramId}` + }, + + visibilityObject() { + return VISIBILITY_PROPERTY_ENUM[this.visibility] + }, + + visibilityOptions() { + return Object.values(VISIBILITY_PROPERTY_ENUM) + }, + }, + + mounted() { + subscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + }, + + beforeDestroy() { + unsubscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + }, + + methods: { + async onVisibilityChange(visibilityObject) { + // This check is needed as the argument is null when selecting the same option + if (visibilityObject !== null) { + const { name: visibility } = visibilityObject + this.$emit('update:visibility', visibility) + + if (validateStringInput(visibility)) { + await this.updateVisibility(visibility) + } + } + }, + + async updateVisibility(visibility) { + try { + const responseData = await saveProfileParameterVisibility(this.paramId, visibility) + this.handleResponse({ + visibility, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update visibility of {displayId}', { displayId: this.displayId }), + error: e, + }) + } + }, + + handleResponse({ visibility, status, errorMessage, error }) { + if (status === 'ok') { + // Ensure that local state reflects server state + this.initialVisibility = visibility + } else { + showError(errorMessage) + this.logger.error(errorMessage, error) + } + }, + + handleProfileEnabledUpdate(profileEnabled) { + this.profileEnabled = profileEnabled + }, + }, +} +</script> + +<style lang="scss" scoped> +.visibility-container { + display: flex; + width: max-content; + + &.disabled { + filter: grayscale(1); + opacity: 0.5; + cursor: default; + pointer-events: none; + + & *, + &::v-deep * { + cursor: default; + pointer-events: none; + } + } + + label { + color: var(--color-text-lighter); + width: 150px; + line-height: 50px; + } + + &__multiselect { + width: 260px; + } +} +</style> |