fix(core): profile design and pronouns support

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud · Sep 17, 2024 · 8a4e7c3 · 8a4e7c3
1 parent 26abc86
commit 8a4e7c3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/build/integration/features/provisioning-v1.feature b/build/integration/features/provisioning-v1.feature
@@ -75,7 +75,7 @@ Feature: provisioning
       | role |
       | headline |
       | biography |
-		| pronouns |
+      | pronouns |
       | profile_enabled |
     Given As an "brand-new-user"
     Then user "brand-new-user" has editable fields

diff --git a/core/src/views/Profile.vue b/core/src/views/Profile.vue
@@ -11,7 +11,8 @@
 					<div class="profile__header__container__placeholder" />
 					<div class="profile__header__container__displayname">
 						<h2>{{ displayname || userId }}</h2>
-						<span v-if="pronouns" class="profile__header__container__pronouns">· {{ pronouns }}</span>
+						<span v-if="pronouns">·</span>
+						<span v-if="pronouns" class="profile__header__container__pronouns">{{ pronouns }}</span>
 						<NcButton v-if="isCurrentUser"
 							type="primary"
 							:href="settingsUrl">
@@ -270,6 +271,7 @@ $content-max-width: 640px;
 	overflow-y: auto;
 
 	&__header {
+		display: flex;
 		position: sticky;
 		height: 190px;
 		top: -40px;
@@ -281,7 +283,8 @@ $content-max-width: 640px;
 			align-self: flex-end;
 			width: 100%;
 			max-width: $profile-max-width;
-			margin: 0 auto;
+			margin: 8px auto;
+			row-gap: 8px;
 			display: grid;
 			grid-template-rows: max-content max-content;
 			grid-template-columns: 240px 1fr;
@@ -295,13 +298,18 @@ $content-max-width: 640px;
 				padding-inline: 16px; // same as the status text button, see NcButton
 				width: $content-max-width;
 				height: 45px;
-				margin-block: 100px 0;
+				margin-block: 125px 0;
 				display: flex;
 				align-items: center;
 				gap: 18px;
 
 				h2 {
 					font-size: 30px;
+					margin: 0;
+				}
+
+				span {
+					font-size: 20px;
 				}
 			}
 		}
@@ -405,13 +413,13 @@ $content-max-width: 640px;
 
 			&__container {
 				grid-template-columns: unset;
+				margin-bottom: 110px;
 
 				&__displayname {
-					margin: 80px 20px 0px!important;
-					height: 1em;
+					margin: 80px 20px 0px 0px!important;
 					width: unset;
-					display: unset;
 					text-align: center;
+					padding-inline: 12px;
 				}
 
 				&__edit-button {
@@ -428,6 +436,11 @@ $content-max-width: 640px;
 
 		&__content {
 			display: block;
+
+			 .avatar {
+				// Overlap avatar to top header
+				margin-top: -110px !important;
+			 }
 		}
 
 		&__blocks {

diff --git a/lib/private/Profile/ProfileManager.php b/lib/private/Profile/ProfileManager.php
@@ -223,7 +223,7 @@ public function isProfileFieldVisible(string $profileField, IUser $targetUser, ?
 	/**
 	 * Return the profile parameters of the target user that are visible to the visiting user
 	 * in an associative array
-	 * @return array{userId: string, address?: string|null, biography?: string|null, displayname?: string|null, headline?: string|null, isUserAvatarVisible?: bool, organisation?: string|null, pronouns?: non-falsy-string|null, role?: string|null, actions: list<array{id: string, icon: string, title: string, target: ?string}>}
+	 * @return array{userId: string, address?: string|null, biography?: string|null, displayname?: string|null, headline?: string|null, isUserAvatarVisible?: bool, organisation?: string|null, pronouns?: string|null, role?: string|null, actions: list<array{id: string, icon: string, title: string, target: ?string}>}
 	 */
 	public function getProfileFields(IUser $targetUser, ?IUser $visitingUser): array {
 		$account = $this->accountManager->getAccount($targetUser);

diff --git a/lib/public/Profile/IProfileManager.php b/lib/public/Profile/IProfileManager.php
@@ -54,6 +54,7 @@ interface IProfileManager {
 		IAccountManager::PROPERTY_PHONE => self::VISIBILITY_SHOW_USERS_ONLY,
 		IAccountManager::PROPERTY_TWITTER => self::VISIBILITY_SHOW,
 		IAccountManager::PROPERTY_WEBSITE => self::VISIBILITY_SHOW,
+		IAccountManager::PROPERTY_PRONOUNS => self::VISIBILITY_SHOW,
 	];
 
 	/**
@@ -82,7 +83,7 @@ public function isProfileFieldVisible(string $profileField, IUser $targetUser, ?
 	 * Return the profile parameters of the target user that are visible to the visiting user
 	 * in an associative array
 	 *
-	 * @return array{userId: string, address?: ?string, biography?: ?string, displayname?: ?string, headline?: ?string, isUserAvatarVisible?: bool, organisation?: ?string, role?: ?string, actions: list<array{id: string, icon: string, title: string, target: ?string}>}
+	 * @return array{userId: string, address?: string|null, biography?: string|null, displayname?: string|null, headline?: string|null, isUserAvatarVisible?: bool, organisation?: string|null, pronouns?: string|null, role?: string|null, actions: list<array{id: string, icon: string, title: string, target: ?string}>}
 	 * @since 28.0.0
 	 */
 	public function getProfileFields(IUser $targetUser, ?IUser $visitingUser): array;