stash
This commit is contained in:
parent
86003a8582
commit
49bc03aa4c
4 changed files with 122 additions and 87 deletions
|
|
@ -48,88 +48,7 @@
|
||||||
<div class="navbar-collapse collapse">
|
<div class="navbar-collapse collapse">
|
||||||
<ul class="navbar-nav navbar-align">
|
<ul class="navbar-nav navbar-align">
|
||||||
<Notifications :notifications="notifications"/>
|
<Notifications :notifications="notifications"/>
|
||||||
<li class="nav-item dropdown">
|
<Messages :messages="messages"/>
|
||||||
<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
|
|
||||||
<div class="position-relative">
|
|
||||||
<b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
|
|
||||||
aria-labelledby="messagesDropdown">
|
|
||||||
<div class="dropdown-menu-header">
|
|
||||||
<div class="position-relative">
|
|
||||||
4 New Messages
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="list-group">
|
|
||||||
<a href="#" class="list-group-item">
|
|
||||||
<div class="row g-0 align-items-center">
|
|
||||||
<div class="col-2">
|
|
||||||
<!--<img src="/static/assets/img/avatars/avatar-5.png"
|
|
||||||
class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
|
|
||||||
</div>
|
|
||||||
<div class="col-10 pl-2">
|
|
||||||
<div class="text-dark">Vanessa Tucker</div>
|
|
||||||
<div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
|
|
||||||
tortor.
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small mt-1">15m ago</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item">
|
|
||||||
<div class="row g-0 align-items-center">
|
|
||||||
<div class="col-2">
|
|
||||||
<!--<img src="/static/assets/img/avatars/avatar-2.png"
|
|
||||||
class="avatar img-fluid rounded-circle" alt="William Harris">-->
|
|
||||||
</div>
|
|
||||||
<div class="col-10 pl-2">
|
|
||||||
<div class="text-dark">William Harris</div>
|
|
||||||
<div class="text-muted small mt-1">Curabitur ligula sapien euismod
|
|
||||||
vitae.
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small mt-1">2h ago</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="list-group-item">
|
|
||||||
<div class="row g-0 align-items-center">
|
|
||||||
<div class="col-2">
|
|
||||||
<!--<img src="/static/assets/img/avatars/avatar-4.png"
|
|
||||||
class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
|
|
||||||
</div>
|
|
||||||
<div class="col-10 pl-2">
|
|
||||||
<div class="text-dark">Christina Mason</div>
|
|
||||||
<div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small mt-1">4h ago</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<!-- {% for messege in top_messages %}-->
|
|
||||||
<a href="#" class="list-group-item">
|
|
||||||
<div class="row g-0 align-items-center">
|
|
||||||
<div class="col-2">
|
|
||||||
<!--<img src="/static/assets/img/avatars/avatar-3.png"
|
|
||||||
class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
|
|
||||||
</div>
|
|
||||||
<div class="col-10 pl-2">
|
|
||||||
<div class="text-dark">Sharon Lessman</div>
|
|
||||||
<div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
|
|
||||||
posuere ac,
|
|
||||||
mattis non.
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small mt-1">5h ago</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<!--{% endfor %}-->
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-menu-footer">
|
|
||||||
<a href="#" class="text-muted">Show all messages</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#"
|
<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#"
|
||||||
data-toggle="dropdown">
|
data-toggle="dropdown">
|
||||||
|
|
@ -198,22 +117,21 @@
|
||||||
import {mapGetters, mapMutations, mapState} from 'vuex';
|
import {mapGetters, mapMutations, mapState} from 'vuex';
|
||||||
import * as BIcons from "bootstrap-icons-vue";
|
import * as BIcons from "bootstrap-icons-vue";
|
||||||
import Notifications from "@/components/Notifications.vue";
|
import Notifications from "@/components/Notifications.vue";
|
||||||
|
import Messages from "@/components/Messages.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BaseLayout',
|
name: 'BaseLayout',
|
||||||
components: {
|
components: {
|
||||||
|
Messages,
|
||||||
Notifications,
|
Notifications,
|
||||||
...BIcons
|
...BIcons
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
//...mapState(['notifications']),
|
...mapState(['messages']),
|
||||||
...mapGetters(['notifications']),
|
...mapGetters(['notifications']),
|
||||||
username() {
|
username() {
|
||||||
return this.$route.params.username
|
return this.$route.params.username
|
||||||
},
|
},
|
||||||
top_notifications() {
|
|
||||||
return this.notifications.slice(0, 5)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['logout'])
|
...mapMutations(['logout'])
|
||||||
|
|
|
||||||
111
frontend/src/components/Messages.vue
Normal file
111
frontend/src/components/Messages.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
<template>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
|
||||||
|
<div class="position-relative">
|
||||||
|
<b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
|
||||||
|
aria-labelledby="messagesDropdown">
|
||||||
|
<div class="dropdown-menu-header">
|
||||||
|
<div class="position-relative">
|
||||||
|
4 New Messages
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item">
|
||||||
|
<div class="row g-0 align-items-center">
|
||||||
|
<div class="col-2">
|
||||||
|
<!--<img src="/static/assets/img/avatars/avatar-5.png"
|
||||||
|
class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
|
||||||
|
</div>
|
||||||
|
<div class="col-10 pl-2">
|
||||||
|
<div class="text-dark">Vanessa Tucker</div>
|
||||||
|
<div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
|
||||||
|
tortor.
|
||||||
|
</div>
|
||||||
|
<div class="text-muted small mt-1">15m ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">
|
||||||
|
<div class="row g-0 align-items-center">
|
||||||
|
<div class="col-2">
|
||||||
|
<!--<img src="/static/assets/img/avatars/avatar-2.png"
|
||||||
|
class="avatar img-fluid rounded-circle" alt="William Harris">-->
|
||||||
|
</div>
|
||||||
|
<div class="col-10 pl-2">
|
||||||
|
<div class="text-dark">William Harris</div>
|
||||||
|
<div class="text-muted small mt-1">Curabitur ligula sapien euismod
|
||||||
|
vitae.
|
||||||
|
</div>
|
||||||
|
<div class="text-muted small mt-1">2h ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">
|
||||||
|
<div class="row g-0 align-items-center">
|
||||||
|
<div class="col-2">
|
||||||
|
<!--<img src="/static/assets/img/avatars/avatar-4.png"
|
||||||
|
class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
|
||||||
|
</div>
|
||||||
|
<div class="col-10 pl-2">
|
||||||
|
<div class="text-dark">Christina Mason</div>
|
||||||
|
<div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
|
||||||
|
</div>
|
||||||
|
<div class="text-muted small mt-1">4h ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!-- {% for messege in top_messages %}-->
|
||||||
|
<a href="#" class="list-group-item">
|
||||||
|
<div class="row g-0 align-items-center">
|
||||||
|
<div class="col-2">
|
||||||
|
<!--<img src="/static/assets/img/avatars/avatar-3.png"
|
||||||
|
class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
|
||||||
|
</div>
|
||||||
|
<div class="col-10 pl-2">
|
||||||
|
<div class="text-dark">Sharon Lessman</div>
|
||||||
|
<div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
|
||||||
|
posuere ac,
|
||||||
|
mattis non.
|
||||||
|
</div>
|
||||||
|
<div class="text-muted small mt-1">5h ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!--{% endfor %}-->
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-menu-footer">
|
||||||
|
<a href="#" class="text-muted">Show all messages</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapGetters, mapMutations} from 'vuex';
|
||||||
|
import * as BIcons from "bootstrap-icons-vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Messages",
|
||||||
|
components: {
|
||||||
|
...BIcons
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
messages: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
top_messages() {
|
||||||
|
return this.messages.slice(0, 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -54,7 +54,12 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
...BIcons
|
...BIcons
|
||||||
},
|
},
|
||||||
props: ['notifications'],
|
props: {
|
||||||
|
notifications: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
top_notifications() {
|
top_notifications() {
|
||||||
return this.notifications.sort((a, b) => {
|
return this.notifications.sort((a, b) => {
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ export default createStore({
|
||||||
friends: [],
|
friends: [],
|
||||||
item_map: {},
|
item_map: {},
|
||||||
//notifications: [],
|
//notifications: [],
|
||||||
|
messages: [],
|
||||||
resolver: new FallBackResolver(),
|
resolver: new FallBackResolver(),
|
||||||
unreachable_neighbors: new NeighborsCache(),
|
unreachable_neighbors: new NeighborsCache(),
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue