Compare commits
6 Commits
57fc26d4eb
...
8b1b5de754
| Author | SHA1 | Date | |
|---|---|---|---|
| 8b1b5de754 | |||
| cded6d3119 | |||
| e1f9a3a284 | |||
| bc4ec5768c | |||
| a5e30f152e | |||
| 10f1b055b3 |
@@ -9,6 +9,29 @@
|
||||
<title>Scostamento Performance</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
|
||||
|
||||
/* 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 ("Crea Filtro") visibile */
|
||||
.dxgvFilterBar_Aqua {
|
||||
background-color: #e0f0fb !important;
|
||||
border-top: 1px solid #b0cfe8 !important;
|
||||
color: #1a6bb5 !important;
|
||||
}
|
||||
|
||||
/* Separatore visivo tra colonne bloccate e scorrevoli */
|
||||
.dxgvFixedColumnLeftDivider_Aqua {
|
||||
border-right: 2px solid #2a6fb0 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -61,9 +84,9 @@
|
||||
<tr>
|
||||
<td>
|
||||
<div>
|
||||
<dx:ASPxGridView ID="gvScostamentoPerformance" runat="server"
|
||||
EnableTheming="True"
|
||||
Theme="Office2010Blue"
|
||||
<dx:ASPxGridView ID="gvScostamentoPerformance" runat="server"
|
||||
EnableTheming="True"
|
||||
Theme="Aqua"
|
||||
AutoGenerateColumns="False"
|
||||
Width="100%"
|
||||
KeyFieldName="Id"
|
||||
@@ -74,7 +97,7 @@
|
||||
OnHtmlDataCellPrepared="gvScostamentoPerformance_HtmlDataCellPrepared"
|
||||
OnDataBinding="gvScostamentoPerformance_DataBinding">
|
||||
<SettingsPager Mode="ShowAllRecords" />
|
||||
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" />
|
||||
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" HorizontalScrollBarMode="Visible" />
|
||||
<SettingsBehavior FilterRowMode="Auto" AllowFocusedRow="True" />
|
||||
<SettingsEditing Mode="Inline" />
|
||||
|
||||
@@ -85,40 +108,40 @@
|
||||
<SettingsFilterControl ViewMode="VisualAndText" />
|
||||
|
||||
<Columns>
|
||||
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " />
|
||||
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " Fixed="True" />
|
||||
<dx:GridViewDataTextColumn FieldName="Id" VisibleIndex="1" Visible="false" ReadOnly="true" />
|
||||
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="6%" />
|
||||
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="6%" />
|
||||
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="10%" />
|
||||
<dx:GridViewDataTextColumn FieldName="Linea" Caption="Linea" VisibleIndex="5" ReadOnly="true" Width="6%" />
|
||||
<dx:GridViewDataTextColumn FieldName="Patrimonio" Caption="Patrimonio" VisibleIndex="6" ReadOnly="true" Width="6%">
|
||||
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="90px" Fixed="True" />
|
||||
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="90px" Fixed="True" />
|
||||
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="150px" Fixed="True" />
|
||||
<dx:GridViewDataTextColumn FieldName="Linea" Caption="Linea" VisibleIndex="5" ReadOnly="true" Width="90px" />
|
||||
<dx:GridViewDataTextColumn FieldName="Patrimonio" Caption="Patrimonio" VisibleIndex="6" ReadOnly="true" Width="110px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="DataApertura" Caption="Data Ap." VisibleIndex="7" ReadOnly="true" Width="5%">
|
||||
<dx:GridViewDataTextColumn FieldName="DataApertura" Caption="Data Ap." VisibleIndex="7" ReadOnly="true" Width="90px">
|
||||
<PropertiesTextEdit DisplayFormatString="dd/MM/yyyy" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRPtf" Caption="TWR Ptf" VisibleIndex="8" ReadOnly="true" Width="4%">
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRPtf" Caption="TWR Ptf" VisibleIndex="8" ReadOnly="true" Width="85px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRLinea" Caption="TWR Linea" VisibleIndex="9" ReadOnly="true" Width="5%">
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRLinea" Caption="TWR Linea" VisibleIndex="9" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="DeltaTWR" Caption="Delta" VisibleIndex="10" ReadOnly="true" Width="4%">
|
||||
<dx:GridViewDataTextColumn FieldName="DeltaTWR" Caption="Delta" VisibleIndex="10" ReadOnly="true" Width="80px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="Benchmark" Caption="Benchmark" VisibleIndex="10" ReadOnly="true" Width="4%">
|
||||
<dx:GridViewDataTextColumn FieldName="Benchmark" Caption="Benchmark" VisibleIndex="11" ReadOnly="true" Width="90px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="Apporti" Caption="Apporti" VisibleIndex="11" ReadOnly="true" Width="5%">
|
||||
<dx:GridViewDataTextColumn FieldName="Apporti" Caption="Apporti" VisibleIndex="12" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="Prelievi" Caption="Prelievi" VisibleIndex="12" ReadOnly="true" Width="5%">
|
||||
<dx:GridViewDataTextColumn FieldName="Prelievi" Caption="Prelievi" VisibleIndex="13" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataTextColumn FieldName="Addebiti" Caption="Addebiti" VisibleIndex="13" ReadOnly="true" Width="5%">
|
||||
<dx:GridViewDataTextColumn FieldName="Addebiti" Caption="Addebiti" VisibleIndex="14" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
<dx:GridViewDataComboBoxColumn FieldName="Commento" Caption="Commento" VisibleIndex="14" Width="16%">
|
||||
<dx:GridViewDataComboBoxColumn FieldName="Commento" Caption="Commento" VisibleIndex="15" Width="210px">
|
||||
<PropertiesComboBox>
|
||||
<Items>
|
||||
<dx:ListEditItem Text="" Value="" />
|
||||
@@ -130,12 +153,12 @@
|
||||
</Items>
|
||||
</PropertiesComboBox>
|
||||
</dx:GridViewDataComboBoxColumn>
|
||||
<dx:GridViewDataMemoColumn FieldName="Note" Caption="Note" VisibleIndex="14" Width="12%">
|
||||
<dx:GridViewDataMemoColumn FieldName="Note" Caption="Note" VisibleIndex="16" Width="170px">
|
||||
<PropertiesMemoEdit Rows="3" />
|
||||
</dx:GridViewDataMemoColumn>
|
||||
<dx:GridViewDataCheckColumn FieldName="BloccoCommento" Caption="Blocco" VisibleIndex="15" Width="3%" />
|
||||
<dx:GridViewDataTextColumn FieldName="DataRiferimento" Caption="Data Rif." VisibleIndex="16" ReadOnly="true" Visible="false" />
|
||||
<dx:GridViewDataTextColumn FieldName="MeseRiferimento" Caption="Mese" VisibleIndex="17" ReadOnly="true" Visible="false" />
|
||||
<dx:GridViewDataCheckColumn FieldName="BloccoCommento" Caption="Blocco" VisibleIndex="17" Width="60px" />
|
||||
<dx:GridViewDataTextColumn FieldName="DataRiferimento" Caption="Data Rif." VisibleIndex="18" ReadOnly="true" Visible="false" />
|
||||
<dx:GridViewDataTextColumn FieldName="MeseRiferimento" Caption="Mese" VisibleIndex="19" ReadOnly="true" Visible="false" />
|
||||
</Columns>
|
||||
</dx:ASPxGridView>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,268 @@
|
||||
# gvScostamentoPerformance Grid Layout — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Migliorare la leggibilità e la presentazione visiva della griglia `gvScostamentoPerformance` in `ScostamentoPerformance.aspx` — colonne fisse in px, scroll orizzontale, colonne bloccate, tema Aqua uniforme e CSS override mirati.
|
||||
|
||||
**Architecture:** Tutte le modifiche sono confinate al solo file `ScostamentoPerformance.aspx`. Il markup ASPX viene aggiornato inline (attributi DevExpress + blocco `<style>`). Nessuna modifica al code-behind né al datasource.
|
||||
|
||||
**Tech Stack:** ASP.NET Web Forms 4.7.2, DevExpress ASPxGridView v23.2, tema Aqua, CSS inline override.
|
||||
|
||||
---
|
||||
|
||||
## File coinvolti
|
||||
|
||||
| Operazione | File |
|
||||
|---|---|
|
||||
| Modify | `OlympiaIntranet/ScostamentoPerformance.aspx` |
|
||||
|
||||
Nessun file creato. Nessun file di test (il progetto non ha suite di test — verifica visiva via IIS Express).
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Tema Aqua e scroll orizzontale
|
||||
|
||||
Modificare gli attributi radice di `gvScostamentoPerformance` per cambiare tema e abilitare lo scroll orizzontale.
|
||||
|
||||
**Files:**
|
||||
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:64-77`
|
||||
|
||||
- [ ] **Step 1: Cambiare Theme da Office2010Blue ad Aqua**
|
||||
|
||||
Nel tag di apertura `<dx:ASPxGridView ID="gvScostamentoPerformance"` alla riga 64, sostituire:
|
||||
```xml
|
||||
Theme="Office2010Blue"
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
Theme="Aqua"
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Aggiungere HorizontalScrollBarMode al blocco Settings**
|
||||
|
||||
Sostituire il blocco `<Settings ... />` esistente (riga 77):
|
||||
```xml
|
||||
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" HorizontalScrollBarMode="Visible" />
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Verifica rapida in Visual Studio**
|
||||
|
||||
Aprire il file in VS2022 e controllare che non ci siano errori di markup (il designer dovrebbe caricare senza errori). Se `HorizontalScrollBarMode` non è un attributo valido su `<Settings>` per questa versione di DevExpress, rimuoverlo — lo scroll orizzontale verrà gestito dal CSS nel Task 3.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add OlympiaIntranet/ScostamentoPerformance.aspx
|
||||
git commit -m "style: change gvScostamentoPerformance theme to Aqua, enable horizontal scroll"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Colonne bloccate e larghezze in pixel fissi
|
||||
|
||||
Aggiornare ogni colonna: `Fixed="True"` sulle prime 4, larghezza in px su tutte.
|
||||
|
||||
**Files:**
|
||||
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:88-139`
|
||||
|
||||
- [ ] **Step 1: Bloccare la colonna Command (riga 88)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Bloccare e fissare la colonna Gestore (riga 90)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="6%" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="90px" Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Bloccare e fissare la colonna Portafoglio (riga 91)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="6%" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="90px" Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Bloccare e fissare la colonna Intestazione (riga 92)**
|
||||
|
||||
Sostituire:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="10%" />
|
||||
```
|
||||
con:
|
||||
```xml
|
||||
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="150px" Fixed="True" />
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Aggiornare larghezze delle colonne restanti**
|
||||
|
||||
Sostituire le colonne seguenti (solo attributo `Width`, nessun altro cambiamento):
|
||||
|
||||
```xml
|
||||
<!-- Linea: 6% → 90px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Linea" Caption="Linea" VisibleIndex="5" ReadOnly="true" Width="90px" />
|
||||
|
||||
<!-- Patrimonio: 6% → 110px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Patrimonio" Caption="Patrimonio" VisibleIndex="6" ReadOnly="true" Width="110px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- DataApertura: 5% → 90px -->
|
||||
<dx:GridViewDataTextColumn FieldName="DataApertura" Caption="Data Ap." VisibleIndex="7" ReadOnly="true" Width="90px">
|
||||
<PropertiesTextEdit DisplayFormatString="dd/MM/yyyy" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- PerfTWRPtf: 4% → 85px -->
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRPtf" Caption="TWR Ptf" VisibleIndex="8" ReadOnly="true" Width="85px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- PerfTWRLinea: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="PerfTWRLinea" Caption="TWR Linea" VisibleIndex="9" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- DeltaTWR: 4% → 80px -->
|
||||
<dx:GridViewDataTextColumn FieldName="DeltaTWR" Caption="Delta" VisibleIndex="10" ReadOnly="true" Width="80px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Benchmark: 4% → 90px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Benchmark" Caption="Benchmark" VisibleIndex="10" ReadOnly="true" Width="90px">
|
||||
<PropertiesTextEdit DisplayFormatString="N2" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Apporti: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Apporti" Caption="Apporti" VisibleIndex="11" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Prelievi: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Prelievi" Caption="Prelievi" VisibleIndex="12" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Addebiti: 5% → 95px -->
|
||||
<dx:GridViewDataTextColumn FieldName="Addebiti" Caption="Addebiti" VisibleIndex="13" ReadOnly="true" Width="95px">
|
||||
<PropertiesTextEdit DisplayFormatString="N0" />
|
||||
</dx:GridViewDataTextColumn>
|
||||
|
||||
<!-- Commento: 16% → 210px -->
|
||||
<dx:GridViewDataComboBoxColumn FieldName="Commento" Caption="Commento" VisibleIndex="14" Width="210px">
|
||||
<!-- PropertiesComboBox invariato -->
|
||||
</dx:GridViewDataComboBoxColumn>
|
||||
|
||||
<!-- Note: 12% → 170px -->
|
||||
<dx:GridViewDataMemoColumn FieldName="Note" Caption="Note" VisibleIndex="14" Width="170px">
|
||||
<PropertiesMemoEdit Rows="3" />
|
||||
</dx:GridViewDataMemoColumn>
|
||||
|
||||
<!-- BloccoCommento: 3% → 60px -->
|
||||
<dx:GridViewDataCheckColumn FieldName="BloccoCommento" Caption="Blocco" VisibleIndex="15" Width="60px" />
|
||||
```
|
||||
|
||||
- [ ] **Step 6: Commit**
|
||||
|
||||
```bash
|
||||
git add OlympiaIntranet/ScostamentoPerformance.aspx
|
||||
git commit -m "style: fix column widths to px and freeze Gestore/Portafoglio/Intestazione columns"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: CSS override nel blocco `<head>`
|
||||
|
||||
Aggiungere gli stili inline che correggono padding, bordo inferiore, filter bar e separatore colonne bloccate.
|
||||
|
||||
**Files:**
|
||||
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:10-12`
|
||||
|
||||
- [ ] **Step 1: Aggiungere il blocco CSS dopo lo stile esistente**
|
||||
|
||||
Il blocco `<style>` attuale (righe 10–12) contiene:
|
||||
```html
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
|
||||
</style>
|
||||
```
|
||||
|
||||
Sostituirlo con:
|
||||
```html
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
|
||||
|
||||
/* 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 ("Crea Filtro") visibile */
|
||||
.dxgvFilterBar_Aqua {
|
||||
background-color: #e0f0fb !important;
|
||||
border-top: 1px solid #b0cfe8 !important;
|
||||
color: #1a6bb5 !important;
|
||||
}
|
||||
|
||||
/* Separatore visivo tra colonne bloccate e scorrevoli */
|
||||
.dxgvFixedColumnLeftDivider_Aqua {
|
||||
border-right: 2px solid #2a6fb0 !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
> **Nota:** I selettori CSS usano i nomi di classe generati da DevExpress per il tema Aqua. Se a runtime le classi effettive differiscono (verificabile con DevTools del browser → Inspect sull'elemento griglia), aggiornare i selettori con quelli reali. Il pattern è sempre `dxgv<Elemento>_<Tema>`.
|
||||
|
||||
- [ ] **Step 2: Verifica visiva in IIS Express**
|
||||
|
||||
Avviare il progetto (F5 in VS2022), navigare a `ScostamentoPerformance.aspx` e controllare:
|
||||
- ✅ Header griglia in blu Aqua (coerente con il form filtri sopra)
|
||||
- ✅ Colonne Gestore/Portafoglio/Intestazione restano visibili durante lo scroll orizzontale
|
||||
- ✅ Celle con padding sufficiente (non schiacciate)
|
||||
- ✅ Bordo inferiore della griglia visibile
|
||||
- ✅ "Crea Filtro" (filter bar) con sfondo azzurro chiaro e testo leggibile
|
||||
|
||||
Se uno o più CSS override non producono effetto, aprire DevTools (F12), ispezionare l'elemento e trovare il selettore corretto generato da DevExpress, quindi aggiornarlo nel markup.
|
||||
|
||||
- [ ] **Step 3: Commit finale**
|
||||
|
||||
```bash
|
||||
git add OlympiaIntranet/ScostamentoPerformance.aspx
|
||||
git commit -m "style: add CSS overrides for Aqua theme — padding, bottom border, filter bar, fixed column divider"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Push su remote
|
||||
|
||||
- [ ] **Step 1: Push su Gitea**
|
||||
|
||||
```bash
|
||||
git push origin master
|
||||
```
|
||||
|
||||
Verifica su `https://git.smart-roots.net/glicciardello/OlympiaIntranet` che i 3 commit siano visibili nel branch `master`.
|
||||
@@ -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