New representation for terms hierarchy dropdown. Fixes new tem cancel. Corrects some css color for hover.

src/admin/components/lists/basic-term-item.vue

@@ -128,7 +128,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @import "../../scss/_variables.scss";
 
     // Term Item
@@ -157,12 +157,6 @@ export default {
             }
         }
 
-        .children-icon {
-            color: $blue2;
-            position: absolute;
-            left: -21px;
-        }
-
         .term-name {
             text-overflow: ellipsis;
             overflow-x: hidden;
@@ -186,16 +180,6 @@ export default {
             font-weight: bold;
             color: $danger;
         }
-        .children-dropdown {
-            margin-left: auto;
-            color: $blue4;
-            cursor: pointer;
-            padding-right: 1rem;
-            white-space: nowrap;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-        }
         .controls { 
             visibility: hidden;
             opacity: 0.0;
@@ -215,7 +199,7 @@ export default {
                 }
             }            
         }
-        .controls.is-disabled a, .children-dropdown.is-disabled {
+        .controls.is-disabled a {
             color: $gray4 !important;
             cursor: not-allowed !important;
             user-select: none;

src/admin/components/lists/recursive-term-item.vue

@@ -14,52 +14,51 @@
                 class="icon children-icon">
             <i class="mdi mdi-24px mdi-subdirectory-arrow-right"/>
         </span> 
+        <span class="children-dropdown icon">
+            <i 
+                    :class="{ 
+                        'mdi-menu-right': !showChildren,  
+                        'mdi-menu-down': showChildren,
+                        'is-disabled': isEditingTerm }"
+                    class="mdi mdi-36px"
+                    v-if="term.total_children > 0"
+                    @click.prevent="toggleShowChildren()"/>
+        </span>
         <span 
                 class="term-name" 
                 :class="{'is-danger': formWithErrors == term.id }">
             {{ term.name }}
         </span>
         <span 
-                v-if="term.id != undefined"
+                v-if="term.id == 'new'"
                 class="label-details">
-            <span 
+            <span class="not-saved" > 
-                    class="not-saved" 
-                    v-if="term.id == 'new'"> 
                 {{ $i18n.get('info_not_saved') }}
             </span>
         </span>
         <span 
-                class="children-dropdown"
+                class="children-counter"
-                :class="{'is-disabled': isEditingTerm}"
+                v-if="term.total_children > 0">
-                v-if="term.total_children > 0"
-                @click.prevent="toggleShowChildren()">
-           <span class="icon">
-                <i 
-                        :class="{ 
-                            'mdi-menu-right': !showChildren,  
-                            'mdi-menu-down': showChildren }"
-                        class="mdi mdi-24px"/>
-            </span>
             <span>{{ term.total_children + ' ' + $i18n.get('label_children_terms') }}</span>
         </span>
         <span 
                 class="controls" 
                 :class="{'is-disabled': isEditingTerm}">
             <a @click="addNewChildTerm(term, index)">
-                <b-icon 
+                <span class="icon">
-                        size="is-small"
+                    <i class="mdi mdi-18px mdi-plus-circle"/>
-                        icon="plus-circle"/>
+                </span>
             </a>
             <a
                     @click.prevent="editTerm()">
-                <b-icon 
+                <span class="icon">
-                        size="is-small" 
+                    <i class="mdi mdi-18px mdi-pencil"/>
-                        icon="pencil"/>
+                </span>
             </a>
             <a @click.prevent="tryToRemoveTerm()">
-                <b-icon 
+                <span class="icon">
-                        size="is-small"
+                    <i class="mdi mdi-18px mdi-delete"/>
-                        icon="delete"/>
+                </span>
             </a>
         </span>
     </div>
@@ -251,13 +250,13 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @import "../../scss/_variables.scss";
 
     // Term Item
     .term-item {
         font-size: 14px;
-        padding: 0 0 0 1.75rem;
+        padding: 0 0 0 2.75rem;
         min-height: 40px;
         display: flex; 
         position: relative;
@@ -285,7 +284,12 @@ export default {
             position: absolute;
             left: -21px;
         }
-
+        .children-dropdown {
+            color: $blue4;
+            position: absolute;
+            left: 5px;
+            cursor: pointer;
+        }
         .term-name {
             text-overflow: ellipsis;
             overflow-x: hidden;
@@ -302,30 +306,29 @@ export default {
         .label-details {
             font-weight: normal;
             color: $gray3;
+            margin-left: 1rem;
             margin-right: auto;
         }
+        .children-counter {
+            margin-left: 1rem;
+            margin-right: auto;
+            color: $gray4;
+            padding-right: 1rem;
+            white-space: nowrap;
+            overflow: hidden;
+        }
         .not-saved {
             font-style: italic;
             font-weight: bold;
             color: $danger;
         }
-        .children-dropdown {
-            margin-left: auto;
-            color: $blue4;
-            cursor: pointer;
-            padding-right: 1rem;
-            white-space: nowrap;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-        }
         .controls { 
             visibility: hidden;
             opacity: 0.0;
             display: flex;
             justify-content: space-between;
             background-color: $gray2;
-            padding: 0.76rem 0.875rem;
+            padding: 0.5rem 0.875rem;
 
             a {
                 display: flex;

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

@@ -227,12 +227,32 @@ export default {
             this.$termsListBus.onEditTerm(newTerm);
         },
         onTermEditionFinished($event) {
-
             this.$termsListBus.onTermEditionSaved($event);
         },
         onTermEditionCanceled($event) {
 
             let term = $event;
+
+            if (term.id == 'new') { 
+                for (let i = 0; i < this.localTerms.length; i++) {
+                    if (this.localTerms[i].id == term.id) {
+                        this.localTerms.splice(i, 1);
+                        break;
+                    } else { 
+                        let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == term.parent }); 
+                        if (canceledParent != undefined) {
+                            for (let j = 0; j < canceledParent['children'].length; j++){
+                                if (canceledParent['children'][j].id == term.id) {
+                                    canceledParent['children'].splice(j, 1);
+                                    break;
+                                }
+                            }
+                            break;              
+                        }          
+                    }
+                }
+            } else {
+
                 let originalTerm;
                 for (let aTerm of this.termsList) {
                     if (aTerm.id == term.id)
@@ -262,25 +282,6 @@ export default {
                             }          
                         }
                     }
-            } else {
-                if (term.id == 'new') { 
-                    for (let i = 0; i < this.localTerms.length; i++) {
-                        if (this.localTerms[i].id == term.id) {
-                            this.localTerms.splice(i, 1);
-                            break;
-                        } else { 
-                            let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == term.parent }); 
-                            if (canceledParent != undefined) {
-                                for (let j = 0; j < canceledParent['children'].length; j++){
-                                    if (canceledParent['children'][j].id == term.id) {
-                                        canceledParent['children'].splice(j, i);
-                                        break;
-                                    }
-                                }
-                                break;              
-                            }          
-                        }
-                    }
                 }
             }
             this.$termsListBus.onTermEditionCanceled(term);

src/admin/components/navigation/primary-menu.vue

@@ -194,7 +194,7 @@ export default {
             }
             .menu-text-import {
                 position: relative;
-                top: -2px;
+                top: -3px;
                 left: -6px;
             }
         }

src/admin/scss/_dropdown-and-autocomplete.scss

@@ -28,7 +28,7 @@
                 label { margin-bottom: 0; }
                 &.control { font-size: 13px !important; }
                 .b-checkbox { width: 100% };
-                &:hover { background-color: $gray1; }
+                &:hover { background-color: $gray2; }
                 .is-small { color: $gray4; }
                 &.is-active { background-color: $turquoise2; }
 

src/admin/scss/_filters-menu-modal.scss

@@ -5,7 +5,7 @@
         background-color: $gray1;
 
         &:hover {
-            background-color: $gray1;   
+            background-color: $gray2;   
         }
         &::before, &::after {
             background-color: $secondary;

src/admin/scss/_selects.scss

@@ -11,7 +11,7 @@
         margin-bottom: 0px !important;
         color: $tainacan-input-color;
         option:checked, option:hover {
-            background-color: $gray1 !important;
+            background-color: $gray2 !important;
         }
         &:focus, &:active {
             box-shadow: none !important;

src/admin/scss/_tags.scss

@@ -8,7 +8,7 @@
     overflow: hidden;
 
     &:hover, &:hover .tag {
-        background-color: $gray1;
+        background-color: $gray2;
     }
 
     .tag {

src/admin/scss/tainacan-admin.scss

@@ -113,7 +113,7 @@ a:hover {
         color: $blue5;
 
         option:checked, option:hover {
-            background-color: $gray1 !important;
+            background-color: $gray2 !important;
         }
     }
     .tainacan-table {