Mercurial > gemma
comparison client/src/imports/Imports.vue @ 1230:957907eaaa72
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> |