From 2d326c1bb3a7807f5cdb671f4aa0115d78768537 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 1 Jun 2018 21:09:29 -0300
Subject: [PATCH] Improvements in theme search control design. Preventive
 renderMetadata function on Items List table for admin.

---
 src/admin/components/lists/items-list.vue     |  10 +-
 .../scss/_dropdown-and-autocomplete.scss      |  14 +-
 src/admin/scss/theme-basics.sass              |   1 +
 src/admin/theme-items-list.vue                | 165 +-----------------
 4 files changed, 20 insertions(+), 170 deletions(-)

diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 8e1ae772e..35f1153cd 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -101,10 +101,10 @@
                                     v-if="column.field !== 'row_thumbnail' &&
                                             column.field !== 'row_actions' &&
                                             column.field !== 'row_creation'"
-                                    :data="renderMetadata( item.metadata[column.slug] )"/> -->
+                                    :data="renderMetadata(item.metadata, column)"/> -->
                             <p
                                     v-tooltip="{
-                                        content: renderMetadata( item.metadata[column.slug] ),
+                                        content: renderMetadata(item.metadata, column),
                                         html: true,
                                         autoHide: false,
                                         placement: 'auto-start'
@@ -114,7 +114,7 @@
                                           column.field !== 'row_actions' &&
                                           column.field !== 'row_creation' &&
                                           column.field !== 'row_author'"
-                                    v-html="renderMetadata( item.metadata[column.slug] )"/>
+                                    v-html="renderMetadata(item.metadata, column)"/>
 
                             <span v-if="column.field == 'row_thumbnail'">
                                 <img 
@@ -284,7 +284,9 @@ export default {
         goToItemEditPage(itemId) {
             this.$router.push(this.$routerHelper.getItemEditPath(this.collectionId, itemId));
         },
-        renderMetadata(metadata) {
+        renderMetadata(itemMetadata, column) {
+
+            let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
 
             if (!metadata) {
                 return '';
diff --git a/src/admin/scss/_dropdown-and-autocomplete.scss b/src/admin/scss/_dropdown-and-autocomplete.scss
index 1efd2cf1f..6bb8928ca 100644
--- a/src/admin/scss/_dropdown-and-autocomplete.scss
+++ b/src/admin/scss/_dropdown-and-autocomplete.scss
@@ -14,16 +14,18 @@
         }
     }
     .dropdown-menu {
+        padding: 0;
+        border-radius: 0px;
         .dropdown-content {
+            padding: 0;
             border-radius: 0px !important;
             .dropdown-item {
+                padding: 0.375rem 1rem;
+                label { margin-bottom: 0; }
+                &.control { font-size: 13px !important; }
                 .b-checkbox { width: 100% };
-                &:hover {
-                    background-color: $primary-lighter;
-                }
-                .is-small {
-                    color: gray;
-                }
+                &:hover { background-color: $primary-lighter; }
+                .is-small { color: gray; }
             }
         } 
     }
diff --git a/src/admin/scss/theme-basics.sass b/src/admin/scss/theme-basics.sass
index 3c8b52a35..77e7ac9a8 100644
--- a/src/admin/scss/theme-basics.sass
+++ b/src/admin/scss/theme-basics.sass
@@ -5,3 +5,4 @@
 @import "../../../node_modules/bulma/sass/elements/icon.sass"
 @import "../../../node_modules/bulma/sass/elements/tag.sass"
 @import "../../../node_modules/bulma/sass/components/tabs.sass"
+@import "../../../node_modules/bulma/sass/elements/button.sass"
diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue
index a0bf27ad8..9eb83cf85 100644
--- a/src/admin/theme-items-list.vue
+++ b/src/admin/theme-items-list.vue
@@ -14,6 +14,8 @@ export default {
 
 
 <style lang="scss">
+   @import "../admin/scss/_variables.scss";
+
     // Bulma imports
     @import "./scss/theme-basics.sass";
 
@@ -28,8 +30,8 @@ export default {
     @import "../../node_modules/buefy/src/scss/components/_dropdown.scss";
 
     // Tainacan imports
-    @import "../admin/scss/_variables.scss";
     @import "../admin/scss/_tables.scss";
+    @import "../admin/scss/_dropdown-and-autocomplete.scss";
     @import "../admin/scss/_tooltips.scss";
     @import "../admin/scss/_tainacan-form.scss";
     
@@ -56,11 +58,8 @@ export default {
             margin-top: 0px;
             margin-bottom: 0px;
             display: inline-flex;
-            color: #1d1d1d;
-            font-size: 1.0em;
             font-weight: normal;
             cursor: pointer;
-            background-color: white;
 
             &.is-secondary:hover, &.is-secondary:focus {
                 background: $secondary !important;
@@ -151,162 +150,8 @@ export default {
             position: relative;
             vertical-align: top;
         }
-        .dropdown, .autocomplete {
-            .dropdown-trigger{
-                .button {
-                    border: none;
-                    .icon {
-                        color: $secondary;
-                        align-items: start;
-                    }
-                }
-                .button.is-primary, .button.is-secondary, .button.is-success {
-                    .icon {
-                        color: $white;
-                    }
-                }
-            }
-            .dropdown-menu {
-                display: block;
-                .dropdown-content {
-                    font-size: 13px !important;
-                    border-radius: 0px !important;
-                    .dropdown-item {
-                        a {
-                            color: $tainacan-input-color !important;
-                        }
-                        .b-checkbox { width: 100% };
-                        &:hover {
-                            background-color: $primary-lighter;
-                        }
-                        .is-small {
-                            color: gray;
-                        }
-                    }
-                } 
-            }
-        }
-        .taginput-container {
-            padding: 0 !important;
-            background-color: white !important;
-
-            &:focus, &:active {
-                border: none !important;
-            }
-            .input { margin-bottom: 0px !important; }
-            .input.has-selected, .input:focus, .input:active {
-                background-color: white;
-                border: 1px solid $tainacan-input-background !important;
-            }
-            .tag {
-                background: white;
-                padding-right: 0;
-                padding-left: 0.5em;
-
-                &.is-delete {
-                    color: $gray-light;
-                    &::after {
-                        height: 30% !important;
-                        width: 1px !important;
-                    } 
-                    &::before {
-                        width: 30% !important;
-                        height: 1px !important;
-                    } 
-                    &:hover, &:focus {
-                        background-color: white;
-                        color: black;
-                    }
-                }
-            }
-        }
-        .selected-list-box {
-            padding: 4px 0px;
-            border: 1px solid $tainacan-input-background;
-            background-color: white;
-            display: flex;
-
-            .tags { 
-                margin-right: 8px;
-            }
-            .tag {
-                background: white;
-                padding-right: 0;
-                padding-left: 0.5em;
-
-                &.is-delete {
-                    color: $gray-light;
-                    &::after {
-                        height: 30% !important;
-                        width: 1px !important;
-                    } 
-                    &::before {
-                        width: 30% !important;
-                        height: 1px !important;
-                    } 
-                    &:hover, &:focus {
-                        background-color: white;
-                        color: black;
-                    }
-                }
-            }
-        }
-        .switch {
-            input[type="checkbox"] + .check {
-                background-color: $gray-light;
-                border: 2px solid $gray-light;
-                width: 2.7em;
-                height: 1.7em;
-
-                &::before {
-                    background-color: white;
-                    box-shadow: none;
-                }
-            } 
-            &:hover input[type="checkbox"]:checked + .check {
-                background-color: $primary-light;
-            }
-
-            input[type="checkbox"]:checked + .check {
-                border: 2px solid $secondary;
-                background-color: transparent;
-
-                &::before {
-                    background-color: $secondary;
-                    transform: translate3d(78%, 0, 0);
-                }
-            }
-            &:hover input[type="checkbox"] + .check {
-                background-color: $gray-light;
-            }
-
-            &:focus input[type="checkbox"] + .check,
-            &:focus input[type="checkbox"]:checked + .check {
-                box-shadow: none;
-            }
-
-            &.is-small {
-                font-size: 9px;
-
-                input[type="checkbox"] + .check {
-                    border: 1.5px solid $gray-light;
-                    width: 2.55em;
-                    height: 1.7em;
-
-                    &::before {
-                        width: 1.0em;
-                        height: 1.0em;
-                    }
-                }
-                input[type="checkbox"]:checked + .check {
-                    border: 1.5px solid $secondary;
-
-                    &::before {
-                        transform: translate3d(84%, 0, 0);
-                    }
-                }
-            }
-
+        .dropdown-menu {
+            display: block;
         }
         .b-checkbox.checkbox {