diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss b/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss index 4cbe30650d..12fccf7ff1 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/_iot-hub-common.scss @@ -70,3 +70,65 @@ height: 18px; } } + +// Page-level search field — used by iot-hub-browse and iot-hub-search. +// Larger than the filter inputs above: 56px tall, 16px text, with a 40px +// trailing action area (search icon when empty, close icon-button when +// typing). + +@mixin tb-iot-hub-page-search-container { + display: flex; + align-items: center; + width: 0; + height: 56px; + padding: 8px 4px 8px 16px; + gap: 8px; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 8px; + background: white; +} + +@mixin tb-iot-hub-page-search-input { + flex: 1; + min-width: 0; + border: none; + outline: none; + padding: 0; + font-family: inherit; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.15px; + color: rgba(0, 0, 0, 0.87); + background: transparent; + + &::placeholder { + color: rgba(0, 0, 0, 0.54); + } +} + +@mixin tb-iot-hub-page-search-action { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + flex-shrink: 0; + border-radius: 50%; + color: rgba(0, 0, 0, 0.54); + + mat-icon { + font-size: 24px; + width: 24px; + height: 24px; + } + + &.mat-mdc-icon-button { + padding: 8px; + --mdc-icon-button-state-layer-size: 40px; + } + + &-static { + pointer-events: none; + } +} diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html index a653685882..cb59c9f5e9 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html @@ -322,28 +322,36 @@
- -
-
- search + +
+
@if (textSearch) { - + } @else { + }
- + + @for (option of sortOptions; track option.value; let i = $index) { + + } +
- -
+ +
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }} @@ -391,16 +399,10 @@ {{ 'iot-hub.clear-all' | translate }} } - - - - @for (option of sortOptions; track option.value; let i = $index) { - - } -
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss index 4a0ad1b5cd..b377219bb7 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss @@ -325,27 +325,49 @@ } .tb-iot-hub-search-field { - @include tb-iot-hub-search-container; - width: 320px; -} - -.tb-iot-hub-search-icon { - @include tb-iot-hub-search-icon; + @include tb-iot-hub-page-search-container; } .tb-iot-hub-search-input { - @include tb-iot-hub-search-input-text; + @include tb-iot-hub-page-search-input; } -.tb-iot-hub-search-clear.mat-mdc-icon-button { - @include tb-iot-hub-search-clear; +.tb-iot-hub-search-action { + @include tb-iot-hub-page-search-action; } -// Sort button — Design: 14px Medium, primary color, with filter_list icon +// Sort button — Design: same row as search, 40px h, 88px min-w, 4px radius, +// 14px Medium primary color, trailing arrow_drop_down 24px icon .tb-iot-hub-sort-btn { flex-shrink: 0; + height: 40px; + min-width: 88px; + padding: 8px; font-size: 14px; font-weight: 500; + line-height: 20px; + letter-spacing: 0.25px; + border-radius: 4px; + + .mat-icon { + font-size: 24px; + width: 24px; + height: 24px; + } +} + +// Filter chips row — Design: 32px tall, no padding, centered +.tb-iot-hub-sort-row { + height: 32px; + align-items: center; + padding: 0; + margin-top: 16px; + margin-bottom: 12px; + + .mat-mdc-chip { + margin-top: 0; + margin-bottom: 0; + } } // Active filter chips — Design: mat-chip-set, gap-8, chip bg rgba(0,0,0,0.04) @@ -557,10 +579,6 @@ width: 100%; max-width: 100%; } - - .tb-iot-hub-search-field { - width: 200px; - } } @media #{$mat-xs} { diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts index a6daaf8772..149ef64912 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts @@ -93,6 +93,19 @@ export class TbIotHubBrowseComponent implements OnInit, AfterViewInit, OnDestroy || this._activeType === ItemType.RULE_CHAIN; } + get searchPlaceholderKey(): string { + switch (this._activeType) { + case ItemType.WIDGET: return 'iot-hub.search-widgets'; + case ItemType.DASHBOARD: return 'iot-hub.search-dashboards'; + case ItemType.SOLUTION_TEMPLATE: return 'iot-hub.search-solution-templates'; + case ItemType.CALCULATED_FIELD: return 'iot-hub.search-calculated-fields'; + case ItemType.ALARM_RULE: return 'iot-hub.search-alarm-rules'; + case ItemType.RULE_CHAIN: return 'iot-hub.search-rule-chains'; + case ItemType.DEVICE: return 'iot-hub.search-devices'; + default: return 'iot-hub.search'; + } + } + items: MpItemVersionView[] = []; totalElements = 0; pageSize = 12; diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html index af3931b9a6..cf14453fb7 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-search.component.html @@ -25,22 +25,25 @@
-
- search +
@if (searchText) { - + } @else { + }
- -
+ +
} - - + + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss index eb97f64682..0ac5db7e61 100644 --- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss +++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss @@ -15,6 +15,7 @@ */ @import "../../../../../scss/constants"; +@import "../../components/iot-hub/iot-hub-common"; :host { display: block; @@ -49,12 +50,25 @@ margin: 0; } -// Toolbar: filter + search -.tb-installed-toolbar { +// Filter row — filter button + active chips on top +.tb-installed-filter-row { display: flex; + flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; + + .mat-mdc-chip { + margin-top: 0; + margin-bottom: 0; + } +} + +// Search row — full-width search input below the filter row +.tb-installed-search-row { + display: flex; + align-items: center; + margin-bottom: 16px; } .tb-installed-filter-btn { @@ -104,67 +118,19 @@ } } -// Search field .tb-installed-search { - width: 320px; - height: 40px; - display: flex; - align-items: center; - gap: 8px; - padding: 8px 12px; - border-radius: 8px; - border: 1px solid rgba(0, 0, 0, 0.12); - background: white; -} - -.tb-installed-search-icon { - font-size: 24px; - width: 24px; - height: 24px; - color: rgba(0, 0, 0, 0.38); - flex-shrink: 0; + @include tb-iot-hub-page-search-container; } .tb-installed-search-input { - flex: 1; - border: none; - outline: none; - font-size: 14px; - font-weight: 400; - color: rgba(0, 0, 0, 0.87); - background: transparent; - font-family: inherit; - - &::placeholder { - color: rgba(0, 0, 0, 0.38); - } + @include tb-iot-hub-page-search-input; } -// Responsive -@media #{$mat-lt-lg} { - .tb-installed-toolbar { - flex-wrap: wrap; - } - - .tb-installed-search { - order: 1; - } - - .tb-installed-filter-chips { - order: 10; - } - - .tb-installed-clear-btn { - order: 11; - } - - .tb-installed-toolbar::before { - content: ''; - width: 100%; - order: 9; - } +.tb-installed-search-action { + @include tb-iot-hub-page-search-action; } +// Responsive @media #{$mat-lt-md} { .tb-installed-items-page { padding: 40px 24px; @@ -182,8 +148,4 @@ align-items: flex-start; gap: 16px; } - - .tb-installed-search { - width: 200px; - } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 3617ff8175..5807308c61 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3706,6 +3706,7 @@ "and-devices": "& Devices", "search-placeholder": "Search in IoT Hub...", "search": "Search...", + "search-published-items": "Search published items...", "see-all-results": "See all results", "no-search-results": "No results found for '{{ search }}'", "no-items-available": "No items available",