# 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
