Mercurial > gemma
changeset 1146:74e180ad3d6b
fairway profile UI improvements
splitscreen button position at top of profile container
bottleneck name and survey date as headline in profile container
moved logout button to sidebar menu to avoid unnecessary overlapping
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 13 Nov 2018 11:12:12 +0100 |
| parents | 5f98d0c9d738 |
| children | c84dbc608b85 |
| files | client/src/App.vue client/src/application/Main.vue client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/Userbar.vue client/src/fairway/Fairwayprofile.vue client/src/morphtool/Morphtool.vue client/src/store/fairway.js |
| diffstat | 8 files changed, 138 insertions(+), 201 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/App.vue Tue Nov 13 11:12:12 2018 +0100 @@ -13,7 +13,6 @@ <div class="rightcontainer"></div> </div> <div class="bottomcontainer d-flex flex-row align-items-end"> - <Userbar></Userbar> <Morphtool v-if="routeName == 'mainview'"></Morphtool> <Pdftool v-if="routeName == 'mainview'"></Pdftool> <Drawtool v-if="routeName == 'mainview'"></Drawtool> @@ -114,7 +113,6 @@ Sidebar: () => import("./application/Sidebar"), Bottlenecks: () => import("./bottlenecks/Bottlenecks"), Topbar: () => import("./application/Topbar"), - Userbar: () => import("./application/Userbar"), Drawtool: () => import("./drawtool/Drawtool"), Morphtool: () => import("./morphtool/Morphtool"), Pdftool: () => import("./pdftool/Pdftool"),
--- a/client/src/application/Main.vue Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/application/Main.vue Tue Nov 13 11:12:12 2018 +0100 @@ -1,27 +1,18 @@ <template> <div class="main d-flex flex-column"> <Maplayer :split="showSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> - <div v-if="showSplitscreen" class="profile d-flex flex-row"> - <FairwayProfile - :additionalSurveys="additionalSurveys" - :height="height" - :width="width" - :xScale="xAxis" - :yScaleLeft="yAxisLeft" - :yScaleRight="yAxisRight" - :margin="margins" - ></FairwayProfile> - </div> + <FairwayProfile + :additionalSurveys="additionalSurveys" + :height="height" + :width="width" + :xScale="xAxis" + :yScaleLeft="yAxisLeft" + :yScaleRight="yAxisRight" + :margin="margins" + ></FairwayProfile> </div> </template> -<style lang="scss" scoped> -.profile { - background-color: white; - height: 50vh; -} -</style> - <script> /* * This is Free Software under GNU Affero General Public License v >= 3.0 @@ -122,12 +113,13 @@ console.log("test: ", evt); }, scaleFairwayProfile() { - if (!document.querySelector(".profile")) return; - const clientHeight = document.querySelector(".profile").clientHeight; - const clientWidth = document.querySelector(".profile").clientWidth; + if (!document.querySelector(".fairwayprofile")) return; + const clientHeight = document.querySelector(".fairwayprofile") + .clientHeight; + const clientWidth = document.querySelector(".fairwayprofile").clientWidth; if (!clientHeight || !clientWidth) return; - this.height = document.querySelector(".profile").clientHeight - 25; - this.width = document.querySelector(".profile").clientWidth - 220; + this.height = clientHeight; + this.width = clientWidth; } } };
--- a/client/src/application/Sidebar.vue Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/application/Sidebar.vue Tue Nov 13 11:12:12 2018 +0100 @@ -30,6 +30,10 @@ <i class="fa fa-book align-self-center navicon"></i>Systeminformation </router-link> </div> + <hr> + <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link"> + <i class="fa fa-power-off align-self-center navicon"></i> Logout {{ user }} + </a> </div> </div> </div> @@ -58,6 +62,7 @@ props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin"]), + ...mapState("user", ["user"]), ...mapState("application", ["showSidebar", "showBottlenecks"]), menuStyle() { return { @@ -77,6 +82,15 @@ "d-print-none": true }; } + }, + methods: { + logoff() { + this.$store.commit("user/clearAuth"); + this.$store.commit("application/showSidebar", false); + this.$store.commit("application/showUsermenu", false); + this.$store.commit("application/showSplitscreen", false); + this.$router.push("/login"); + } } }; </script>
--- a/client/src/application/Topbar.vue Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/application/Topbar.vue Tue Nov 13 11:12:12 2018 +0100 @@ -18,9 +18,6 @@ </ul> </div> </div> - <div v-if="routeName == 'mainview' && Object.keys(currentProfile).length" class="splitbutton"> - <i @click="$store.commit('application/showSplitscreen', !showSplitscreen)" class="ui-element splitscreen fa fa-window-restore shadow"></i> - </div> <div class=""> <Layers v-if="routeName == 'mainview'"></Layers> </div>
--- a/client/src/application/Userbar.vue Mon Nov 12 15:12:04 2018 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,94 +0,0 @@ -<template> - <div> - <img @click="$store.commit('application/showUsermenu', !showUsermenu)" class="ui-element userpic shadow" src="../application/assets/user.png"> - <div :class="userManagementStyle"> - <span v-if="showUsermenu" class="username align-self-center">{{ user }}</span> - <span v-if="showUsermenu" class="logout align-self-center" @click="logoff"> - <i class="fa fa-power-off"></i> - </span> - </div> - </div> -</template> - -<style lang="scss" scoped> -.userpic { - background: white; - position: absolute; - bottom: $offset; - left: $offset; - height: $icon-width; - width: $icon-height; - border-radius: $border-radius; -} - -.username { - margin-left: 40px; -} - -.usermanagement { - background: white; - margin-left: $offset; - padding: $offset; - border-radius: $border-radius; - margin-bottom: $offset; - height: $icon-height; -} - -.usermanagementcollapsed { - transition: 0.3s; - width: $icon-width; -} - -.usermanagementexpanded { - width: $sidebar-width; -} -</style> - -<script> -/* - * This is Free Software under GNU Affero General Public License v >= 3.0 - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Thomas Junk <thomas.junk@intevation.de> - */ -import { mapState } from "vuex"; -export default { - name: "user", - data() { - return {}; - }, - methods: { - logoff() { - this.$store.commit("user/clearAuth"); - this.$store.commit("application/showSidebar", false); - this.$store.commit("application/showUsermenu", false); - this.$store.commit("application/showSplitscreen", false); - this.$router.push("/login"); - } - }, - computed: { - ...mapState("user", ["user"]), - ...mapState("application", ["showUsermenu"]), - userManagementStyle() { - return { - "ui-element": true, - "d-flex": true, - "flex-row": true, - "justify-content-around": true, - usermanagement: true, - usermanagementcollapsed: !this.showUsermenu, - usermanagementexpanded: this.showUsermenu, - shadow: true - }; - } - } -}; -</script>
--- a/client/src/fairway/Fairwayprofile.vue Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Tue Nov 13 11:12:12 2018 +0100 @@ -1,66 +1,98 @@ <template> - <div class="profiledisplay d-flex flex-row"> - <div class="fairwayprofile"></div> - <div class="additionalsurveys d-flex flex-column"> - <small class="label">Available Additional Surveys</small> - <select v-model="additionalSurvey"> - <option value="">None</option> - <option - v-for="survey in additionalSurveys" - :key="survey.date_info" - :value="survey" - >{{survey.date_info}}</option> - </select> - <small class="mt-2"> - <b>Start:</b> - <br> - Lat: {{ startPoint[1] }} - <br> - Lon: {{ startPoint[0] }} - <br> - <b>End:</b> - <br> - Lat: {{ endPoint[1] }} - <br> - Lon: {{ endPoint[0] }} - <br> - </small> + <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length"> + <button + class="rounded bg-white border-0 position-absolute splitscreen-toggle shadow" + @click="$store.commit('application/showSplitscreen', false)" + v-if="showSplitscreen"> + <i class="fa fa-angle-down"></i> + </button> + <button + class="rounded bg-white border-0 position-absolute clear-selection shadow" + @click="$store.dispatch('fairwayprofile/clearSelection');" + v-if="showSplitscreen"> + <i class="fa fa-times text-danger"></i> + </button> + <div class="profile d-flex flex-column"> + <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> + <div class="d-flex flex-fill"> + <div class="fairwayprofile flex-fill"></div> + <div class="additionalsurveys d-flex flex-column"> + <small class="label">Available Additional Surveys</small> + <select v-model="additionalSurvey"> + <option value="">None</option> + <option + v-for="survey in additionalSurveys" + :key="survey.date_info" + :value="survey" + >{{survey.date_info}}</option> + </select> + <small class="mt-2"> + <b>Start:</b> + <br> + Lat: {{ startPoint[1] }} + <br> + Lon: {{ startPoint[0] }} + <br> + <b>End:</b> + <br> + Lat: {{ endPoint[1] }} + <br> + Lon: {{ endPoint[0] }} + <br> + </small> + </div> + </div> </div> </div> </template> -<style scoped lang="scss"> -.label { - margin-bottom: $small-offset; -} -.waterlevelselection { - margin-top: $large-offset; - margin-right: $large-offset; -} +<style lang="sass" scoped> +.profile + background-color: white + width: 100vw + height: 0 + overflow: hidden + position: relative + z-index: 2 + +.splitscreen-toggle, +.clear-selection + top: -$icon-height + right: $icon-width + $offset + $offset + width: $icon-width + height: $icon-height + margin-top: 2px + z-index: 1 + outline: none + +.clear-selection + right: $offset -.additionalsurveys { - width: 300px; - margin-top: $large-offset; - margin-bottom: auto; - margin-right: $large-offset; - margin-left: auto; -} +.show + .profile + height: 50vh -.additionalsurveys input { - margin-right: $small-offset; -} +.label + margin-bottom: $small-offset + +.waterlevelselection + margin-top: $large-offset + margin-right: $large-offset -.profiledisplay { - width: 100vw; -} +.additionalsurveys + width: 200px + margin-top: $large-offset + margin-bottom: auto + margin-right: $large-offset + margin-left: auto -.fairwayprofile { - background-color: white; - margin-left: auto; - margin-right: $offset; - margin-top: auto; - margin-bottom: auto; -} +.additionalsurveys input + margin-right: $small-offset + +.fairwayprofile + background-color: white + margin: $offset + margin-top: 0 </style> <script> @@ -96,6 +128,7 @@ "additionalSurveys" ], computed: { + ...mapState("application", ["showSplitscreen"]), ...mapState("fairwayprofile", [ "startPoint", "endPoint", @@ -107,7 +140,7 @@ "waterLevels", "selectedWaterLevel" ]), - ...mapState("bottlenecks", ["selectedSurvey"]), + ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]), additionalSurvey: { get() { return this.$store.getters["fairwayprofile/additionalSurvey"]; @@ -146,6 +179,9 @@ }; }, watch: { + showSplitscreen() { + this.drawDiagram(); + }, currentData() { this.drawDiagram(); },
--- a/client/src/morphtool/Morphtool.vue Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Tue Nov 13 11:12:12 2018 +0100 @@ -5,7 +5,7 @@ <h4>{{ selectedBottleneck }}</h4> <hr> <div - @click="clearSelection" + @click="$store.dispatch('fairwayprofile/clearSelection');" class="float-left ui-element d-flex morphtoolminus" > <i class="fa fa-close morphtoolsminus"></i> @@ -22,14 +22,14 @@ </li> </ul> </div> - <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool"> + <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool"> <div class="d-flex flex-row justify-content-between"> - <i class="fa fa-close text-danger"></i> - <small>Bottleneck: </small> - <h6> + <h6 class="my-auto px-2"> {{ selectedBottleneck }} - <small>( {{ selectedSurvey.date_info }} )</small> + ({{ selectedSurvey.date_info }}) </h6> + <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i> + <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i> </div> </div> </div> @@ -43,7 +43,6 @@ .morphcontainer { margin-bottom: $offset; margin-left: auto; - margin-right: $large-offset + $icon-width; border-radius: $border-radius; } .surveylist { @@ -63,19 +62,13 @@ .morphtool { position: relative; background-color: white; - padding: $small-offset; border-radius: $border-radius; height: $icon-width; - margin-right: $offset; margin-top: auto; margin-bottom: auto; z-index: 2; } -.morphcontainer i { - margin-right: $small-offset; -} - .morphtoolminus { position: absolute; top: 0; @@ -111,22 +104,13 @@ computed: { ...mapGetters("map", ["getLayerByName"]), ...mapState("map", ["openLayersMap", "cutTool"]), + ...mapState("application", ["showSplitscreen"]), + ...mapState("fairwayprofile", ["currentProfile"]), ...mapState("bottlenecks", [ "selectedBottleneck", "surveys", "selectedSurvey" ]) - }, - methods: { - clearSelection() { - this.$store.dispatch("bottlenecks/setSelectedBottleneck", null); - this.$store.commit("application/showSplitscreen", false); - this.$store.commit("map/cutMode", false); - this.getLayerByName("Cut Tool") - .data.getSource() - .clear(); - this.openLayersMap.removeInteraction(this.cutTool); - } } }; </script>
--- a/client/src/store/fairway.js Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/store/fairway.js Tue Nov 13 11:12:12 2018 +0100 @@ -93,6 +93,16 @@ } }, actions: { + clearSelection({ commit, dispatch, rootGetters, rootState }) { + dispatch("bottlenecks/setSelectedBottleneck", null, { root: true }); + commit("clearCurrentProfile"); + commit("application/showSplitscreen", false, { root: true }); + commit("map/cutMode", false, { root: true }); + rootGetters["map/getLayerByName"]("Cut Tool") + .data.getSource() + .clear(); + rootState.map.openLayersMap.removeInteraction(rootState.map.cutTool); + }, loadProfile({ commit, state }, survey) { return new Promise((resolve, reject) => { const profileLine = new LineString([state.startPoint, state.endPoint]);