From e6c387b972e8379a34b6e8aefe4a717458a692d1 Mon Sep 17 00:00:00 2001 From: jmbardallo Date: Wed, 30 Sep 2026 14:21:38 +0200 Subject: [PATCH] feat(ui): persistance for tree panel and refinement of RemotePC badge --- CHANGELOG.md | 12 +++++ ogWebconsole/package.json | 1 + .../components/groups/groups.component.css | 51 ++++++++++++++----- .../components/groups/groups.component.html | 14 +++-- .../app/components/groups/groups.component.ts | 30 ++++++++++- .../classroom-view.component.css | 26 +++++----- 6 files changed, 106 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4de3bdf..86f6abf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # Changelog +## [1.12.0] - 2026-09-30 + +### Added +- **UI/UX**: Implementada persistencia en localStorage para el ancho del panel lateral del rbol de jerarquas, individualizada por usuario. +- **RemotePC**: Aadida la insignia indicadora de conexin remota en la vista de lista (tabla) de clientes para unificar la experiencia con la vista de tarjetas. + +### Changed +- **UI/UX**: Refinados los estilos visuales de la insignia de RemotePC (colores sutiles, bordes redondeados y tamao reducido) para armonizar con el resto de etiquetas (ej: velocidad de red). + +# Changelog + ## [1.11.1] - 2026-09-24 ### Fixed @@ -556,3 +567,4 @@ ### Fixed - Resolved an issue that prevented editing software profiles correctly. - Fixed a bug where newly created commands failed to execute in the commands section. + diff --git a/ogWebconsole/package.json b/ogWebconsole/package.json index 53a23b1..670cf55 100644 --- a/ogWebconsole/package.json +++ b/ogWebconsole/package.json @@ -54,3 +54,4 @@ "typescript": "~5.4.5" } } + diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css index 16800aa..006ebea 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.css +++ b/ogWebconsole/src/app/components/groups/groups.component.css @@ -915,21 +915,22 @@ mat-tree mat-tree-node.disabled:hover { .remote-pc-badge { display: inline-flex; align-items: center; - gap: 2px; - background-color: #1976d2; - color: white; - padding: 2px 6px; - border-radius: 10px; - font-size: 10px; - font-weight: bold; - margin-top: 3px; + gap: 4px; + background-color: #e3f2fd; + color: #1976d2; + font-size: 0.75rem; + font-weight: 600; + padding: 2px 8px; + border-radius: 12px; + width: fit-content; + margin-top: 4px; } .remote-pc-icon { - font-size: 12px; - height: 12px; - width: 12px; - line-height: 12px; + font-size: 14px; + width: 14px; + height: 14px; + line-height: 14px; } .clients-list { @@ -2025,3 +2026,29 @@ mat-button-toggle-group { cursor: help; } + +.tree-resizer { + width: 12px; + cursor: col-resize; + display: flex; + justify-content: center; + background-color: transparent; + z-index: 10; + transition: background-color 0.2s; +} + +.tree-resizer:hover, .tree-resizer.resizing { + background-color: rgba(0, 0, 0, 0.05); +} + +.resizer-line { + width: 1px; + background-color: rgba(0, 0, 0, 0.12); + height: 100%; +} + +.main-container.resizing { + user-select: none; +} + + diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index d745240..1d0b3ec 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -70,9 +70,9 @@ } @else { -
+
-
+
@@ -288,7 +288,9 @@
- +
+
+
@@ -536,6 +538,12 @@ speed {{ client.netSpeed }} Mbps } + @if (client.isRemotePcActive) { + + computer + RemotePC + + }
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index c493dcb..3fd0719 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -1,6 +1,6 @@ import { inject } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; -import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren, ChangeDetectorRef, HostListener } from '@angular/core'; import { HttpClient, HttpParams } from '@angular/common/http'; import { Router } from '@angular/router'; import { MatDialog } from '@angular/material/dialog'; @@ -220,6 +220,10 @@ export class GroupsComponent implements OnInit, OnDestroy { ngOnInit(): void { + const savedWidth = localStorage.getItem('oggui_tree_panel_width_' + (this.auth.username || 'default')); + if (savedWidth) { + this.treePanelWidth = parseInt(savedWidth, 10); + } this.updateGridCols(); this.refreshData(localStorage.getItem('lastSelectedOU') ?? undefined); window.addEventListener('resize', this.updateGridCols); @@ -1319,6 +1323,30 @@ export class GroupsComponent implements OnInit, OnDestroy { // Métodos para el árbol mejorado + isTreeResizing: boolean = false; + treePanelWidth: number = 280; // width base original ajustado + + onTreeResizeStart(event: MouseEvent) { + this.isTreeResizing = true; + event.preventDefault(); // Previene la selección de texto al arrastrar + } + + @HostListener('window:mousemove', ['$event']) + onTreeResizeMove(event: MouseEvent) { + if (!this.isTreeResizing) return; + this.treePanelWidth += event.movementX; + if (this.treePanelWidth < 250) this.treePanelWidth = 250; + if (this.treePanelWidth > 800) this.treePanelWidth = 800; + } + + @HostListener('window:mouseup', ['$event']) + onTreeResizeEnd(event: MouseEvent) { + if (this.isTreeResizing) { + this.isTreeResizing = false; + localStorage.setItem('oggui_tree_panel_width_' + (this.auth.username || 'default'), this.treePanelWidth.toString()); + } + } + isTreeExpanded: boolean = false; toggleExpandAll(): void { diff --git a/ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.css b/ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.css index 53b575c..14e846f 100644 --- a/ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.css +++ b/ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.css @@ -143,19 +143,21 @@ mat-dialog-content { .remote-pc-badge { display: inline-flex; align-items: center; - gap: 2px; - background-color: #1976d2; - color: white; - padding: 2px 6px; - border-radius: 10px; - font-size: 10px; - font-weight: bold; - margin-top: 3px; + gap: 4px; + background-color: #e3f2fd; + color: #1976d2; + font-size: 0.75rem; + font-weight: 600; + padding: 2px 8px; + border-radius: 12px; + width: fit-content; + margin-top: 4px; } .remote-pc-icon { - font-size: 12px; - height: 12px; - width: 12px; - line-height: 12px; + font-size: 14px; + width: 14px; + height: 14px; + line-height: 14px; } +