From a27bae710e4acb078a1adff09362a264d324a887 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 9 Apr 2026 16:13:19 +0300 Subject: [PATCH] Responsive installed items, detail dialog, search, remove DEVICE from compact Installed items: - Sticky actions column with more_vert dropdown menu on lt-lg - Scrollable table wrapper, column sizing with nowrap - ResizeObserver hidePageSize at <640px - Filter chips/clear on separate row below toolbar on lt-lg - Responsive padding (24px lt-md, 16px xs), column header on xs Item detail dialog: - Responsive widths: 1200px default, 900px lt-xxl, 768px lt-lg, 100% lt-md - Column layout for dlg-row-1 on lt-md, header on xs - Custom carousel controls: arrows + dots on same row - Carousel aspect-ratio 1.5 for solution templates - isCompactLayout method (CF/RC only, no DEVICE) Search page: - Responsive padding (24px lt-lg, 16px lt-sm) - Sort button color="primary", wraps on lt-sm - Pagination column layout on lt-sm - Results count below pagination on lt-lg DEVICE removed from compact layout across all components: - Item card, browse, detail dialog, home, search - DEVICE now uses big card layout (same as widgets/dashboards) --- .../iot-hub/iot-hub-browse.component.html | 2 +- .../iot-hub/iot-hub-browse.component.scss | 1 - .../iot-hub/iot-hub-browse.component.ts | 2 +- .../iot-hub/iot-hub-item-card.component.ts | 2 +- .../iot-hub-item-detail-dialog.component.html | 39 +++--- .../iot-hub-item-detail-dialog.component.scss | 99 ++++++++++--- .../iot-hub-item-detail-dialog.component.ts | 12 ++ .../pages/iot-hub/iot-hub-home.component.ts | 2 +- .../iot-hub-installed-items.component.html | 93 ++++++++----- .../iot-hub-installed-items.component.scss | 131 ++++++++++++++++-- .../iot-hub-installed-items.component.ts | 29 +++- .../iot-hub/iot-hub-search.component.html | 2 +- .../iot-hub/iot-hub-search.component.scss | 49 ++++++- .../pages/iot-hub/iot-hub-search.component.ts | 6 +- 14 files changed, 375 insertions(+), 94 deletions(-) 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 349e04f275..c20acedecb 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 @@ -213,7 +213,7 @@ } - 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 c031c1bd62..955233e880 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 @@ -304,7 +304,6 @@ // Sort button — Design: 14px Medium, primary color, with filter_list icon .tb-iot-hub-sort-btn { - color: $tb-primary-color; flex-shrink: 0; font-size: 14px; font-weight: 500; 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 d9e17ed99d..e0d94228b3 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 @@ -74,7 +74,7 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy { } get isCompactType(): boolean { - return this._activeType === ItemType.CALCULATED_FIELD || this._activeType === ItemType.RULE_CHAIN || this._activeType === ItemType.DEVICE; + return this._activeType === ItemType.CALCULATED_FIELD || this._activeType === ItemType.RULE_CHAIN; } items: MpItemVersionView[] = []; diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts index c1236aa8c5..dca2813a63 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts @@ -93,7 +93,7 @@ export class TbIotHubItemCardComponent { } getCustomIconColor(): string | null { - if ((this.item.type === ItemType.CALCULATED_FIELD || this.item.type === ItemType.RULE_CHAIN) && this.item.color) { + if (this.isCompactLayout() && this.item.color) { return this.item.color; } return null; diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html index 18a1da0554..22f282109e 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html @@ -18,7 +18,7 @@
- @if (item.type === ItemType.CALCULATED_FIELD || item.type === ItemType.RULE_CHAIN) { + @if (isCompactLayout()) {
{{ getCompactIcon() }}
@@ -52,7 +52,7 @@
- @if (item.type === ItemType.CALCULATED_FIELD || item.type === ItemType.RULE_CHAIN || item.type === ItemType.DEVICE) { + @if (isCompactLayout()) {
@@ -107,7 +107,7 @@ } @else {
-
+
@if (item.type === ItemType.SOLUTION_TEMPLATE && carouselImages.length > 1) {
- - - - - - - -
- + + + +
+ +
+ @for (img of carouselImages; track img; let i = $index) { +
+ } +
+ +
} @else { @if (getPreviewUrl(); as url) { diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss index 652ef05dc1..104ef48a6c 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss @@ -24,7 +24,24 @@ border-radius: 8px; overflow: hidden; max-height: 80vh; - width: 900px; + width: 1200px; + + @media #{$mat-lt-xxl} { + width: 900px; + } + + @media #{$mat-lt-lg} { + width: 768px; + } + + @media #{$mat-lt-md} { + width: 100%; + } + + @media #{$mat-xs} { + max-height: 100%; + height: 100%; + } } // Header — Design: pl-24, pr-12, py-16, gap between icon+content=16, content+close=8 @@ -135,6 +152,10 @@ align-items: center; justify-content: center; padding: 16px; + + &.dlg-preview-carousel { + aspect-ratio: 1.5; + } } .dlg-preview-img { @@ -399,6 +420,8 @@ .dlg-hero-carousel { width: 100%; height: 100%; + display: flex; + flex-direction: column; animation: dlg-carousel-fade-in 0s 0.3s forwards; visibility: hidden; } @@ -413,17 +436,12 @@ ::ng-deep .carousel { display: flex !important; flex-direction: column !important; + flex: 1; > section { flex: 1; min-height: 0; } - ul.indicators { - position: relative !important; - bottom: auto !important; - flex-shrink: 0; - padding: 8px 0; - } - - .direction { height: calc(100% - 40px) !important; } + ul.indicators { display: none !important; } + .direction { display: none !important; } } .dlg-carousel-container { @@ -440,28 +458,50 @@ width: 100%; height: 100%; object-fit: contain; - padding: 8px; } } } } +.dlg-carousel-hidden-nav { + display: none; +} + +.dlg-carousel-controls { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + padding-top: 16px; +} + +.dlg-carousel-dots { + display: flex; + align-items: center; + justify-content: center; + flex: 1; +} + .dlg-carousel-nav { - color: rgba(0, 0, 0, 0.6); - background: rgba(255, 255, 255, 0.8); + width: 40px; + height: 40px; + background: white; + color: rgba(0, 0, 0, 0.76); + flex-shrink: 0; - &:hover { background: rgba(255, 255, 255, 0.95); } + &:hover { background: rgba(245, 245, 245, 1); } } .dlg-carousel-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: rgba(0, 0, 0, 0.2); - margin: 0 3px; + width: 6px; + height: 6px; + border-radius: 999px; + background: rgba(0, 0, 0, 0.38); + margin: 9px 12px; + cursor: pointer; transition: background 0.2s; - &.active { background: rgba(0, 0, 0, 0.6); } + &.active { background: rgba(0, 0, 0, 0.76); } } // Info panel — Design: flex-col, space-between, py-16, gap-32 @@ -576,3 +616,24 @@ .dlg-footer-spacer { flex: 1; } + +// Responsive +@media #{$mat-lt-md} { + .dlg-row-1 { + flex-direction: column; + } +} + +@media #{$mat-xs} { + .dlg-header { + flex-direction: column; + position: relative; + padding-right: 48px; + } + + .dlg-close { + position: absolute; + top: 12px; + right: 12px; + } +} diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts index f26bfdb21f..0d50a1b596 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts @@ -90,6 +90,10 @@ export class TbIotHubItemDetailDialogComponent extends DialogComponent
-
- - - @for (type of allItemTypes; track type; let last = $last) { -
- - {{ getItemTypeLabel(type) }} - -
- @if (!last) { - - } + + + @for (type of allItemTypes; track type; let last = $last) { +
+ + {{ getItemTypeLabel(type) }} + +
+ @if (!last) { + } - - @if (hasActiveFilters()) { - - @for (type of activeTypeFilters; track type) { - - {{ getItemTypeLabel(type) }} - close - - } - - } -
+ + @if (hasActiveFilters()) { + + @for (type of activeTypeFilters; track type) { + + {{ getItemTypeLabel(type) }} + close + + } + + + } +
search
+
@@ -144,10 +144,14 @@ - - + + - +
+
+
+ 		-
+ +
@@ -158,12 +162,33 @@ mdi:trash-can-outline
+ +
+ + + + + + +
+
@if (isLoading) {
@@ -178,11 +203,13 @@ } + 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 bc1b2bdce9..9453fdc1a1 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 @@ -19,17 +19,22 @@ :host { display: block; padding: 16px; + height: 100%; } .tb-installed-items-page { background: white; border-radius: 8px; padding: 40px 40px 40px; + height: 100%; + display: flex; + flex-direction: column; } // Back button .tb-installed-back-btn { margin-bottom: 40px; + align-self: flex-start; } // Header: title + check for updates @@ -52,14 +57,12 @@ .tb-installed-toolbar { display: flex; align-items: center; - justify-content: space-between; + gap: 8px; margin-bottom: 16px; } -.tb-installed-filter-area { - display: flex; - align-items: center; - gap: 8px; +.tb-installed-toolbar-spacer { + flex: 1; } .tb-installed-filter-btn { @@ -151,6 +154,14 @@ border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; overflow: hidden; + flex: 1; + display: flex; + flex-direction: column; +} + +.tb-installed-table-wrapper { + overflow: auto; + flex: 1; table { width: 100%; @@ -172,10 +183,55 @@ letter-spacing: 0.2px; color: rgba(0, 0, 0, 0.76); } +} - ::ng-deep .mat-mdc-paginator { - border-top: none; - } + +// Column sizing +.mat-column-itemName { + width: 50%; + min-width: 200px; + max-width: 50%; +} + +.mat-column-itemType { + width: 50%; + min-width: 50%; + max-width: 50%; +} + +.mat-column-version { + width: 80px; + min-width: 80px; + max-width: 80px; +} + +.mat-column-createdTime { + width: 100px; + min-width: 100px; + max-width: 100px; +} + +.mat-column-updates { + width: 250px; + min-width: 250px; + max-width: 250px; +} + +.mat-column-actions { + width: 108px; + min-width: 108px; + max-width: 108px; +} + +::ng-deep .mat-mdc-paginator-range-label { + white-space: nowrap; +} + +// Nowrap columns +.mat-column-itemType, +.mat-column-createdTime, +.mat-column-updates { + white-space: nowrap; } // Type chip — Design: pill, h-32, rounded-16, px-12 py-6, gap-4, bg at 6% opacity @@ -308,3 +364,62 @@ color: rgba(0, 0, 0, 0.54); font-size: 14px; } + +// Responsive +@media #{$mat-lt-lg} { + .tb-installed-toolbar { + flex-wrap: wrap; + } + + .tb-installed-toolbar-spacer { + order: 0; + } + + .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; + } + + .mat-column-actions { + width: 36px; + min-width: 36px; + max-width: 36px; + } +} + +@media #{$mat-lt-md} { + .tb-installed-items-page { + padding: 40px 24px; + } +} + +@media #{$mat-xs} { + .tb-installed-items-page { + padding-left: 16px; + padding-right: 16px; + } + + .tb-installed-header { + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + .tb-installed-search { + width: 200px; + } + +} diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts index 74484aea26..5cb6fe57b8 100644 --- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts +++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; +import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, ElementRef, NgZone, ChangeDetectorRef } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { MatDialog } from '@angular/material/dialog'; import { MatSort } from '@angular/material/sort'; @@ -43,12 +43,15 @@ import { TbIotHubDeleteDialogComponent, IotHubDeleteDialogData } from '@home/com templateUrl: './iot-hub-installed-items.component.html', styleUrls: ['./iot-hub-installed-items.component.scss'] }) -export class TbIotHubInstalledItemsComponent implements OnInit, AfterViewInit { +export class TbIotHubInstalledItemsComponent implements OnInit, AfterViewInit, OnDestroy { displayedColumns: string[] = ['itemName', 'itemType', 'version', 'createdTime', 'updates', 'actions']; dataSource: IotHubInstalledItem[] = []; totalElements = 0; pageSize = 10; + hidePageSize = false; + + private widgetResize$: ResizeObserver; pageIndex = 0; isLoading = false; textSearch = ''; @@ -74,8 +77,22 @@ export class TbIotHubInstalledItemsComponent implements OnInit, AfterViewInit { private store: Store, private route: ActivatedRoute, private router: Router, - private dialog: MatDialog - ) {} + private dialog: MatDialog, + private elementRef: ElementRef, + private zone: NgZone, + private cd: ChangeDetectorRef + ) { + this.widgetResize$ = new ResizeObserver(() => { + this.zone.run(() => { + const shouldHide = this.elementRef.nativeElement.offsetWidth < 640; + if (shouldHide !== this.hidePageSize) { + this.hidePageSize = shouldHide; + this.cd.markForCheck(); + } + }); + }); + this.widgetResize$.observe(this.elementRef.nativeElement); + } ngOnInit(): void { const itemType = this.route.snapshot.queryParamMap.get('itemType'); @@ -92,6 +109,10 @@ export class TbIotHubInstalledItemsComponent implements OnInit, AfterViewInit { this.loadData(); } + ngOnDestroy(): void { + this.widgetResize$?.disconnect(); + } + ngAfterViewInit(): void { this.sort.sortChange.subscribe(() => { this.pageIndex = 0; diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.html index 7abbdf769d..532417654c 100644 --- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.html +++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.html @@ -47,7 +47,7 @@ search - diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.scss index 24e5ab5fb7..8e52b10424 100644 --- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.scss +++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.scss @@ -65,7 +65,6 @@ } .tb-search-sort-btn { - color: $tb-primary-color; font-size: 14px; font-weight: 500; line-height: 20px; @@ -258,6 +257,29 @@ } @media #{$mat-lt-lg} { + .tb-search-page { + padding: 24px; + } + + .tb-search-input-field { + width: 400px; + } + + .tb-search-pagination-row { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + + .tb-search-results-count { + order: 1; + } + + .tb-search-pagination { + order: 0; + width: 100%; + } + .tb-search-card-grid { grid-template-columns: repeat(2, 1fr); @@ -272,14 +294,33 @@ width: 100%; flex: 1; } +} +@media #{$mat-lt-sm} { .tb-search-page { - padding: 24px; + padding: 16px; + } + + .tb-search-toolbar { + flex-wrap: wrap; + } + + .tb-search-sort-btn { + width: 100%; + justify-content: flex-start; } -} -@media #{$mat-lt-sm} { .tb-search-card-grid { grid-template-columns: repeat(1, 1fr); } + + .tb-search-pagination { + flex-direction: column; + align-items: center; + gap: 16px; + } + + .tb-search-page-size { + margin-left: 0; + } } diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.ts index 139e4d0670..f4cc250b51 100644 --- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.ts +++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.ts @@ -39,8 +39,8 @@ interface SortOption { } const TYPE_ORDER: ItemType[] = [ - ItemType.WIDGET, ItemType.DASHBOARD, ItemType.SOLUTION_TEMPLATE, - ItemType.CALCULATED_FIELD, ItemType.RULE_CHAIN, ItemType.DEVICE + ItemType.WIDGET, ItemType.DASHBOARD, ItemType.SOLUTION_TEMPLATE, ItemType.DEVICE, + ItemType.CALCULATED_FIELD, ItemType.RULE_CHAIN ]; @Component({ @@ -168,7 +168,7 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy { // Type helpers isCompactType(type: ItemType): boolean { - return type === ItemType.CALCULATED_FIELD || type === ItemType.RULE_CHAIN || type === ItemType.DEVICE; + return type === ItemType.CALCULATED_FIELD || type === ItemType.RULE_CHAIN; } getTypeLabel(type: ItemType): string {