fix(platform): smart filter bar styling fixes

SAP · Jan 12, 2022 · 00d3eef · 00d3eef
1 parent 390c7f8
commit 00d3eef
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 11 deletions.
diff --git a/...platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html b/...platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html
@@ -1,5 +1,7 @@
 <fdp-smart-filter-bar [subject]="subject"></fdp-smart-filter-bar>
-
+<br />
+<h4 fd-title>Line Items</h4>
+<br />
 <fdp-table
     fdp-smart-filter-bar-subject
     #subject="fdp-smart-filter-bar-subject"

diff --git a/...-smart-filter-bar-examples/platform-smart-filter-bar-custom-filter-example.component.html b/...-smart-filter-bar-examples/platform-smart-filter-bar-custom-filter-example.component.html
@@ -1,5 +1,7 @@
 <fdp-smart-filter-bar [subject]="subject"></fdp-smart-filter-bar>
-
+<br />
+<h4 fd-title>Line Items</h4>
+<br />
 <fdp-table
     fdp-smart-filter-bar-subject
     #subject="fdp-smart-filter-bar-subject"

diff --git a/...-smart-filter-bar-examples/platform-smart-filter-bar-custom-labels-example.component.html b/...-smart-filter-bar-examples/platform-smart-filter-bar-custom-labels-example.component.html
@@ -3,7 +3,9 @@
     [defineStrategyLabels]="defineStrategyLabels"
     [filtersVisibilityCategoryLabels]="filtersVisibilityCategoryLabels"
 ></fdp-smart-filter-bar>
-
+<br />
+<h4 fd-title>Line Items</h4>
+<br />
 <fdp-table
     fdp-smart-filter-bar-subject
     #subject="fdp-smart-filter-bar-subject"

diff --git a/...m-smart-filter-bar-examples/platform-smart-filter-bar-dynamic-page-example.component.html b/...m-smart-filter-bar-examples/platform-smart-filter-bar-dynamic-page-example.component.html
@@ -40,7 +40,7 @@
             [collapsed]="false"
             (collapsedChange)="onCollapseChange()"
         >
-            <fdp-smart-filter-bar [subject]="subject"></fdp-smart-filter-bar>
+            <fdp-smart-filter-bar transparent="true" [subject]="subject"></fdp-smart-filter-bar>
         </fd-dynamic-page-subheader>
         <fd-dynamic-page-content>
             <fdp-table

diff --git a/...orm-smart-filter-bar-examples/platform-smart-filter-bar-observable-example.component.html b/...orm-smart-filter-bar-examples/platform-smart-filter-bar-observable-example.component.html
@@ -1,5 +1,7 @@
 <fdp-smart-filter-bar [subject]="subject"></fdp-smart-filter-bar>
-
+<br />
+<h4 fd-title>Line Items</h4>
+<br />
 <fdp-table
     fdp-smart-filter-bar-subject
     #subject="fdp-smart-filter-bar-subject"

diff --git a/...app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar.module.ts b/...app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar.module.ts
@@ -12,6 +12,7 @@ import { PlatformDatePickerModule } from '@fundamental-ngx/platform/form';
 import { BreadcrumbModule } from '@fundamental-ngx/core/breadcrumb';
 import { ToolbarModule } from '@fundamental-ngx/core/toolbar';
 import { BarModule } from '@fundamental-ngx/core/bar';
+import { TitleModule } from '@fundamental-ngx/core/title';
 
 import { ApiComponent } from '../../../documentation/core-helpers/api/api.component';
 import { API_FILES } from '../../api-files';
@@ -55,7 +56,8 @@ const routes: Routes = [
         DynamicPageModule,
         BreadcrumbModule,
         ToolbarModule,
-        BarModule
+        BarModule,
+        TitleModule
     ],
     exports: [RouterModule],
     declarations: [

diff --git a/libs/platform/src/lib/form/form-generator/form-generator/form-generator.component.html b/libs/platform/src/lib/form/form-generator/form-generator/form-generator.component.html
@@ -76,7 +76,7 @@
                     </fdp-form-field-group>
                 </ng-template>
             </ng-container>
-            <fdp-form-field [column]="1" [rank]="formControlItems.length + 1">
+            <fdp-form-field *ngIf="!noAdditionalContent" [column]="1" [rank]="formControlItems.length + 1">
                 <!-- For user-defined elements, like submit button -->
                 <ng-container *ngTemplateOutlet="renderer"></ng-container>
             </fdp-form-field>

diff --git a/libs/platform/src/lib/form/form-generator/form-generator/form-generator.component.ts b/libs/platform/src/lib/form/form-generator/form-generator/form-generator.component.ts
@@ -140,13 +140,21 @@ export class FormGeneratorComponent implements OnDestroy {
     @Input()
     gapColumnLayout: ColumnLayout = DefaultGapLayout;
 
-    /** Whether or not all form items should have identical layout provided for form group. */
+    /** Whether all form items should have identical layout provided for form group. */
     @Input()
     unifiedLayout = true;
 
     @Input()
     inlineColumnLayout: ColumnLayout = DefaultVerticalFieldLayout;
 
+    /**
+     * @hidden
+     * Removes extra empty row.
+     * TODO: remove after #7533 has been fixed.
+     */
+    @Input()
+    noAdditionalContent = false;
+
     /**
      * @description Event which notifies parent component that the form has been successfuly created
      * and all controls are in place.

diff --git a/...ents/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.html b/...ents/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.html
@@ -19,6 +19,7 @@ <h4 [headerSize]="4" fd-title>{{ config.header }}</h4>
                             [formItems]="condition"
                             [unifiedLayout]="false"
                             columnLayout="XL3-L3-M3-S3"
+                            [noAdditionalContent]="true"
                         ></fdp-form-generator>
                     </div>
                     <div class="fdp-smart-filter-bar__actions-column" colGrow fdLayoutGridCol>

diff --git a/...onents/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.ts b/...onents/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.ts
@@ -11,7 +11,6 @@ import { getSelectItemValue } from '../../helpers';
 @Component({
     selector: 'fdp-smart-filter-bar-conditions-dialog',
     templateUrl: './smart-filter-bar-conditions-dialog.component.html',
-    styleUrls: ['./smart-filter-bar-conditions-dialog.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })

diff --git a/libs/platform/src/lib/smart-filter-bar/smart-filter-bar.component.html b/libs/platform/src/lib/smart-filter-bar/smart-filter-bar.component.html
@@ -34,10 +34,11 @@
     </fd-toolbar>
 </div>
 
-<div *ngIf="_showFilterBar">
+<div class="fdp-smart-filter-bar__filters" *ngIf="_showFilterBar">
     <fdp-form-generator
         (formCreated)="_onFormCreated()"
         (formSubmitted)="_onFormSubmitted($event)"
+        [noAdditionalContent]="true"
         [formItems]="_formItems"
         [inlineColumnLayout]="filtersColumnLayout"
     ></fdp-form-generator>

diff --git a/libs/platform/src/lib/smart-filter-bar/smart-filter-bar.component.scss b/libs/platform/src/lib/smart-filter-bar/smart-filter-bar.component.scss
@@ -0,0 +1,71 @@
+$fd-block: fdp-smart-filter-bar;
+
+@mixin fd-responsive-paddings() {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    @media (min-width: 600px) {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+}
+
+.#{$fd-block} {
+    display: block;
+    box-shadow: var(--sapContent_HeaderShadow);
+    background-color: var(--sapObjectHeader_Background);
+
+    &--transparent {
+        background-color: var(--sapToolbar_Background);
+        box-shadow: none;
+    }
+
+    .fd-toolbar {
+        &--title {
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+            height: 3rem;
+            min-height: 3rem;
+            border-bottom: none;
+            @include fd-responsive-paddings();
+        }
+
+        fdp-search-field {
+            min-width: 15.5rem;
+        }
+    }
+
+    .#{$fd-block}__filters {
+        @include fd-responsive-paddings();
+    }
+
+    .fd-container.fd-form-layout-grid-container {
+        padding: 0;
+
+        .fd-row {
+            .fd-col__form-group {
+                padding-left: 0.25rem;
+                padding-right: 0.25rem;
+            }
+        }
+    }
+
+    &__conditions-dialog {
+        .#{$fd-block}__actions-column {
+            min-width: auto;
+            flex: 0 0 auto;
+        }
+
+        .fd-popover-custom {
+            display: block;
+        }
+
+        .fd-dialog__body {
+            background-color: var(--sapBackgroundColor, #f7f7f7);
+        }
+
+        .fd-container.fd-form-layout-grid-container,
+        .fd-container.fd-form-layout-grid-container .fd-row .fd-col__form-group {
+            padding: 0 1rem;
+        }
+    }
+}
diff --git a/libs/platform/src/lib/smart-filter-bar/smart-filter-bar.component.ts b/libs/platform/src/lib/smart-filter-bar/smart-filter-bar.component.ts
@@ -43,6 +43,7 @@ import { SmartFilterBar } from './smart-filter-bar.class';
 import { SmartFilterBarConditionFieldComponent } from './components/smart-filter-bar-condition-field/smart-filter-bar-condition-field.component';
 import { getSelectItemValue } from './helpers';
 import { SmartFilterBarStrategyLabels } from './interfaces/strategy-labels.type';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 const defaultColumnsLayout = { S: 12, M: 6, L: 4, XL: 3 };
 
@@ -65,9 +66,14 @@ const smartFilterBarProvider: Provider = {
 @Component({
     selector: 'fdp-smart-filter-bar',
     templateUrl: './smart-filter-bar.component.html',
+    styleUrls: ['./smart-filter-bar.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [smartFilterBarProvider]
+    providers: [smartFilterBarProvider],
+    host: {
+        class: 'fdp-smart-filter-bar',
+        '[class.fdp-smart-filter-bar--transparent]': 'transparent'
+    }
 })
 export class SmartFilterBarComponent implements OnDestroy, SmartFilterBar {
     /**
@@ -93,9 +99,24 @@ export class SmartFilterBarComponent implements OnDestroy, SmartFilterBar {
     @Input()
     hideFiltersLabel = 'Hide filters';
 
+    /**
+     * 'Filters' button label.
+     */
     @Input()
     filtersLabel = 'Filters';
 
+    /**
+     * Whether smart filter bar background should be transparent.
+     */
+    @Input()
+    set transparent(value: boolean) {
+        this._transparent = coerceBooleanProperty(value);
+    }
+
+    get transparent(): boolean {
+        return this._transparent;
+    }
+
     /**
      * Condition strategy labels.
      */
@@ -157,6 +178,9 @@ export class SmartFilterBarComponent implements OnDestroy, SmartFilterBar {
     /** @hidden */
     private _subjectSubscriptions = new Subscription();
 
+    /** @hidden */
+    private _transparent = false;
+
     /** @hidden */
     constructor(
         private _dialogService: DialogService,