diff options
Diffstat (limited to 'apps/settings/src/components')
10 files changed, 173 insertions, 96 deletions
diff --git a/apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue b/apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue index 794d01aa954..637c24e2665 100644 --- a/apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue +++ b/apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue @@ -30,11 +30,6 @@ <Biography :biography.sync="primaryBiography.value" :scope.sync="primaryBiography.scope" /> - - <VisibilityDropdown - :param-id="accountPropertyId" - :display-id="accountProperty" - :visibility.sync="visibility" /> </section> </template> @@ -43,12 +38,10 @@ import { loadState } from '@nextcloud/initial-state' import Biography from './Biography' import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from '../shared/VisibilityDropdown' -import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' const { biographyMap: { primaryBiography } } = loadState('settings', 'personalInfoParameters', {}) -const { profileConfig: { biography: { visibility } } } = loadState('settings', 'profileParameters', {}) export default { name: 'BiographySection', @@ -56,15 +49,12 @@ export default { components: { Biography, HeaderBar, - VisibilityDropdown, }, data() { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY, - accountPropertyId: ACCOUNT_PROPERTY_ENUM.BIOGRAPHY, primaryBiography, - visibility, } }, } diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue index b46aea72856..6f07d72d456 100644 --- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue +++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue @@ -33,11 +33,6 @@ <DisplayName :display-name.sync="primaryDisplayName.value" :scope.sync="primaryDisplayName.scope" /> - - <VisibilityDropdown - :param-id="accountPropertyId" - :display-id="accountProperty" - :visibility.sync="visibility" /> </template> <span v-else> @@ -51,14 +46,12 @@ import { loadState } from '@nextcloud/initial-state' import DisplayName from './DisplayName' import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from '../shared/VisibilityDropdown' -import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' import { validateStringInput } from '../../../utils/validate' const { displayNameMap: { primaryDisplayName } } = loadState('settings', 'personalInfoParameters', {}) const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {}) -const { profileConfig: { displayname: { visibility } } } = loadState('settings', 'profileParameters', {}) export default { name: 'DisplayNameSection', @@ -66,16 +59,13 @@ export default { components: { DisplayName, HeaderBar, - VisibilityDropdown, }, data() { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME, - accountPropertyId: ACCOUNT_PROPERTY_ENUM.DISPLAYNAME, displayNameChangeSupported, primaryDisplayName, - visibility, } }, diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue index 2a9aefd4162..f25b281782f 100644 --- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue +++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue @@ -40,11 +40,6 @@ :active-notification-email.sync="notificationEmail" @update:email="onUpdateEmail" @update:notification-email="onUpdateNotificationEmail" /> - - <VisibilityDropdown - :param-id="accountPropertyId" - :display-id="accountProperty" - :visibility.sync="visibility" /> </template> <span v-else> @@ -73,15 +68,13 @@ import { showError } from '@nextcloud/dialogs' import Email from './Email' import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from '../shared/VisibilityDropdown' -import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE } from '../../../constants/AccountPropertyConstants' import { savePrimaryEmail, savePrimaryEmailScope, removeAdditionalEmail } from '../../../service/PersonalInfo/EmailService' import { validateEmail } from '../../../utils/validate' const { emailMap: { additionalEmails, primaryEmail, notificationEmail } } = loadState('settings', 'personalInfoParameters', {}) const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {}) -const { profileConfig: { email: { visibility } } } = loadState('settings', 'profileParameters', {}) export default { name: 'EmailSection', @@ -89,19 +82,16 @@ export default { components: { HeaderBar, Email, - VisibilityDropdown, }, data() { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL, - accountPropertyId: ACCOUNT_PROPERTY_ENUM.EMAIL, additionalEmails, displayNameChangeSupported, primaryEmail, savePrimaryEmailScope, notificationEmail, - visibility, } }, diff --git a/apps/settings/src/components/PersonalInfo/HeadlineSection/HeadlineSection.vue b/apps/settings/src/components/PersonalInfo/HeadlineSection/HeadlineSection.vue index 96d5ade1ce6..0eb83be535c 100644 --- a/apps/settings/src/components/PersonalInfo/HeadlineSection/HeadlineSection.vue +++ b/apps/settings/src/components/PersonalInfo/HeadlineSection/HeadlineSection.vue @@ -30,11 +30,6 @@ <Headline :headline.sync="primaryHeadline.value" :scope.sync="primaryHeadline.scope" /> - - <VisibilityDropdown - :param-id="accountPropertyId" - :display-id="accountProperty" - :visibility.sync="visibility" /> </section> </template> @@ -43,12 +38,10 @@ import { loadState } from '@nextcloud/initial-state' import Headline from './Headline' import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from '../shared/VisibilityDropdown' -import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' const { headlineMap: { primaryHeadline } } = loadState('settings', 'personalInfoParameters', {}) -const { profileConfig: { headline: { visibility } } } = loadState('settings', 'profileParameters', {}) export default { name: 'HeadlineSection', @@ -56,15 +49,12 @@ export default { components: { Headline, HeaderBar, - VisibilityDropdown, }, data() { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE, - accountPropertyId: ACCOUNT_PROPERTY_ENUM.HEADLINE, primaryHeadline, - visibility, } }, } diff --git a/apps/settings/src/components/PersonalInfo/OrganisationSection/OrganisationSection.vue b/apps/settings/src/components/PersonalInfo/OrganisationSection/OrganisationSection.vue index 57515ad7496..420f79fc8d0 100644 --- a/apps/settings/src/components/PersonalInfo/OrganisationSection/OrganisationSection.vue +++ b/apps/settings/src/components/PersonalInfo/OrganisationSection/OrganisationSection.vue @@ -30,11 +30,6 @@ <Organisation :organisation.sync="primaryOrganisation.value" :scope.sync="primaryOrganisation.scope" /> - - <VisibilityDropdown - :param-id="accountPropertyId" - :display-id="accountProperty" - :visibility.sync="visibility" /> </section> </template> @@ -43,12 +38,10 @@ import { loadState } from '@nextcloud/initial-state' import Organisation from './Organisation' import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from '../shared/VisibilityDropdown' -import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' const { organisationMap: { primaryOrganisation } } = loadState('settings', 'personalInfoParameters', {}) -const { profileConfig: { organisation: { visibility } } } = loadState('settings', 'profileParameters', {}) export default { name: 'OrganisationSection', @@ -56,15 +49,12 @@ export default { components: { Organisation, HeaderBar, - VisibilityDropdown, }, data() { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION, - accountPropertyId: ACCOUNT_PROPERTY_ENUM.ORGANISATION, primaryOrganisation, - visibility, } }, } diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue new file mode 100644 index 00000000000..f680a6a9b65 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue @@ -0,0 +1,100 @@ +<!-- + - @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> + <a + :class="{ disabled }" + href="#profile-visibility" + v-on="$listeners"> + <ChevronDownIcon + class="anchor-icon" + decorative + title="" + :size="22" /> + {{ t('settings', 'Edit your Profile visibility') }} + </a> +</template> + +<script> +import ChevronDownIcon from 'vue-material-design-icons/ChevronDown' + +export default { + name: 'EditProfileAnchorLink', + + components: { + ChevronDownIcon, + }, + + props: { + profileEnabled: { + type: Boolean, + required: true, + }, + }, + + computed: { + disabled() { + return !this.profileEnabled + }, + }, +} +</script> + +<style lang="scss"> +html { + scroll-behavior: smooth; + + @media screen and (prefers-reduced-motion: reduce) { + scroll-behavior: auto; + } +} +</style> + +<style lang="scss" scoped> +a { + display: block; + height: 44px; + width: 290px; + line-height: 44px; + padding: 0 16px; + margin: 14px auto; + border-radius: var(--border-radius-pill); + opacity: 0.4; + background-color: transparent; + + .anchor-icon { + display: inline-block; + vertical-align: middle; + margin-top: 6px; + margin-right: 8px; + } + + &:hover { + opacity: 0.8; + background-color: rgba(127, 127, 127, .25); + } + + &.disabled { + pointer-events: none; + } +} +</style> diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue index 059233c9396..f33b332aadb 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue @@ -33,6 +33,9 @@ :display-name="displayName" :profile-enabled="profileEnabled" :user-id="userId" /> + + <EditProfileAnchorLink + :profile-enabled="profileEnabled" /> </section> </template> @@ -40,6 +43,7 @@ import { loadState } from '@nextcloud/initial-state' import { subscribe, unsubscribe } from '@nextcloud/event-bus' +import EditProfileAnchorLink from './EditProfileAnchorLink' import HeaderBar from '../shared/HeaderBar' import ProfileCheckbox from './ProfileCheckbox' import ProfilePreviewCard from './ProfilePreviewCard' @@ -57,6 +61,7 @@ export default { name: 'ProfileSection', components: { + EditProfileAnchorLink, HeaderBar, ProfileCheckbox, ProfilePreviewCard, 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/shared/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue index 23c02d360bc..5c982fd1f24 100644 --- a/apps/settings/src/components/PersonalInfo/shared/VisibilityDropdown.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue @@ -25,10 +25,11 @@ class="visibility-container" :class="{ disabled }"> <label :for="inputId"> - {{ showDisplayId ? t('settings', '{displayId} visibility', { displayId }) : t('settings', 'Visibility on Profile') }} + {{ t('settings', '{displayId}', { displayId }) }} </label> <Multiselect :id="inputId" + class="visibility-container__multiselect" :options="visibilityOptions" track-by="name" label="label" @@ -48,7 +49,6 @@ import { saveProfileParameterVisibility } from '../../../service/ProfileService' import { validateStringInput } from '../../../utils/validate' import { VISIBILITY_PROPERTY_ENUM } from '../../../constants/ProfileConstants' -const { profileConfig } = loadState('settings', 'profileParameters', {}) const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) export default { @@ -67,17 +67,16 @@ export default { type: String, required: true, }, - showDisplayId: { - type: Boolean, - default: false, + visibility: { + type: String, + required: true, }, }, data() { return { - initialVisibility: profileConfig[this.paramId].visibility, + initialVisibility: this.visibility, profileEnabled, - visibility: profileConfig[this.paramId].visibility, } }, @@ -112,7 +111,7 @@ export default { // This check is needed as the argument is null when selecting the same option if (visibilityObject !== null) { const { name: visibility } = visibilityObject - this.visibility = visibility + this.$emit('update:visibility', visibility) if (validateStringInput(visibility)) { await this.updateVisibility(visibility) @@ -154,8 +153,8 @@ export default { <style lang="scss" scoped> .visibility-container { - margin-top: 16px; - display: grid; + display: flex; + width: max-content; &.disabled { filter: grayscale(1); @@ -172,7 +171,12 @@ export default { label { color: var(--color-text-lighter); - margin-bottom: 3px; + width: 150px; + line-height: 50px; + } + + &__multiselect { + width: 260px; } } </style> diff --git a/apps/settings/src/components/PersonalInfo/RoleSection/RoleSection.vue b/apps/settings/src/components/PersonalInfo/RoleSection/RoleSection.vue index 62ddefece81..4bfaa6b0eb8 100644 --- a/apps/settings/src/components/PersonalInfo/RoleSection/RoleSection.vue +++ b/apps/settings/src/components/PersonalInfo/RoleSection/RoleSection.vue @@ -30,11 +30,6 @@ <Role :role.sync="primaryRole.value" :scope.sync="primaryRole.scope" /> - - <VisibilityDropdown - :param-id="accountPropertyId" - :display-id="accountProperty" - :visibility.sync="visibility" /> </section> </template> @@ -43,12 +38,10 @@ import { loadState } from '@nextcloud/initial-state' import Role from './Role' import HeaderBar from '../shared/HeaderBar' -import VisibilityDropdown from '../shared/VisibilityDropdown' -import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' const { roleMap: { primaryRole } } = loadState('settings', 'personalInfoParameters', {}) -const { profileConfig: { role: { visibility } } } = loadState('settings', 'profileParameters', {}) export default { name: 'RoleSection', @@ -56,15 +49,12 @@ export default { components: { Role, HeaderBar, - VisibilityDropdown, }, data() { return { accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.ROLE, - accountPropertyId: ACCOUNT_PROPERTY_ENUM.ROLE, primaryRole, - visibility, } }, } |