Title moved to within fieldset as legend.

This commit is contained in:
Aayush Rohila
2023-01-31 13:24:04 +05:30
parent 7134f21ccd
commit 914596d9d2
6 changed files with 29 additions and 35 deletions

View File

@@ -1,21 +1,13 @@
<div class="checklist">
<fieldset>
<mat-checkbox
*ngFor="let option of options"
[checked]="option.checked"
(keydown.enter)="option.checked = !option.checked"
[attr.data-automation-id]="'checkbox-' + (option.name)"
[attr.aria-label]="option.name | translate"
(change)="changeHandler($event, option)"
class="adf-facet-filter">
<div matTooltip="{{ option.name | translate }}"
matTooltipPosition="right"
class="facet-name">
<legend class="adf-search-check-list-title">{{ name | translate }}</legend>
<mat-checkbox *ngFor="let option of options" [checked]="option.checked"
(keydown.enter)="option.checked = !option.checked" [attr.data-automation-id]="'checkbox-' + (option.name)"
[attr.aria-label]="option.name | translate" (change)="changeHandler($event, option)" class="adf-facet-filter">
<div matTooltip="{{ option.name | translate }}" matTooltipPosition="right" class="facet-name">
{{ option.name | translate }}
</div>
</mat-checkbox>
</fieldset>
</div>
<div class="adf-facet-buttons" *ngIf="options.fitsPage && !settings?.hideDefaultAction">
<button mat-button color="primary" (click)="clear()">
@@ -24,20 +16,14 @@
</div>
<div class="adf-facet-buttons" *ngIf="!options.fitsPage">
<button mat-icon-button
title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}"
(click)="clear()">
<button mat-icon-button title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}" (click)="clear()">
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button
*ngIf="options.canShowLessItems"
title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}"
<button mat-icon-button *ngIf="options.canShowLessItems" title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}"
(click)="options.showLessItems()">
<mat-icon>keyboard_arrow_up</mat-icon>
</button>
<button mat-icon-button
*ngIf="options.canShowMoreItems"
title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}"
<button mat-icon-button *ngIf="options.canShowMoreItems" title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}"
(click)="options.showMoreItems()">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>

View File

@@ -1,4 +1,4 @@
.adf-search-check-list > div {
.adf-search-check-list > fieldset {
display: flex;
flex-direction: column;
@@ -25,6 +25,15 @@
}
}
.adf-search-check-list {
&-title {
font-size: 1.1em;
padding-bottom: 5px;
color: var(--theme-text-bold-color);
}
}
fieldset {
border: 0 none;
}

View File

@@ -40,6 +40,7 @@ export interface SearchListOption {
export class SearchCheckListComponent implements SearchWidget, OnInit {
id: string;
name: string;
settings?: SearchWidgetSettings;
context?: SearchQueryBuilderService;
options: SearchFilterList<SearchListOption>;

View File

@@ -26,9 +26,9 @@
(keydown.tab)="$event.stopPropagation();">
<div (click)="$event.stopPropagation()"
class="adf-filter-container">
<div class="adf-filter-title">{{ category?.name | translate }}</div>
<adf-search-widget-container (keypress)="onKeyPressed($event, menuTrigger)"
[id]="category?.id"
[name]="category?.name"
[selector]="category?.component?.selector"
[settings]="category?.component?.settings"
[value]="initialValue">

View File

@@ -47,12 +47,6 @@
}
}
&-title {
font-size: 1.1em;
padding-bottom: 5px;
color: var(--theme-text-bold-color);
}
&-actions {
display: flex;
justify-content: flex-end;

View File

@@ -45,6 +45,9 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan
@Input()
id: string;
@Input()
name: string;
@Input()
selector: string;
@@ -87,6 +90,7 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan
private setupWidget(ref: ComponentRef<any>) {
if (ref && ref.instance) {
ref.instance.id = this.id;
ref.instance.name = this.name;
ref.instance.settings = {...this.settings};
ref.instance.context = this.queryBuilder;
if (this.value) {