Mercurial > gemma
changeset 550:06907c875077
refac: Better utilization of topbar
Logout, Username, Userpic moved from sidebar to topbar.
Introduced search
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 31 Aug 2018 12:11:38 +0200 |
parents | b3f825c8445b |
children | 89bc8111563a |
files | client/src/assets/application.scss client/src/components/Sidebar.vue client/src/components/Topbar.vue |
diffstat | 3 files changed, 80 insertions(+), 66 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Fri Aug 31 11:38:42 2018 +0200 +++ b/client/src/assets/application.scss Fri Aug 31 12:11:38 2018 +0200 @@ -10,7 +10,7 @@ $transition: 0.5s; $transition-fast: 0.1s; $transition-slow: 3s; -$topbarheight: 4vh; +$topbarheight: 5vh; %fully-centered { position: absolute;
--- a/client/src/components/Sidebar.vue Fri Aug 31 11:38:42 2018 +0200 +++ b/client/src/components/Sidebar.vue Fri Aug 31 12:11:38 2018 +0200 @@ -10,17 +10,6 @@ <router-link class="d-flex nav-link" to="users">Users</router-link> </div> </nav> - <div :class="userinfoStyle"> - <div class="menupadding userinfo"> - <img class="userpic" src="../assets/user.png"> - <span class="username">{{ userinfo }}</span> - </div> - <div> - <span class="logout" @click="logoff"> - <i class="fa fa-power-off"></i> - </span> - </div> - </div> </div> </template> @@ -30,7 +19,7 @@ export default { name: "sidebar", computed: { - ...mapGetters("user", ["userinfo", "isSysAdmin"]), + ...mapGetters("user", ["isSysAdmin"]), ...mapGetters("application", ["sidebarCollapsed"]), menuStyle() { return { @@ -41,14 +30,6 @@ "visibility-collapsed": this.sidebarCollapsed }; }, - userinfoStyle() { - return { - user: true, - "d-flex": true, - "visibility-extended": !this.sidebarCollapsed, - "visibility-collapsed": this.sidebarCollapsed - }; - }, collapseStyle() { return { collapser: true, @@ -65,12 +46,6 @@ shadow: true }; } - }, - methods: { - logoff() { - this.$store.commit("user/clear_auth"); - this.$router.push("/login"); - } } }; </script> @@ -82,10 +57,6 @@ $collapser-left-offset: 170px; $sidebar-collapsed-width: 0px; -.menupadding { - padding: 0.5rem 1rem; -} - .collapser { position: absolute; top: 0px; @@ -104,11 +75,6 @@ transition: $transition; } -.userpic { - position: relative; - left: 1px; -} - .menu { height: 90%; } @@ -121,14 +87,11 @@ transition: $transition-fast; } -.user { - margin-top: auto; -} .sidebar { margin-top: $topbarheight; background-color: #ffffff; padding-top: $large-offset; - height: 96vh; + height: 95vh; } .overlay { @@ -145,20 +108,4 @@ width: $sidebar-full-width; transition: $transition; } - -.username { - margin-left: $small-offset; -} - -.userinfo { - font-weight: bold; -} - -.logout { - position: relative; - top: 16px; - left: -5px; - margin-left: $small-offset; - cursor: pointer; -} </style>
--- a/client/src/components/Topbar.vue Fri Aug 31 11:38:42 2018 +0200 +++ b/client/src/components/Topbar.vue Fri Aug 31 12:11:38 2018 +0200 @@ -1,24 +1,91 @@ <template> - <div class="topbar shadow-sm d-flex flex-row justify-content-between"> - <div class="align-self-center"> - <i @click="toggleSidebar" class="menubutton fa fa-bars"></i> - </div> - <div class=""> - <h2>Topbar</h2> - </div> - <div> - - </div> + <div class="topbar shadow-sm d-flex flex-row justify-content-between"> + <div class="align-self-center"> + <i @click="toggleSidebar" class="menubutton fa fa-bars"></i> </div> + <div class="searchcontainer align-self-center"> + <label class="searchlabel" for="search"> + <i class="fa fa-search"></i> + </label> + <input id="search" type="text" class="search searchbar"> + </div> + <div class="align-self-center usermanagement"> + <img class="userpic" src="../assets/user.png"> + <span class="username">{{ userinfo }}</span> + <span class="logout" @click="logoff"> + <i class="fa fa-power-off"></i> + </span> + </div> + </div> </template> +<style lang="scss"> +@import "../assets/application.scss"; +.topbar { + min-height: 38px; + height: $topbarheight; +} + +.searchcontainer { + min-width: 300px; + margin-left: auto; +} + +.usermanagement { + min-width: 300px; + margin-left: auto; +} +.logout { + position: relative; + top: 3px; + font-size: x-large; + font-weight: bold; + margin-right: $offset; +} + +.userpic { + margin-right: 0.5rem; +} +.username { + font-weight: bold; + margin-right: 1.5rem; +} + +.searchlabel { + color: #aaaaaa; + position: relative; + top: 2px; + font-size: x-large; + margin-right: $small-offset; +} + +.searchbar { + width: 50vw; + border: 1px solid; + border-color: #aaaaaa; + border-radius: 10px; + padding-left: 1rem; + padding-right: 1rem; +} +</style> + + <script> +import { mapGetters } from "vuex"; + export default { name: "topbar", methods: { toggleSidebar() { this.$store.commit("application/toggleSidebar"); + }, + logoff() { + this.$store.commit("user/clear_auth"); + this.$router.push("/login"); } + }, + computed: { + ...mapGetters("user", ["userinfo"]) } }; </script>