Adds tooltips tips to table in ItemsList. For now they are only rendering basic html equal to table cell.

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

@@ -343,7 +343,7 @@ export default {
         width: 100%;
         
         .checkbox-cell {
-            width: 44px;
+            width: 40px;
             height: 58px;
             padding: 0;
             position: absolute !important;
@@ -354,9 +354,9 @@ export default {
             z-index: 9;
 
             &::before {
-                box-shadow: inset 53px 0 10px -12px #222;
+                box-shadow: inset 50px 0 10px -12px #222;
                 content: " ";
-                width: 64px;
+                width: 60px;
                 height: 100%;
                 position: absolute;
                 left: 0;

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

@@ -93,12 +93,11 @@
                                         'table-creation': column.field == 'row_creation'}"
                                 @click="goToItemPage(item)">
 
-                            <p
+                            <data-and-tooltip
                                     v-if="column.field !== 'row_thumbnail' &&
                                             column.field !== 'row_actions' &&
                                             column.field !== 'row_creation'"
-
+                                    :data="renderMetadata( item.metadata[column.slug] )"/>
-                                    v-html="renderMetadata( item.metadata[column.slug] )"/>
 
                             <span v-if="column.field == 'row_thumbnail'">
                                 <img 
@@ -144,6 +143,7 @@
 
 <script>
 import { mapActions } from 'vuex';
+import DataAndTooltip from '../other/data-and-tooltip.vue'
 
 export default {
     name: 'ItemsList',
@@ -161,6 +161,9 @@ export default {
         isLoading: false,
         isOnTheme: false
     },
+    components: {
+        DataAndTooltip
+    },
     mounted() {
         this.selectedItems = [];
         for (let i = 0; i < this.items.length; i++)
@@ -325,8 +328,8 @@ export default {
         // }
         
         .checkbox-cell {
-            min-width: 44px;
+            min-width: 40px;
-            width: 44px;
+            width: 40px;
             padding: 0;
             position: sticky !important;
             position: -webkit-sticky !important;
@@ -336,9 +339,9 @@ export default {
             display: table-cell;
 
             &::before {
-                box-shadow: inset 54px 0 10px -12px #222;
+                box-shadow: inset 50px 0 10px -12px #222;
                 content: " ";
-                width: 54px;
+                width: 50px;
                 height: 100%;
                 position: absolute;
                 left: 0;
@@ -355,6 +358,9 @@ export default {
                 justify-content: center;
 
             }
+            label.control-label {
+                display: none;
+            }
             &.is-selecting {
                 visibility: visible; 
             }
@@ -392,7 +398,7 @@ export default {
                     }
                     
                 }
-                td.column-default-width{
+                td.column-default-width {
                     max-width: 300px;
                     p {
                         text-overflow: ellipsis;
@@ -418,7 +424,7 @@ export default {
                     position: -webkit-sticky !important;
                     right: 0px;
                     top: auto;
-                    width: 8.333333333%;
+                    width: 80px;
 
                     .actions-container {
                         visibility: hidden;
@@ -426,14 +432,15 @@ export default {
                         position: relative;
                         padding: 0;
                         height: 100%;
-                        min-width: 120px;
+                        width: 80px;
                         z-index: 9;
                         background-color: transparent; 
+                        float: right;
                     }
 
                     a {
                         margin: auto;
-                        .mdi {font-size: 18px !important; }  
+                        font-size: 18px !important;
                     }
 
                 }
@@ -453,9 +460,9 @@ export default {
                         }
 
                         &::after {
-                            box-shadow: inset -134px 0 17px -21px #222;
+                            box-shadow: inset -97px 0 17px -21px #222;
                             content: " ";
-                            width: 140px;
+                            width: 100px;
                             height: 100%;
                             position: absolute;
                             right: 0px;

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

@@ -45,12 +45,15 @@
                     {{ $i18n.get('label_view_term') }}
                 </button>
             -->
-                <button
+                <a
-                        class="button is-secondary is-small"
+                        class="is-small"
                         type="button"
                         @click="addNewChildTerm(term, index)">
+                    <b-icon 
+                            size="is-small"
+                            icon="plus-circle"/>
                     {{ $i18n.get('label_new_child') }}
-                </button>
+                </a>
 
                 <a @click.prevent="editTerm(term, index)">
                     <b-icon 
@@ -380,6 +383,12 @@ export default {
                 bottom: 1px;   
                 position: relative;
                 i, i:before { font-size: 20px; }
+                .mdi-plus-circle, .mdi-plus-circle:before{
+                    font-size: 18px;
+                }
+                a {
+                    margin-right: 8px;
+                }
             }
             .button {
                 margin-right: 1em;

src/admin/components/other/data-and-tooltip.vue

@@ -0,0 +1,88 @@
+<template>
+    <span class="data-wrapper">
+        <p 
+            class="data-area"
+            v-html="data" />
+        <div class="data-tooltip">
+            <div class="data-tooltip-body">
+                <p v-html="data" />
+            </div>
+        </div> 
+    </span>
+</template>
+
+<script>
+export default {
+    name: 'DataAndTooltip',
+    props: {
+        data: '',
+    }
+}
+</script>
+
+<style lang="scss">
+
+    @import "../../scss/_variables.scss";
+
+    .data-wrapper {
+        position: relative;
+    }
+
+    .data-area {
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+        white-space: nowrap;
+    }
+
+    .data-wrapper:hover .data-tooltip {
+        margin-bottom: -8px;
+        margin-left: -8px;
+        visibility: visible;
+        opacity: 1; 
+    }
+    .data-tooltip {
+        z-index: 99999999999999999999;
+        color: $tertiary;
+        background-color: $primary-light;
+        border: none;
+        display: block;
+        border-radius: 5px;
+        max-width: 280px;
+        min-width: 100px;
+        height: auto;
+        transition: margin-bottom 0.2s ease, opacity 0.3s ease;
+        position: absolute;
+        bottom: calc(100% - 6px);
+        left: 0;         
+        margin-bottom: -27px;
+        visibility: hidden;
+        opacity: 0;
+
+        .data-tooltip-body {
+            padding: 20px;
+            p {
+                font-size: 11px;
+                font-weight: normal;
+            }
+        }
+
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 28px;
+            width: 0;
+            height: 0;
+            border-style: solid;
+        }
+        &:before {
+            border-color: $primary-light transparent transparent transparent;
+            border-right-width: 6px;
+            border-top-width: 7px;
+            border-left-width: 6px;
+            bottom: -10px;
+        }
+    }
+    
+</style>
+

src/admin/pages/singles/category-page.vue

@@ -14,7 +14,7 @@
                     <router-link
                             class="card-footer-item"
                             :to="{ path: $routerHelper.getCategoryEditPath(categoryId)}">
-                        {{ $i18n.getFrom('taxonomies','edit') }}
+                        {{ $i18n.getFrom('taxonomies','edit_item') }}
                     </router-link>
                     <a class="card-footer-item">
                         Edit terms