diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html index 375ef6d6d..4d4f30e2e 100644 --- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html +++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html @@ -32,26 +32,29 @@ - - search + +
@for (category of filteredCategories(); track category.id) { diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss index f617e264d..2f1944edf 100644 --- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss +++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss @@ -43,17 +43,74 @@ } } -.search-field { - width: 100%; +.search-inline { + display: flex; + align-items: center; + gap: 8px; + padding: 0 10px; + min-height: 36px; + border-radius: 10px; + border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant)); + background: var(--app-search-bg, var(--mat-sys-surface-container)); + cursor: text; + transition: + border-color 0.15s ease, + box-shadow 0.15s ease; - mat-icon[matPrefix] { - margin-right: 8px; + &:focus-within { + border-color: var(--mat-sys-primary); + box-shadow: 0 0 0 3px + color-mix(in srgb, var(--mat-sys-primary) 12%, transparent); + } +} + +.search-inline__icon { + font-size: 18px; + width: 18px; + height: 18px; + color: var(--mat-sys-on-surface-variant); + flex-shrink: 0; +} + +.search-inline input { + flex: 1; + border: none; + outline: none; + background: transparent; + color: var(--mat-sys-on-surface); + font: inherit; + font-size: 0.84rem; + width: 100%; + min-width: 0; + + &::placeholder { color: var(--mat-sys-on-surface-variant); + opacity: 0.6; + } + + &::-webkit-search-cancel-button { + display: none; + } +} + +.search-inline__clear { + width: 24px; + height: 24px; + min-width: 24px; + line-height: 24px; + flex-shrink: 0; + padding: 0; + + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; } } .categories-list { - height: 450px; + flex: 1; + min-height: 200px; overflow-y: auto; border: 1px solid var(--mat-sys-outline-variant); border-radius: 8px; @@ -62,9 +119,10 @@ .category-item { display: flex; align-items: center; - padding: 2px 10px; + padding: 0 10px; + min-height: 30px; cursor: pointer; - gap: 8px; + gap: 6px; transition: background-color 0.12s ease; &:hover { @@ -76,7 +134,7 @@ } mat-checkbox { - --mdc-checkbox-state-layer-size: 32px; + --mdc-checkbox-state-layer-size: 28px; } } @@ -99,7 +157,7 @@ .mat-mdc-dialog-content { min-width: 480px; max-width: 600px; - max-height: 75vh !important; + max-height: 85vh !important; } } diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts index e00a7901b..44e1cac81 100644 --- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts +++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts @@ -1,5 +1,4 @@ import { Component, computed, inject, OnInit, signal } from '@angular/core'; -import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { @@ -7,9 +6,7 @@ import { MatDialogModule, MatDialogRef, } from '@angular/material/dialog'; -import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; -import { MatInputModule } from '@angular/material/input'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSnackBar } from '@angular/material/snack-bar'; import { TranslatePipe } from '@ngx-translate/core'; @@ -32,11 +29,8 @@ interface CategoryWithSelection extends XCategoryFromDb { MatDialogModule, MatButtonModule, MatCheckboxModule, - MatFormFieldModule, MatIconModule, - MatInputModule, MatProgressSpinnerModule, - FormsModule, TranslatePipe, ], templateUrl: './category-management-dialog.component.html',