From 9dd7183fa4d3ba906bf9aeb518a5923cb56b91ba Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 4 May 2018 09:32:58 -0300
Subject: [PATCH] More css adjustments. Implements backdrop scape for Help
 Tooltip (Ref. #30). Adds missing i18n translations to Term Edition form on
 help tooltip. Adds missing title row on Taxonomy edition page.

---
 .../edition/category-edition-form.vue         | 22 +----
 .../components/edition/term-edition-form.vue  |  8 +-
 src/admin/components/other/help-button.vue    | 93 ++++++++++---------
 src/admin/scss/_variables.scss                |  2 +-
 src/admin/scss/tainacan-admin.scss            |  5 +-
 src/admin/tainacan-admin-i18n.php             |  2 +
 6 files changed, 62 insertions(+), 70 deletions(-)

diff --git a/src/admin/components/edition/category-edition-form.vue b/src/admin/components/edition/category-edition-form.vue
index deca3fabf..aaa57a0d7 100644
--- a/src/admin/components/edition/category-edition-form.vue
+++ b/src/admin/components/edition/category-edition-form.vue
@@ -1,13 +1,9 @@
 <template>
     <div>
         <div class="page-container primary-page">
-            <b-tabs v-model="activeTab">
-
+            <tainacan-title />
+            <b-tabs v-model="activeTab">    
                 <b-tab-item :label="$i18n.get('category')">
-                    <b-tag
-                            v-if="category != null && category != undefined" 
-                            :type="'is-' + getStatusColor(category.status)" 
-                            v-text="category.status"/>
                     <form 
                             v-if="category != null && category != undefined" 
                             class="tainacan-form" 
@@ -294,20 +290,6 @@
                     });
 
             },
-            getStatusColor(status) {
-                switch(status) {
-                    case 'publish':
-                        return 'success';
-                    case 'draft':
-                        return 'info';
-                    case 'private':
-                        return 'warning';
-                    case 'trash':
-                        return 'danger';
-                    default:
-                        return 'info';
-                }
-            },
             createNewCategory() {
                 // Puts loading on Draft Category creation
                 this.isLoadingCategory = true;
diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue
index 8cb77f924..c9e1c7571 100644
--- a/src/admin/components/edition/term-edition-form.vue
+++ b/src/admin/components/edition/term-edition-form.vue
@@ -47,8 +47,8 @@
                         {{ $i18n.get('label_name') }}
                         <span class="required-term-asterisk">*</span>
                         <help-button
-                                :title="$i18n.getHelperTitle('terms', 'name')"
-                                :message="$i18n.getHelperMessage('terms', 'name')"/>
+                                :title="$i18n.get('label_name')"
+                                :message="$i18n.get('info_help_term_name')"/>
                     </label>
                     <b-input
                             :class="{'has-content': editForm.name != undefined && editForm.name != ''}"
@@ -64,8 +64,8 @@
                     <label class="label">
                         {{ $i18n.get('label_description') }}
                         <help-button
-                                :title="$i18n.getHelperTitle('terms', 'description')"
-                                :message="$i18n.getHelperMessage('terms', 'description')"/>
+                                :title="$i18n.get('label_description')"
+                                :message="$i18n.get('info_help_term_description')"/>
                     </label>
                     <b-input
                             :class="{'has-content': editForm.description != undefined && editForm.description != ''}"
diff --git a/src/admin/components/other/help-button.vue b/src/admin/components/other/help-button.vue
index fe676504b..92e406e4b 100644
--- a/src/admin/components/other/help-button.vue
+++ b/src/admin/components/other/help-button.vue
@@ -5,16 +5,20 @@
                 @click="isOpened = !isOpened"><b-icon 
                 size="is-small" 
                 icon="help-circle-outline"/></a>
+        <div
+                @click="isOpened = false" 
+                class="help-backdrop" 
+                :class="{ 'opened': isOpened }" />   
         <div 
-                class="help-tooltip" 
-                :class="{ 'opened': isOpened }">
+                :class="{ 'opened': isOpened }"
+                class="help-tooltip">
             <div class="help-tooltip-header">
                 <h5>{{ title }}</h5><a @click="isOpened = false"><b-icon icon="close"/></a>
             </div>
             <div class="help-tooltip-body">
                 <p>{{ (message != '' && message != undefined) ? message : $i18n.get('info_no_description_provided') }}</p>
             </div>
-        </div>   
+        </div> 
     </span>
 </template>
 
@@ -43,51 +47,61 @@ export default {
 
     a.help-button .icon {
         i, i::before { font-size: 0.9em !important; }
-        color: $gray;
-        &:hover {
-            color: $primary !important;
+    }
+
+    .help-backdrop {
+        background-color: transparent;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 9999999999999999999;
+        display: none;
+        visibility: hidden;
+        opacity: 0;
+
+        &.opened {
+            visibility: visible;
+            display: block;
         }
+        
+        
     }
-
-    .help-tooltip.opened {
-        visibility: visible;
-        opacity: 1;
-        margin-bottom: 14px;
-    }
-
     .help-tooltip {
-        color: #000;
-        background-color: #e8f9f5;
-        border: 1px solid #338591;
-        border-radius: 10px;
+        z-index: 99999999999999999999;
+        color: $secondary;
+        background-color: $primary-light;
+        border: none;
+        border-radius: 5px;
         margin: 0px 0px 0px -37px;
         position: absolute;
-        z-index: 999999999999999;
-        bottom: 100%;
+        bottom: calc(100% - 6px);
         left: 0%;
         min-width: 250px;
         display: block;
+        transition: margin-bottom 0.3s ease, opacity 0.4s ease;
         visibility: hidden;
         opacity: 0;
-        transition: opacity 0.4s ease, margin-bottom 0.3s ease;
+
+        &.opened {
+            margin-bottom: 14px;
+            visibility: visible;
+            opacity: 1;    
+        }
 
         .help-tooltip-header {
-            padding: 0.8em 0.8em 0.6em 0.8em;
-            border-bottom: 1px solid #909293;
-            font-size: 18px;
-            font-weight: bold;
+            padding: 0.8em 0.8em 0em 0.8em;
 
             h5 {
+                font-size: 16px;
+                font-weight: 700;
                 margin-right: 25px;
             }
             .icon {
-                color: #909293 !important;
-                right: 14px;
-                top: 14px;
+                right: 12px;
+                top: 12px;
                 position: absolute;
-                &:hover {
-                    color: black !important;
-                }
             }
         }
 
@@ -96,28 +110,21 @@ export default {
             font-size: 11px;
         }
 
-        &:after,
         &:before {
             content: "";
             display: block;
             position: absolute;
-            left: 24px;
+            left: 28px;
             width: 0;
             height: 0;
             border-style: solid;
         }
-        &:after {
-            border-color:  #e8f9f5 transparent transparent transparent;
-            border-right-width: 20px;
-            border-top-width: 16px;
-            border-left-width: 20px;
-        }
         &:before {
-            border-color: #338591 transparent transparent transparent;
-            border-right-width: 20px;
-            border-top-width: 16px;
-            border-left-width: 20px;
-            bottom: -20px;
+            border-color: $primary-light transparent transparent transparent;
+            border-right-width: 18px;
+            border-top-width: 12px;
+            border-left-width: 18px;
+            bottom: -15px;
         }
     }
 </style>
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index c0104254f..6e41910f3 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -15,7 +15,7 @@ $primary-lighter: #e6f6f8;
 $primary-dark: #55A0AF;
 $primary-darker: darken($primary-dark, 5%);
 
-$success: #25a088;
+$success: #25a189;
 $success-invert: findColorInvert($success);
 
 $separator-color: #2b98a4;
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index b203251b4..72f7dcc7d 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -130,7 +130,7 @@ html {
 
 // Input components used in forms are gray in Tainacan
 .tainacan-form {
-    color: black;
+    color: $tainacan-input-color;
     .form-submit {
         justify-content: space-between !important;
         padding: 1em 1.2em 0.4em 1.2em;
@@ -140,7 +140,7 @@ html {
             padding: 2px 30px !important;
         }
         .button.is-outlined {
-            color: $tertiary;
+            color: #150e38;
         }
         &.has-only-save {
             justify-content: end !important;
@@ -252,6 +252,7 @@ html {
 }
 .button.is-small {
     height: 26px !important;
+    line-height: 12px;
 }
 .button:not(.is-small):not(.is-medium):not(.is-large) {
     height: 30px !important;
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index 416408d86..5a974f11f 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -235,6 +235,8 @@ return [
 	'info_there_is_no_filter'                  => __( 'There is no filter here yet.', 'tainacan' ),
 	'info_changes'                             => __( 'Changes', 'tainacan' ),
 	'info_possible_external_sources'           => __( 'Possible external sources: CSV, Instagram, Youtube, etc.', 'tainacan' ),
+	'info_help_term_name'          		   	   => __( 'The name of the Term.', 'tainacan' ),
+	'info_help_term_description'          	   => __( 'The description of the Term.', 'tainacan' ),
 
 	// Tainacan Field Types
 	'tainacan-text'                            => __( 'Text', 'tainacan' ),