docs: add design spec for gvScostamentoPerformance grid layout improvement
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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
|
||||||
Reference in New Issue
Block a user