Create <h3> headings for profile page. Replace <label> which have…

… no conncted `<input>` with `<h3>` heading Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
nextcloud · Mar 24, 2023 · 1b99adb · 1b99adb
1 parent 83aef8e
commit 1b99adb
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -56,8 +56,7 @@ input {
 .personal-settings-setting-box {
 	.section {
 		padding: 10px 30px;
-
-		h3 {
+		.headerbar-label {
 			margin-bottom: 0;
 		}
 

diff --git a/apps/settings/js/federationsettingsview.js b/apps/settings/js/federationsettingsview.js
@@ -82,7 +82,7 @@
 			];
 
 			_.each(this._inputFields, function(field) {
-				var $icon = self.$('#' + field + 'form h3 > .federation-menu');
+				var $icon = self.$('#' + field + 'form .headerbar-label > .federation-menu');
 				var excludedScopes = []
 
 				if (fieldsWithV2Private.indexOf(field) === -1) {
@@ -245,7 +245,7 @@
 		},
 
 		_setFieldScopeIcon: function(field, scope) {
-			var $icon = this.$('#' + field + 'form > h3 .icon-federation-menu');
+			var $icon = this.$('#' + field + 'form > .headerbar-label .icon-federation-menu');
 
 			$icon.removeClass('icon-phone');
 			$icon.removeClass('icon-password');

diff --git a/apps/settings/src/components/PersonalInfo/DetailsSection.vue b/apps/settings/src/components/PersonalInfo/DetailsSection.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<section>
-		<HeaderBar :readable="t('settings', 'Details')" />
+		<HeaderBar :is-heading="true" :readable="t('settings', 'Details')" />
 
 		<div class="details">
 			<div class="details__groups">

diff --git a/...ettings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/...ettings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
@@ -24,7 +24,7 @@
 	<!-- TODO remove this inline margin placeholder once the settings layout is updated -->
 	<section id="profile-visibility"
 		:style="{ marginLeft }">
-		<HeaderBar :readable="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.') }}

diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -21,8 +21,12 @@
 -->
 
 <template>
-	<h3 :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
-		<label :for="inputId">
+	<component :is="isHeading ? `h3` : `div`" class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
+		<span v-if="isHeading">
+			<!-- Already translated as required by prop validator -->
+			{{ readable }}
+		</span>
+		<label v-else :for="inputId">
 			<!-- Already translated as required by prop validator -->
 			{{ readable }}
 		</label>
@@ -45,7 +49,7 @@
 				{{ t('settings', 'Add') }}
 			</NcButton>
 		</template>
-	</h3>
+	</component>
 </template>
 
 <script>
@@ -93,6 +97,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		isHeading: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	data() {
@@ -124,7 +132,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	h3 {
+	.headerbar-label {
+		font-weight: normal;
 		display: inline-flex;
 		width: 100%;
 		margin: 12px 0 0 0;