Abbiamo appena rilasciato la versione 24.5 di Instant Developer Foundation con il nuovo tema grafico Vela per le applicazioni web.
Ecco un’anteprima dell’aspetto di una videata:
Che ne dite vi piace?
6 Mi Piace
Ciao, è ancora presto per dare un giudizio completo, ma anche solo provando il Northwind non posso fare a meno di notare che l’intestazione dell’applicazione, l’intestazione della videata, la toolbar del pannello, le intestazioni di colonna e la riga dei filtri automatici hanno un’altezza complessiva di circa 300 px.
Quando si va nel mondo reale dagli utenti, ce ne sono tantissimi (circa la metà) che hanno una risoluzione in altezza dello schermo inferiore ai 900 px, con una buona percentuale ferma ancora ai 768 px).
Se si aggiungono anche i 100-150 px in media che utilizzano i browser, più quelli della barra di sistema, ci si accorge che in un ipotetico pannello di lista ordini (es. Northwind) rimane pochissimo spazio per i dati che contano veramente: le righe.
Ho lavorato anche io con esperti di UI/UX. Lavorano sempre tutti con schermi enormi, e prediligono sempre i grandi spazi che inducono pulizia e ordine.
E’ sempre molto difficile fargli capire che l’esperienza degli utenti veri, spesso è molto diversa dalla loro. Un mio utente vuole vedere i suoi ordini, non una prateria bianco-grigia.
Ulteriore esempio è la suddetta videata degli ordini su Northwind. Il pannello, con una risoluzione alta 768 px, non entra completamente nella videata, facendo scomparire la toolbar quando si arriva a scrollare sulle ultime righe.
Non tutti i parchi clienti sono gli stessi, ed è sempre tutto personalizzabile tramite CSS, però mi piaceva condividere questa riflessione.
3 Mi Piace
Concordo, anche secondo me altezza zona titolo videata e della toolbar del pannello non dovrebbero essere eccessivi. Anche il tema Zen per me è esagerato, preferisco le impostazioni delle altezze che ha Seattle.
Sarebbe bello avere un posto, per esempio nel Wizard in cui poter impostare almeno quelle due altezze in pixel.
Oppure meglio ancora… avere dei temi con le media query che siano adattivi per davvero, e che modifichino l’aspetto delle applicazioni in base allo spazio a disposizione.
Es. con altezza < 900 px, riduci i margini, padding, ecc…
2 Mi Piace
Grazie a tutti dei suggerimenti.
Con questo tema grafico volevamo staccarci dai temi precedenti e ottenere un risultato che fosse in linea con gli standard moderni anche per applicazioni non solo gestionali.
Uno dei vantaggi del motore Fluid, alla base anche di Vela, è quello di poter essere facilmente personalizzato per rispondere alle proprie esigenze.
Con poche righe di CSS è stato possibile ottenere questo risultato diminuendo gli spazi delle intestazioni.
Solo abbassando l’altezza delle caption di applicazione, videata e toolbar si recuperano 96px, poi si possono altre riduzioni.
Qui il CSS da aggiungere a customf.css by @d.pierangeli.
ion-header.main-header .toolbar, ion-header.main-header .toolbar > .toolbar-background {
min-height: 40px;
}
ion-header.main-header .toolbar > * {
font-size: 8pt;
line-height:8pt;
height: 30px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
ion-split-pane.main-split-pane:not(.no-header), .main-vertical-pane:not(.no-header) {
margin-top: 40px;
}
ion-content.main-menu-content .main-menu-inner-content {
padding: 4px 4px 4px 4px;
}
ion-navbar.view-navbar.toolbar.show-navbar {
padding: 2px 8px 2px 8px;
}
ion-navbar.toolbar.view-navbar {
min-height: 40px;
}
.toolbar .bar-button-icon-only, .button.generic-btn.button-icon-only {
height: 30px !important;
width: 30px !important;
padding: 0px !important;
min-width: 30px;
}
ion-buttons.main-menu-toolbar-list.show-page button.bar-button {
height: 30px;
min-width: 30px;
}
ion-header.main-header .main-header-cmd-input input {
height: 30px;
}
ion-header.main-header .toolbar {
padding: 0 6pt;
}
div.frame-container > ion-list-header.frame-toolbar {
max-height: 44px !important;
min-height: 44px !important;
line-height: 40px !important;
padding: 2px !important;
}
6 Mi Piace
Grazie @paolo.giannelli e @d.pierangeli per il CSS. Fa sempre comodo avere un punto di partenza.
Il problema è che questi standard moderni non tengono conto di chi ha risoluzioni più piccole, e purtroppo come vi scrivevo, ce ne sono molti.
Comunque in generale, il tema è piacevole, e penso sia un ottimo punto di partenza per eventualmente farlo proprio con le modifiche del caso.
Ciao!
2 Mi Piace
Ottimo che la cosa possa essere utile @tommaso.simoncini.
Poi se fai una tua versione minimale con font più piccolo, cambi più bassi e altre modifiche ce la farai vedere vero?
Grazie Paolo e Diego per l’esempio di personalizzazione.
1 Mi Piace
Eh… sono ancora fermo su una personalizzazione del tema ZEN. Passare a Fluid in generale sarà un bello scoglio che devo pianificare tra le varie attività. Se mi ricordo, lo condivido.
1 Mi Piace
Abbiamo rilasciato la 24.5 r8 con importanti miglioramenti e correzioni.
Miglioramenti
Elenco delle miglioramenti contenuti nell’aggiornamento 24.5 r8 rilasciato il 24 ottobre 2024:
- IDE: L’operazione di importazione componenti ora è decisamente più veloce. Miglioramento relativo ai ticket: 000407-2024 e 001990-2024
- C#: ora è possibile inviare mail con allegati inline anche se si usa l’opzione TLS/SSL. Miglioramento relativo a questo tread del forum.
Correzioni
Elenco delle correzioni contenute nell’aggiornamento 24.5 r8 rilasciato il 24 ottobre 2024:
- IDE: Se una costante parte di un dominio di un campo del database conteneva il carattere " ed era presente un documento basato sulla tabella che conteneva il campo, si otteneva un errore in compilazione. Correzione relativa al ticket: 002083-2024
- IDE: Se un’espressione conteneva una funzione client di un database, la validazione del progetto poteva restituire un errore di espressione non valida. Correzione relativa al ticket: 002091-2024.
Nota: dopo aver aperto il progetto, occorre eseguire almeno una modifica dell’applicazione per far sì che le espressioni vengano rivalidate. Se si compila il progetto subito dopo averlo aperto, è possibile che l’errore sia ancora presente. - FLUID: Il metodo setPanelConfiguration non ripristinava correttamente la posizione dei campi in lista ottenuta tramite il metodo getPanelConfiguration. Correzione relativa al ticket 002010-2024.
- FLUID: Se si aveva una videata con una tabbed view, in cui all’interno di una delle tab non attive c’era un pannello paginato che aveva un campo statico con al suo interno un pannello adattabile in larghezza, attivando quella pagina il sotto pannello non si allargava quanto avrebbe dovuto. Correzione relativa al ticket 002112-2024.
3 Mi Piace
Ciao Paolo,
sto provando Vela e in una app con menu nella parte alta dello schermo si vede questo:
Sembra che non sia gestito come quello del menù laterale. I Font per altro sono enormi,
Ciao @m.pezone direi che come per tutti i malfunzionamenti la cosa migliore da fare è inserire un ticket di malfunzionamento di Fluid sul tema Vela e il reparto di Supporto lo sistema.
Abbiamo rilasciato la 24.5 r9 con correzioni di Vela e Fluid.
Correzioni
Elenco delle correzioni contenute nell’aggiornamento 24.5 r9 rilasciato il 4 novembre 2024:
- IDRE: I book in anteprima non venivano mostrati a video nellle applicazioni offline se c’era un VisualStyle associato a uno span. Malfunzionamento relativo al ticket 002145-2024.
- INC: Gli Span editabili di tipo numerico mostravano sia la tastiera del dispositivo che quella numerica per inserire il dato. Malfunzionamento relativo al ticket 002145-2024.
- VELA: I pannelli inseriti all’interno di videate modali potevano mostrare scrollbar inattese in layout form. Malfunzionamento relativo al ticket 002121-2024.
- VELA: La pagina di caricamento dell’applicazione mostrava sempre il nome “Nuova Applicazione Web” invece di quello dell’applicazione. Malfunzionamento relativo al ticket 002180-2024.
- FLUID: I tooltip impostati sulle linguette delle tabbed view non venivano mostrati come rich tooltip. Malfunzionamento relativo al ticket 002182-2024.
- FLUID: Le videate docked quando selezionate nascondevano le videate principali. Malfunzionamento relativo al ticket 002180-2024.
- FLUID: Il Drag&Drop specifico degli alberi non funzionava se contemporaneamente veniva anche abilitato il drag&drop generico. Malfunzionamento relativo al ticket 002180-2024.
- FLUID: Se si applicava un filtro su una colonna non veniva mostrata l’icona di filtro. Malfunzionamento relativo al ticket 002141-2024.
3 Mi Piace
Ciao, vela dovrebbe permettere la personalizzazione complete dell’interfaccia utente attraverso customf.css. Ho trovato però Un caso in cui degli stili sono definiti come !important nel css originale di vela.
Sto parlando delle scrollbar. Sembra che per personalizzarle non possa usare una istruzione tipo:
::-webkit-scrollbar {
width: 14px !important;
height: 16px !important;
}
perchè non riesce a sovrascrivere l’istruzione che trova in vela:
/***** SCROLLBAR SECTION *****/
::-webkit-scrollbar{
width: 6px !important;
height: 6px !important;
}
Come posso gestire questo caso ?
Vorrei utilizzare, se possibile, solo customf.css
Penso che in questo caso ci serva un aiuto di qualcuno più esperto di me di questi CSS, @d.pierangeli tu che ne dici?
Salve a tutti, anche io incuriosito dal tema Vela ho provato ad iniziare un progetto per customizzare il css ed alcuni aspetti. Il tema è molto carino ma non riesco a capire certi comportamenti, non so se sono derivanti da Fluid o proprio dal tema, in azienda stiamo ancora usando Zen in versione base.
- Le immagini hanno un minimo di dimensione verticale di 40px, se si inseriscono più piccole nel pannello comunque poi in fase di compilazione vengono portate fino a 40px in verticale
- Nei campi di dettaglio l’altezza dei campi non corrisponde all’altezza inserita in fase di design. Anche qui c’è un’altezza minima di 32px?
- Non c’è più modo di inserire la toolbar in alto accanto ai tasti di debug e di logoff? Quando inserisco una toolbar viene messa sotto e mi mangia altro spazio nella pagina
- Non è possibile togliere il collapsable dal menù laterale di sinistra e anche la parte delle videate aperte senza customizzazioni CSS? Mi pareva che Zen fosse possibile
Per il resto il tema mi piace e dà un look molto moderno!
2 Mi Piace
Ciao @gianluca.fabbri un benvenuto al tuo primo messaggio!
Il tema ha alcuni default che sono proprio nel file vela.css che trovi nella directory:
- Directory installazione Instant Developer Foundation\CURRENT\Template\Fluid\objects\fluid\themes
- L’altezza di default dei campi di Vela è 40px che è anche definita in vela.css
in .panel-form-row .panel-form-col-value dove trovi un min-height: 40px; - Questo si fa dai parametri di compilazione dell’applicazione dove imposti se la toolbar sta nella caption oppure sotto (parametro Posizione toolbar applicazione)
- La presenza del bottone del menu nella caption dell’applicazione la puoi gestire solo da CSS
2 Mi Piace
Grazie mille per le info utilissime.
Sto ancora sviluppando il nostro tema custom e ho appena aggiornato alla versione 25. Sono state fatte diverse correzioni ho visto.
Una domanda: quando apro una videata modale, sembra che venga calcolata male l’altezza e venga inserita una scrollbar che non sarebbe necessaria se le dimensioni fossero calcolate in maniera corretta. Sto sbagliando qualcosa oppure si tratta di un bug?
Grazie mille
@gianluca.fabbri sono sincero che non saprei dirti come viene gestita questa cosa, tiro in ballo @d.pierangeli o @a.marino che ci possono dare un’indicazione in merito.
1 Mi Piace
Così in generale non saprei, sembra un bug a dire il vero. Riesci a replicarlo e a farcelo vedere?
2 Mi Piace