Mercurial > gemma
changeset 1282:a7dd8a3356fc
fixed contextBox animations
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 10:20:21 +0100 |
parents | 8f4bf8576acd |
children | 09dfbead8d70 |
files | client/src/assets/application.sass client/src/components/App.vue client/src/components/Sidebar.vue client/src/components/map/Search.vue client/src/components/map/contextbox/Bottlenecks.vue client/src/components/map/contextbox/Contextbox.vue client/src/store/application.js |
diffstat | 7 files changed, 58 insertions(+), 47 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.sass Thu Nov 22 08:57:38 2018 +0100 +++ b/client/src/assets/application.sass Thu Nov 22 10:20:21 2018 +0100 @@ -74,3 +74,12 @@ max-width: 999px margin-left: 0.5rem margin-right: 0.5rem + +.fade-enter-active, .fade-leave-active + transition: opacity 0.1s + +.fade-leave, .fade-enter-to + opacity: 1 + +.fade-enter, .fade-leave-to + opacity: 0
--- a/client/src/components/App.vue Thu Nov 22 08:57:38 2018 +0100 +++ b/client/src/components/App.vue Thu Nov 22 10:20:21 2018 +0100 @@ -4,7 +4,7 @@ <div class="topbar d-flex pt-3 mx-3"> <div class="mr-auto d-flex"> <Sidebar :routeName="routeName"></Sidebar> - <div class="d-flex flex-column" style="max-width: 600px;"> + <div class="d-flex flex-column ml-3" style="max-width: 600px"> <Search v-if="routeName == 'mainview'"></Search> <Contextbox v-if="routeName == 'mainview'"></Contextbox> </div> @@ -75,6 +75,7 @@ name: "app", computed: { ...mapState("user", ["isAuthenticated"]), + ...mapState("application", ["contextBoxContent"]), routeName() { const routeName = this.$route.name; return routeName;
--- a/client/src/components/Sidebar.vue Thu Nov 22 08:57:38 2018 +0100 +++ b/client/src/components/Sidebar.vue Thu Nov 22 10:20:21 2018 +0100 @@ -96,7 +96,7 @@ ...mapState("application", [ "showSidebar", "showSearchbarLastState", - "showInContextBox" + "contextBoxContent" ]), menuStyle() { return { @@ -124,21 +124,10 @@ this.$router.push("/login"); }, toggleContextBox(context) { - const SHOW = context; - const HIDE = null; - const isElementAlreadyShown = this.showInContextBox === context; - let toggleState = - isElementAlreadyShown && this.routeName === "mainview" ? HIDE : SHOW; this.$router.push("/"); - this.$store.commit("application/showInContextBox", toggleState); - if (this.showInContextBox === context) { - this.$store.commit("application/showSearchbar", true); - } else { - this.$store.commit( - "application/showSearchbar", - this.showSearchbarLastState - ); - } + this.$store.commit("application/showContextBox", true); + this.$store.commit("application/contextBoxContent", context); + this.$store.commit("application/showSearchbar", true); } } };
--- a/client/src/components/map/Search.vue Thu Nov 22 08:57:38 2018 +0100 +++ b/client/src/components/map/Search.vue Thu Nov 22 10:20:21 2018 +0100 @@ -14,7 +14,7 @@ type="text" :class="searchInputStyle" > - <div v-if="showSearchbar && searchResults !== null && !showInContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none"> + <div v-if="showSearchbar && searchResults !== null && !showContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none"> <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2"> <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a> </div> @@ -99,7 +99,11 @@ }; }, computed: { - ...mapState("application", ["showSearchbar", "showInContextBox"]), + ...mapState("application", [ + "showSearchbar", + "showContextBox", + "contextBoxContent" + ]), searchQuery: { get() { return this.$store.state.application.searchQuery; @@ -119,19 +123,19 @@ }, searchbarContainerStyle() { return [ - "input-group searchcontainer ml-3 shadow-xs", + "input-group searchcontainer shadow-xs", { "searchbar-collapsed": !this.showSearchbar, "searchbar-expanded": this.showSearchbar, - "d-flex": this.showInContextBox !== "imports", - "d-none": this.showInContextBox === "imports" + "d-flex": this.contextBoxContent !== "imports", + "d-none": this.contextBoxContent === "imports" } ]; }, searchInputStyle() { return [ "form-control ui-element search searchbar d-print-none border-0", - { "rounded-top-right": this.showInContextBox || this.searchResults } + { "rounded-top-right": this.showContextBox || this.searchResults } ]; }, searchButtonStyle() { @@ -141,7 +145,7 @@ rounded: !this.showSearchbar, "rounded-left": this.showSearchbar, "rounded-top-left": - this.showSearchbar && (this.showInContextBox || this.searchResults) + this.showSearchbar && (this.showContextBox || this.searchResults) } ]; } @@ -211,7 +215,7 @@ this.toggleSearchbar(); }, toggleSearchbar() { - if (!this.showInContextBox) { + if (!this.showContextBox) { if (!this.showSearchbar) { setTimeout(setFocus, 300); }
--- a/client/src/components/map/contextbox/Bottlenecks.vue Thu Nov 22 08:57:38 2018 +0100 +++ b/client/src/components/map/contextbox/Bottlenecks.vue Thu Nov 22 10:20:21 2018 +0100 @@ -14,7 +14,7 @@ href="#" @click="sortBy('latestMeasurement')" class="sort-link" - >Latest Measurement</a> + >Latest<br>Measurement</a> <i :class="sortClass" v-if="sortColumn === 'latestMeasurement'"></i> </div> <div class="col-3">
--- a/client/src/components/map/contextbox/Contextbox.vue Thu Nov 22 08:57:38 2018 +0100 +++ b/client/src/components/map/contextbox/Contextbox.vue Thu Nov 22 10:20:21 2018 +0100 @@ -3,9 +3,11 @@ <div @click="close" class="ui-element close-contextbox text-muted"> <i class="fa fa-close"></i> </div> - <Bottlenecks v-if="showInContextBox === 'bottlenecks'"></Bottlenecks> - <Imports v-if="showInContextBox === 'imports'"></Imports> - <Staging v-if="showInContextBox === 'staging'"></Staging> + <transition name="fade" mode="out-in"> + <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks> + <Imports v-if="contextBoxContent === 'imports'"></Imports> + <Staging v-if="contextBoxContent === 'staging'"></Staging> + </transition> </div> </template> @@ -34,22 +36,26 @@ Staging: () => import("./Staging.vue") }, computed: { - ...mapState("application", ["showSearchbarLastState", "showInContextBox"]), + ...mapState("application", [ + "showSearchbarLastState", + "contextBoxContent", + "showContextBox" + ]), style() { return [ - "ui-element shadow-xs contextbox ml-3", + "ui-element shadow-xs contextbox", { - contextboxcollapsed: !this.showInContextBox, - contextboxextended: this.showInContextBox, - "rounded-bottom": this.showInContextBox !== "imports", - rounded: this.showInContextBox === "imports" + contextboxcollapsed: !this.showContextBox, + contextboxextended: this.showContextBox, + "rounded-bottom": this.contextBoxContent !== "imports", + rounded: this.contextBoxContent === "imports" } ]; } }, methods: { close() { - this.$store.commit("application/showInContextBox", null); + this.$store.commit("application/showContextBox", false); this.$store.commit( "application/showSearchbar", this.showSearchbarLastState @@ -64,17 +70,19 @@ position: relative background-color: #ffffff opacity: $slight-transparent - transition: left 0.3s ease + transition: max-width 0.3s, max-height 0.3s overflow: hidden background: #fff + > div:last-child + width: 600px .contextboxcollapsed - width: 0 - height: 0 - transition: $transition-fast + max-width: 0 + max-height: 0 .contextboxextended - min-width: 600px + max-width: 600px + max-height: 600px .close-contextbox position: absolute @@ -83,8 +91,4 @@ top: 7px height: $icon-width width: $icon-height - display: none - -.contextboxextended .close-contextbox - display: block </style>
--- a/client/src/store/application.js Thu Nov 22 08:57:38 2018 +0100 +++ b/client/src/store/application.js Thu Nov 22 10:20:21 2018 +0100 @@ -29,7 +29,8 @@ showIdentify: false, showLayers: true, showPdfTool: false, - showInContextBox: null, // bottlenecks, imports, staging + showContextBox: false, + contextBoxContent: null, // bottlenecks, imports, staging expandToolbar: false, countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"], searchQuery: "", @@ -74,8 +75,11 @@ showPdfTool: (state, show) => { state.showPdfTool = show; }, - showInContextBox: (state, context) => { - state.showInContextBox = context; + showContextBox: (state, show) => { + state.showContextBox = show; + }, + contextBoxContent: (state, context) => { + state.contextBoxContent = context; if (context) { state.showSearchbarLastState = state.showSearchbar; }