💾Assets

Come personalizzare OpenSTAManager tramite l'utilizzo di assets

Web assets are things like CSS, JavaScript and image files that make the frontend of your site look and work great.

Symfony

Gli assets sono, all’interno dei moderni ambienti di sviluppo web, il cuore pulsante del software in relazione al layout e al livello di accessibilità. In particolare, il termine assets fa solitamente riferimento ai componenti di natura grafica di un software quali immagini, fonts e icone, linguaggi di scripting client-side (JavaScript) e fogli di stile a cascata (Cascading Style Sheets).

Il progetto utilizza Yarn per gestire l'installazione e l'aggiornamento degli assets e Gulp per compilarli e associarli con le personalizzazioni. Viene inoltre richiesta la presenza di Git all'interno del sistema operativo.

Struttura

Yarn salva automaticamente gli assets da lui gestiti all'interno della cartella node_modules, non presente nella repository e nelle release del progetto per la sua natura estremamente variabile e facilmente riproducibile (tramite l'utilizzo dello strumento, come si vedrà in Personalizzazione).

Gli assets personalizzati del progetto sono al contrario contenuti all'interno della cartella assets/src; parallelamente, gli assets utilizzati direttamente dal progetto sono infine contenuti all'interno della cartella assets/dist, generata in automatico tramite l'utilizzo di Gulp.

Personalizzazione

L'introduzione di una gestione automatizzata rende, di fatto, maggiormente semplificata la gestione delle dipendenze grafiche del progetto, portando però al tempo stesso alla necessità di utilizzare una specifica procedura per aggiornare e personalizzare gli assets. Si ricorda che è altamente sconsigliato modificare i contenuti delle cartelle node_modules o assets/dist in modo manuale, poiché tali modifiche andrebbero perse a seguito di ogni aggiornamento.

Tema grafico

La personalizzazione dello stile del gestionale può essere effettuata a partire dal foglio di stile assets/src/css/themes/default.css, contenente le principali impostazioni grafiche del progetto. L'aggiunta di un nuovo tema richieda la creazione di un file indipendente nella stessa cartella, rinominando la classe CSS generica con il nome della skin inserita (da .skin-default a .skin-nome).

Una volta eseguita la task automatica di compilazione, il nuovo file varrà aggiunto in themes.min.css di assets/css.

Il tema di default è definito dalla variabile $theme in config.inc.php.

// Tema selezionato per il front-end
$theme = 'default';

Da Strumenti/Gestione accessi/Utenti e permessi è possibile definire un tema predefinito per gruppo di utenti. A gestionale sono previsti i temi:

• Bianco

• Rosso chiaro

• Rosso

• Blu chiaro

• Blu

• Azzurro chiaro

• Azzurro

• Verde chiaro

• Verde

• Giallo chiaro

• Giallo

• Viola chiaro

• Viola

Aggiornamento e installazione pacchetti

Nel caso si rivelasse necessario installare o aggiornare i pacchetti predisposti dal gestionale, è necessario procedere all'esecuzione dei comandi caratteristici di Yarn e successivamente eseguire una compliazione degli assets.

L'installazione di nuovi pacchetti viene eseguita attraverso il seguente comando:

yarn add <package>

L'aggiornamento degli assets gestiti è effettuabile tramite il seguente comando:

yarn upgrade

Per ulteriori informazioni, consultare la documentazione ufficiale di Yarn.

Compilazione

Per compilare gli assets, sia quelli gestiti da Yarn che quelli personalizzati, è necessario eseguire il seguente comando:

yarn run build-OSM

Attenzione: la compilazione è fondamentale a seguito di ogni modifica degli assets, poiché altrimenti i file utilizzati dal progetto non saranno aggiornati.

Assets predefiniti

• fullcalendar/moment

• select2-bootstrap4-theme

• admin-lte

• autocompleter

• autonumeric

• autosize

• bootstrap

• bootstrap-colorpicker

• bootstrap-daterangepicker

• bootstrap-maxlength

• chart.js

• ckeditor

• ckeditor4

• clipper-lib

• components-jqueryui

• datatables.net-bs

• datatables.net-buttons-bs

• datatables.net-scroller-bs

• datatables.net-select-bs

• dropzone

• eonasdan-bootstrap-datetimepicker

• font-awesome

• fullcalendar-scheduler

• geocomplete

• gl-matrix

• hotkeys-js

• html5sortable

• inputmask

• ismobilejs

• jquery

• jquery-form

• jquery-ui-touch-punch

• js-md5

• jszip

• leaflet

• leaflet-gesture-handling

• leaflet.fullscreen

• merge-stream

• moment

• numeral

• parsleyjs

• pdfjs-viewer-element

• poly2tri

• popper.js

• protobufjs

• pwstrength-bootstrap

• rbush

• readmore.js

• select2

• signature_pad

• sjcl

• smartwizard

• sweetalert2

• toastr

• tooltipster

• ua-parser-js

I nomi sono indicati secondo la notazione tipica dei pacchetti NPM.