Mercurial > gemma

comparison client/src/imports/Imports.vue @ 1230:957907eaaa72

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
implemented context sensitive box below search bar (see: issue224)
author Markus Kottlaender <markus@intevation.de>
date Tue, 20 Nov 2018 08:47:53 +0100
parents ba8cd80d68b6
children ec4b06d3a3a8
comparison
equal deleted inserted replaced
1229:d395b2940a82 1230:957907eaaa72
1 <template> 1 <template>
2 <div :class="importStyle"> 2 <div>
3 <div
4 @click="$store.commit('application/showImportSoundingResults', false);"
5 class="ui-element close-imports"
6 >
7 <i class="fa fa-close"></i>
8 </div>
9 <h4>Import soundingresults</h4> 3 <h4>Import soundingresults</h4>
10 <hr class="mr-auto ml-auto mb-0 w-90"> 4 <hr class="mr-auto ml-auto mb-0 w-90">
11 <div v-if="editState" class="p-3"> 5 <div v-if="editState" class="p-3">
12 <div class="d-flex flex-row input-group mb-4"> 6 <div class="d-flex flex-row input-group mb-4">
13 <div class=""> 7 <div class="">
80 </template> 74 </template>
81 75
82 <script> 76 <script>
83 import { HTTP } from "../application/lib/http"; 77 import { HTTP } from "../application/lib/http";
84 import { displayError, displayInfo } from "../application/lib/errors.js"; 78 import { displayError, displayInfo } from "../application/lib/errors.js";
85 import { mapState } from "vuex";
86 79
87 const defaultLabel = "Choose .zip-file"; 80 const defaultLabel = "Choose .zip-file";
88 const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" }; 81 const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };
89 82
90 export default { 83 export default {
130 }); 123 });
131 }); 124 });
132 } 125 }
133 }, 126 },
134 computed: { 127 computed: {
135 ...mapState("application", ["showImportSoundingResults"]),
136 editState() { 128 editState() {
137 return this.importState === IMPORTSTATE.EDIT; 129 return this.importState === IMPORTSTATE.EDIT;
138 }, 130 },
139 uploadState() { 131 uploadState() {
140 return this.importState === IMPORTSTATE.UPLOAD; 132 return this.importState === IMPORTSTATE.UPLOAD;
141 },
142 importStyle() {
143 return [
144 "ui-element shadow imports ml-3 pt-3 rounded",
145 {
146 importscollapsed: !this.showImportSoundingResults,
147 importsextended: this.showImportSoundingResults
148 }
149 ];
150 }, 133 },
151 dataLink() { 134 dataLink() {
152 return ( 135 return (
153 "data:text/json;charset=utf-8," + 136 "data:text/json;charset=utf-8," +
154 encodeURIComponent( 137 encodeURIComponent(
189 172
190 <style lang="sass" scoped> 173 <style lang="sass" scoped>
191 .uploadsection 174 .uploadsection
192 width: 90% 175 width: 90%
193 176
194 .imports
195 position: relative
196 background-color: #ffffff
197 opacity: $slight-transparent
198 transition: left 0.3s ease
199 overflow: hidden
200 background: #fff
201 margin-top: -$offset
202 width: 90%
203
204 .importscollapsed
205 width: 0
206 height: 0
207 transition: $transition-fast
208
209 .importsextended
210 min-width: 600px
211
212 .close-imports
213 position: absolute
214 z-index: 2
215 right: 0
216 top: 7px
217 height: $icon-width
218 width: $icon-height
219 display: none
220
221 .importsextended .close-imports
222 display: block
223
224 .label-text 177 .label-text
225 width: 10rem 178 width: 10rem
226 text-align: left 179 text-align: left
227 line-height: 2.25rem 180 line-height: 2.25rem
228 </style> 181 </style>