Add thumbnail view to files feld

formwork/translations/it.yml

@@ -15,7 +15,7 @@ date.weekdays.long: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì'
 date.weekdays.short: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']
 fields.array.add: Aggiungi
 fields.array.remove: Rimuovi
-fields.file.uploadLabel: <strong>Fai click</strong> per selezionare un file da caricare o <strong>trascinalo</strong> qui
+fields.file.uploadLabel: <strong>Fare click</strong> per selezionare un file da caricare o <strong>trascinarlo</strong> qui
 zip.error.alreadyExists: L’archivio esiste già
 zip.error.cannotOpen: Impossibile aprire l’archivio
 zip.error.cannotRead: Impossibile leggere l’archivio

panel/assets/icons/svg/ellipsis-h.svg

@@ -0,0 +1 @@
+<svg class="icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm4.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM14 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg>

panel/assets/icons/svg/ellipsis-v.svg

@@ -0,0 +1 @@
+<svg class="icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M8 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-4.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/></svg>

panel/src/js/components/dropdowns.js

@@ -1,3 +1,5 @@
+import Utils from './utils';
+
 export default {
     init: function () {
         if ($('.dropdown')) {
@@ -13,11 +15,42 @@ export default {
                     const isVisible = getComputedStyle(dropdown).display !== 'none';
                     event.preventDefault();
 
+                    const resizeHandler = Utils.throttle(() => {
+                        setDropdownPosition(dropdown);
+                    }, 100);
+
                     if (dropdown && !isVisible) {
                         dropdown.style.display = 'block';
+                        setDropdownPosition(dropdown);
+                        window.addEventListener('resize', resizeHandler);
+                    } else {
+                        window.removeEventListener('resize', resizeHandler);
                     }
                 }
             });
+
+            function setDropdownPosition(dropdown) {
+                dropdown.style.left = 0;
+                dropdown.style.right = '';
+
+                const dropdownRect = dropdown.getBoundingClientRect();
+                const dropdownTop = dropdownRect.top + window.pageYOffset;
+                const dropdownLeft = dropdownRect.left + window.pageXOffset;
+                const dropdownWidth = Utils.outerWidth(dropdown);
+                const dropdownHeight = Utils.outerHeight(dropdown);
+
+                const windowWidth = document.documentElement.clientWidth;
+                const windowHeight = document.documentElement.clientHeight;
+
+                if (dropdownLeft + dropdownWidth > windowWidth) {
+                    dropdown.style.left = 'auto';
+                    dropdown.style.right = 0;
+                }
+
+                if (dropdownTop < window.pageYOffset || window.pageYOffset < dropdownTop + dropdownHeight - windowHeight) {
+                    window.scrollTo(window.pageXOffset, dropdownTop + dropdownHeight - windowHeight);
+                }
+            }
         }
     },
 };

panel/src/js/components/forms.js

@@ -85,6 +85,25 @@ export default {
             ArrayInput(element);
         });
 
+        $$('.files-list').forEach((filesList) => {
+            const toggle = $('.input-togglegroup', filesList);
+
+            const viewAs = window.localStorage.getItem('formwork.filesListViewAs');
+
+            if (viewAs) {
+                $$('input', toggle).forEach((input) => input.checked = false);
+                $(`input[value=${viewAs}]`, filesList).checked = true;
+                filesList.classList.toggle('is-thumbnails', viewAs === 'thumbnails');
+            }
+
+            $$('input', toggle).forEach((input) => {
+                input.addEventListener('input', () => {
+                    filesList.classList.toggle('is-thumbnails', input.value === 'thumbnails');
+                    window.localStorage.setItem('formwork.filesListViewAs', input.value);
+                });
+            });
+        });
+
         // Load the Form component at the end, after initialization of elements
         $$('[data-form]').forEach((element) => {
             Form(element);

panel/src/js/components/utils.js

@@ -280,7 +280,7 @@ export default {
     serializeForm: function (form) {
         const serialized = [];
         for (const field of form.elements) {
-            if (field.name && !field.disabled && field.type !== 'file' && field.type !== 'reset' && field.type !== 'submit' && field.type !== 'button') {
+            if (field.name && !field.disabled && field.getAttribute('data-form-ignore') !== 'true' && field.type !== 'file' && field.type !== 'reset' && field.type !== 'submit' && field.type !== 'button') {
                 if (field.type === 'select-multiple') {
                     for (const option of field.options) {
                         if (option.selected) {

panel/src/scss/components/_dropdowns.scss

@@ -6,6 +6,9 @@
 
 .dropdown-button {
     margin-bottom: 0;
+}
+
+.dropdown-button.caret {
     @include caret;
 }
 
@@ -37,6 +40,7 @@
     width: 100%;
     padding: $dropdown-item-padding-v $dropdown-item-padding-h;
     color: $color-base-100;
+    cursor: pointer !important;
     font-size: $dropdown-item-font-size;
     white-space: nowrap;
     &:hover {

panel/src/scss/components/_files-list.scss

@@ -6,37 +6,111 @@
     @include user-select-none;
 }
 
+.is-thumbnails .files-items {
+    margin: 0 (-$image-picker-thumbnail-margin);
+}
+
 .files-item {
     display: flex;
     align-items: center;
+    padding: 0.5rem;
+    &:hover {
+        background-color: $color-base-800;
+    }
+
+    border-bottom: 1px solid $color-base-600;
+    font-size: $font-size-s;
 }
 
-.files-item-cell {
-    overflow: hidden;
-    padding: $files-item-cell-padding;
-    font-size: $font-size-s;
-    white-space: nowrap;
+.files-item:first-child {
+    border-top: 1px solid $color-base-600;
+}
+
+.files-item .dropdown {
+    margin-bottom: 0;
 }
 
 .file-name {
-    max-width: 80%;
-    flex: 0 0 80%;
-    font-size: $file-name-font-size;
+    flex-grow: 1;
     @include ellipsis;
 }
 
-.file-name .icon {
+.file-icon {
     margin-right: $file-name-icon-margin-right;
-    color: $color-base-100;
 }
 
 .file-size {
     color: $color-base-300;
 }
 
-.file-actions {
-    max-width: 20%;
-    flex: 0 0 20%;
-    font-size: $font-size-m;
-    text-align: right;
+.is-thumbnails .files-item {
+    position: relative;
+    display: inline-block;
+    width: 10rem;
+    height: 10rem;
+    box-sizing: border-box;
+    padding: $image-picker-thumbnail-padding;
+    border: $input-border-width solid $color-base-500;
+    border-radius: $border-radius;
+    margin: $image-picker-thumbnail-margin;
+}
+
+.file-thumbnail {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: none;
+    width: 100%;
+    height: 100%;
+    background-origin: content-box;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.is-thumbnails .file-thumbnail {
+    display: block;
+}
+
+.is-thumbnails .file-name {
+    position: absolute;
+    right: $image-picker-thumbnail-caption-right;
+    bottom: $image-picker-thumbnail-caption-bottom;
+    left: $image-picker-thumbnail-caption-left;
+    display: block;
+    padding: $image-picker-thumbnail-caption-padding-v $image-picker-thumbnail-caption-padding-h;
+    border-radius: $border-radius;
+    background-color: $image-picker-thumbnail-caption-background-color;
+    font-size: $font-size-xs;
+    text-align: center;
+    @include ellipsis;
+    @include user-select-none;
+}
+
+.is-thumbnails .dropdown {
+    position: absolute;
+    top: $image-picker-thumbnail-padding;
+    right: $image-picker-thumbnail-padding;
+}
+
+.is-thumbnails .dropdown-button {
+    background-color: $image-picker-thumbnail-caption-background-color;
+    &:hover, &:focus {
+        background-color: $color-base-500;
+        color: inherit;
+    }
+}
+
+.is-thumbnails .file-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: $color-base-500;
+    font-size: 4rem;
+    line-height: 0;
+    transform: translate(-50%, -50%);
+}
+
+.is-thumbnails .file-thumbnail + .file-icon {
+    display: none;
 }

panel/src/scss/components/_variables.scss

@@ -251,7 +251,7 @@ $dropdown-menu-min-width: 8rem;
 $dropdown-menu-border-width: 1px;
 $dropdown-menu-border-radius: $border-radius;
 
-$dropdown-item-padding-v: 0.25rem;
+$dropdown-item-padding-v: 0.5rem;
 $dropdown-item-padding-h: 1rem;
 $dropdown-item-font-size: $button-font-size;
 

panel/src/scss/components/forms/_forms-image.scss

@@ -17,6 +17,7 @@
     box-sizing: border-box;
     padding: $image-picker-thumbnail-padding;
     border: $input-border-width solid $color-base-500;
+    border-radius: $border-radius;
     margin: $image-picker-thumbnail-margin;
     background-origin: content-box;
     background-position: center;

panel/translations/en.yml

@@ -24,6 +24,9 @@ panel.errors.error.internalServerError.status: Internal Server Error
 panel.errors.error.notFound.description: The page does not exist or the request is not valid.
 panel.errors.error.notFound.heading: Oops, page not found!
 panel.errors.error.notFound.status: Not Found
+panel.files.actions: Actions
+panel.files.viewAsList: View as List
+panel.files.viewAsThumbnails: View as Thumbnails
 panel.login.attempt.failed: Login attempt failed! Try again.
 panel.login.attempt.tooMany: Too many login attempts. Please try again in %d minutes.
 panel.login.loggedOut: You have been logged out
@@ -100,17 +103,16 @@ panel.options.system.languages.preferredLanguage.enabled: Enabled
 panel.options.updated: Options updated
 panel.options.updates: Updates
 panel.pages.attributes: Attributes
-panel.pages.changeSlug: Edit Slug
-panel.pages.changeSlug.generate: Generate From Title
 panel.pages.changes.continue: Continue without Saving
 panel.pages.changes.detected: Changes Detected
 panel.pages.changes.detected.prompt: You have some changes that have not been saved. Are you sure you want to leave this page?
+panel.pages.changeSlug: Edit Slug
+panel.pages.changeSlug.generate: Generate From Title
 panel.pages.content: Content
 panel.pages.deleteFile: Delete File
 panel.pages.deleteFile.prompt: Are you sure you want to delete this file? This action can’t be undone.
 panel.pages.deletePage: Delete Page
 panel.pages.deletePage.prompt: Are you sure you want to delete this page? This action can’t be undone.
-panel.pages.editPage: Edit Page %s
 panel.pages.editor.bold: Bold
 panel.pages.editor.bulletList: Bullet list
 panel.pages.editor.image: Image
@@ -121,16 +123,16 @@ panel.pages.editor.quote: Quote
 panel.pages.editor.redo: Redo
 panel.pages.editor.summary: Summary
 panel.pages.editor.undo: Undo
+panel.pages.editPage: Edit Page %s
 panel.pages.files: Files
-panel.pages.files.uploadLabel: <strong>Click</strong> to choose a file to upload or <strong>drag</strong> it here
 panel.pages.languages: Languages
 panel.pages.languages.addLanguage: Add %s
 panel.pages.languages.editLanguage: Edit %s
 panel.pages.newPage: New Page
 panel.pages.newPage.parent: Parent Page
 panel.pages.newPage.site: Site
-panel.pages.newPage.slugSuggestion: letters, numbers and dashes only
 panel.pages.newPage.slug: Page Slug
+panel.pages.newPage.slugSuggestion: letters, numbers and dashes only
 panel.pages.newPage.template: Template
 panel.pages.newPage.title: Title
 panel.pages.options: Options
@@ -144,11 +146,11 @@ panel.pages.page.cannotCreate.invalidParent: Cannot create page, invalid parent
 panel.pages.page.cannotCreate.invalidSlug: Cannot create page, page slug must contain only letters and numbers separated by dashes
 panel.pages.page.cannotCreate.invalidTemplate: Cannot create page, invalid template
 panel.pages.page.cannotCreate.varMissing: Cannot create page, missing a variable
-panel.pages.page.cannotDeleteFile.fileNotFound: Cannot delete file, file not found
-panel.pages.page.cannotDeleteFile.pageNotFound: Cannot delete file, file not found
 panel.pages.page.cannotDelete.invalidLanguage: 'Cannot delete page, invalid language: %s'
 panel.pages.page.cannotDelete.notDeletable: Cannot delete page, the page is not deletable
 panel.pages.page.cannotDelete.pageNotFound: Cannot delete page, page not found
+panel.pages.page.cannotDeleteFile.fileNotFound: Cannot delete file, file not found
+panel.pages.page.cannotDeleteFile.pageNotFound: Cannot delete file, file not found
 panel.pages.page.cannotEdit.alreadyExists: Cannot edit page, a page with the same uri already exists
 panel.pages.page.cannotEdit.indexOrErrorPageSlug: Cannot edit page slug of index and error pages
 panel.pages.page.cannotEdit.invalidLanguage: 'Cannot edit page, invalid language: %s'
@@ -165,6 +167,7 @@ panel.pages.page.edited: Page edited
 panel.pages.page.fileDeleted: File deleted
 panel.pages.page.image: Image
 panel.pages.page.lastModified: Last Modified
+panel.pages.page.listed: Visible in the menu
 panel.pages.page.moved: Page moved!
 panel.pages.page.noDate: No Date
 panel.pages.page.noImage: No Image
@@ -176,15 +179,14 @@ panel.pages.page.status: Status
 panel.pages.page.tags: Tags
 panel.pages.page.title: Title
 panel.pages.page.unpublishDate: Unpublish Date
-panel.pages.page.listed: Visible in the menu
 panel.pages.pages: Pages
 panel.pages.pages.collapseAll: Collapse All
 panel.pages.pages.expandAll: Expand All
 panel.pages.pages.reorder: Reorder
 panel.pages.pages.search: Search Pages...
 panel.pages.parent: Parent Page
-panel.pages.previewFile: Preview
 panel.pages.preview: Preview
+panel.pages.previewFile: Preview
 panel.pages.save: Save
 panel.pages.status.notPublished: Not Published
 panel.pages.status.notRoutable: Not Routable
@@ -200,9 +202,9 @@ panel.register.register: Register New User
 panel.request.error.postMaxSize: The HTTP POST request exceeds the maximum allowed size
 panel.updates.availableForInstall: is available for install
 panel.updates.check: Check Updates
-panel.updates.installPrompt: Would you like to install the update?
 panel.updates.install: Install
 panel.updates.installed: Update installed!
+panel.updates.installPrompt: Would you like to install the update?
 panel.updates.latestVersionAvailable: is the latest version available
 panel.updates.status.cannotCheck: Cannot check for updates. Try again later.
 panel.updates.status.cannotInstall: Cannot install update
@@ -216,8 +218,8 @@ panel.uploader.error.alreadyExists: A file with the same name already exists
 panel.uploader.error.cannotMoveToDestination: Failed to move uploaded file to destination
 panel.uploader.error.cannotWrite: Failed to write file to disk
 panel.uploader.error.destinationTooLong: Destination path too long
-panel.uploader.error.fileNameTooLong: File name too long
 panel.uploader.error.fileName: Invalid file name
+panel.uploader.error.fileNameTooLong: File name too long
 panel.uploader.error.hiddenFiles: Cannot upload hidden files beginning with a dot
 panel.uploader.error.mimeType: File type not allowed
 panel.uploader.error.noFile: No file was uploaded
@@ -249,7 +251,6 @@ panel.users.newUser: New User
 panel.users.newUser.passwordSuggestion: at least 8 characters
 panel.users.newUser.usernameSuggestion: between 3-20 letters, digits and dashes
 panel.users.options: Options
-panel.users.userProfile: '%s User Profile'
 panel.users.user: User
 panel.users.user.cannotChangePassword: Cannot change the password of another user. The action is not allowed.
 panel.users.user.cannotChangeRole: Cannot change the role of %s. The action is not allowed.
@@ -261,5 +262,6 @@ panel.users.user.created: User created
 panel.users.user.deleted: User deleted
 panel.users.user.edited: User data updated
 panel.users.user.notFound: User not found
+panel.users.userProfile: '%s User Profile'
 panel.users.users: Users
 panel.viewSite: View Site

panel/translations/it.yml

@@ -24,6 +24,9 @@ panel.errors.error.internalServerError.status: Errore interno del server
 panel.errors.error.notFound.description: La pagina non esiste o la richiesta non è valida.
 panel.errors.error.notFound.heading: Oops, pagina non trovata!
 panel.errors.error.notFound.status: Non trovato
+panel.files.actions: Azioni
+panel.files.viewAsList: Visualizza come lista
+panel.files.viewAsThumbnails: Visualizza come miniature
 panel.login.attempt.failed: Tentativo di accesso fallito! Riprova.
 panel.login.attempt.tooMany: Sono stati sbagliati troppi tentativi di accesso. Riprova tra %d minuti.
 panel.login.loggedOut: Sei stato disconnesso
@@ -100,17 +103,16 @@ panel.options.system.languages.preferredLanguage.enabled: Abilitato
 panel.options.updated: Opzioni aggiornate
 panel.options.updates: Aggiornamenti
 panel.pages.attributes: Attributi
-panel.pages.changeSlug: Modifica indirizzo
-panel.pages.changeSlug.generate: Genera dal titolo
 panel.pages.changes.continue: Continua senza salvare
 panel.pages.changes.detected: Modifiche rilevate
 panel.pages.changes.detected.prompt: Alcune modifiche non sono state salvate. Si è sicuri di voler lasciare la pagina?
+panel.pages.changeSlug: Modifica indirizzo
+panel.pages.changeSlug.generate: Genera dal titolo
 panel.pages.content: Contenuto
 panel.pages.deleteFile: Elimina file
 panel.pages.deleteFile.prompt: Si è sicuri di eliminare il file? Questa azione non può essere annullata.
 panel.pages.deletePage: Elimina pagina
 panel.pages.deletePage.prompt: Si è sicuri di eliminare la pagina? Questa azione non può essere annullata.
-panel.pages.editPage: Modifica pagina %s
 panel.pages.editor.bold: Grassetto
 panel.pages.editor.bulletList: Elenco puntato
 panel.pages.editor.image: Immagine
@@ -121,6 +123,7 @@ panel.pages.editor.quote: Citazione
 panel.pages.editor.redo: Ripeti
 panel.pages.editor.summary: Sommario
 panel.pages.editor.undo: Annulla
+panel.pages.editPage: Modifica pagina %s
 panel.pages.files: File
 panel.pages.languages: Lingue
 panel.pages.languages.addLanguage: Aggiungi %s
@@ -128,8 +131,8 @@ panel.pages.languages.editLanguage: Modifica %s
 panel.pages.newPage: Nuova pagina
 panel.pages.newPage.parent: Pagina superiore
 panel.pages.newPage.site: Sito
-panel.pages.newPage.slugSuggestion: solo lettere, numeri e trattini
 panel.pages.newPage.slug: Indirizzo pagina
+panel.pages.newPage.slugSuggestion: solo lettere, numeri e trattini
 panel.pages.newPage.template: Template
 panel.pages.newPage.title: Titolo
 panel.pages.options: Opzioni
@@ -143,11 +146,11 @@ panel.pages.page.cannotCreate.invalidParent: Impossibile creare la pagina, la pa
 panel.pages.page.cannotCreate.invalidSlug: Impossibile creare la pagina, l'indirizzo deve contenere solo lettere e numeri separati da trattini
 panel.pages.page.cannotCreate.invalidTemplate: Impossibile creare la pagina, il template specificato non è valido
 panel.pages.page.cannotCreate.varMissing: Impossibile creare la pagina, manca una variabile
-panel.pages.page.cannotDeleteFile.fileNotFound: Impossibile eliminare il file, file non trovato
-panel.pages.page.cannotDeleteFile.pageNotFound: Impossibile eliminare il file, pagina non trovata
 panel.pages.page.cannotDelete.invalidLanguage: Impossibile eliminare la pagina, lingua %s non valida
 panel.pages.page.cannotDelete.notDeletable: Impossibile eliminare la pagina, la pagina non è eliminabile
 panel.pages.page.cannotDelete.pageNotFound: Impossibile eliminare la pagina, pagina non trovata
+panel.pages.page.cannotDeleteFile.fileNotFound: Impossibile eliminare il file, file non trovato
+panel.pages.page.cannotDeleteFile.pageNotFound: Impossibile eliminare il file, pagina non trovata
 panel.pages.page.cannotEdit.alreadyExists: Impossibile modificare la pagina, una pagina con lo stesso indirizzo esiste già
 panel.pages.page.cannotEdit.indexOrErrorPageSlug: Impossibile cambiare l'indirizzo della pagina iniziale o di errore
 panel.pages.page.cannotEdit.invalidLanguage: Impossibile modificare la pagina, lingua %s non valida
@@ -164,6 +167,7 @@ panel.pages.page.edited: Pagina modificata!
 panel.pages.page.fileDeleted: File eliminato
 panel.pages.page.image: Immagine
 panel.pages.page.lastModified: Ultime modifiche
+panel.pages.page.listed: Visibile nel menu
 panel.pages.page.moved: Pagina spostata!
 panel.pages.page.noDate: Nessuna data
 panel.pages.page.noImage: Nessuna immagine
@@ -175,21 +179,22 @@ panel.pages.page.status: Stato
 panel.pages.page.tags: Tag
 panel.pages.page.title: Titolo
 panel.pages.page.unpublishDate: Data di rimozione
-panel.pages.page.visible: Visibile nel menu
 panel.pages.pages: Pagine
 panel.pages.pages.collapseAll: Riduci tutte
 panel.pages.pages.expandAll: Espandi tutte
 panel.pages.pages.reorder: Riordina
 panel.pages.pages.search: Cerca pagine...
 panel.pages.parent: Pagina superiore
-panel.pages.previewFile: Anteprima
 panel.pages.preview: Anteprima
+panel.pages.previewFile: Anteprima
 panel.pages.save: Salva
 panel.pages.status.notPublished: Non pubblicato
 panel.pages.status.notRoutable: Non raggiungibile
 panel.pages.status.published: Pubblicato
 panel.pages.status.routable: Raggiungibile
+panel.pages.summary: Riassunto
 panel.pages.template: Template
+panel.pages.text: Testo
 panel.pages.toggleChildren: Mostra/nascondi sottopagine
 panel.panel: Pannello di Amministrazione
 panel.register.createUser: Formwork è installato ma non è stato trovato alcun utente. Registrane uno ora.
@@ -197,9 +202,9 @@ panel.register.register: Registra nuovo utente
 panel.request.error.postMaxSize: La richiesta HTTP con metodo POST supera la dimensione massima consentita
 panel.updates.availableForInstall: è disponibile per l'installazione
 panel.updates.check: Cerca aggiornamenti
-panel.updates.installPrompt: Installare l'aggiornamento?
 panel.updates.install: Installa
 panel.updates.installed: Aggiornamento installato!
+panel.updates.installPrompt: Installare l'aggiornamento?
 panel.updates.latestVersionAvailable: è l'ultima versione disponibile
 panel.updates.status.cannotCheck: Impossibile cercare aggiornamenti. Riprova più tardi.
 panel.updates.status.cannotInstall: Impossibile installare l'aggiornamento
@@ -213,8 +218,8 @@ panel.uploader.error.alreadyExists: Un file con lo stesso nome esiste già
 panel.uploader.error.cannotMoveToDestination: Impossibile spostare il file caricato alla destinazione
 panel.uploader.error.cannotWrite: Impossibile salvare il file sul disco
 panel.uploader.error.destinationTooLong: Il percorso di destinazione è troppo lungo
-panel.uploader.error.fileNameTooLong: Il nome del file è troppo lungo
 panel.uploader.error.fileName: Nome del file non valido
+panel.uploader.error.fileNameTooLong: Il nome del file è troppo lungo
 panel.uploader.error.hiddenFiles: Impossibile caricare i file che iniziano con '.'
 panel.uploader.error.mimeType: Il tipo di file non è consentito
 panel.uploader.error.noFile: Nessun file caricato
@@ -246,7 +251,6 @@ panel.users.newUser: Nuovo utente
 panel.users.newUser.passwordSuggestion: almeno 8 caratteri
 panel.users.newUser.usernameSuggestion: da 3 a 20 lettere, numeri, - e _
 panel.users.options: Opzioni
-panel.users.userProfile: Profilo utente %s
 panel.users.user: Utente
 panel.users.user.cannotChangePassword: Impossibile cambiare la password di un altro utente. L’azione non è consentita.
 panel.users.user.cannotChangeRole: Impossible cambare il ruolo di %s. L’azione non è consentita.
@@ -258,5 +262,6 @@ panel.users.user.created: Utente creato
 panel.users.user.deleted: Utente eliminato
 panel.users.user.edited: Dati utente aggiornati
 panel.users.user.notFound: Utente non trovato
+panel.users.userProfile: Profilo utente %s
 panel.users.users: Utenti
 panel.viewSite: Visualizza sito

panel/views/fields/page/files.php

@@ -1,25 +1,33 @@
-<ul class="files-list">
+<div class="files-list">
+    <div>
+        <fieldset class="input-togglegroup">
+            <label><input type="radio" checked name="files-list-view-as" value="list" data-form-ignore="true" autocomplete="off"><span title="<?= $this->translate('panel.files.viewAsList') ?>"><?= $this->icon('file-list') ?></span></label>
+            <label><input type="radio" name="files-list-view-as" value="thumbnails" data-form-ignore="true" autocomplete="off"><span title="<?= $this->translate('panel.files.viewAsThumbnails') ?>"><?= $this->icon('file-icons') ?></span></label>
+        </fieldset>
+    </div>
+
+    <div class="files-items">
 <?php
-foreach ($page->files() as $file):
+foreach ($page->files()->sort() as $file):
     ?>
-    <li>
         <div class="files-item">
-            <?= $this->icon(is_null($file->type()) ? 'file' : 'file-' . $file->type()) ?> <div class="files-item-cell file-name" data-overflow-tooltip="true"><?= $file->name() ?> <span class="file-size">(<?= $file->size() ?>)</span></div>
-            <div class="files-item-cell file-actions">
-                <a class="button button-link" role="button" href="<?= $page->uri($file->name(), includeLanguage: false) ?>" target="formwork-preview-file-<?= $file->hash() ?>" title="<?= $this->translate('panel.pages.previewFile') ?>" aria-label="title="<?= $this->translate('panel.pages.previewFile') ?>""><?= $this->icon('eye') ?></a>
-<?php
-        if ($panel->user()->permissions()->has('pages.deleteFiles')):
-            ?>
-                <button type="button" class="button-link" data-modal="deleteFileModal" data-modal-action="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/file/' . $file->name() . '/delete/') ?>" title="<?= $this->translate('panel.pages.deleteFile') ?>" aria-label="<?= $this->translate('panel.pages.deleteFile') ?>">
-                    <?= $this->icon('trash') ?>
-                </button>
-<?php
-        endif;
-    ?>
+            <?php if ($file->type() === 'image'): ?>
+            <div class="file-thumbnail" style="background-image:url('<?= $page->uri($file->name(), includeLanguage: false) ?>');"></div>
+            <?php endif ?>
+            <div class="file-icon"><?= $this->icon(is_null($file->type()) ? 'file' : 'file-' . $file->type()) ?></div>
+            <div class="file-name" data-overflow-tooltip="true"><?= $file->name() ?> <span class="file-size">(<?= $file->size() ?>)</span></div>
+            <div class="dropdown">
+                <button type="button" class="button-link dropdown-button" title="<?= $this->translate('panel.files.actions') ?>" data-dropdown="dropdown-<?= $file->hash() ?>"><?= $this->icon('ellipsis-v') ?></button>
+                <div class="dropdown-menu" id="dropdown-<?= $file->hash() ?>">
+                    <a class="dropdown-item" href="<?= $page->uri($file->name(), includeLanguage: false) ?>" target="formwork-preview-file-<?= $file->hash() ?>"><?= $this->icon('eye') ?> <?= $this->translate('panel.pages.previewFile') ?></a>
+                    <?php if ($panel->user()->permissions()->has('pages.deleteFiles')): ?>
+                    <a class="dropdown-item" data-modal="deleteFileModal" data-modal-action="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/file/' . $file->name() . '/delete/') ?>"><?= $this->icon('trash') ?> <?= $this->translate('panel.pages.deleteFile') ?></a>
+                    <?php endif ?>
+                </div>
             </div>
         </div>
-    </li>
 <?php
 endforeach;
 ?>
-</ul>
+</div>
+</div>

panel/views/pages/editor.php

@@ -27,7 +27,7 @@
         if (!$site->languages()->available()->isEmpty()):
 ?>
         <div class="dropdown">
-            <button type="button" class="dropdown-button button-accent" data-dropdown="languages-dropdown"><?= $this->icon('translate') ?> <?= $this->translate('panel.pages.languages') ?><?php if ($currentLanguage): ?> <span class="badge"><?= $currentLanguage ?></span><?php endif; ?></button>
+            <button type="button" class="dropdown-button caret button-accent" data-dropdown="languages-dropdown"><?= $this->icon('translate') ?> <?= $this->translate('panel.pages.languages') ?><?php if ($currentLanguage): ?> <span class="badge"><?= $currentLanguage ?></span><?php endif; ?></button>
             <div class="dropdown-menu" id="languages-dropdown">
 <?php
             foreach ($site->languages()->available() as $language):

site/schemes/pages/page.yml

@@ -26,7 +26,7 @@ layout:
             collapsible: true
             collapsed: false
             label: '{{panel.pages.files}}'
-            fields: [uploadedFile, files]
+            fields: [files, uploadedFile]
 
 fields:
     title: