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

Adjust styles for NumeriListInterval form and fixes insertion error.

This commit is contained in:
Mateus Machado Luna 2019-10-03 14:38:53 -03:00
parent fc0696751d
commit eddd56c403
1 changed files with 82 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/classes/filter-types/numeric-list-interval/FormNumericListInterval.vue
View File

@ -1,71 +1,74 @@
<template>
<div>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'predefined_intervals') }}<span>&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'predefined_intervals')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'predefined_intervals')"/>
</label>
<div>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'predefined_intervals') }}<span>&nbsp;</span>
<help-button
:title="$i18n.getHelperTitle('tainacan-filter-numeric-list-interval', 'predefined_intervals')"
:message="$i18n.getHelperMessage('tainacan-filter-numeric-list-interval', 'predefined_intervals')"/>
</label>
<div v-if="intervals.length == 0" >
<br>
<a
role="button"
@click="addInterval()"
class="is-inline add-link">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
</span>
&nbsp;{{ $i18n.get('add_value') }}
</a>
</div>
<transition-group name="filter-item">
<div
class="options-input"
v-for="(interval, index) of intervals"
:key="index">
<b-field>
<b-input
expanded="true"
:placeholder="$i18n.get('label')"
@input="onUpdate"
v-model="interval.label" />
</b-field>
<b-field>
<b-input
type="number"
:placeholder="$i18n.get('info_initial_value')"
@input="onUpdate"
v-model="interval.from" />
<b-input
type="number"
:placeholder="$i18n.get('info_final_value')"
@input="onUpdate"
v-model="interval.to" />
</b-field>
<p class="control">
<a
role="button"
v-if="intervals.length == 0"
@click="addInterval()"
class="is-inline add-link">
@click="addInterval(index)"
class="is-inline add-link"
:title="$i18n.get('add_value')">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
</span>
&nbsp;{{ $i18n.get('add_value') }}
&nbsp;{{ $i18n.get('add_value') }}
</a>
</div>
<div
v-for="(interval, index) of intervals"
:key="index">
<b-field>
<b-input
:placeholder="$i18n.get('label')"
@input="onUpdate"
v-model="interval.label" />
<b-input
class="input-number"
type="number"
:placeholder="$i18n.get('info_initial_value')"
@input="onUpdate"
v-model="interval.from" />
<b-input
class="input-number"
type="number"
:placeholder="$i18n.get('info_final_value')"
@input="onUpdate"
v-model="interval.to" />
<p class="control">
<a
role="button"
@click="addInterval(index)"
class="is-inline add-link"
:title="$i18n.get('add_value')">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
</span>
</a>
</p>
<p class="control">
<a
role="button"
@click="removeInterval(index)"
class="is-inline add-link"
:title="$i18n.get('remove_value')">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-minus"/>
</span>
</a>
</p>
</b-field>
</div>
</b-field>
</div>
</p>
<p class="control">
<a
role="button"
@click="removeInterval(index)"
class="is-inline add-link"
:title="$i18n.get('remove_value')">
<span class="icon is-small">
<i class="tainacan-icon has-text-secondary tainacan-icon-repprovedcircle"/>
</span>
&nbsp;{{ $i18n.get('remove_value') }}
</a>
</p>
</div>
</transition-group>
</b-field>
</template>
<script>
@ -94,7 +97,7 @@
this.intervals.splice(index, 1);
},
addInterval(index) {
if (index) {
if (index != undefined) {
this.intervals.splice(index + 1, 0, {
label: '',
to: null,
@ -115,9 +118,22 @@
}
</script>
<style scoped>
input.input-number {
line-height: 1.5;
height: 2.25em;
<style scoped lang="scss">
@import '../../scss/_variables.scss';
.options-input {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.field:first-child {
width: 100%;
margin-top: 1rem;
margin-bottom: -1px;
}
.field.has-addons {
margin-bottom: 0.125rem;
}
}
</style>