Begins new Taxonomy form and Terms list layout on admin side. #775.

package-lock.json

@@ -2380,9 +2380,9 @@
       }
     },
     "buefy": {
-      "version": "0.9.22",
+      "version": "0.9.23",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.22.tgz",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.23.tgz",
-      "integrity": "sha512-rA9Bf7+2lZupL1PlQU60o7cc0Og4MRz9it5LZlKOIwPENM1uEOjH48EFnNFniLyxIcz6vln0EicS96GsVCFx1Q==",
+      "integrity": "sha512-zkmTOUDlh7xx0ID8cSw3Wtm97nkTGU992TcIBBTC41rjKHjJTyQn9fYr8oqvVaCTLNVJmdPnnjDCuYZtHoDEog==",
       "requires": {
         "bulma": "0.9.4"
       }

package.json

@@ -11,7 +11,7 @@
     "apexcharts": "^3.37.1",
     "axios": "^1.1.3",
     "blurhash": "^2.0.5",
-    "buefy": "^0.9.22",
+    "buefy": "^0.9.23",
     "bulma": "^0.9.4",
     "conditioner-core": "^2.3.3",
     "countup.js": "^2.5.0",

src/views/admin/components/edition/taxonomy-edition-form.vue

@@ -6,10 +6,7 @@
                         { path: $routerHelper.getTaxonomiesPath(), label: $i18n.get('taxonomies') },
                         { path: '', label: (taxonomy != null && taxonomy.name != undefined) ? taxonomy.name : $i18n.get('taxonomy') }
                     ]"/>
-            <b-tabs 
+
-                    @change="onChangeTab($event)"
-                    v-model="tabIndex">    
-                <b-tab-item :label="$i18n.get('taxonomy')">
             <form 
                     v-if="taxonomy != null && taxonomy != undefined && (($route.name == 'TaxonomyCreationForm' && $userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy.current_user_can_edit))"
                     class="tainacan-form" 
@@ -77,35 +74,6 @@
                                         extra-classes="tainacan-repository-tooltip"/>
                                 </label>
                         </b-field>
-                            </div>
-
-                            <div class="column">
-
-                                <!-- Status -------------------------------- --> 
-                                <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('taxonomies', 'status')" 
-                                            :message="$i18n.getHelperMessage('taxonomies', 'status')"
-                                            extra-classes="tainacan-repository-tooltip"/>
-                                    <div class="status-radios">
-                                        <b-radio
-                                                v-model="form.status"
-                                                v-for="(statusOption, index) of $statusHelper.getStatuses()"
-                                                :key="index"
-                                                :native-value="statusOption.slug">
-                                            <span class="icon has-text-gray">
-                                                <i 
-                                                    class="tainacan-icon tainacan-icon-18px"
-                                                    :class="$statusHelper.getIcon(statusOption.slug)"/>
-                                            </span>
-                                            {{ statusOption.name }}
-                                        </b-radio>
-                                    </div>
-                                </b-field>
                         
                         <!-- Slug -------------------------------- -->
                         <b-field
@@ -151,6 +119,53 @@
                             </div>    
                         </b-field>
 
+                    </div>
+
+                    <div class="column">
+
+                        <!-- Status -------------------------------- --> 
+                        <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('taxonomies', 'status')" 
+                                    :message="$i18n.getHelperMessage('taxonomies', 'status')"
+                                    extra-classes="tainacan-repository-tooltip"/>
+                            <div class="status-radios">
+                                <b-radio
+                                        v-model="form.status"
+                                        v-for="(statusOption, index) of $statusHelper.getStatuses()"
+                                        :key="index"
+                                        :native-value="statusOption.slug">
+                                    <span class="icon has-text-gray">
+                                        <i 
+                                            class="tainacan-icon tainacan-icon-18px"
+                                            :class="$statusHelper.getIcon(statusOption.slug)"/>
+                                    </span>
+                                    {{ statusOption.name }}
+                                </b-radio>
+                            </div>
+                        </b-field>
+
+                        <!-- Terms List -->                        
+                        <b-field
+                                :addons="false"
+                                :label="$i18n.get('terms')">
+                            <help-button 
+                                :title="$i18n.get('terms')" 
+                                :message="$i18n.get('info_taxonomy_terms_list')"
+                                extra-classes="tainacan-repository-tooltip"/>
+    
+                            <terms-list
+                                    :key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'" 
+                                    @isEditingTermUpdate="isEditingTermUpdate"
+                                    :taxonomy-id="taxonomyId"
+                                    :taxonomy-slug="taxonomySlug"
+                                    :current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false"/>
+                        </b-field>
+
                         <!-- Hook for extra Form options -->
                         <template v-if="hasEndLeftForm">  
                             <form 
@@ -162,7 +177,7 @@
                 </div>
 
                 <!-- Submit -->
-                        <div class="field is-grouped form-submit">
+                <footer class="footer field is-grouped form-submit">
                     <div
                             v-if="$route.query.recent"
                             class="control">
@@ -207,7 +222,7 @@
                                 @click.prevent="onSubmit"
                                 class="button">{{ $i18n.get('save') }}</button>
                     </div>
-                        </div>
+                </footer>
             </form>
 
             <div v-if="!isLoading && (($route.name == 'TaxonomyCreationForm' && !$userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy && taxonomy.current_user_can_edit != undefined && !taxonomy.current_user_can_edit))">
@@ -223,22 +238,10 @@
                 </section>
             </div>
 
-                </b-tab-item>
-                
-                <b-tab-item :label="$i18n.get('terms')">
-                    <!-- Terms List -->    
-                    <terms-list
-                            :key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'" 
-                            @isEditingTermUpdate="isEditingTermUpdate"
-                            :taxonomy-id="taxonomyId"
-                            :taxonomy-slug="taxonomySlug"
-                            :current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false"/>
-                </b-tab-item>
-
             <b-loading 
                     :active.sync="isLoadingTaxonomy" 
                     :can-cancel="false"/>
-            </b-tabs>
+
         </div>
     </div>
 </template>
@@ -569,5 +572,56 @@
         color: var(--tainacan-info-color);
         font-style: italic;
     }
+
+    .footer {
+        padding: 14px var(--tainacan-one-column);
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        z-index: 9999;
+        background-color: var(--tainacan-gray1);
+        width: calc(100% - var(--tainacan-sidebar-width, 3.25em));
+        height: 60px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        transition: bottom 0.5s ease, width 0.2s linear;
+
+        .footer-message {
+            display: flex;
+            align-items: center;
+        }
+
+        .update-info-section {
+            color: var(--tainacan-info-color);
+            margin-right: auto;
+            display: flex;
+            flex-wrap: nowrap;
+        }
+
+        .help {
+            display: inline-flex;
+            font-size: 1.0em;
+            margin-top: 0;
+            margin-left: 24px;
+
+            .tainacan-help-tooltip-trigger {
+                margin-left: 0.25em;
+            }
+        }
+
+        @media screen and (max-width: 769px) {
+            padding: 13px 0.5em;
+            width: 100%;
+            flex-wrap: wrap;
+            height: auto;
+            position: fixed;
+
+            .update-info-section {
+                margin-left: auto;margin-bottom: 0.75em;
+                margin-top: -0.25em;
+            }
+        }
+    }
 </style>
 

src/views/admin/components/edition/term-edition-form.vue

@@ -12,7 +12,7 @@
                 :is="isModal ? 'header' : 'div'"
                 class="tainacan-page-title"
                 :class="{ 'tainacan-modal-title': isModal }">
-            <h2>{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
+            <h2 style="width: 60%">{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
             <a
                     v-if="form && form.url != undefined && form.url!= ''"
                     target="_blank"

src/views/admin/components/lists/terms-list.vue

@@ -5,11 +5,14 @@
             class="terms-list-header">
         <button
                 v-if="currentUserCanEditTaxonomy"
-                class="button is-secondary"
+                class="is-inline-block add-link link-style"
                 type="button"
                 @click="addNewTerm(0)"
                 :disabled="isEditingTerm && isLoadingTerms">
-            {{ $i18n.get('label_new_term') }}
+            <span class="icon is-small">
+                <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
+            </span>
+            &nbsp;{{ $i18n.get('label_new_term') }}
         </button>
         <b-field class="order-area">
             <label class="label">{{ $i18n.get('label_sort') }}</label>
@@ -21,6 +24,7 @@
                     trap-focus>
                 <button
                             :aria-label="$i18n.get('label_sorting_direction')"
+                            type="button"
                             class="button is-white"
                             slot="trigger">
                     <span 
@@ -76,16 +80,13 @@
                     :disabled="isEditingTerm"/>
         </div>
     </div>
-    <div class="columns">
+
     <b-loading 
             :is-full-page="false"
             :active.sync="isLoadingTerms" 
             :can-cancel="false"/>
-        <div 
+
-                style="font-size: 0.875em;"
+    <div style="font-size: 0.875em; padding: 0px;">
-                :class="{ 'is-12': !isEditingTerm, 'is-8-fullhd is-7-fullscreen is-6-desktop is-5-tablet': isEditingTerm }"
-                class="column">
-            <br>
 
         <!-- Basic list, without hierarchy, used during search -->
         <template v-if="isSearching">
@@ -132,18 +133,26 @@
             {{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - localTerms.length) + ' ' + $i18n.get('terms') + ')' }}
         </a>
     </div>
-        <div 
+
-                class="column is-4-fullhd is-5-fullscreen is-6-desktop is-7-tablet edit-forms-list"
+    <b-modal
-                v-if="isEditingTerm">
+            v-model="isEditingTerm"
+            :width="768"
+            trap-focus
+            aria-role="dialog"
+            aria-modal
+            :can-cancel="['outside', 'escape']"
+            custom-class="tainacan-modal"
+            :close-button-aria-label="$i18n.get('close')">
         <term-edition-form 
                 :style="{ 'top': termEditionFormTop + 'px'}"
                 :taxonomy-id="taxonomyId"
+                :is-modal="true"
                 @onEditionFinished="onTermEditionFinished($event)"
                 @onEditionCanceled="onTermEditionCanceled($event)"
                 @onErrorFound="formWithErrors = editTerm.id"
-                    :original-form="editTerm"/>
+                :original-form="editTerm" />
-        </div>
+    </b-modal>
-    </div>
+
     <!-- Empty state image -->
     <div v-if="termsList.length <= 0 && !isLoadingTerms && !isEditingTerm">
         <section class="section">
@@ -585,10 +594,6 @@ export default {
         border-top: 1px solid var(--tainacan-gray1);
     }
 
-    .edit-forms-list {
-        padding-left: 0;
-    }
-
 </style>
 
 

src/views/tainacan-i18n.php

@@ -1007,6 +1007,7 @@ return apply_filters( 'tainacan-i18n', [
 	'info_non_located_item'							 => __( 'This item does not have any location based on this metadata.', 'tainacan' ),
 	'info_metadata_section_hidden_conditional'		 => __( 'Section disabled due to a conditional metadatum value.', 'tainacan' ),
 	'info_create_select_metadatum_for_conditional_section' => __( 'For configuring conditional sections, first create one select type metadatum to use its values as rules for displaing this section. The metadatum should be inside another metadatum section.', 'tainacan' ),
+	'info_taxonomy_terms_list' 						 => __( 'The list of terms that are managed by this taxonomy. They will be used as values for the taxonomy metadata.', 'tainacan' ),
 
 	/* Activity actions */
 	'action_update-metadata-value'	=> __( 'Item Metadata Value Updates', 'tainacan'),