Adjustments on filters css. Adds v-tooltip to cards view mode and filters.

This commit is contained in:
Mateus Machado Luna 2018-06-28 09:58:01 -03:00
parent 6cf53b76ef
commit b906e4326e
7 changed files with 61 additions and 8 deletions

View File

@ -58,6 +58,12 @@
<!-- Title -->
<div class="metadata-title">
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in tableMetadata"
:key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@ -119,6 +125,12 @@
<!-- Title -->
<div class="metadata-title">
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in tableMetadata"
:key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@ -163,8 +175,21 @@
v-for="(column, index) in tableMetadata"
:key="index"
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
<h3 class="metadata-label">{{ column.name }}</h3>
<h3
v-tooltip="{
content: column.name,
html: false,
autoHide: false,
placement: 'auto-start'
}"
class="metadata-label">{{ column.name }}</h3>
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
class="metadata-value"/>
</span>

View File

@ -861,7 +861,7 @@
.filters-menu {
position: relative;
width: $filter-menu-width;
max-width: $filter-menu-width;
min-width: 180px;
min-height: 100%;
height: 100%;
background-color: white;

View File

@ -64,7 +64,7 @@ $size-small: 0.85em; // 0.75em on Bulma.
$header-height: 53px;
$subheader-height: 82px;
$side-menu-width: 180px;
$filter-menu-width: 200px;
$filter-menu-width: 16.666666667%;
$filter-menu-width-theme: 20.833333333%;
$page-height: calc(100% - 53px);

View File

@ -7,6 +7,12 @@
class="show"
:open="open">
<label
v-tooltip="{
content: filter.name,
html: false,
autoHide: false,
placement: 'top-start'
}"
class="label"
slot="trigger"
slot-scope="props">
@ -195,9 +201,8 @@
}
.label {
font-weight: normal;
font-weight: normal !important;
font-size: 14px;
display: inline-flex;
width: 100%;
}

View File

@ -127,7 +127,9 @@
eventBus.isChangingValue(true);
},
changeValue(){
if(this.metadatum.value != this.inputs){
if(this.inputs.length > 0 && this.inputs[0].value){
let terms = []
@ -147,6 +149,7 @@
}
}
} else if(this.metadatum.value.constructor.name == 'Object'){
if(this.metadatum.value.id == this.inputs){
return;
}

View File

@ -11,7 +11,7 @@ export const eventBus = new Vue({
if( tainacan_plugin.components ){
this.componentsTag = tainacan_plugin.components;
}
this.$on('input', data => this.updateValue(data) );
this.$on('input', data => this.updateValue(data) );
},
methods : {
registerComponent( name ){
@ -38,9 +38,10 @@ export const eventBus = new Vue({
this.$emit('isChangingValue', true);
},
updateValue(data){
this.$emit('isUpdatingValue', true);
if ( data.item_id ){
if(data.values.length > 0 && data.values[0].value){
let val = [];
for(let i of data.values){

View File

@ -10,6 +10,12 @@
<!-- Title -->
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@ -32,8 +38,21 @@
v-for="(column, index) in displayedMetadata"
:key="index"
v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
<h3 class="metadata-label">{{ column.name }}</h3>
<h3
v-tooltip="{
content: column.name,
html: false,
autoHide: false,
placement: 'auto-start'
}"
class="metadata-label">{{ column.name }}</h3>
<p
v-tooltip="{
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
html: true,
autoHide: false,
placement: 'auto-start'
}"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
class="metadata-value"/>
</span>