docs: add design spec for gvScostamentoPerformance grid layout improvement

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-27 12:29:29 +01:00
parent 57fc26d4eb
commit 10f1b055b3
1 changed files with 125 additions and 0 deletions
--- a/docs/superpowers/specs/2026-03-27-scostamento-performance-grid-design.md
+++ b/docs/superpowers/specs/2026-03-27-scostamento-performance-grid-design.md
@@ -0,0 +1,125 @@
+# Design Spec: Miglioramento visivo gvScostamentoPerformance
+
+**Data:** 2026-03-27
+**File coinvolti:** `OlympiaIntranet/ScostamentoPerformance.aspx`
+
+---
+
+## Obiettivo
+
+Rendere la griglia `gvScostamentoPerformance` visivamente gradevole e consultabile facilmente, risolvendo:
+1. Colonne troppo schiacciate (larghezze in % su 15+ colonne visibili)
+2. Bordo inferiore della griglia non visibile
+3. "Create Filter" appena leggibile
+4. Inconsistenza di tema tra il form filtri (Aqua) e la griglia (Office2010Blue)
+
+---
+
+## Decisioni di design
+
+### 1. Tema: Aqua uniforme
+Sia `ASPxFormLayout` (già Aqua) che `ASPxGridView` (attualmente Office2010Blue) usano `Theme="Aqua"`. Garantisce coerenza visiva e migliore contrasto per la filter bar.
+
+### 2. Layout colonne: Fixed + scroll orizzontale + colonne bloccate
+- Tutte le larghezze colonna passano da percentuale a **pixel fissi**
+- La griglia abilita lo **scroll orizzontale** (`HorizontalScrollBarMode="Visible"`)
+- Le prime 4 colonne (Edit, Gestore, Portafoglio, Intestazione) vengono **bloccate a sinistra** tramite `Fixed="True"`, così restano visibili durante lo scroll orizzontale
+
+### 3. CSS override su tema Aqua
+Un blocco `<style>` inline nella pagina sovrascrive selettivamente il tema Aqua per avvicinarsi al mockup approvato:
+- Header colonne: gradiente blu Aqua con padding aumentato
+- Celle dati: `padding: 6px 8px` (vs default troppo stretto)
+- Bordo inferiore griglia: `border-bottom: 2px solid #4a90d9`
+- Filter bar ("Create Filter"): sfondo `#e0f0fb`, testo `#1a6bb5`, bordo `#b0cfe8`
+- Separatore visivo tra colonne bloccate e colonne scorrevoli: `border-right: 2px solid #2a6fb0` sull'ultima colonna bloccata
+
+---
+
+## Larghezze colonne (pixel fissi)
+
+| Colonna | Larghezza |
+|---|---|
+| Command (edit) | 50px |
+| Gestore | 90px — **bloccata** |
+| Portafoglio | 90px — **bloccata** |
+| Intestazione | 150px — **bloccata** |
+| Linea | 90px |
+| Patrimonio | 110px |
+| Data Apertura | 90px |
+| TWR Ptf | 85px |
+| TWR Linea | 95px |
+| Delta TWR | 80px |
+| Benchmark | 90px |
+| Apporti | 95px |
+| Prelievi | 95px |
+| Addebiti | 95px |
+| Commento | 210px |
+| Note | 170px |
+| Blocco | 60px |
+
+Larghezza totale stimata: ~1645px — oltre la larghezza tipica di uno schermo, giustifica lo scroll orizzontale.
+
+---
+
+## Modifiche al markup ASPX
+
+### ASPxGridView — attributi da modificare/aggiungere
+
+```xml
+Theme="Aqua"
+```
+(sostituisce `Office2010Blue`)
+
+```xml
+<Settings
+    ShowFilterRow="True"
+    ShowHeaderFilterButton="True"
+    ShowFilterBar="Visible"
+    VerticalScrollBarMode="Visible"
+    VerticalScrollableHeight="750"
+    HorizontalScrollBarMode="Visible" />
+```
+(aggiunge `HorizontalScrollBarMode="Visible"`)
+
+### Colonne bloccate
+
+Aggiungere `Fixed="True"` su:
+- `GridViewCommandColumn` (edit)
+- `GridViewDataTextColumn` Gestore
+- `GridViewDataTextColumn` Portafoglio
+- `GridViewDataTextColumn` Intestazione
+
+### CSS override (blocco `<style>` nella `<head>`)
+
+```css
+/* Padding celle griglia */
+.dxgvDataRow_Aqua td,
+.dxgvDataRow_Aqua td.dxgvTD_Aqua {
+    padding: 6px 8px !important;
+}
+
+/* Bordo inferiore griglia */
+.dxgvControl_Aqua {
+    border-bottom: 2px solid #4a90d9 !important;
+}
+
+/* Filter bar visibile */
+.dxgvFilterBar_Aqua {
+    background-color: #e0f0fb !important;
+    border-top: 1px solid #b0cfe8 !important;
+    color: #1a6bb5 !important;
+}
+
+/* Separatore colonne bloccate */
+.dxgvFixedColumnLeftDivider_Aqua {
+    border-right: 2px solid #2a6fb0 !important;
+}
+```
+
+---
+
+## Fuori scope
+
+- Nessuna modifica al code-behind `.aspx.cs`
+- Nessuna modifica al datasource o alla logica di business
+- Nessuna modifica alle altre pagine