ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Use popover in user widget

This commit is contained in:
Christian Cueni 2019-07-18 13:38:22 +02:00
parent b19419af69
commit ea9822562a
8 changed files with 76 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/HeaderBar.vue
View File

@ -5,9 +5,7 @@
<logo></logo>
</router-link>
<div class="user-header">
<router-link to="/me/activity">
<user-widget v-bind="me"></user-widget>
</router-link>
<logout-widget></logout-widget>
</div>
<book-navigation v-if="showSubnavigation">

4
client/src/components/MoreOptionsWidget.vue
View File

@ -12,7 +12,7 @@
</template>
<script>
import WidgetPopover from '@/components/rooms/WidgetPopover';
import WidgetPopover from '@/components/WidgetPopover';
import Ellipses from '@/components/icons/Ellipses.vue';
export default {
@ -31,6 +31,7 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.more-options {
display: flex;
@ -54,6 +55,7 @@
&__popover {
width: 180px;
@include popover-defaults();
}
}
</style>

53
client/src/components/UserWidget.vue
View File

@ -1,21 +1,58 @@
<template>
<div class="user-widget" :class="{'user-widget--is-profile': isProfile}">
<div class="user-widget__avatar">
<avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
<div class="user-widget__avatar" @click="toggleShowPopover()">
<avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile"/>
</div>
<span class="user-widget__name">{{firstName}} {{lastName}}</span>
<span class="user-widget__date" v-if="date">{{date}}</span>
<!--span class="user-widget__name">{{firstName}} {{lastName}}</span>
<span class="user-widget__date" v-if="date">{{date}}</span-->
<widget-popover v-if="showPopover"
@hide-me="showPopover == false"
class="user-widget__popover">
<li class="popover-links__link">{{firstName}} {{lastName}}</li>
<li class="popover-links__link">
<router-link to="/me/activity">Aktivität</router-link>
</li>
<li class="popover-links__link">
<router-link to="/me/profile" >Profil</router-link>
</li>
<li class="popover-links__link">
<router-link to="/me/myclasses">Klassenliste</router-link>
</li>
<li class="popover-links__link" data-cy="logout" @click="logout()"><a>Logout</a>
</li>
</widget-popover>
</div>
</template>
<script>
import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
import Avatar from '@/components/profile/Avatar';
import WidgetPopover from '@/components/WidgetPopover';
export default {
props: ['firstName', 'lastName', 'avatarUrl', 'date'],
data() {
return {
showPopover: false
}
},
methods: {
toggleShowPopover() {
this.showPopover = !this.showPopover;
},
logout() {
this.$apollo.mutate({
mutation: LOGOUT_MUTATION,
}).then(({data}) => {
if (data.logout.success) { location.replace('/') }
});
}
},
components: {
Avatar
Avatar, WidgetPopover
},
computed: {
isProfile() {
@ -32,6 +69,11 @@
color: $color-silver-dark;
display: flex;
align-items: center;
position: relative;
&__popover {
top: 40px;
}
&__name {
padding: 0px 10px;
@ -47,6 +89,7 @@
width: 30px;
height: 30px;
fill: $color-silver-dark;
cursor: pointer;
}
&--is-profile {

2
client/src/components/rooms/WidgetPopover.vue → client/src/components/WidgetPopover.vue
View File

@ -23,7 +23,7 @@
.widget-popover {
position: absolute;
right: 0;
bottom: -110px;
// bottom: -110px;
display: flex;
flex-direction: column;
background-color: $color-white;

10
client/src/components/portfolio/ProjectActions.vue
View File

@ -5,7 +5,8 @@
<ellipses></ellipses>
</a>
<widget-popover v-if="showMenu"
@hide-me="showMenu = false">
@hide-me="showMenu = false"
class="project-actions__popover">
<li class="popover-links__link"><a @click="deleteProject(id)">Projekt löschen</a></li>
<li class="popover-links__link"><a @click="editProject(id)">Projekt bearbeiten</a></li>
<li v-if="!final" class="popover-links__link"><a @click="updateShareState(id, true)">Projekt teilen</a></li>
@ -18,7 +19,7 @@
<script>
import Ellipses from '@/components/icons/Ellipses.vue';
import WidgetPopover from '@/components/rooms/WidgetPopover';
import WidgetPopover from '@/components/WidgetPopover';
import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
import PROJECT_QUERY from '@/graphql/gql/projectQuery.gql';
@ -100,12 +101,17 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.project-actions {
&__more-link {
cursor: pointer;
}
&__popover {
@include popover-defaults();
}
svg {
width: 30px;
fill: $color-charcoal-dark;

10
client/src/components/rooms/RoomActions.vue
View File

@ -5,7 +5,8 @@
<ellipses></ellipses>
</a>
<widget-popover v-if="showMenu"
@hide-me="showMenu = false">
@hide-me="showMenu = false"
class="room-actions__popover">
<li class="popover-links__link"><a @click="deleteRoom()">Raum löschen</a></li>
<li class="popover-links__link"><a @click="editRoom()">Raum bearbeiten</a></li>
</widget-popover>
@ -14,7 +15,7 @@
<script>
import Ellipses from '@/components/icons/Ellipses.vue';
import WidgetPopover from '@/components/rooms/WidgetPopover';
import WidgetPopover from '@/components/WidgetPopover';
import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
@ -66,12 +67,17 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.room-actions {
&__more-link {
cursor: pointer;
}
&__popover {
@include popover-defaults();
}
svg {
width: 30px;
fill: $color-charcoal-dark;

4
client/src/styles/_mixins.scss
View File

@ -142,3 +142,7 @@
@mixin light-border($border-position) {
border-#{$border-position}: 1px solid $color-silver;
}
@mixin popover-defaults() {
bottom: $popover-default-bottom;
}

3
client/src/styles/_variables.scss
View File

@ -77,3 +77,6 @@ $font-weight-semibold: 600;
$font-weight-regular: 400;
$default-line-height: 1.5;
// popover
$popover-default-bottom: -110px;