From eddd56c403fd15d67ec9a6b61a8e4df2771095bd Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 3 Oct 2019 14:38:53 -0300
Subject: [PATCH] Adjust styles for NumeriListInterval form and fixes insertion
 error.

---
 .../FormNumericListInterval.vue               | 148 ++++++++++--------
 1 file changed, 82 insertions(+), 66 deletions(-)

diff --git a/src/classes/filter-types/numeric-list-interval/FormNumericListInterval.vue b/src/classes/filter-types/numeric-list-interval/FormNumericListInterval.vue
index e07ecda30..0335e805e 100644
--- a/src/classes/filter-types/numeric-list-interval/FormNumericListInterval.vue
+++ b/src/classes/filter-types/numeric-list-interval/FormNumericListInterval.vue
@@ -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>