From c15c2e05fec82bfbd3c4c7d1b564af0c9e0e714d Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 31 Jul 2018 15:10:31 -0300
Subject: [PATCH] Adjustments on Terms Edition List.

---
 src/admin/admin.vue                           |  4 +-
 .../components/edition/term-edition-form.vue  | 14 ++++
 src/admin/components/lists/terms-list.vue     | 64 ++++++++++++-------
 3 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/src/admin/admin.vue b/src/admin/admin.vue
index ef83caa1f..945d858af 100644
--- a/src/admin/admin.vue
+++ b/src/admin/admin.vue
@@ -14,7 +14,9 @@
         <tainacan-repository-subheader 
                 :is-repository-level="isRepositoryLevel"
                 :is-menu-compressed="isMenuCompressed"/>
-        <div class="column is-main-content">  
+        <div 
+                id="repository-container"
+                class="column is-main-content">  
             <router-view /> 
         </div>
     </div>
diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue
index 78e97ef21..200677c6f 100644
--- a/src/admin/components/edition/term-edition-form.vue
+++ b/src/admin/components/edition/term-edition-form.vue
@@ -243,10 +243,24 @@
         }
     }    
 
+    @keyframes enter {
+        from {
+            opacity: 0;
+            transform: translate(-40px,0);
+        }
+        to {
+            opacity: 1;
+            transform: translate(0px,0);
+        }
+    }
+
     form {
         padding: 2.0rem 0rem 1rem 3rem;
         border-left: 1px solid $gray2;
         margin-top: 1.0em;
+        position: relative;
+        animation-name: enter;
+        animation-duration: 0.5s;
 
         .tainacan-page-title {
             margin-bottom: 40px;
diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue
index b7dc46507..1e97e8046 100644
--- a/src/admin/components/lists/terms-list.vue
+++ b/src/admin/components/lists/terms-list.vue
@@ -24,7 +24,7 @@
                     class="term-item"
                     :class="{
                         'not-sortable-item': term.opened || !term.saved, 
-                        'not-focusable-item': term.opened
+                        'opened-term': term.opened
                     }" 
                     :style="{'margin-left': (term.depth * 40) + 'px'}"
                     v-for="(term, index) in orderedTermsList"
@@ -81,11 +81,12 @@
             </div>
         </div>
         <div 
-                class="column" 
+                class="column edit-forms-list" 
                 :key="index"
                 v-for="(term, index) in orderedTermsList"
                 v-show="term.opened">
             <term-edition-form 
+                    :style="{ 'top': termEditionFormTop + 'px'}"
                     :taxonomy-id="taxonomyId"
                     @onEditionFinished="onTermEditionFinished()"
                     @onEditionCanceled="onTermEditionCanceled(term)"
@@ -113,7 +114,8 @@ export default {
             isEditingTerm: false,
             formWithErrors: '',
             orderedTermsList: [],
-            order: 'asc'
+            order: 'asc',
+            termEditionFormTop: 0
         }
     },
     props: {
@@ -188,7 +190,15 @@ export default {
             this.editTerm(newTerm, parentIndex + 1);
         },
         editTerm(term, index) {
+            
+            let container = document.getElementById('repository-container');
+            if (container && container.scrollTop && container.scrollTop > 80)
+                this.termEditionFormTop = container.scrollTop - 80;
+            else
+                this.termEditionFormTop = 0;
+            
             this.isEditingTerm = true;
+
             if (!term.opened) {
 
                 for (let i = 0; i < this.orderedTermsList.length; i++) {
@@ -397,6 +407,10 @@ export default {
         min-height: 40px;
         display: block; 
         position: relative;
+
+        &:hover {
+            background-color: $gray1 !important;
+        }
         
         .handle {
             padding-right: 6em;
@@ -443,33 +457,37 @@ export default {
             }
         }
 
-        &.not-sortable-item, &.not-sortable-item:hover {
+        &.opened-term {
             cursor: default;
-            background-color: white !important;
+            background-color: $blue1;
 
-        } 
-        &.not-focusable-item, &.not-focusable-item:hover {
-            cursor: default;
-            
             .term-name {
-                color: $turquoise3;
+                color: $blue3;
+            }
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                left: 100%;
+                right: -20px;
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-color: transparent transparent transparent $blue1;
+                border-left-width: 16px;
+                border-top-width: 20px;
+                border-bottom-width: 20px;
+                top: 0;
+            }
+            &:hover:before {
+                border-color: transparent transparent transparent $gray1;
             }
         }
   
     }
-    // .term-item:hover:not(.not-sortable-item) {
-    //     background-color: $secondary;
-    //     border-color: $secondary;
-    //     color: white !important;
-
-    //     .label-details, .icon, .not-saved {
-    //         color: white !important;
-    //     }
-
-    //     .grip-icon { 
-    //         fill: white; 
-    //     }
-    // }
+    .edit-forms-list {
+        padding-left: 0;
+    }
 
 </style>