Skip to content

Commit

Permalink
Sidebar tweaks (logout button, style, …)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandhose
sandhose committed Apr 2, 2017
1 parent 5025893 commit 5bad570
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 82 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
},
"dependencies": {
"babel-runtime": "^6.23.0",
"gravatar": "^1.6.0",
"vue": "^2.2.6",
"vue-material": "^0.7.1",
"vue-meta": "^0.5.5",
Expand Down
37 changes: 23 additions & 14 deletions src/components/layout/AppShell.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<template>
<main>
<sidebar ref="sidebar" />
<md-toolbar>
<md-button class="md-icon-button hamburger" @click.native="toggleSidebar">
<md-icon>menu</md-icon>
</md-button>
<h1 class="md-title">{{ $route.meta.title || "Sympa" }}</h1>
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</md-toolbar>
<section class="page-content">
<router-view></router-view>
</section>
<div class="main-container">
<md-toolbar>
<md-button class="md-icon-button hamburger" @click.native="toggleSidebar">
<md-icon>menu</md-icon>
</md-button>
<h1 class="md-title">{{ $route.meta.title || "Sympa" }}</h1>
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</md-toolbar>
<section class="page-content">
<router-view></router-view>
</section>
</div>
</main>
</template>

Expand All @@ -36,12 +38,19 @@ export default {
.md-toolbar > .md-title {
flex: 1;
}
.main-container {
height: 100vh;
background-color: #F5F5F5;
}
.page-content {
padding: 25px;
}
@media screen and (min-width: 1281px) {
#app {
padding-left: 280px;
.main-container {
margin-left: 280px;
}
.page-content {
padding: 18px 48px;
Expand Down
4 changes: 3 additions & 1 deletion src/components/layout/LoginForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
<md-input v-model="username" :disabled="pending" />
</md-input-container>

<md-input-container md-has-password>
<md-input-container md-has-password :class="{ 'md-input-invalid': errored }">
<label>Password</label>
<md-input type="password" v-model="password" :disabled="pending" />

<span v-if="errored" class="md-error">{{ errorMessage }}</span>
</md-input-container>
</md-card-content>

Expand Down
167 changes: 100 additions & 67 deletions src/components/layout/Sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,73 @@
<h2>SYMPA</h2>
</md-toolbar>
<md-divider></md-divider>
<md-list-item class="md-double-line">
<md-avatar>
<img src="//placehold.it/40x40" alt="avatar">
</md-avatar>
<div class="md-list-text-container">
<b>{{ fullname }}</b>
<span>{{ email }}</span>
</div>
<md-button class="md-icon-button md-list-action">
<md-icon>keyboard_arrow_down</md-icon>
</md-button>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<router-link :to="{name: 'home'}">
<md-icon>dashboard</md-icon>
<span>Dashboard</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'discussions'}">
<md-icon>forum</md-icon>
<span>Discussions</span>
</router-link>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<router-link :to="{name: 'admin'}">
<md-icon>work</md-icon>
<span>Administration</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'listmaster'}">
<md-icon>list</md-icon>
<span>Listmaster Admin</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'profile'}">
<md-icon>person</md-icon>
<span>Profile</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'settings'}">
<md-icon>settings</md-icon>
<span>Settings</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'about'}">
<md-icon>help</md-icon>
<span>About/Help</span>
</router-link>
</md-list-item>
<md-list class="sidebar-user">
<md-list-item class="md-double-line">
<md-avatar>
<img :src="picture" alt="avatar">
</md-avatar>
<div class="sidebar-user-meta">
<div class="sidebar-user-fullname">{{ fullname }}</div>
<div class="sidebar-user-email">{{ email }}</div>
</div>

<md-list-expand>
<md-list>
<md-list-item @click.native="logout">
Logout
</md-list-item>
</md-list>
</md-list-expand>
</md-list-item>
</md-list>
<md-divider />
<md-list>
<md-list-item>
<router-link exact :to="{name: 'home'}">
<md-icon>dashboard</md-icon>
<span>Dashboard</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'discussions'}">
<md-icon>forum</md-icon>
<span>Discussions</span>
</router-link>
</md-list-item>
</md-list>
<md-divider />
<md-list>
<md-list-item>
<router-link :to="{name: 'admin'}">
<md-icon>work</md-icon>
<span>Administration</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'listmaster'}">
<md-icon>list</md-icon>
<span>Listmaster Admin</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'profile'}">
<md-icon>person</md-icon>
<span>Profile</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'settings'}">
<md-icon>settings</md-icon>
<span>Settings</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link :to="{name: 'about'}">
<md-icon>help</md-icon>
<span>About/Help</span>
</router-link>
</md-list-item>
</md-list>
</md-sidenav>
</template>

Expand All @@ -73,47 +84,69 @@ export default {
toggle() {
this.$refs.sidebar.toggle();
},
logout() {
this.$store.dispatch('auth/logout');
},
},
computed: mapGetters('auth', ['fullname', 'email']),
computed: mapGetters('auth', ['fullname', 'email', 'picture']),
};
</script>

<style>
.md-list.md-no-padding {
padding: 0;
}
.md-list-item .md-list-item-container {
font-weight: 500;
color: #4F4F4F;
font-size: 15px;
line-height: 48px;
}
.md-divider {
margin: 8px 0;
}
.md-sidenav .md-sidenav-content {
list-style-type: none;
width: 280px;
}
.md-sidenav-content, .md-list {
/* @TODO: move this in the vue-material theme */
background-color: #FAFAFA!important;
}
.md-sidenav-content .md-toolbar img {
height: 32px;
width: 32px;
margin: 16px;
}
.md-sidenav-content .md-toolbar + .md-divider {
margin-top: 0;
.md-sidenav-content .md-toolbar h2 {
font-weight: 300;
font-size: 18px;
}
.md-sidenav-content .md-toolbar h2 {
font-weight: 100;
.sidebar-user {
padding: 0;
}
.sidebar-user > .md-list-item {
min-height: 64px;
}
.sidebar-user-meta {
line-height: 18px;
margin: 14px 0;
font-size: 14px;
}
.sidebar-user-email {
font-weight: 400;
}
@media screen and (min-width: 1281px) {
.md-sidenav-content {
transform: translate3d(0,0,0) !important;
pointer-events: auto !important;
box-shadow: 0 1px 5px rgba(0,0,0,.25) !important;
box-shadow: 0 9px 18px 0 rgba(0,0,0,0.18), 0 5px 5px 0 rgba(0,0,0,0.24)!important;
}
.md-sidenav-backdrop {
display: none;
Expand Down
3 changes: 3 additions & 0 deletions src/store/auth/getters.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import gravatar from 'gravatar';

export const errored = state => state.error !== null;
export const errorMessage = state => state.error && state.error.message;
export const pending = state => state.pending;
export const logged = state => state.user !== null;
export const fullname = state => (state.user ? `${state.user.name.first} ${state.user.name.last}` : '');
export const email = state => state.user && state.user.email;
export const picture = state => state.user && gravatar.url(state.user.email, { s: 128 });
17 changes: 17 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -944,6 +944,10 @@ bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.4.7:
version "3.5.0"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"

blueimp-md5@^2.3.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.7.0.tgz#7f518e0dd70467fefe28ecba398916092f2a02a9"

bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
version "4.11.6"
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
Expand Down Expand Up @@ -1698,6 +1702,10 @@ elliptic@^6.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0"

email-validator@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-1.0.7.tgz#4621ca32fc741eb833ac98d5fb55670b7e056c95"

emojis-list@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
Expand Down Expand Up @@ -2312,6 +2320,15 @@ graceful-fs@^4.1.2:
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"

gravatar@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/gravatar/-/gravatar-1.6.0.tgz#8bdc9b786ca725a8e7076416d1731f8d3331c976"
dependencies:
blueimp-md5 "^2.3.0"
email-validator "^1.0.7"
querystring "0.2.0"
yargs "^6.0.0"

handle-thing@^1.2.4:
version "1.2.5"
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
Expand Down

0 comments on commit 5bad570

Please sign in to comment.