fix(ui5-view-settings-dialog): visual alignment (#4867)

The use of a `ui5-bar` in the header parts has been removed. The header is aligned with the content, the footer button is aligned and unnecessary padding has been removed the content is alignment. Fixes: #4102 #3744 #4838
SAP · Mar 28, 2022 · 8a628df · 8a628df
1 parent 2e3f428
commit 8a628df
Show file tree

Hide file tree

Showing 18 changed files with 111 additions and 52 deletions.
diff --git a/packages/fiori/src/ViewSettingsDialog.hbs b/packages/fiori/src/ViewSettingsDialog.hbs
@@ -1,51 +1,56 @@
 <ui5-dialog
+	dir="{{effectiveDir}}"
 	aria-label="{{_dialogTitle}}"
 	@ui5-after-open={{_focusRecentlyUsedControl}}
 	@ui5-before-close={{_restoreConfirmedOnEscape}}
 	?stretch={{_isPhone}}
 >
 
 	<div slot="header" class="ui5-vsd-header">
-		<ui5-bar>
-			<div slot="startContent" class="ui5-vsd-start">
+		<div class="ui5-vsd-header-container">
+			<div class="ui5-vsd-header-start">
 				{{#if showBackButton}}
 					<ui5-button
 						design="Transparent"
 						icon="nav-back"
 						class="ui5-vsd-back-button"
 						@click="{{_navigateToFilters}}"
 					></ui5-button>
-					<ui5-title>{{_filterByTitle}}</ui5-title>
-				{{else}}
-					<div class="ui5-vsd-bar-title">
-						<ui5-title class="ui5-vsd-title" id="{{_id}}-label">{{_dialogTitle}}</ui5-title>
-						{{#if hasPagination}}
-							<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
-									<ui5-segmented-button-item
-										?pressed="{{isModeSort}}"
-										icon="sort"
-										mode="Sort"
-									></ui5-segmented-button-item>
-									<ui5-segmented-button-item
-										?pressed="{{isModeFilter}}"
-										icon="filter"
-										mode="Filter"
-									></ui5-segmented-button-item>
-							</ui5-segmented-button>
-						{{/if}}
-					</div>
 				{{/if}}
+				<ui5-title class="ui5-vsd-title" id="{{_id}}-label">{{_title}}</ui5-title>
+			</div>
+			<div class="ui5-vsd-header-end">
+				<ui5-button
+					design="Transparent"
+					@click="{{_resetSettings}}"
+					?disabled={{_disableResetButton}}
+					>
+						{{_resetButtonLabel}}
+				</ui5-button>
 			</div>
-			<ui5-button
-				slot="endContent"
-				design="Transparent"
-				@click="{{_resetSettings}}"
-				?disabled={{_disableResetButton}}
-				reset-button>{{_resetButtonLabel}}</ui5-button>
-		</ui5-bar>
+		</div>
+		{{#unless showBackButton}}
+			{{#if hasPagination}}
+				<div class="ui5-vsd-sub-header-container">
+					<div class="ui5-vsd-sub-header">
+						<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
+								<ui5-segmented-button-item
+									?pressed="{{isModeSort}}"
+									icon="sort"
+									mode="Sort"
+								></ui5-segmented-button-item>
+								<ui5-segmented-button-item
+									?pressed="{{isModeFilter}}"
+									icon="filter"
+									mode="Filter"
+								></ui5-segmented-button-item>
+						</ui5-segmented-button>
+					</div>
+				</div>
+			{{/if}}
+		{{/unless}}
 	</div>
-
-	<div class="ui5-vsd-content">
+	<div class="ui5-vsd-content" ?expand-content="{{expandContent}}">
 		{{#if shouldBuildSort}}
 			{{#if isModeSort}}
 				<div class="ui5-vsd-sort">

diff --git a/packages/fiori/src/ViewSettingsDialog.js b/packages/fiori/src/ViewSettingsDialog.js
@@ -112,6 +112,7 @@ const metadata = {
 		 */
 		_filterStepTwo: {
 			type: Boolean,
+			noAttribute: true,
 		},
 	},
 	slots: /** @lends  sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
@@ -312,8 +313,7 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	get _dialogTitle() {
-		const currentModeText = this._currentMode === ViewSettingsDialogMode.Sort ? VSD_DIALOG_TITLE_SORT : VSD_FILTER_BY;
-		return ViewSettingsDialog.i18nBundle.getText(currentModeText);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_DIALOG_TITLE_SORT);
 	}
 
 	get _okButtonLabel() {
@@ -356,6 +356,12 @@ class ViewSettingsDialog extends UI5Element {
 		return !this.sortDescending;
 	}
 
+	get _title() {
+		return this.showBackButton
+			? this._filterByTitle
+			: this._dialogTitle;
+	}
+
 	/**
 	 * Determines disabled state of the <code>Reset</code> button.
 	 */
@@ -434,6 +440,10 @@ class ViewSettingsDialog extends UI5Element {
 		];
 	}
 
+	get expandContent() {
+		return this._filterStepTwo || !this.hasPagination;
+	}
+
 	get isModeSort() {
 		return this._currentMode === ViewSettingsDialogMode.Sort;
 	}

diff --git a/packages/fiori/src/themes/ViewSettingsDialog.css b/packages/fiori/src/themes/ViewSettingsDialog.css
@@ -1,36 +1,46 @@
 [on-desktop] .ui5-vsd-content {
-	height: 375px;
+	height: var(--_ui5_vsd_content_height);
 	min-width: 350px;
 }
 
-.ui5-vsd-header {
-	width: 100%;
+[on-desktop] [expand-content].ui5-vsd-content {
+	height: var(--_ui5_vsd_expand_content_height);
+	min-width: 350px;
 }
 
-.ui5-vsd-header > [ui5-bar] {
-	height: 4rem;
-	box-shadow: none;
+.ui5-vsd-header {
+	width: 100%;
+	padding-bottom: 0.25rem;
 }
 
 .ui5-vsd-content {
 	margin: 0 0.1px 0 -1rem;
 }
 
 .ui5-vsd-title {
-	margin-bottom: 0.3rem;
 	font-size: var(--sapFontHeader5Size);
 }
 
-.ui5-vsd-start {
+.ui5-vsd-header-container {
 	display: flex;
-    justify-content: center;
-    align-items: center;
+	align-items: center;
+	justify-content: space-between;
+	height: var(--_ui5_vsd_header_container);
+	line-height: var(--_ui5_vsd_header_container);
 }
 
-.ui5-vsd-bar-title {
+.ui5-vsd-header-end {
 	display: flex;
-	flex-direction: column;
-	margin-left: .5rem;
+}
+
+.ui5-vsd-sub-header {
+	height: var(--_ui5_vsd_sub_header_container_height);
+	line-height: var(--_ui5_vsd_sub_header_container_height);
+}
+
+.ui5-vsd-header-start {
+	display: flex;
+	align-items: center;
 }
 
 .ui5-vsd-back-button {
@@ -41,9 +51,7 @@
 	width: 100%;
 	display: flex;
 	justify-content: flex-end;
-	margin: 0.1875rem 1rem;
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
+	margin: 0.1875rem 0;
 }
 
 .ui5-vsd-footer [ui5-button]:first-child {
@@ -65,3 +73,14 @@
 	padding-bottom: 0;
 }
 
+:host [ui5-li]::part(native-li) {
+	padding-left: var(--_ui5_vsd_content_li_padding);
+}
+
+[dir="rtl"] [ui5-li]::part(native-li) {
+	padding-right: var(--_ui5_vsd_content_li_padding);
+}
+
+[dir="rtl"] .ui5-vsd-back-button {
+	margin-left: .5rem;
+}
diff --git a/packages/fiori/src/themes/base/ViewSettingsDialog-parameters.css b/packages/fiori/src/themes/base/ViewSettingsDialog-parameters.css
@@ -0,0 +1,7 @@
+:root {
+	--_ui5_vsd_header_container: 2.75rem;
+	--_ui5_vsd_sub_header_container_height: 2.75rem;
+	--_ui5_vsd_content_li_padding: 0.375rem;
+	--_ui5_vsd_content_height: 23.4375rem;
+	--_ui5_vsd_expand_content_height: 26.1875rem;
+}
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "../base/WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "../base/WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "../base/WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -9,5 +9,6 @@
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
 @import "../base/UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
 @import "./NotificationListItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -9,5 +9,6 @@
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
 @import "../base/UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
 @import "./NotificationListItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -6,4 +6,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "../base/WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -8,4 +8,5 @@
 @import "../base/ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
+@import "../base/ViewSettingsDialog-parameters.css";
 @import "./WizardTab-parameters.css";
diff --git a/packages/fiori/test/specs/ViewSettingsDialog.spec.js b/packages/fiori/test/specs/ViewSettingsDialog.spec.js
@@ -117,8 +117,8 @@ describe("ViewSettingsDialog general interaction", () => {
 		const viewSettingsDialog = await browser.$("#vsdFilter");
 		await btnOpenDialog.click();
 
-		const vsdTitle = await viewSettingsDialog.shadow$("ui5-bar").$(".ui5-vsd-title").getText();
-		assert.strictEqual(vsdTitle, "Filter By", "Only filters are presented, when there are no sort items");
+		const vsdTitle = await viewSettingsDialog.shadow$(".ui5-vsd-header-start").$(".ui5-vsd-title").getText();
+		assert.strictEqual(vsdTitle, "View Settings", "Only filters are presented, when there are no sort items");
 
 		await browser.keys("Escape");
 	});
@@ -128,7 +128,7 @@ describe("ViewSettingsDialog general interaction", () => {
 		const viewSettingsDialog = await browser.$("#vsdSort");
 		await btnOpenDialog.click();
 
-		const vsdTitle = await viewSettingsDialog.shadow$("ui5-bar").$(".ui5-vsd-title").getText();
+		const vsdTitle = await viewSettingsDialog.shadow$(".ui5-vsd-header-start").$(".ui5-vsd-title").getText();
 		assert.strictEqual(vsdTitle, "View Settings", "Only sort options are presented, when there are no filters");
 
 		await browser.keys("Escape");
@@ -139,7 +139,7 @@ describe("ViewSettingsDialog general interaction", () => {
 		const viewSettingsDialog = await browser.$("#vsdSort");
 		await btnOpenDialog.click();
 
-		const vsdSegmentedButton = await viewSettingsDialog.shadow$("ui5-bar").$("ui5-segmented-button");
+		const vsdSegmentedButton = await viewSettingsDialog.shadow$(".ui5-vsd-header-start").$("ui5-segmented-button");
 		assert.strictEqual(await vsdSegmentedButton.isDisplayed(), false, "Segmented button is not built when there is only set of items");
 
 		await browser.keys("Escape");

diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -308,4 +308,10 @@
 	--_ui5_timeline_tli_indicator_before_right: -0.5rem;
 	--_ui5_timeline_tli_indicator_before_without_icon_bottom: -0.75rem;
 	--_ui5_timeline_tli_indicator_before_without_icon_right: -0.8125rem;
+
+	/* ViewSettingsDialog */
+	--_ui5_vsd_header_container: 2.5rem;
+	--_ui5_vsd_sub_header_container_height: 2rem;
+	--_ui5_vsd_header_height: 4rem;
+	--_ui5_vsd_expand_content_height: 25.4375rem;
 }