Revamp profile visibility section

apps/settings/lib/Settings/Personal/PersonalInfo.php

@@ -187,7 +187,7 @@ public function getForm(): TemplateResponse {
 		];
 
 		$profileParameters = [
-			'profileConfig' => $this->profileManager->getProfileConfig($user, $user),
+			'profileConfig' => $this->profileManager->getProfileConfigWithMetadata($user, $user),
 		];
 
 		$this->initialStateService->provideInitialState('personalInfoParameters', $personalInfoParameters);

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,28 +38,23 @@ 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',
 
 	components: {
 		Biography,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.BIOGRAPHY,
 			primaryBiography,
-			visibility,
 		}
 	},
 }

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,31 +46,26 @@ 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',
 
 	components: {
 		DisplayName,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.DISPLAYNAME,
 			displayNameChangeSupported,
 			primaryDisplayName,
-			visibility,
 		}
 	},
 

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,35 +68,30 @@ 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',
 
 	components: {
 		HeaderBar,
 		Email,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.EMAIL,
 			additionalEmails,
 			displayNameChangeSupported,
 			primaryEmail,
 			savePrimaryEmailScope,
 			notificationEmail,
-			visibility,
 		}
 	},
 

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,28 +38,23 @@ 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',
 
 	components: {
 		Headline,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.HEADLINE,
 			primaryHeadline,
-			visibility,
 		}
 	},
 }

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,28 +38,23 @@ 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',
 
 	components: {
 		Organisation,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.ORGANISATION,
 			primaryOrganisation,
-			visibility,
 		}
 	},
 }

apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue

@@ -0,0 +1,100 @@
+<!--
+	- @copyright 2021 Christopher Ng <[email protected]>
+	-
+	- @author Christopher Ng <[email protected]>
+	-
+	- @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>

apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue

@@ -33,13 +33,17 @@
 			:display-name="displayName"
 			:profile-enabled="profileEnabled"
 			:user-id="userId" />
+
+		<EditProfileAnchorLink
+			:profile-enabled="profileEnabled" />
 	</section>
 </template>
 
 <script>
 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,