From 00d3eefd48cadfa2a46eb69ae168076281cb8d42 Mon Sep 17 00:00:00 2001 From: Denis Severin Date: Wed, 12 Jan 2022 11:12:27 +0200 Subject: [PATCH] fix(platform): smart filter bar styling fixes --- ...rt-filter-bar-basic-example.component.html | 4 +- ...r-bar-custom-filter-example.component.html | 4 +- ...r-bar-custom-labels-example.component.html | 4 +- ...er-bar-dynamic-page-example.component.html | 2 +- ...lter-bar-observable-example.component.html | 4 +- .../platform-smart-filter-bar.module.ts | 4 +- .../form-generator.component.html | 2 +- .../form-generator.component.ts | 10 ++- ...ilter-bar-conditions-dialog.component.html | 1 + ...-filter-bar-conditions-dialog.component.ts | 1 - .../smart-filter-bar.component.html | 3 +- .../smart-filter-bar.component.scss | 71 +++++++++++++++++++ .../smart-filter-bar.component.ts | 26 ++++++- 13 files changed, 125 insertions(+), 11 deletions(-) create mode 100644 libs/platform/src/lib/smart-filter-bar/smart-filter-bar.component.scss diff --git a/apps/docs/src/app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html b/apps/docs/src/app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html index da17e0b4664..adeb551bea4 100644 --- a/apps/docs/src/app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html +++ b/apps/docs/src/app/platform/component-docs/platform-smart-filter-bar/platform-smart-filter-bar-examples/platform-smart-filter-bar-basic-example.component.html @@ -1,5 +1,7 @@ - +
+

Line Items

+
- +
+

Line Items

+
- +
+

Line Items

+
- + - +
+

Line Items

+
- + 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 index 4fd7e3ff9c4..02b57b22061 100644 --- 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/libs/platform/src/lib/smart-filter-bar/components/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.html b/libs/platform/src/lib/smart-filter-bar/components/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.html index 258adcbe350..f05ffc3e827 100644 --- a/libs/platform/src/lib/smart-filter-bar/components/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.html +++ b/libs/platform/src/lib/smart-filter-bar/components/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.html @@ -19,6 +19,7 @@

{{ config.header }}

[formItems]="condition" [unifiedLayout]="false" columnLayout="XL3-L3-M3-S3" + [noAdditionalContent]="true" >
diff --git a/libs/platform/src/lib/smart-filter-bar/components/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.ts b/libs/platform/src/lib/smart-filter-bar/components/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.ts index 566ba6797f4..e924ce9c002 100644 --- a/libs/platform/src/lib/smart-filter-bar/components/smart-filter-bar-conditions-dialog/smart-filter-bar-conditions-dialog.component.ts +++ b/libs/platform/src/lib/smart-filter-bar/components/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 index df38374e37d..a7b2f0d2898 100644 --- 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 @@
-
+
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 new file mode 100644 index 00000000000..546a23c86a2 --- /dev/null +++ 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 index bc2a55d1aa2..e0142f686cf 100644 --- 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,