From df0aada2930fa5849e8ea20a4360205cb8515757 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 22 May 2018 09:18:51 -0300
Subject: [PATCH] Layout adjustments on ItemEditionPage.

---
 .../components/edition/item-edition-form.vue  | 88 ++++++++++++++-----
 src/admin/components/other/file-item.vue      |  7 +-
 src/admin/tainacan-admin-i18n.php             |  1 +
 3 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index 43d7c5ac8..819f1840d 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -1,6 +1,11 @@
 <template>
     <div>
         <tainacan-title />
+        <button 
+                id="metadata-column-compress-button"
+                @click="isMetadataColumnCompressed = !isMetadataColumnCompressed">
+            <b-icon :icon="isMetadataColumnCompressed ? 'menu-left' : 'menu-right'" />
+        </button>
         <form
                 v-if="!isLoading"
                 class="tainacan-form"
@@ -99,14 +104,14 @@
                                 <div v-html="item.document_as_html" />
                                 <button
                                         type="button"
-                                        class="button is-primary"
+                                        class="button is-secondary"
                                         size="is-small"
                                         @click.prevent="setURLDocument()">
                                     {{ $i18n.get('edit') }}
                                 </button>
                                 <button
                                         type="button"
-                                        class="button is-primary"
+                                        class="button is-secondary"
                                         size="is-small"
                                         @click.prevent="removeDocument()">
                                     {{ $i18n.get('remove') }}
@@ -229,14 +234,21 @@
                                     @click.prevent="thumbnailMediaFrame.openFrame($event)">
                                 <b-icon icon="pencil" />
                             </a>
-                            <figure class="image">
-                                <span
-                                        v-if="item.thumbnail == undefined || item.thumbnail == false"
-                                        class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
+                            <file-item
+                                    v-if="item.thumbnail != undefined && item.thumbnail != false"
+                                    :show-name="false"
+                                    :file="{ 
+                                        media_type: 'image', 
+                                        guid: { rendered: item.thumbnail.thumb },
+                                        title: { rendered: $i18n.get('label_thumbnail')},
+                                        description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
+                            <figure 
+                                    v-if="item.thumbnail == undefined || item.thumbnail == false"
+                                    class="image">
+                                <span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
                                 <img
-                                        id="thumbail-image"
                                         :alt="$i18n.get('label_thumbnail')"
-                                        :src="(item.thumbnail == undefined || item.thumbnail == false) ? thumbPlaceholderPath : item.thumbnail.thumb">
+                                        :src="thumbPlaceholderPath">
                             </figure>
                             <div class="thumbnail-buttons-row">
                                 <a
@@ -265,16 +277,21 @@
                         </button>
 
                         <div class="uploaded-files">
-                            <file-item 
+                            <file-item
+                                    :style="{ margin: 12 + 'px'}"
+                                    v-if="attachmentsList.length > 0" 
                                     v-for="(attachment, index) in attachmentsList"
                                     :key="index"
                                     :show-name="true"
                                     :file="attachment"/>
+                            <p v-if="attachmentsList.length <= 0"><br>{{ $i18n.get('info_no_attachments_on_item_yet') }}</p>
                         </div>
                     </div>
 
                 </div>
-                <div class="column is-4-5">
+                <div 
+                        class="column is-4-5"
+                        v-show="!isMetadataColumnCompressed">
                     <label class="section-label">{{ $i18n.get('fields') }}</label>
                     <br>
                     <a
@@ -319,6 +336,7 @@ export default {
             item: null,
             collectionId: Number,
             isLoading: false,
+            isMetadataColumnCompressed: false,
             fieldCollapses: [],
             collapseAll: false,
             form: {
@@ -353,6 +371,14 @@ export default {
             textLink: ''
         }
     },
+    computed: {
+        fieldList() {
+            return JSON.parse(JSON.stringify(this.getFields()));
+        },
+        attachmentsList(){
+            return this.getAttachments();
+        }
+    },
     components: {
         FileItem
     },
@@ -593,14 +619,6 @@ export default {
             this.fieldCollapses.splice(index, 1, event);
         }
     },
-    computed: {
-        fieldList() {
-            return JSON.parse(JSON.stringify(this.getFields()));
-        },
-        attachmentsList(){
-            return this.getAttachments();
-        }
-    },
     created(){
         // Obtains collection ID
         this.cleanFields();
@@ -666,6 +684,27 @@ export default {
 
     @import '../../scss/_variables.scss';
 
+    #metadata-column-compress-button {
+        position: relative;
+        z-index: 99;
+        float: right;
+        max-width: 36px;
+        height: 36px;
+        width: 36px;
+        border: none;
+        background-color: $tainacan-input-background;
+        color: $secondary;
+        padding: 0px;
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
+        cursor: pointer;
+
+        .icon {
+            margin-top: 2px;
+            margin-right: 8px;
+        }
+    }
+
     .page-container {
         padding: 25px 0px;
 
@@ -682,11 +721,13 @@ export default {
             width: 45.833333333%;
             padding-left: $page-side-padding;
             padding-right: $page-side-padding;
+            transition: width 0.6s;
         }
         .column.is-4-5 {
             width: 37.5%;
             padding-left: $page-side-padding;
             padding-right: $page-side-padding;
+            transition: all 0.6s;
         }
 
     }
@@ -709,7 +750,7 @@ export default {
     .section-box {
         border: 1px solid $draggable-border-color;
         background-color: white;
-        padding: 30px;
+        padding: 26px;
         margin-top: 16px;
         margin-bottom: 38px;
 
@@ -736,15 +777,15 @@ export default {
         }
     }
     .section-status{
-        width: 168px;        
+        width: 174px;        
     }
     .section-thumbnail {
-        width: 168px;
+        width: 174px;
         padding-top: 0;
         padding-bottom: 0;
     }
     .section-attachments {
-        height: 400px;
+        height: 250px;
         max-width: 100%;
         resize: vertical;
         overflow: auto;
@@ -805,6 +846,9 @@ export default {
                 top: -3px;
                 position: relative;
             }
+            i.mdi-24px.mdi-set, i.mdi-24px.mdi::before {
+                font-size: 20px;
+            }
         }
     }
 
diff --git a/src/admin/components/other/file-item.vue b/src/admin/components/other/file-item.vue
index b35ab8776..ffa9bcb3f 100644
--- a/src/admin/components/other/file-item.vue
+++ b/src/admin/components/other/file-item.vue
@@ -28,7 +28,7 @@
                 scroll="keep">
             <div class="tainacan-modal-content">
                 <div class="tainacan-modal-title">
-                    <h2>{{ $i18n.get('label_attachment') + ': ' + file.title.rendered }}</h2>
+                    <h2>{{ file.title.rendered }}</h2>
                     <hr>
                 </div>
                 <div    
@@ -79,8 +79,6 @@ export default {
     @import "../../scss/_variables.scss";
 
     .file-item {
-
-        margin: 12px;
         
         &:hover {
             cursor: pointer;
@@ -137,6 +135,9 @@ export default {
             text-align: center;
         }
     }
+    .is-flex {
+        justify-content: center;
+    }
     
 </style>
 
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index 90a372881..10d212c6e 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -254,6 +254,7 @@ return [
 	'info_possible_external_sources'           => __( 'Possible external sources: CSV, Instagram, Youtube, etc.', 'tainacan' ),
 	'info_help_term_name'          		   	   => __( 'The term name', 'tainacan' ),
 	'info_help_term_description'          	   => __( 'The description of the Term.', 'tainacan' ),
+	'info_no_attachments_on_item_yet'		   => __( 'The are no attachments on this item so far.', 'tainacan' ),
 
 	// Tainacan Field Types
 	'tainacan-text'                            => __( 'Text', 'tainacan' ),