Merge branch 'drawing_updates'

resources/assets/icons/spanner.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path clip-rule="evenodd" fill="none" d="M0 0h24v24H0z"/>
+    <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/>
+</svg>

resources/assets/js/components/markdown-editor.js

@@ -52,6 +52,10 @@ class MarkdownEditor {
             let action = button.getAttribute('data-action');
             if (action === 'insertImage') this.actionInsertImage();
             if (action === 'insertLink') this.actionShowLinkSelector();
+            if (action === 'insertDrawing' && event.ctrlKey) {
+                this.actionShowImageManager();
+                return;
+            }
             if (action === 'insertDrawing') this.actionStartDrawing();
         });
 
@@ -293,7 +297,14 @@ class MarkdownEditor {
             this.cm.focus();
             this.cm.replaceSelection(newText);
             this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
-        });
+        }, 'gallery');
+    }
+
+    actionShowImageManager() {
+        let cursorPos = this.cm.getCursor('from');
+        window.ImageManager.show(image => {
+            this.insertDrawing(image, cursorPos);
+        }, 'drawio');
     }
 
     // Show the popup link selector and insert a link when finished
@@ -324,10 +335,7 @@ class MarkdownEditor {
             };
 
             window.$http.post(window.baseUrl('/images/drawing/upload'), data).then(resp => {
-                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
-                this.cm.focus();
-                this.cm.replaceSelection(newText);
-                this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
+                this.insertDrawing(resp.data, cursorPos);
                 DrawIO.close();
             }).catch(err => {
                 window.$events.emit('error', trans('errors.image_upload_error'));
@@ -336,6 +344,13 @@ class MarkdownEditor {
         });
     }
 
+    insertDrawing(image, originalCursor) {
+        let newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
+        this.cm.focus();
+        this.cm.replaceSelection(newText);
+        this.cm.setCursor(originalCursor.line, originalCursor.ch + newText.length);
+    }
+
     // Show draw.io if enabled and handle save.
     actionEditDrawing(imgContainer) {
         if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') !== 'true') return;
@@ -353,8 +368,8 @@ class MarkdownEditor {
                 uploaded_to: Number(document.getElementById('page-editor').getAttribute('page-id'))
             };
 
-            window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
-                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url + `?updated=${Date.now()}`}"></div>`;
+            window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
+                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
                 let newContent = this.cm.getValue().split('\n').map(line => {
                     if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
                         return newText;

resources/assets/js/components/wysiwyg-editor.js

@@ -221,8 +221,6 @@ function codePlugin() {
 
 function drawIoPlugin() {
 
-    const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
-    let iframe = null;
     let pageEditor = null;
     let currentNode = null;
 
@@ -230,6 +228,22 @@ function drawIoPlugin() {
         return node.hasAttribute('drawio-diagram');
     }
 
+    function showDrawingManager(mceEditor, selectedNode = null) {
+        pageEditor = mceEditor;
+        currentNode = selectedNode;
+        // Show image manager
+        window.ImageManager.show(function (image) {
+            if (selectedNode) {
+                let imgElem = selectedNode.querySelector('img');
+                pageEditor.dom.setAttrib(imgElem, 'src', image.url);
+                pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
+            } else {
+                let imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
+                pageEditor.insertContent(imgHTML);
+            }
+        }, 'drawio');
+    }
+
     function showDrawingEditor(mceEditor, selectedNode = null) {
         pageEditor = mceEditor;
         currentNode = selectedNode;
@@ -248,9 +262,9 @@ function drawIoPlugin() {
         if (currentNode) {
             DrawIO.close();
             let imgElem = currentNode.querySelector('img');
-            let drawingId = currentNode.getAttribute('drawio-diagram');
-            window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
-                pageEditor.dom.setAttrib(imgElem, 'src', `${resp.data.url}?updated=${Date.now()}`);
+            window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
+                pageEditor.dom.setAttrib(imgElem, 'src', resp.data.url);
+                pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', resp.data.id);
             }).catch(err => {
                 window.$events.emit('error', trans('errors.image_upload_error'));
                 console.log(err);
@@ -287,13 +301,24 @@ function drawIoPlugin() {
     window.tinymce.PluginManager.add('drawio', function(editor, url) {
 
         editor.addCommand('drawio', () => {
-            showDrawingEditor(editor);
+            let selectedNode = editor.selection.getNode();
+            showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
         });
 
         editor.addButton('drawio', {
+            type: 'splitbutton',
             tooltip: 'Drawing',
             image: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiICB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTIzIDdWMWgtNnYySDdWMUgxdjZoMnYx MEgxdjZoNnYtMmgxMHYyaDZ2LTZoLTJWN2gyek0zIDNoMnYySDNWM3ptMiAxOEgzdi0yaDJ2Mnpt MTItMkg3di0ySDVWN2gyVjVoMTB2MmgydjEwaC0ydjJ6bTQgMmgtMnYtMmgydjJ6TTE5IDVWM2gy djJoLTJ6bS01LjI3IDloLTMuNDlsLS43MyAySDcuODlsMy40LTloMS40bDMuNDEgOWgtMS42M2wt Ljc0LTJ6bS0zLjA0LTEuMjZoMi42MUwxMiA4LjkxbC0xLjMxIDMuODN6Ii8+CiAgICA8cGF0aCBk PSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==`,
-            cmd: 'drawio'
+            cmd: 'drawio',
+            menu: [
+                {
+                    text: 'Drawing Manager',
+                    onclick() {
+                        let selectedNode = editor.selection.getNode();
+                        showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
+                    }
+                }
+            ]
         });
 
         editor.on('dblclick', event => {
@@ -443,7 +468,7 @@ class WysiwygEditor {
                         html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
                         html += '</a>';
                         win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
-                    });
+                    }, 'gallery');
                 }
 
             },
@@ -522,7 +547,7 @@ class WysiwygEditor {
                             html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
                             html += '</a>';
                             editor.execCommand('mceInsertContent', false, html);
-                        });
+                        }, 'gallery');
                     }
                 });
 

resources/assets/js/vues/image-manager.js

@@ -26,25 +26,32 @@ const data = {
 
     imageUpdateSuccess: false,
     imageDeleteSuccess: false,
+    deleteConfirm: false,
 };
 
 const methods = {
 
-    show(providedCallback) {
+    show(providedCallback, imageType = null) {
         callback = providedCallback;
         this.showing = true;
         this.$el.children[0].components.overlay.show();
 
         // Get initial images if they have not yet been loaded in.
-        if (dataLoaded) return;
+        if (dataLoaded && imageType === this.imageType) return;
+        if (imageType) {
+            this.imageType = imageType;
+            this.resetState();
+        }
         this.fetchData();
         dataLoaded = true;
     },
 
     hide() {
+        if (this.$refs.dropzone) {
+            this.$refs.dropzone.onClose();
+        }
         this.showing = false;
         this.selectedImage = false;
-        this.$refs.dropzone.onClose();
         this.$el.children[0].components.overlay.hide();
     },
 
@@ -62,13 +69,18 @@ const methods = {
     },
 
     setView(viewName) {
+        this.view = viewName;
+        this.resetState();
+        this.fetchData();
+    },
+
+    resetState() {
         this.cancelSearch();
         this.images = [];
         this.hasMore = false;
+        this.deleteConfirm = false;
         page = 0;
-        this.view = viewName;
-        baseUrl = window.baseUrl(`/images/${this.imageType}/${viewName}/`);
-        this.fetchData();
+        baseUrl = window.baseUrl(`/images/${this.imageType}/${this.view}/`);
     },
 
     searchImages() {
@@ -89,6 +101,7 @@ const methods = {
     },
 
     cancelSearch() {
+        if (!this.searching) return;
         this.searching = false;
         this.searchTerm = '';
         this.images = preSearchImages;
@@ -105,6 +118,7 @@ const methods = {
             this.callbackAndHide(image);
         } else {
             this.selectedImage = image;
+            this.deleteConfirm = false;
             this.dependantPages = false;
         }
 
@@ -134,17 +148,22 @@ const methods = {
     },
 
     deleteImage() {
-        let force = this.dependantPages !== false;
-        let url = window.baseUrl('/images/' + this.selectedImage.id);
-        if (force) url += '?force=true';
-        this.$http.delete(url).then(response => {
+
+        if (!this.deleteConfirm) {
+            let url = window.baseUrl(`/images/usage/${this.selectedImage.id}`);
+            this.$http.get(url).then(resp => {
+                this.dependantPages = resp.data;
+            }).catch(console.error).then(() => {
+                this.deleteConfirm = true;
+            });
+            return;
+        }
+
+        this.$http.delete(`/images/${this.selectedImage.id}`).then(resp => {
             this.images.splice(this.images.indexOf(this.selectedImage), 1);
             this.selectedImage = false;
             this.$events.emit('success', trans('components.image_delete_success'));
-        }).catch(error=> {
-            if (error.response.status === 400) {
-                this.dependantPages = error.response.data;
-            }
+            this.deleteConfirm = false;
         });
     },
 

resources/assets/sass/_components.scss

@@ -146,7 +146,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .dropzone-container {
   position: relative;
-  border: 3px dashed #DDD;
+  background-color: #EEE;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .image-manager-list .image {
@@ -163,8 +164,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
   overflow: hidden;
   &.selected {
-    transform: scale3d(0.92, 0.92, 0.92);
-    border: 1px solid #444;
+    //transform: scale3d(0.92, 0.92, 0.92);
+    border: 4px solid #FFF;
+    overflow: hidden;
+    border-radius: 8px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   }
   img {
@@ -210,12 +213,30 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 .image-manager-sidebar {
   width: 300px;
   margin-left: 1px;
-  padding: $-m $-l;
   overflow-y: auto;
   overflow-x: hidden;
   border-left: 1px solid #DDD;
+  .inner {
+    padding: $-m;
+  }
+  img {
+    max-width: 100%;
+    max-height: 180px;
+    display: block;
+    margin: 0 auto $-m auto;
+    box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
+  }
+  .image-manager-viewer {
+    height: 196px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    a {
+      display: inline-block;
+    }
+  }
   .dropzone-container {
-    margin-top: $-m;
+    border-bottom: 1px solid #DDD;
   }
 }
 
@@ -242,10 +263,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
  * Copyright (c) 2012 Matias Meno <m@tias.me>
  */
 .dz-message {
-  font-size: 1.2em;
-  line-height: 1.1;
+  font-size: 1em;
+  line-height: 2.35;
   font-style: italic;
-  color: #aaa;
+  color: #888;
   text-align: center;
   cursor: pointer;
   padding: $-l $-m;

resources/assets/sass/styles.scss

@@ -154,6 +154,7 @@ $btt-size: 40px;
   }
   input {
     flex: 5;
+    padding: $-xs $-s;
     &:focus, &:active {
       outline: 0;
     }

resources/lang/de/components.php

@@ -12,7 +12,8 @@ return [
     'image_uploaded' => 'Hochgeladen am :uploadedDate',
     'image_load_more' => 'Mehr',
     'image_image_name' => 'Bildname',
-    'image_delete_confirm' => 'Dieses Bild wird auf den folgenden Seiten benutzt. Bitte klicken Sie erneut auf löschen, wenn Sie dieses Bild wirklich entfernen möchten.',
+    'image_delete_used' => 'Dieses Bild wird auf den folgenden Seiten benutzt. ',
+    'image_delete_confirm' => 'Bitte klicken Sie erneut auf löschen, wenn Sie dieses Bild wirklich entfernen möchten.',
     'image_select_image' => 'Bild auswählen',
     'image_dropzone' => 'Ziehen Sie Bilder hierher oder klicken Sie, um ein Bild auszuwählen',
     'images_deleted' => 'Bilder gelöscht',

resources/lang/en/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Uploaded :uploadedDate',
     'image_load_more' => 'Load More',
     'image_image_name' => 'Image Name',
-    'image_delete_confirm' => 'This image is used in the pages below, Click delete again to confirm you want to delete this image.',
+    'image_delete_used' => 'This image is used in the pages below.',
+    'image_delete_confirm' => 'Click delete again to confirm you want to delete this image.',
     'image_select_image' => 'Select Image',
     'image_dropzone' => 'Drop images or click here to upload',
     'images_deleted' => 'Images Deleted',

resources/lang/en/settings.php

@@ -51,6 +51,19 @@ return [
     'reg_confirm_restrict_domain_desc' => 'Enter a comma separated list of email domains you would like to restrict registration to. Users will be sent an email to confirm their address before being allowed to interact with the application. <br> Note that users will be able to change their email addresses after successful registration.',
     'reg_confirm_restrict_domain_placeholder' => 'No restriction set',
 
+    /**
+     * Maintenance settings
+     */
+
+    'maint' => 'Maintenance',
+    'maint_image_cleanup' => 'Cleanup Images',
+    'maint_image_cleanup_desc' => "Scans page & revision content to check which images and drawings are currently in use and which images are redundant. Ensure you create a full database and image backup before running this.",
+    'maint_image_cleanup_ignore_revisions' => 'Ignore images in revisions',
+    'maint_image_cleanup_run' => 'Run Cleanup',
+    'maint_image_cleanup_warning' => ':count potentially unused images were found. Are you sure you want to delete these images?',
+    'maint_image_cleanup_success' => ':count potentially unused images found and deleted!',
+    'maint_image_cleanup_nothing_found' => 'No unused images found, Nothing deleted!',
+
     /**
      * Role settings
      */

resources/lang/es/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Subido el :uploadedDate',
     'image_load_more' => 'Cargar más',
     'image_image_name' => 'Nombre de imagen',
-    'image_delete_confirm' => 'Esta imagen está siendo utilizada en las páginas mostradas a continuación, haga click de nuevo para confirmar que quiere borrar esta imagen.',
+    'image_delete_used' => 'Esta imagen está siendo utilizada en las páginas mostradas a continuación.',
+    'image_delete_confirm' => 'Haga click de nuevo para confirmar que quiere borrar esta imagen.',
     'image_select_image' => 'Seleccionar Imagen',
     'image_dropzone' => 'Arrastre las imágenes o hacer click aquí para Subir',
     'images_deleted' => 'Imágenes borradas',

resources/lang/es_AR/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Subido el :uploadedDate',
     'image_load_more' => 'Cargar más',
     'image_image_name' => 'Nombre de imagen',
-    'image_delete_confirm' => 'Esta imagen esta siendo utilizada en las páginas a continuación, haga click de nuevo para confirmar que quiere borrar esta imagen.',
+    'image_delete_used' => 'Esta imagen esta siendo utilizada en las páginas a continuación.',
+    'image_delete_confirm' => 'Haga click de nuevo para confirmar que quiere borrar esta imagen.',
     'image_select_image' => 'Seleccionar Imagen',
     'image_dropzone' => 'Arrastre las imágenes o hacer click aquí para Subir',
     'images_deleted' => 'Imágenes borradas',

resources/lang/fr/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Ajoutée le :uploadedDate',
     'image_load_more' => 'Charger plus',
     'image_image_name' => 'Nom de l\'image',
-    'image_delete_confirm' => 'Cette image est utilisée dans les pages ci-dessous. Confirmez que vous souhaitez bien supprimer cette image.',
+    'image_delete_used' => 'Cette image est utilisée dans les pages ci-dessous.',
+    'image_delete_confirm' => 'Confirmez que vous souhaitez bien supprimer cette image.',
     'image_select_image' => 'Selectionner l\'image',
     'image_dropzone' => 'Glissez les images ici ou cliquez pour les ajouter',
     'images_deleted' => 'Images supprimées',

resources/lang/it/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Uploaded :uploadedDate',
     'image_load_more' => 'Carica Altre',
     'image_image_name' => 'Nome Immagine',
-    'image_delete_confirm' => 'Questa immagine è usata nelle pagine elencate, clicca elimina nuovamente per confermare.',
+    'image_delete_used' => 'Questa immagine è usata nelle pagine elencate.',
+    'image_delete_confirm' => 'Clicca elimina nuovamente per confermare.',
     'image_select_image' => 'Seleziona Immagine',
     'image_dropzone' => 'Rilascia immagini o clicca qui per caricarle',
     'images_deleted' => 'Immagini Eliminate',

resources/lang/ja/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'アップロード日時: :uploadedDate',
     'image_load_more' => 'さらに読み込む',
     'image_image_name' => '画像名',
-    'image_delete_confirm' => 'この画像は以下のページで利用されています。削除してもよろしければ、再度ボタンを押して下さい。',
+    'image_delete_used' => 'この画像は以下のページで利用されています。',
+    'image_delete_confirm' => '削除してもよろしければ、再度ボタンを押して下さい。',
     'image_select_image' => '選択',
     'image_dropzone' => '画像をドロップするか、クリックしてアップロード',
     'images_deleted' => '画像を削除しました',

resources/lang/nl/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Uploaded :uploadedDate',
     'image_load_more' => 'Meer Laden',
     'image_image_name' => 'Afbeeldingsnaam',
-    'image_delete_confirm' => 'Deze afbeeldingen is op onderstaande pagina\'s in gebruik, Klik opnieuw op verwijderen om de afbeelding echt te verwijderen.',
+    'image_delete_used' => 'Deze afbeeldingen is op onderstaande pagina\'s in gebruik.',
+    'image_delete_confirm' => 'Klik opnieuw op verwijderen om de afbeelding echt te verwijderen.',
     'image_select_image' => 'Kies Afbeelding',
     'image_dropzone' => 'Sleep afbeeldingen hier of klik hier om te uploaden',
     'images_deleted' => 'Verwijderde Afbeeldingen',

resources/lang/pl/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Udostępniono :uploadedDate',
     'image_load_more' => 'Wczytaj więcej',
     'image_image_name' => 'Nazwa obrazka',
-    'image_delete_confirm' => 'Ten obrazek jest używany na stronach poniżej, kliknij ponownie Usuń by potwierdzić usunięcie obrazka.',
+    'image_delete_used' => 'Ten obrazek jest używany na stronach poniżej.',
+    'image_delete_confirm' => 'Kliknij ponownie Usuń by potwierdzić usunięcie obrazka.',
     'image_select_image' => 'Wybierz obrazek',
     'image_dropzone' => 'Upuść obrazki tutaj lub kliknij by wybrać obrazki do udostępnienia',
     'images_deleted' => 'Usunięte obrazki',

resources/lang/pt_BR/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Carregado :uploadedDate',
     'image_load_more' => 'Carregar Mais',
     'image_image_name' => 'Nome da Imagem',
-    'image_delete_confirm' => 'Essa imagem é usada nas páginas abaixo. Clique em Excluir novamente para confirmar que você deseja mesmo eliminar a imagem.',
+    'image_delete_used' => 'Essa imagem é usada nas páginas abaixo.',
+    'image_delete_confirm' => 'Clique em Excluir novamente para confirmar que você deseja mesmo eliminar a imagem.',
     'image_select_image' => 'Selecionar Imagem',
     'image_dropzone' => 'Arraste imagens ou clique aqui para fazer upload',
     'images_deleted' => 'Imagens excluídas',

resources/lang/ru/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Загруженно :uploadedDate',
     'image_load_more' => 'Загрузить ещё',
     'image_image_name' => 'Имя изображения',
-    'image_delete_confirm' => 'Это изображение используется на странице ниже. Снова кликните удалить для подтверждения того что вы хотите удалить.',
+    'image_delete_used' => 'Это изображение используется на странице ниже.',
+    'image_delete_confirm' => 'Снова кликните удалить для подтверждения того что вы хотите удалить.',
     'image_select_image' => 'Выбрать изображение',
     'image_dropzone' => 'Перетащите изображение или кликните для загрузки',
     'images_deleted' => 'Изображения удалены',

resources/lang/sk/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Nahrané :uploadedDate',
     'image_load_more' => 'Načítať viac',
     'image_image_name' => 'Názov obrázka',
-    'image_delete_confirm' => 'Tento obrázok je použitý na stránkach uvedených nižšie, kliknite znova na zmazať pre potvrdenie zmazania tohto obrázka.',
+    'image_delete_used' => 'Tento obrázok je použitý na stránkach uvedených nižšie.',
+    'image_delete_confirm' => 'Kliknite znova na zmazať pre potvrdenie zmazania tohto obrázka.',
     'image_select_image' => 'Vybrať obrázok',
     'image_dropzone' => 'Presuňte obrázky sem alebo kliknite sem pre nahranie',
     'images_deleted' => 'Obrázky zmazané',

resources/lang/sv/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => 'Laddades upp :uploadedDate',
     'image_load_more' => 'Ladda fler',
     'image_image_name' => 'Bildnamn',
-    'image_delete_confirm' => 'Den här bilden används på nedanstående sidor, klicka på "ta bort" en gång till för att bekräfta att du vill ta bort bilden.',
+    'image_delete_used' => 'Den här bilden används på nedanstående sidor.',
+    'image_delete_confirm' => 'Klicka på "ta bort" en gång till för att bekräfta att du vill ta bort bilden.',
     'image_select_image' => 'Välj bild',
     'image_dropzone' => 'Släpp bilder här eller klicka för att ladda upp',
     'images_deleted' => 'Bilder borttagna',

resources/lang/zh_CN/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => '上传于 :uploadedDate',
     'image_load_more' => '显示更多',
     'image_image_name' => '图片名称',
-    'image_delete_confirm' => '该图像用于以下页面，如果你想删除它，请再次按下按钮。',
+    'image_delete_used' => '该图像用于以下页面。',
+    'image_delete_confirm' => '如果你想删除它，请再次按下按钮。',
     'image_select_image' => '选择图片',
     'image_dropzone' => '拖放图片或点击此处上传',
     'images_deleted' => '图片已删除',

resources/lang/zh_TW/components.php

@@ -13,7 +13,8 @@ return [
     'image_uploaded' => '上傳於 :uploadedDate',
     'image_load_more' => '載入更多',
     'image_image_name' => '圖片名稱',
-    'image_delete_confirm' => '所使用圖片目前用於以下頁面，如果你想刪除它，請再次按下按鈕。',
+    'image_delete_used' => '所使用圖片目前用於以下頁面。',
+    'image_delete_confirm' => '如果你想刪除它，請再次按下按鈕。',
     'image_select_image' => '選擇圖片',
     'image_dropzone' => '拖曳圖片或點選這裡上傳',
     'images_deleted' => '圖片已刪除',

resources/views/components/image-manager.blade.php

@@ -1,5 +1,5 @@
 <div id="image-manager" image-type="{{ $imageType }}" uploaded-to="{{ $uploaded_to or 0 }}">
-    <div overlay v-cloak @click="hide()">
+    <div overlay v-cloak @click="hide">
         <div class="popup-body" @click.stop="">
 
             <div class="popup-header primary-background">
@@ -40,46 +40,53 @@
                 </div>
 
                 <div class="image-manager-sidebar">
+
+                    <dropzone v-if="imageType !== 'drawio'" ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
+
                     <div class="inner">
 
                         <div class="image-manager-details anim fadeIn" v-if="selectedImage">
 
                             <form @submit.prevent="saveImageDetails">
-                                <div>
+                                <div class="image-manager-viewer">
                                     <a :href="selectedImage.url" target="_blank" style="display: block;">
-                                        <img :src="selectedImage.thumbs.gallery" :alt="selectedImage.title"
+                                        <img :src="selectedImage.thumbs.display" :alt="selectedImage.name"
                                              :title="selectedImage.name">
                                     </a>
                                 </div>
                                 <div class="form-group">
                                     <label for="name">{{ trans('components.image_image_name') }}</label>
-                                    <input id="name" name="name" v-model="selectedImage.name">
+                                    <input id="name" class="input-base" name="name" v-model="selectedImage.name">
                                 </div>
                             </form>
 
-                            <div v-show="dependantPages">
-                                <p class="text-neg text-small">
-                                    {{ trans('components.image_delete_confirm') }}
-                                </p>
-                                <ul class="text-neg">
-                                    <li v-for="page in dependantPages">
-                                        <a :href="page.url" target="_blank" class="text-neg" v-text="page.name"></a>
-                                    </li>
-                                </ul>
-                            </div>
-
                             <div class="clearfix">
-                                <form class="float left" @submit.prevent="deleteImage">
-                                    <button class="button icon neg">@icon('delete')</button>
-                                </form>
-                                <button class="button pos anim fadeIn float right" v-show="selectedImage" @click="callbackAndHide(selectedImage)">
+                                <div class="float left">
+                                    <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
+
+                                </div>
+                                <button class="button anim fadeIn float right" v-show="selectedImage" @click="callbackAndHide(selectedImage)">
                                     {{ trans('components.image_select_image') }}
                                 </button>
+                                <div class="clearfix"></div>
+                                <div v-show="dependantPages">
+                                    <p class="text-neg text-small">
+                                        {{ trans('components.image_delete_used') }}
+                                    </p>
+                                    <ul class="text-neg">
+                                        <li v-for="page in dependantPages">
+                                            <a :href="page.url" target="_blank" class="text-neg" v-text="page.name"></a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div v-show="deleteConfirm" class="text-neg text-small">
+                                    {{ trans('components.image_delete_confirm') }}
+                                </div>
                             </div>
 
                         </div>
 
-                        <dropzone ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
+
 
                     </div>
                 </div>

resources/views/settings/maintenance.blade.php

@@ -0,0 +1,49 @@
+@extends('simple-layout')
+
+@section('toolbar')
+    @include('settings/navbar', ['selected' => 'maintenance'])
+@stop
+
+@section('body')
+<div class="container small">
+
+    <div class="text-right text-muted container">
+        <br>
+        BookStack @if(strpos($version, 'v') !== 0) version @endif {{ $version }}
+    </div>
+
+
+    <div class="card" id="image-cleanup">
+        <h3>@icon('images') {{ trans('settings.maint_image_cleanup') }}</h3>
+        <div class="body">
+            <div class="row">
+                <div class="col-sm-6">
+                    <p class="small muted">{{ trans('settings.maint_image_cleanup_desc') }}</p>
+                </div>
+                <div class="col-sm-6">
+                    <form method="POST" action="{{ baseUrl('/settings/maintenance/cleanup-images') }}">
+                        {!! csrf_field()  !!}
+                        <input type="hidden" name="_method" value="DELETE">
+                        <div>
+                            @if(session()->has('cleanup-images-warning'))
+                                <p class="text neg">
+                                    {{ session()->get('cleanup-images-warning') }}
+                                </p>
+                                <input type="hidden" name="ignore_revisions" value="{{ session()->getOldInput('ignore_revisions', 'false') }}">
+                                <input type="hidden" name="confirm" value="true">
+                            @else
+                                <label>
+                                    <input type="checkbox" name="ignore_revisions" value="true">
+                                    {{ trans('settings.maint_image_cleanup_ignore_revisions') }}
+                                </label>
+                            @endif
+                        </div>
+                        <button class="button outline">{{ trans('settings.maint_image_cleanup_run') }}</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+@stop

resources/views/settings/navbar.blade.php

@@ -2,6 +2,7 @@
 <div class="col-md-12 setting-nav nav-tabs">
     @if($currentUser->can('settings-manage'))
         <a href="{{ baseUrl('/settings') }}" @if($selected == 'settings') class="selected text-button" @endif>@icon('settings'){{ trans('settings.settings') }}</a>
+        <a href="{{ baseUrl('/settings/maintenance') }}" @if($selected == 'maintenance') class="selected text-button" @endif>@icon('spanner'){{ trans('settings.maint') }}</a>
     @endif
     @if($currentUser->can('users-manage'))
         <a href="{{ baseUrl('/settings/users') }}" @if($selected == 'users') class="selected text-button" @endif>@icon('users'){{ trans('settings.users') }}</a>