refs #1799 Enhance responsiveness and layout for small screens in groups component

2025-04-07 09:56:46 +02:00 · 2025-04-07 09:56:46 +02:00 · 2b0d70dd58
parent 4f2bf0ec05
commit 2b0d70dd58
6 changed files with 175 additions and 69 deletions
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@ -22,6 +22,85 @@
  overflow: hidden;
 }

+.clients-mat-divider {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  .main-container {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .filters-and-tree-container {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-grow: 1 !important;
+    flex-shrink: 1 !important;
+    width: 100% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+    padding: 1rem !important;
+    box-sizing: border-box !important;
+    min-height: 250px !important;
+    overflow-y: auto !important; 
+  }
+
+  .filters-panel,
+  .tree-container {
+    flex: 1 1 50% !important;
+    overflow-y: auto !important; 
+    padding: 0.5rem !important; 
+    box-sizing: border-box !important;
+    margin-bottom: 0 !important;
+  }
+
+  .filters-container {
+    padding: 0 !important;
+  }
+
+  .tree-mat-divider {
+    display: none !important;
+  }
+
+  .clients-mat-divider {
+    display: inline;
+  }
+
+  .clients-view-header {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: space-between !important;
+    margin-bottom: 0.5rem !important;
+    margin-top: 0.5rem !important;
+    align-items: center !important;
+    padding-right: 1rem !important;
+  }
+
+  .groups-button-row {
+    display: none !important;
+  }
+
+  .cards-view {
+    max-height: none !important;
+  }
+}
+
+@media (max-width: 1400px) {
+  .type-view-text {
+    display: none;
+  }
+}
+
+@media (max-width: 450px) {
+  .clients-title-name {
+    font-size: 20px !important;
+  }
+}
+
 .header-container-title {
  flex-grow: 1;
  text-align: left;
@ -34,15 +113,6 @@
  padding-right: 0.5rem;
 }

-.clients-container {
-  flex-grow: 1;
-  box-sizing: border-box;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  padding: 0rem 1rem 0rem 0.5rem;
-}
-
 .clients-view-header {
  display: flex;
  flex-direction: row;
@ -53,6 +123,32 @@
  padding-right: 1rem;
 }

+@media (max-width: 768px) {
+  .clients-view-header {
+    display: flex;
+    flex-direction: column !important;
+  }
+}
+
+.clients-title-name {
+  font-size: x-large;
+  display: block;
+  padding: 1rem 1rem 1rem 13px;
+  margin-left: 0.6rem;
+  flex: 1 1 auto; 
+  white-space: nowrap; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.view-type-container {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 0.5rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .clients-view {
  flex-grow: 1;
  overflow-y: auto;
@ -124,18 +220,6 @@
  flex: 1;
 }

-@media (max-width: 1024px) {
-  .header-container {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .groups-button-row {
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-}
-
 mat-tree {
  background-color: #f9f9f9;
  padding: 0px 10px 10px 10px;
@ -265,21 +349,36 @@ mat-tree mat-tree-node.disabled:hover {
  padding-right: 1rem;
 }

-.filters-container {
+.clients-container {
+  flex: 8;
+  box-sizing: border-box;
+  overflow: hidden;
  display: flex;
  flex-direction: column;
-  justify-content: start;
-  padding: 1em 1em 0em 1em;
-}
-
-.filter-form-field {
-  min-width: 21rem;
+  padding: 0rem 1rem 0rem 0.5rem;
 }

 .filters-and-tree-container {
+  flex: 2;
  display: flex;
  flex-direction: column;
-  height: 100%;
+  flex-shrink: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.filters-container {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  flex-grow: 1;
+}
+
+.filter-form-field {
+  flex: 1;
+  min-width: 150px;
+  max-width: 100%;
+  box-sizing: border-box;
 }

 .filters-panel {
@ -327,6 +426,10 @@ mat-tree mat-tree-node.disabled:hover {
  margin-top: 4px;
 }

+.type-view-text {
+  margin-left: 0.5vw;
+}
+
 .action-icons {
  display: flex;
  justify-content: center;
@ -373,22 +476,6 @@ mat-tree mat-tree-node.disabled:hover {
  position: relative;
 }

-@media (max-width: 1560px) {
-  .clients-view-header {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-    margin-top: 0;
-  }
-}
-
-.clients-title-name {
-  font-size: x-large;
-  display: block;
-  padding: 1rem 1rem 1rem 13px;
-  margin-left: 0.6rem;
-}
-
 .no-clients-info {
  display: flex;
  align-items: center;
@ -397,13 +484,6 @@ mat-tree mat-tree-node.disabled:hover {
  margin-left: 1.6rem;
 }

-.view-type-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 2rem;
-  align-items: center;
-}
-
 mat-button-toggle-group {
  border: none;
 }
@ -457,4 +537,3 @@ mat-button-toggle-group {
  width: 100%;
  box-sizing: border-box;
 }
-
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@ -25,6 +25,27 @@
        {{ 'legendButton' | translate }}
      </button>
    </div>
+
+    <!-- Menú desplegable para pantallas pequeñas -->
+    <div *ngIf="isSmallScreen" class="groups-menu">
+      <button mat-icon-button [matMenuTriggerFor]="smallScreenMenu" matTooltip="Opciones" matTooltipShowDelay="1000">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <mat-menu #smallScreenMenu="matMenu">
+        <button mat-menu-item (click)="addOU($event)">
+          {{ 'newOrganizationalUnitButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="addClient($event)">
+          {{ 'newSingleClientButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="addMultipleClients($event)">
+          {{ 'newMultipleClientButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="openBottomSheet()">
+          {{ 'legendButton' | translate }}
+        </button>
+      </mat-menu>
+    </div>
  </div>

  <div *ngIf="initialLoading; else contentTemplate">
@ -72,7 +93,7 @@
              </button>
            </mat-form-field>

-            <mat-divider style="padding-top: 10px;"></mat-divider>
+            <mat-divider class="tree-mat-divider" style="padding-top: 10px;"></mat-divider>

            <!-- Funcionalidad actualmente deshabilitada-->
            <!-- <mat-form-field appearance="outline">
@ -185,25 +206,23 @@

      <!-- CLIENTS -->
      <div class="clients-container">
-
+        <mat-divider class="clients-mat-divider"></mat-divider>
        <!-- CLIENTS HEADER -->
        <div class="clients-view-header">
-          <div>
          <span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
            {{ 'clients' | translate }}
            <strong>{{ selectedNode?.name }}</strong>
          </span>
-          </div>
          <div class="view-type-container">
            <app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
              [buttonText]="'Ejecutar comandos'" [disabled]="selection.selected.length === 0"></app-execute-command>
            <mat-button-toggle-group name="viewType" aria-label="View Type" [hideSingleSelectionIndicator]="true"
              (change)="toggleView($event.value)">
              <mat-button-toggle value="list" [disabled]="currentView === 'list'">
-                <mat-icon>list</mat-icon> {{ 'Vista Lista' | translate }}
+                <mat-icon>list</mat-icon> <span class="type-view-text">{{ 'Vista Lista' | translate }}</span>
              </mat-button-toggle>
              <mat-button-toggle value="card" [disabled]="currentView === 'card'">
-                <mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
+                <mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'Vista Tarjeta' | translate }}</span>
              </mat-button-toggle>
            </mat-button-toggle-group>
          </div>
@ -228,8 +247,8 @@
                      <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
                        [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
                      </mat-checkbox>
-                      <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
-                        class="client-image" />
+                      <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'"
+                        alt="Client Icon" class="client-image" />

                      <div class="client-details">
                        <span class="client-name">{{ client.name }}</span>
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@ -25,6 +25,7 @@ import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ConfigService } from '@services/config.service';
 import { GlobalStatusComponent } from '../global-status/global-status.component';
+import { BreakpointObserver } from '@angular/cdk/layout';

 enum NodeType {
  OrganizationalUnit = 'organizational-unit',
@ -40,6 +41,7 @@ enum NodeType {
  styleUrls: ['./groups.component.css'],
 })
 export class GroupsComponent implements OnInit, OnDestroy {
+  isSmallScreen: boolean = false;
  baseUrl: string;
  mercureUrl: string;
  organizationalUnits: UnidadOrganizativa[] = [];
@ -105,6 +107,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
    public dialog: MatDialog,
    private bottomSheet: MatBottomSheet,
    private joyrideService: JoyrideService,
+    private breakpointObserver: BreakpointObserver,
    private toastr: ToastrService,
    private configService: ConfigService
  ) {
@ -158,6 +161,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
      this.filters['query'] = searchTerm;
      this.filterClients(searchTerm);
    });
+
+    this.breakpointObserver.observe(['(max-width: 992px)']).subscribe((result) => {
+      this.isSmallScreen = result.matches;
+    })
  }

  private updateClientStatus(clientUuid: string, newStatus: string): void {
--- a/ogWebconsole/src/app/layout/header/header.component.css
+++ b/ogWebconsole/src/app/layout/header/header.component.css
@ -51,7 +51,7 @@ mat-toolbar {
  display: none;
 }

-@media (min-width: 1328px) {
+@media (min-width: 1500px) {
  .hide-on-small {
    display: inline;
  }
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
@ -1,6 +1,7 @@
 .container {
  width: 100vw;
  height: calc(100vh - 7vh);
+  min-width: 375px;
 }

 .sidebar {
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
@ -13,7 +13,7 @@ export class MainLayoutComponent implements OnInit {
  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit(): void {
-    this.breakpointObserver.observe(['(max-width: 1328px)']).subscribe((result) => {
+    this.breakpointObserver.observe(['(max-width: 1500px)']).subscribe((result) => {
      if (result.matches) {
        this.sidebarMode = 'over';
        this.isSidebarVisible = false;