From 19c5759cf7c9598fcd645104afd3a2e505f57589 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 22 Mar 2018 15:19:12 -0300
Subject: [PATCH] Adds helper buttons to Collection Edition Page.

---
 .../edition/collection-edition-form.vue       | 63 +++++++++++++------
 .../components/edition/item-edition-form.vue  | 38 ++++++-----
 src/admin/scss/tainacan-admin.scss            |  1 +
 3 files changed, 69 insertions(+), 33 deletions(-)

diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index 6cc98b409..7cec4d1c6 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -5,18 +5,25 @@
             
             <!-- Name -------------------------------- --> 
             <b-field 
+                :addons="false"
                 :label="$i18n.get('label_name')"
                 :type="editFormErrors['name'] != undefined ? 'is-danger' : ''" 
                 :message="editFormErrors['name'] != undefined ? editFormErrors['name'] : ''">
+                <help-button 
+                    :title="$i18n.getHelperTitle('collections', 'name')" 
+                    :message="$i18n.getHelperMessage('collections', 'name')">
+                </help-button>
                 <b-input
                     id="tainacan-text-name"
                     v-model="form.name"
                     @focus="clearErrors('name')">
-                </b-input>
+                </b-input>  
             </b-field>
 
             <!-- Thumbnail -------------------------------- --> 
-            <b-field :label="$i18n.get('label_image')">
+            <b-field 
+                :addons="false"
+                :label="$i18n.get('label_image')">
                 <div class="thumbnail-field">
                     <b-upload 
                         v-if="collection.featured_image == undefined || collection.featured_image == false"
@@ -49,10 +56,15 @@
             </b-field> 
                   
             <!-- Description -------------------------------- --> 
-            <b-field 
-                    :label="$i18n.get('label_description')"
-                    :type="editFormErrors['description'] != undefined ? 'is-danger' : ''" 
-                    :message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''">
+            <b-field
+                :addons="false" 
+                :label="$i18n.get('label_description')"
+                :type="editFormErrors['description'] != undefined ? 'is-danger' : ''" 
+                :message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''">
+                <help-button 
+                    :title="$i18n.getHelperTitle('collections', 'description')" 
+                    :message="$i18n.getHelperMessage('collections', 'description')">
+                </help-button>
                 <b-input
                         id="tainacan-text-description"
                         type="textarea"
@@ -62,10 +74,15 @@
             </b-field>
 
              <!-- Status -------------------------------- --> 
-            <b-field 
+            <b-field
+                :addons="false" 
                 :label="$i18n.get('label_status')"
                 :type="editFormErrors['status'] != undefined ? 'is-danger' : ''" 
                 :message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''">
+                <help-button 
+                    :title="$i18n.getHelperTitle('collections', 'status')" 
+                    :message="$i18n.getHelperMessage('collections', 'status')">
+                </help-button>
                 <b-select
                         id="tainacan-select-status"
                         v-model="form.status"
@@ -81,26 +98,36 @@
             </b-field>
 
             <!-- Slug -------------------------------- --> 
-            <b-field 
+            <b-field
+                :addons="false" 
                 :label="$i18n.get('label_slug')"
                 :type="editFormErrors['slug'] != undefined ? 'is-danger' : ''" 
                 :message="editFormErrors['slug'] != undefined ? editFormErrors['slug'] : ''">
+                <help-button 
+                    :title="$i18n.getHelperTitle('collections', 'slug')" 
+                    :message="$i18n.getHelperMessage('collections', 'slug')">
+                </help-button>
                 <b-input
                     id="tainacan-text-slug"
                     v-model="form.slug"
                     @focus="clearErrors('slug')">
                 </b-input>
             </b-field>
-
-            <button
-                id="button-cancel-collection-creation"
-                class="button"
-                type="button"
-                @click="cancelBack">{{ $i18n.get('cancel') }}</button>
-            <button
-                id="button-submit-collection-creation"
-                @click.prevent="onSubmit"
-                class="button is-primary">{{ $i18n.get('save') }}</button>
+            <div class="field is-grouped form-submit">
+                <div class="control">
+                    <button
+                        id="button-cancel-collection-creation"
+                        class="button is-outlined"
+                        type="button"
+                        @click="cancelBack">{{ $i18n.get('cancel') }}</button>
+                </div>
+                <div class="control">
+                    <button
+                        id="button-submit-collection-creation"
+                        @click.prevent="onSubmit"
+                        class="button is-success">{{ $i18n.get('save') }}</button>
+                </div>
+            </div>
             <p class="help is-danger">{{formErrorMessage}}</p>
         </form>
 
diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index 408c398d6..1f0ab493d 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -2,7 +2,13 @@
     <div class="page-container">
         <b-tag v-if="!isLoading" :type="'is-' + getStatusColor(item.status)" v-text="item.status"></b-tag>
         <form  v-if="!isLoading" class="tainacan-form" label-width="120px">
-            <b-field :label="$i18n.get('label_status')">
+            <b-field 
+                :addons="false"
+                :label="$i18n.get('label_status')">
+                <help-button 
+                    :title="$i18n.getHelperTitle('items', 'status')" 
+                    :message="$i18n.getHelperMessage('items', 'status')">
+                </help-button>
                 <b-select 
                         id="status-select"
                         v-model="form.status"
@@ -15,10 +21,6 @@
                             :disabled="statusOption.disabled">{{ statusOption.label }}
                     </option>
                 </b-select>
-                <help-button 
-                    :title="$i18n.getHelperTitle('items', 'status')" 
-                    :message="$i18n.getHelperMessage('items', 'status')">
-                </help-button>
             </b-field>
 
             <!-- Thumbnail -------------------------------- --> 
@@ -104,16 +106,22 @@
                             :src="attachment.url"/>
                     </figure>
                 </div>  
-            </div>     
-            <button
-                id="button-cancel-item-creation"
-                class="button"
-                type="button"
-                @click="cancelBack">{{ $i18n.get('cancel') }}</button>
-            <button
-                id="button-submit-item-creation"
-                @click.prevent="onSubmit"
-                class="button is-primary" :disabled="formHasErrors">{{ $i18n.get('save') }}</button> 
+            </div>
+            <div class="field is-grouped form-submit">
+                <div class="control">     
+                    <button
+                        id="button-cancel-item-creation"
+                        class="button is-outlined"
+                        type="button"
+                        @click="cancelBack">{{ $i18n.get('cancel') }}</button>
+                </div>
+                <div class="control">
+                    <button
+                        id="button-submit-item-creation"
+                        @click.prevent="onSubmit"
+                        class="button is-success" :disabled="formHasErrors">{{ $i18n.get('save') }}</button> 
+                </div>
+            </div>
         </form>
 
         <b-loading :active.sync="isLoading" :canCancel="false">
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 47f2def1e..78adada7a 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -92,6 +92,7 @@ html {
     .label { 
         font-weight: normal;
         font-size: 14px; 
+        display: inline-block;
     }
     .required-field-asterisk {
         color: $gray;