Mercurial > gemma
view client/src/components/toolbar/Toolbar.vue @ 3553:869505c5087b
client: fairway profile: close compare view with ESC key
also added a notice at the top of the screen that indicates when ESC key can be used to either cancel drawing (line,
polygon, crosscut) or to close the compare split view for two sounding results
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 31 May 2019 14:32:24 +0200 |
parents | dc91d2b71a58 |
children | 8f421cd3c746 |
line wrap: on
line source
<template> <div class="ml-1"> <div :class=" 'rounded-top toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed') " > <Identify /> <Layers /> <Profiles /> <Gauges /> <AvailableFairwayDepth /> <Linetool /> <Polygontool /> <Pdftool /> </div> <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white" > <font-awesome-icon class="pointer" :icon="expandToolbar ? 'angle-up' : 'angle-down'" /> </div> </div> </template> <style lang="scss"> // not scoped to affect nested components // doen't work when put in application/assets/application.sass... why??? o_O .toolbar { box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); overflow: hidden; transition: max-height 0.4s; margin-bottom: auto; cursor: pointer; } .toolbar-collapsed { max-height: 4rem; } .toolbar-expanded { max-height: 100%; } .toolbar-button { opacity: 0.96; color: #666; height: 2rem; width: 2rem; align-items: center; justify-content: center; display: flex; background: #fff; border-bottom: 1px solid #dee2e6; z-index: 2; pointer-events: auto; position: relative; overflow: hidden; &.disabled { color: #ccc; cursor: default; } } .toolbar-button:last-child { border-bottom: none; } .toolbar-button .inverted { color: #17a2b8; } .toolbar-button .grey { color: #ddd; } .toolbar-button .indicator { color: #fff; background: #17a2b8; position: absolute; bottom: -14px; left: -14px; padding: 2px 4px 1px; font-size: 11px; line-height: 11px; border-top-right-radius: 0.25rem; transition: bottom 0.3s, left 0.3s; } .toolbar-button .indicator.show { left: 0; bottom: 0; } .toolbar-toggle { height: 1.2rem; border-bottom: none; } </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): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; export default { name: "toolbar", components: { Identify: () => import("./Identify"), Layers: () => import("./Layers"), Linetool: () => import("./Linetool"), Polygontool: () => import("./Polygontool"), Profiles: () => import("./Profiles"), Gauges: () => import("./Gauges"), Pdftool: () => import("./Pdftool"), AvailableFairwayDepth: () => import("./AvailableFairwayDepth") }, computed: { ...mapState("application", ["expandToolbar"]) } }; </script>