Started work on drawing revisions

Improved sidebar and selection styling of image manager. Allowed image manager imageType to be changed on open. Created models for image revisions.
2024-10-01 01:36:00 -04:00 · 2018-05-13 12:07:38 +01:00 · 2018-05-13 12:07:38 +01:00 · d5b922aa50
commit d5b922aa50
parent b0d027a4a9
25 changed files with 217 additions and 73 deletions
--- a/app/Http/Controllers/ImageController.php
+++ b/app/Http/Controllers/ImageController.php
@ -245,26 +245,28 @@ class ImageController extends Controller
    }

    /**
-     * Deletes an image and all thumbnail/image files
+     * Show the usage of an image on pages.
     * @param EntityRepo $entityRepo
-     * @param Request $request
+     * @param $id
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function usage(EntityRepo $entityRepo, $id)
+    {
+        $image = $this->imageRepo->getById($id);
+        $pageSearch = $entityRepo->searchForImage($image->url);
+        return response()->json($pageSearch);
+    }
+
+    /**
+     * Deletes an image and all thumbnail/image files
     * @param int $id
     * @return \Illuminate\Http\JsonResponse
     */
-    public function destroy(EntityRepo $entityRepo, Request $request, $id)
+    public function destroy($id)
    {
        $image = $this->imageRepo->getById($id);
        $this->checkOwnablePermission('image-delete', $image);

-        // Check if this image is used on any pages
-        $isForced = in_array($request->get('force', ''), [true, 'true']);
-        if (!$isForced) {
-            $pageSearch = $entityRepo->searchForImage($image->url);
-            if ($pageSearch !== false) {
-                return response()->json($pageSearch, 400);
-            }
-        }
-
        $this->imageRepo->destroyImage($image);
        return response()->json(trans('components.images_deleted'));
    }
--- a/app/Image.php
+++ b/app/Image.php
@ -9,13 +9,23 @@ class Image extends Ownable

    /**
     * Get a thumbnail for this image.
-     * @param  int       $width
-     * @param  int       $height
+     * @param  int $width
+     * @param  int $height
     * @param bool|false $keepRatio
     * @return string
+     * @throws \Exception
     */
    public function getThumb($width, $height, $keepRatio = false)
    {
        return Images::getThumbnail($this, $width, $height, $keepRatio);
    }
+
+    /**
+     * Get the revisions for this image.
+     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     */
+    public function revisions()
+    {
+        return $this->hasMany(ImageRevision::class);
+    }
 }
--- a/app/ImageRevision.php
+++ b/app/ImageRevision.php
@ -0,0 +1,26 @@
+<?php
+
+namespace BookStack;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ImageRevision extends Model
+{
+    /**
+     * Relation for the user that created this entity.
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
+    public function createdBy()
+    {
+        return $this->belongsTo(User::class, 'created_by');
+    }
+
+    /**
+     * Get the image that this is a revision of.
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
+    public function image()
+    {
+        return $this->belongsTo(Image::class);
+    }
+}
--- a/database/migrations/2018_05_13_090521_create_image_revisions_table.php
+++ b/database/migrations/2018_05_13_090521_create_image_revisions_table.php
@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateImageRevisionsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('image_revisions', function (Blueprint $table) {
+            $table->increments('id');
+            $table->integer('image_id');
+            $table->string('path');
+            $table->string('url');
+            $table->integer('created_by');
+
+            $table->index('image_id');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('image_revisions');
+    }
+}
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/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,20 @@ function drawIoPlugin() {
        return node.hasAttribute('drawio-diagram');
    }

+    function showDrawingManager(mceEditor, selectedNode = null) {
+        // TODO - Handle how image manager links in.
+        // Show image manager
+        window.ImageManager.show(function (image) {
+
+
+            // // Replace the actively selected content with the linked image
+            // let html = `<a href="${image.url}" target="_blank">`;
+            // html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+            // html += '</a>';
+            // win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
+        }, 'drawio');
+    }
+
    function showDrawingEditor(mceEditor, selectedNode = null) {
        pageEditor = mceEditor;
        currentNode = selectedNode;
@ -287,7 +299,12 @@ function drawIoPlugin() {
    window.tinymce.PluginManager.add('drawio', function(editor, url) {

        editor.addCommand('drawio', () => {
-            showDrawingEditor(editor);
+            let selectedNode = editor.selection.getNode();
+            if (isDrawing(selectedNode)) {
+                showDrawingManager(editor, selectedNode);
+            } else {
+                showDrawingEditor(editor);
+            }
        });

        editor.addButton('drawio', {
@ -443,7 +460,7 @@ class WysiwygEditor {
                        html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
                        html += '</a>';
                        win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
-                    });
+                    }, 'gallery');
                }

            },
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@ -26,17 +26,22 @@ 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;
    },
@ -62,13 +67,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() {
@ -105,6 +115,7 @@ const methods = {
            this.callbackAndHide(image);
        } else {
            this.selectedImage = image;
+            this.deleteConfirm = false;
            this.dependantPages = false;
        }

@ -134,17 +145,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;
        });
    },

--- a/resources/assets/sass/_components.scss
+++ b/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,21 @@ 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: 200px;
+    display: block;
+    margin: 0 auto $-m auto;
+    box-shadow: $bs-light;
+  }
  .dropzone-container {
-    margin-top: $-m;
+    border-bottom: 1px solid #DDD;
  }
 }

@ -242,10 +254,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;
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@ -154,6 +154,7 @@ $btt-size: 40px;
  }
  input {
    flex: 5;
+    padding: $-xs $-s;
    &:focus, &:active {
      outline: 0;
    }
--- a/resources/lang/de/components.php
+++ b/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',
--- a/resources/lang/en/components.php
+++ b/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',
--- a/resources/lang/es/components.php
+++ b/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',
--- a/resources/lang/es_AR/components.php
+++ b/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',
--- a/resources/lang/fr/components.php
+++ b/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',
--- a/resources/lang/it/components.php
+++ b/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',
--- a/resources/lang/ja/components.php
+++ b/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' => '画像を削除しました',
--- a/resources/lang/nl/components.php
+++ b/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',
--- a/resources/lang/pl/components.php
+++ b/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',
--- a/resources/lang/pt_BR/components.php
+++ b/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',
--- a/resources/lang/ru/components.php
+++ b/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' => 'Изображения удалены',
--- a/resources/lang/sk/components.php
+++ b/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é',
--- a/resources/lang/sv/components.php
+++ b/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',
--- a/resources/lang/zh_CN/components.php
+++ b/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' => '图片已删除',
--- a/resources/lang/zh_TW/components.php
+++ b/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' => '圖片已刪除',
--- a/resources/views/components/image-manager.blade.php
+++ b/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,6 +40,9 @@
                </div>

                <div class="image-manager-sidebar">
+
+                    <dropzone 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">
@ -47,39 +50,43 @@
                            <form @submit.prevent="saveImageDetails">
                                <div>
                                    <a :href="selectedImage.url" target="_blank" style="display: block;">
-                                        <img :src="selectedImage.thumbs.gallery" :alt="selectedImage.title"
+                                        <img :src="selectedImage.thumbs.display" :alt="selectedImage.title"
                                             :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>
--- a/routes/web.php
+++ b/routes/web.php
@ -97,6 +97,7 @@ Route::group(['middleware' => 'auth'], function () {
        Route::put('/update/{imageId}', 'ImageController@update');
        Route::post('/drawing/upload', 'ImageController@uploadDrawing');
        Route::put('/drawing/upload/{id}', 'ImageController@replaceDrawing');
+        Route::get('/usage/{id}', 'ImageController@usage');
        Route::post('/{type}/upload', 'ImageController@uploadByType');
        Route::get('/{type}/all', 'ImageController@getAllByType');
        Route::get('/{type}/all/{page}', 'ImageController@getAllByType');