Mercurial > gemma
comparison client/src/staging/Staging.vue @ 1208:8df4ebbc5c3f
staging area
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Mon, 19 Nov 2018 13:22:19 +0100 |
| parents | |
| children | 9d93968db2cd |
comparison
equal
deleted
inserted
replaced
| 1207:70116d392387 | 1208:8df4ebbc5c3f |
|---|---|
| 1 <template> | |
| 2 <div v-if="showStagingArea" class="card staging-card"> | |
| 3 <div class="card-body staging-card-body"> | |
| 4 <div | |
| 5 @click="$store.commit('application/showStagingArea', !showStagingArea);" | |
| 6 class="ui-element close-showStagingArea" | |
| 7 > | |
| 8 <i class="fa fa-close"></i> | |
| 9 </div> | |
| 10 <div class="card-title mb-4 headline"> | |
| 11 <h4>Staging area</h4> | |
| 12 <hr> | |
| 13 </div> | |
| 14 <div class="d-flex flex-row input-group mb-4"></div> | |
| 15 </div> | |
| 16 </div> | |
| 17 </template> | |
| 18 | |
| 19 <script> | |
| 20 import { mapState } from "vuex"; | |
| 21 export default { | |
| 22 computed: { | |
| 23 ...mapState("application", ["showStagingArea"]) | |
| 24 } | |
| 25 }; | |
| 26 </script> | |
| 27 | |
| 28 <style lang="sass" scoped> | |
| 29 .close-showStagingArea | |
| 30 position: absolute | |
| 31 z-index: 2 | |
| 32 right: 0 | |
| 33 top: 7px | |
| 34 border-radius: $border-radius | |
| 35 height: $icon-width | |
| 36 width: $icon-height | |
| 37 | |
| 38 .staging-card | |
| 39 position: relative | |
| 40 background-color: white | |
| 41 width: 30rem | |
| 42 height: 28rem | |
| 43 margin-left: auto | |
| 44 margin-right: auto | |
| 45 border-radius: $border-radius | |
| 46 opacity: $slight-transparent | |
| 47 </style> |