Adjustments to filter type preview.

This commit is contained in:
Mateus Machado Luna 2019-05-22 15:56:27 -03:00
parent 7bc560594f
commit dcf3fc6a58
4 changed files with 73 additions and 4 deletions

View File

@ -255,7 +255,7 @@
:key="index"
@click="onFilterTypeSelected(filterType)"
@mouseover="currentFilterTypePreview = { name: filterType.name, template: filterType.preview_template }"
@mouseleave="currentFilterTypePreview = undefined">
@mouseleave="currentFilterTypePreview = { name: filterType.name, template: filterType.preview_template }">
<h4>{{ filterType.name }}</h4>
</div>
</div>
@ -1102,6 +1102,30 @@ export default {
text-decoration: underline;
margin: 0.875rem 1.5rem;
}
.numeric-filter-container {
display: flex;
.field { margin: 0; }
.dropdown {
width: auto;
.dropdown-trigger button {
padding: 0 0.5rem !important;
height: 28px !important;
i:not(.tainacan-icon-arrowdown) {
margin-top: -3px;
font-size: 1.5rem;
font-style: normal;
color: #555758;
}
}
.dropdown-menu {
display: block !important;
}
}
}
}
}

View File

@ -53,6 +53,7 @@
border-radius: 0px;
background-color: white;
padding: 40px $page-side-padding;
padding: 40px 4.166666667vw;
position: relative;
overflow-y: auto;
overflow-x: hidden;

View File

@ -406,6 +406,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_plugin_home_page' => __( 'Plugin home page', 'tainacan' ),
'label_wordpress_admin_page' => __( 'WordPress Admin Page', 'tainacan' ),
'label_view_all_%s_collections' => __( 'View all %s collections', 'tainacan' ),
'label_comparator' => __( 'Comparator', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),

View File

@ -14,9 +14,52 @@ class Numeric extends Filter_Type {
$this->set_component('tainacan-filter-numeric');
$this->set_preview_template('
<div>
<div class="control is-small is-clearfix">
<input type="number" step="any" value="6" class="input is-small">
</div>
<div>
<div class="numeric-filter-container">
<div class="dropdown is-active">
<div role="button" class="dropdown-trigger">
<button class="button is-white">
<span class="icon is-small">
<i>=</i>
</span>
<span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown"></i>
</span>
</button>
</div>
<div class="background" style="display: none;"></div>
<div class="dropdown-menu" style="display: none;">
<div role="list" class="dropdown-content">
<a class="dropdown-item is-active">=&nbsp; Equal</a>
<a class="dropdown-item">&nbsp; Not equal</a>
<a class="dropdown-item">&gt;&nbsp; Greater than</a>
<a class="dropdown-item">&nbsp; Greater than or equal to</a>
<a class="dropdown-item">&lt;&nbsp; Less than</a>
<a class="dropdown-item">&nbsp; Less than or equal to</a>
</div>
</div>
</div>
<div class="b-numberinput field is-grouped">
<p class="control">
<button type="button" class="button is-primary is-small">
<span class="icon is-small">
<i class="mdi mdi-minus"></i>
</span>
</button>
</p>
<div class="control is-small is-clearfix">
<input type="number" step="0.01" class="input is-small" value="1.5">
</div>
<p class="control">
<button type="button" class="button is-primary is-small">
<span class="icon is-small">
<i class="mdi mdi-plus"></i>
</span>
</button>
</p>
</div>
</div>
</div>
</div>
');
}