fix(platform): add visual improvements to Settings Generator (#13046)

* fix(platform): add visual improvements to Settings Generator * chore: lint test * chore: lint test
SAP · Feb 19, 2025 · 65ea013 · 65ea013
1 parent 25a5e4f
commit 65ea013
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 19 deletions.
diff --git a/...enerator/examples/custom-control/settings-generator-custom-control-example.component.html b/...enerator/examples/custom-control/settings-generator-custom-control-example.component.html
@@ -1,4 +1,4 @@
-<fdp-settings-generator [settings]="schema"></fdp-settings-generator>
+<fdp-settings-generator [settings]="schema" height="600px"></fdp-settings-generator>
 
 <div fd-bar barDesign="footer">
     <div fd-bar-right>

diff --git a/...-generator/examples/custom-layout/settings-generator-custom-layout-example.component.html b/...-generator/examples/custom-layout/settings-generator-custom-layout-example.component.html
@@ -78,7 +78,7 @@
     </div>
 </ng-template>
 <fdp-message-popover-form-wrapper #messagePopoverWrapper>
-    <fdp-settings-generator [settings]="schema"></fdp-settings-generator>
+    <fdp-settings-generator [settings]="schema" height="600px"></fdp-settings-generator>
 </fdp-message-popover-form-wrapper>
 <div fd-bar barDesign="footer">
     <div fd-bar-left>

diff --git a/...orm/settings-generator/examples/default/settings-generator-default-example.component.html b/...orm/settings-generator/examples/default/settings-generator-default-example.component.html
@@ -1,6 +1,6 @@
 <ng-template #privacyContent>
     <div [style.padding.rem]="1">
-        <h1 fd-title>Privacy Policy</h1>
+        <h3 fd-title>Privacy Policy</h3>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros quam, suscipit vel mauris sit amet, viverra
             accumsan purus. Duis aliquam eu turpis ut imperdiet. Suspendisse tempus quam pharetra, rutrum mi non,
@@ -41,7 +41,7 @@ <h1 fd-title>Privacy Policy</h1>
 
 <ng-template #termsOfServiceContent>
     <div [style.padding.rem]="1">
-        <h1 fd-title>Terms Of Service</h1>
+        <h3 fd-title>Terms Of Service</h3>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros quam, suscipit vel mauris sit amet, viverra
             accumsan purus. Duis aliquam eu turpis ut imperdiet. Suspendisse tempus quam pharetra, rutrum mi non,
@@ -80,7 +80,7 @@ <h1 fd-title>Terms Of Service</h1>
     </div>
 </ng-template>
 
-<fdp-settings-generator [settings]="schema"></fdp-settings-generator>
+<fdp-settings-generator [settings]="schema" height="600px"></fdp-settings-generator>
 
 <div fd-bar barDesign="footer">
     <div fd-bar-right>

diff --git a/...tform/settings-generator/examples/dialog/settings-generator-dialog-example.component.html b/...tform/settings-generator/examples/dialog/settings-generator-dialog-example.component.html
@@ -1,5 +1,5 @@
 <ng-template #privacyContent>
-    <h1 fd-title>Privacy Policy</h1>
+    <h3 fd-title>Privacy Policy</h3>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros quam, suscipit vel mauris sit amet, viverra
         accumsan purus. Duis aliquam eu turpis ut imperdiet. Suspendisse tempus quam pharetra, rutrum mi non, commodo
@@ -37,7 +37,7 @@ <h1 fd-title>Privacy Policy</h1>
 </ng-template>
 
 <ng-template #termsOfServiceContent>
-    <h1 fd-title>Terms Of Service</h1>
+    <h3 fd-title>Terms Of Service</h3>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros quam, suscipit vel mauris sit amet, viverra
         accumsan purus. Duis aliquam eu turpis ut imperdiet. Suspendisse tempus quam pharetra, rutrum mi non, commodo

diff --git a/...latform/settings-generator/examples/dialog/settings-generator-dialog-example.component.ts b/...latform/settings-generator/examples/dialog/settings-generator-dialog-example.component.ts
@@ -88,6 +88,7 @@ export class ExampleUserService {
         `
             .fd-dialog__body fdp-message-popover-form-wrapper {
                 min-height: 100%;
+                height: 100%;
                 display: flex;
                 align-items: stretch;
             }
@@ -140,7 +141,7 @@ export class SettingsGeneratorDialogExampleComponent {
     openDialog(dialog: TemplateRef<any>): void {
         const dialogRef = this._dialogService.open(dialog, {
             responsivePadding: false,
-            minWidth: '55rem',
+            minWidth: '0',
             width: '80vw',
             maxWidth: '75rem',
             minHeight: '40rem',

diff --git a/...erator/examples/message-popover/settings-generator-message-popover-example.component.html b/...erator/examples/message-popover/settings-generator-message-popover-example.component.html
@@ -1,6 +1,6 @@
 <ng-template #privacyContent>
     <div [style.padding.rem]="1">
-        <h1 fd-title>Privacy Policy</h1>
+        <h3 fd-title>Privacy Policy</h3>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros quam, suscipit vel mauris sit amet, viverra
             accumsan purus. Duis aliquam eu turpis ut imperdiet. Suspendisse tempus quam pharetra, rutrum mi non,
@@ -41,7 +41,7 @@ <h1 fd-title>Privacy Policy</h1>
 
 <ng-template #termsOfServiceContent>
     <div [style.padding.rem]="1">
-        <h1 fd-title>Terms Of Service</h1>
+        <h3 fd-title>Terms Of Service</h3>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros quam, suscipit vel mauris sit amet, viverra
             accumsan purus. Duis aliquam eu turpis ut imperdiet. Suspendisse tempus quam pharetra, rutrum mi non,
@@ -80,7 +80,7 @@ <h1 fd-title>Terms Of Service</h1>
     </div>
 </ng-template>
 <fdp-message-popover-form-wrapper #messagePopoverWrapper>
-    <fdp-settings-generator [settings]="schema"></fdp-settings-generator>
+    <fdp-settings-generator [settings]="schema" height="600px"></fdp-settings-generator>
 </fdp-message-popover-form-wrapper>
 <div fd-bar barDesign="footer">
     <div fd-bar-left>

diff --git a/...ayouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.html b/...ayouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.html
@@ -6,9 +6,9 @@
     [style.max-width]="_mobileSidebarVisible ? null : _sidebarWidth.maxWidth"
 >
     <div class="fdp-settings-generator__search-header">
-        <h3 fd-title class="fdp-settings-generator__title">
+        <h5 fd-title class="fdp-settings-generator__title">
             {{ 'platformSettingsGenerator.settingsLabel' | fdTranslate }}
-        </h3>
+        </h5>
         <!-- TODO: implement search input
         @if (_displaySettingsSearchInput()) {
             <fd-input-group

diff --git a/.../layouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.ts b/.../layouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.ts
@@ -147,10 +147,13 @@ export class SettingsGeneratorSidebarLayoutComponent
                 .pipe(startWith(null), debounceTime(30), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
                     const { width } = this._settingsGenerator.elementRef.nativeElement.getBoundingClientRect();
+
                     const isMobile = width <= this._config.sidebar.mobileBreakpoint;
+
                     if (this._isMobile === isMobile) {
                         return;
                     }
+
                     this._settingsGeneratorService.setMobileState(isMobile);
                     this._isMobile = isMobile;
 
@@ -164,6 +167,11 @@ export class SettingsGeneratorSidebarLayoutComponent
                         this._setSelectedIndex(this._selectedIndex > -1 ? this._selectedIndex : 0);
                         this._initialSelectedItemSet = true;
                     }
+
+                    if (!this._isMobile && this._selectedIndex === -1) {
+                        this._setSelectedIndex(0);
+                    }
+
                     this._cdr.detectChanges();
                 });
         }

diff --git a/...m/settings-generator/settings-generator-content/settings-generator-content.component.html b/...m/settings-generator/settings-generator-content/settings-generator-content.component.html
@@ -1,21 +1,21 @@
-<h3 fd-title [wrap]="!!settings?.wrapSectionTitle" class="fdp-settings-generator__title">
+<h5 fd-title [wrap]="!!settings?.wrapSectionTitle" class="fdp-settings-generator__title">
     @if (mobile) {
-        <button fd-button glyph="menu2" fdType="transparent" (click)="goBack.emit()"></button>
+        <button fd-button glyph="navigation-left-arrow" fdType="transparent" (click)="goBack.emit()"></button>
     }
     @if (settings?.title | fdkAsyncOrSync; as settingsTitle) {
         {{ settingsTitle }}
     } @else {
         <fd-skeleton height="40px" type="rectangle" width="40%" textLines="1" [style.margin]="'auto 0'"></fd-skeleton>
     }
-</h3>
+</h5>
 <ng-template #tabbedLayout>
     <fdp-icon-tab-bar
         class="fdp-settings-generator__tabs-container"
         [tabsConfig]="_tabs$()"
         (iconTabSelected)="changeTab($event)"
     ></fdp-icon-tab-bar>
     @for (group of _groups$(); track group) {
-        <div [attr.hidden]="$index === _activeTab$() ? null : true">
+        <div [attr.hidden]="$index === _activeTab$() ? null : true" class="fdp-settings-generator__content-container">
             <fdp-settings-generator-section
                 [groupName]="$any(settings).id"
                 [items]="group"

diff --git a/libs/platform/settings-generator/settings-generator.component.scss b/libs/platform/settings-generator/settings-generator.component.scss
@@ -18,10 +18,17 @@ $block: fdp-settings-generator;
 
         &-section {
             display: block;
+            height: 100%;
             &[hidden] {
                 display: none;
             }
         }
+
+        &-container {
+            display: block;
+            height: 100%;
+            overflow-y: auto;
+        }
     }
 
     &__sidebar-layout {
@@ -32,7 +39,11 @@ $block: fdp-settings-generator;
 
         .#{$block}__title {
             background: var(--sapObjectHeader_Background);
-            padding: 1.5rem 1rem 1rem;
+            padding: 1rem 1rem;
+
+            &:not(:has(+ .#{$block}__tabs-container)) {
+                box-shadow: var(--sapContent_HeaderShadow);
+            }
         }
         .#{$block}__search-header {
             .#{$block}__search-input {

diff --git a/libs/platform/settings-generator/settings-generator.component.ts b/libs/platform/settings-generator/settings-generator.component.ts
@@ -10,6 +10,7 @@ import {
     Inject,
     inject,
     Injector,
+    input,
     Input,
     OnDestroy,
     ViewChild,
@@ -43,7 +44,11 @@ import { FDP_SETTINGS_GENERATOR, FDP_SETTINGS_GENERATOR_CONFIG } from './tokens'
             useExisting: SettingsGeneratorComponent
         }
     ],
-    standalone: true
+    standalone: true,
+    host: {
+        '[style.width]': 'width()',
+        '[style.height]': 'height()'
+    }
 })
 export class SettingsGeneratorComponent implements SettingsGenerator, AfterViewInit, OnDestroy, HasElementRef {
     /** @hidden */
@@ -75,6 +80,16 @@ export class SettingsGeneratorComponent implements SettingsGenerator, AfterViewI
         return this._settings;
     }
 
+    /**
+     * Container height.
+     */
+    height = input<string>();
+
+    /**
+     * Container width.
+     */
+    width = input<string>();
+
     /** @hidden */
     private _settings: Nullable<SettingsModel>;