From e2826fc6ed38ab17fc1677c9df45deb55bf6c84b Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Wed, 15 Aug 2018 12:19:49 -0300
Subject: [PATCH] New representation for terms hierarchy dropdown. Fixes new
 tem cancel. Corrects some css color for hover.

---
 .../components/lists/basic-term-item.vue      | 20 +----
 .../components/lists/recursive-term-item.vue  | 81 ++++++++++---------
 src/admin/components/lists/terms-list.vue     | 43 +++++-----
 .../components/navigation/primary-menu.vue    |  2 +-
 .../scss/_dropdown-and-autocomplete.scss      |  2 +-
 src/admin/scss/_filters-menu-modal.scss       |  2 +-
 src/admin/scss/_selects.scss                  |  2 +-
 src/admin/scss/_tags.scss                     |  2 +-
 src/admin/scss/tainacan-admin.scss            |  2 +-
 9 files changed, 72 insertions(+), 84 deletions(-)

diff --git a/src/admin/components/lists/basic-term-item.vue b/src/admin/components/lists/basic-term-item.vue
index 51b117165..344cbf48d 100644
--- a/src/admin/components/lists/basic-term-item.vue
+++ b/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;
diff --git a/src/admin/components/lists/recursive-term-item.vue b/src/admin/components/lists/recursive-term-item.vue
index d95c596a6..0fe1cdfd6 100644
--- a/src/admin/components/lists/recursive-term-item.vue
+++ b/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"
+        <span 
+                v-if="term.id == 'new'"
                 class="label-details">
-            <span 
-                    class="not-saved" 
-                    v-if="term.id == 'new'"> 
+            <span class="not-saved" > 
                 {{ $i18n.get('info_not_saved') }}
             </span>
         </span>
         <span 
-                class="children-dropdown"
-                :class="{'is-disabled': isEditingTerm}"
-                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>
+                class="children-counter"
+                v-if="term.total_children > 0">
             <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 
-                        size="is-small"
-                        icon="plus-circle"/>
+                <span class="icon">
+                    <i class="mdi mdi-18px mdi-plus-circle"/>
+                </span>
             </a>
             <a
                     @click.prevent="editTerm()">
-                <b-icon 
-                        size="is-small" 
-                        icon="pencil"/>
+                <span class="icon">
+                    <i class="mdi mdi-18px mdi-pencil"/>
+                </span>
             </a>
             <a @click.prevent="tryToRemoveTerm()">
-                <b-icon 
-                        size="is-small"
-                        icon="delete"/>
+                <span class="icon">
+                    <i class="mdi mdi-18px mdi-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;
diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue
index 9ff2f1d3e..be426708b 100644
--- a/src/admin/components/lists/terms-list.vue
+++ b/src/admin/components/lists/terms-list.vue
@@ -227,34 +227,23 @@ export default {
             this.$termsListBus.onEditTerm(newTerm);
         },
         onTermEditionFinished($event) {
-
             this.$termsListBus.onTermEditionSaved($event);
         },
         onTermEditionCanceled($event) {
 
             let term = $event;
-            let originalTerm;
-            for (let aTerm of this.termsList) {
-                if (aTerm.id == term.id)
-                    originalTerm = aTerm;
-                else {
-                    let childOriginalTerm = t.find(aTerm, [], (node) => { return node.id == term.id} );
-                    if (childOriginalTerm != undefined)
-                        originalTerm = childOriginalTerm;
-                }
-            }
 
-            if (originalTerm != undefined) {
+            if (term.id == 'new') { 
                 for (let i = 0; i < this.localTerms.length; i++) {
                     if (this.localTerms[i].id == term.id) {
-                        this.$set(this.localTerms, i, JSON.parse(JSON.stringify(originalTerm)));
+                        this.localTerms.splice(i, 1);
                         break;
                     } else { 
-                        let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == originalTerm.parent }); 
+                        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 == originalTerm.id) {
-                                    this.$set(canceledParent['children'], j, JSON.parse(JSON.stringify(originalTerm)));
+                                if (canceledParent['children'][j].id == term.id) {
+                                    canceledParent['children'].splice(j, 1);
                                     break;
                                 }
                             }
@@ -263,17 +252,29 @@ export default {
                     }
                 }
             } else {
-                if (term.id == 'new') { 
+
+                let originalTerm;
+                for (let aTerm of this.termsList) {
+                    if (aTerm.id == term.id)
+                        originalTerm = aTerm;
+                    else {
+                        let childOriginalTerm = t.find(aTerm, [], (node) => { return node.id == term.id} );
+                        if (childOriginalTerm != undefined)
+                            originalTerm = childOriginalTerm;
+                    }
+                }
+
+                if (originalTerm != undefined) {
                     for (let i = 0; i < this.localTerms.length; i++) {
                         if (this.localTerms[i].id == term.id) {
-                            this.localTerms.splice(i, 1);
+                            this.$set(this.localTerms, i, JSON.parse(JSON.stringify(originalTerm)));
                             break;
                         } else { 
-                            let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == term.parent }); 
+                            let canceledParent = t.find(this.localTerms[i], [], (node) => { return node.id == originalTerm.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);
+                                    if (canceledParent['children'][j].id == originalTerm.id) {
+                                        this.$set(canceledParent['children'], j, JSON.parse(JSON.stringify(originalTerm)));
                                         break;
                                     }
                                 }
diff --git a/src/admin/components/navigation/primary-menu.vue b/src/admin/components/navigation/primary-menu.vue
index 64993aaa5..df12dc220 100644
--- a/src/admin/components/navigation/primary-menu.vue
+++ b/src/admin/components/navigation/primary-menu.vue
@@ -194,7 +194,7 @@ export default {
             }
             .menu-text-import {
                 position: relative;
-                top: -2px;
+                top: -3px;
                 left: -6px;
             }
         }
diff --git a/src/admin/scss/_dropdown-and-autocomplete.scss b/src/admin/scss/_dropdown-and-autocomplete.scss
index 548118e43..9d67a7ad1 100644
--- a/src/admin/scss/_dropdown-and-autocomplete.scss
+++ b/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; }
 
diff --git a/src/admin/scss/_filters-menu-modal.scss b/src/admin/scss/_filters-menu-modal.scss
index f8a8a642a..92cdadb6a 100644
--- a/src/admin/scss/_filters-menu-modal.scss
+++ b/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;
diff --git a/src/admin/scss/_selects.scss b/src/admin/scss/_selects.scss
index 3adec9125..bc2cd0f68 100644
--- a/src/admin/scss/_selects.scss
+++ b/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;
diff --git a/src/admin/scss/_tags.scss b/src/admin/scss/_tags.scss
index 0fee5aa23..8cddb6849 100644
--- a/src/admin/scss/_tags.scss
+++ b/src/admin/scss/_tags.scss
@@ -8,7 +8,7 @@
     overflow: hidden;
 
     &:hover, &:hover .tag {
-        background-color: $gray1;
+        background-color: $gray2;
     }
 
     .tag {
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 10197bb33..ba212f4c1 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/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 {