Mercurial > gemma
changeset 1289:e1480ad4b6b0
improved menu style
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 12:40:45 +0100 |
parents | 9f7dc950ffd2 |
children | ad528ad130d6 |
files | client/src/components/Sidebar.vue |
diffstat | 1 files changed, 88 insertions(+), 88 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue Thu Nov 22 12:25:01 2018 +0100 +++ b/client/src/components/Sidebar.vue Thu Nov 22 12:40:45 2018 +0100 @@ -6,65 +6,56 @@ > <i class="ui-element d-print-none fa fa-bars"></i> </div> - <div :class="menuStyle"> - <div class="menupoints" v-if="this.showSidebar"> - <router-link to="/" class="text-body d-flex flex-row nav-link"> - <i class="fa fa-map-o align-self-center navicon"></i>Map - </router-link> - <div class="d-flex flex-row nav-link"> - <i class="fa fa-ship align-self-center navicon"></i> - <a - class="text-body d-flex flex-row" - href="#" - @click="toggleContextBox('bottlenecks')" - >Bottlenecks</a> - </div> - <div v-if="isSysAdmin"> - <hr> - <div class="nav-link d-flex menupadding text-muted">Administration</div> - </div> - <div v-if="isWaterwayAdmin"> - <div class="d-flex flex-row nav-link"> - <i class="fa fa-upload align-self-center navicon"></i> - <a - href="#" - class="text-body" - @click="toggleContextBox('imports')" - >Import soundingresults</a> - </div> - <div class="d-flex flex-row nav-link"> - <i class="fa fa-list-ol align-self-center navicon"></i> - <a - href="#" - class="text-body" - @click="toggleContextBox('staging')" - >Staging area</a> - </div> - <div class="nav-link d-flex menupadding text-muted">Systemadministration</div> - <router-link class="text-body d-flex flex-row nav-link" to="usermanagement"> - <i class="fa fa-address-card-o align-self-center navicon"></i>Users - </router-link> - </div> - <div v-if="isSysAdmin"> - <router-link - class="text-body d-flex flex-row nav-link" - to="systemconfiguration" - > - <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration - </router-link> - <router-link class="text-body d-flex flex-row nav-link" to="logs"> - <i class="fa fa-book align-self-center navicon"></i>Logs - </router-link> - <router-link class="text-body d-flex flex-row nav-link" to="importqueue"> - <i class="fa fa-exchange align-self-center navicon"></i>Importqueue - </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 class="menu text-nowrap text-left"> + <router-link to="/"> + <i class="fa fa-map-o"></i> + Map + </router-link> + <a href="#" + @click="toggleContextBox('bottlenecks')" + :class="['secondary', { active: isActive('bottlenecks') }]"> + <i class="fa fa-ship"></i> + Bottlenecks + </a> + <div v-if="isWaterwayAdmin"> + <a href="#" + @click="toggleContextBox('imports')" + :class="['secondary', { active: isActive('imports') }]"> + <i class="fa fa-upload align-self-center navicon"></i> + Import soundingresults + </a> + <a href="#" + @click="toggleContextBox('staging')" + :class="['secondary', { active: isActive('staging') }]"> + <i class="fa fa-list-ol align-self-center navicon"></i> + Staging area + </a> + <small class="text-muted pl-3">Systemadministration</small> + <hr class="m-0"> + <router-link to="usermanagement"> + <i class="fa fa-address-card-o"></i> + Users + </router-link> + </div> + <div v-if="isSysAdmin"> + <router-link to="systemconfiguration"> + <i class="fa fa-wrench"></i> + Systemconfiguration + </router-link> + <router-link to="logs"> + <i class="fa fa-book"></i> + Logs + </router-link> + <router-link to="importqueue"> + <i class="fa fa-exchange"></i> + Importqueue + </router-link> + </div> + <hr class="m-0"> + <a href="#" @click="logoff"> + <i class="fa fa-power-off"></i> + Logout {{ user }} + </a> </div> </div> </template> @@ -96,15 +87,9 @@ ...mapState("application", [ "showSidebar", "showSearchbarLastState", - "contextBoxContent" + "contextBoxContent", + "showContextBox" ]), - menuStyle() { - return { - menu: true, - nav: true, - "flex-column": true - }; - }, sidebarStyle() { return [ "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto", @@ -128,19 +113,19 @@ this.$store.commit("application/showContextBox", true); this.$store.commit("application/contextBoxContent", context); this.$store.commit("application/showSearchbar", true); + }, + isActive(item) { + return ( + this.showContextBox && + this.contextBoxContent === item && + this.routeName == "mainview" + ); } } }; </script> <style lang="sass" scoped> - -a:hover - text-decoration: none - -.menupoints - text-align: left - .menubutton height: $icon-height width: $icon-width @@ -148,28 +133,43 @@ left: 0 color: #666 -.router-link-exact-active - background-color: #f2f2f2 - -.navicon - margin-right: $small-offset - color: #666 - .menu - padding-top: $small-offset + a + display: block + text-align: left + padding: 0.5rem 1rem + color: #333 + text-decoration: none + i + color: #666 + margin-right: $small-offset + &:hover + background-color: #f8f8f8 + &.router-link-exact-active + background-color: $color-info + color: #fff + i + color: #fff + &.secondary + font-size: 0.9rem + &.active + background: lighten($color-info, 55) + color: darken($color-info, 15) + i + color: darken($color-info, 15) .sidebar background-color: #ffffff padding-top: $large-offset opacity: $slight-transparent + transition: $transition-fast + overflow: hidden .sidebarcollapsed - height: 30px - width: 30px - transition: $transition-fast + max-height: 30px + max-width: 30px .sidebarextended - height: 35rem - width: $sidebar-width - min-width: $sidebar-width + max-height: 35rem + max-width: $sidebar-width </style>