Adds helper buttons to Collection Edition Page.

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 
+            <b-field
-                    :label="$i18n.get('label_description')"
+                :addons="false" 
-                    :type="editFormErrors['description'] != undefined ? 'is-danger' : ''" 
+                :label="$i18n.get('label_description')"
-                    :message="editFormErrors['description'] != undefined ? editFormErrors['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>
-
+            <div class="field is-grouped form-submit">
-            <button
+                <div class="control">
-                id="button-cancel-collection-creation"
+                    <button
-                class="button"
+                        id="button-cancel-collection-creation"
-                type="button"
+                        class="button is-outlined"
-                @click="cancelBack">{{ $i18n.get('cancel') }}</button>
+                        type="button"
-            <button
+                        @click="cancelBack">{{ $i18n.get('cancel') }}</button>
-                id="button-submit-collection-creation"
+                </div>
-                @click.prevent="onSubmit"
+                <div class="control">
-                class="button is-primary">{{ $i18n.get('save') }}</button>
+                    <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>
 

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>     
+            </div>
-            <button
+            <div class="field is-grouped form-submit">
-                id="button-cancel-item-creation"
+                <div class="control">     
-                class="button"
+                    <button
-                type="button"
+                        id="button-cancel-item-creation"
-                @click="cancelBack">{{ $i18n.get('cancel') }}</button>
+                        class="button is-outlined"
-            <button
+                        type="button"
-                id="button-submit-item-creation"
+                        @click="cancelBack">{{ $i18n.get('cancel') }}</button>
-                @click.prevent="onSubmit"
+                </div>
-                class="button is-primary" :disabled="formHasErrors">{{ $i18n.get('save') }}</button> 
+                <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">

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;