tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Mateus Machado Luna 2018-05-21 16:06:54 -03:00
parent c410b3cfa8
commit e2c0ca1381
5 changed files with 127 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/admin/components/lists/collections-list.vue
View File

@ -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;

39
src/admin/components/lists/items-list.vue
View File

@ -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'"
v-html="renderMetadata( item.metadata[column.slug] )"/>
column.field !== 'row_actions' &&
column.field !== 'row_creation'"
:data="renderMetadata( item.metadata[column.slug] )"/>
<span v-if="column.field == 'row_thumbnail'">
<img
@ -119,7 +118,7 @@
id="button-edit"
:aria-label="$i18n.getFrom('items','edit_item')"
@click.prevent.stop="goToItemEditPage(item.id)">
<b-icon
<b-icon
type="is-secondary"
icon="pencil"/>
</a>
@ -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;
width: 44px;
min-width: 40px;
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;

15
src/admin/components/lists/terms-list.vue
View File

@ -45,12 +45,15 @@
{{ $i18n.get('label_view_term') }}
</button>
-->
<button
class="button is-secondary is-small"
<a
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;

88
src/admin/components/other/data-and-tooltip.vue Normal file
View File

@ -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>

2
src/admin/pages/singles/category-page.vue
View File

@ -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