refs #116 Create basic side bar
This commit is contained in:
parent
72d2c9ee9c
commit
3a3f2f94ff
|
@ -91,6 +91,7 @@ p {
|
||||||
|
|
||||||
.space {
|
.space {
|
||||||
margin-left: 65px;
|
margin-left: 65px;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -6,7 +6,10 @@
|
||||||
<header-menu></header-menu>
|
<header-menu></header-menu>
|
||||||
</header>
|
</header>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<router-view></router-view>
|
<div :class="openSideBar? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
<side-bar></side-bar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<new-toot></new-toot>
|
<new-toot></new-toot>
|
||||||
|
@ -16,15 +19,22 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
import SideMenu from './TimelineSpace/SideMenu'
|
import SideMenu from './TimelineSpace/SideMenu'
|
||||||
import HeaderMenu from './TimelineSpace/HeaderMenu'
|
import HeaderMenu from './TimelineSpace/HeaderMenu'
|
||||||
import NewToot from './TimelineSpace/Modals/NewToot'
|
import NewToot from './TimelineSpace/Modals/NewToot'
|
||||||
import JumpModal from './TimelineSpace/JumpModal'
|
import JumpModal from './TimelineSpace/JumpModal'
|
||||||
import ImageViewer from './TimelineSpace/Modals/ImageViewer'
|
import ImageViewer from './TimelineSpace/Modals/ImageViewer'
|
||||||
|
import SideBar from './TimelineSpace/SideBar'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'timeline-space',
|
name: 'timeline-space',
|
||||||
components: { SideMenu, HeaderMenu, NewToot, JumpModal, ImageViewer },
|
components: { SideMenu, HeaderMenu, NewToot, JumpModal, ImageViewer, SideBar },
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
openSideBar: state => state.TimelineSpace.SideBar.openSideBar
|
||||||
|
})
|
||||||
|
},
|
||||||
created () {
|
created () {
|
||||||
const loading = this.$loading({
|
const loading = this.$loading({
|
||||||
lock: true,
|
lock: true,
|
||||||
|
@ -95,8 +105,13 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
#timeline_space {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.page {
|
.page {
|
||||||
margin-left: 180px;
|
margin-left: 180px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -109,7 +124,21 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin-top: 48px;
|
padding-top: 48px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.timeline-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-wrapper-with-side-bar {
|
||||||
|
height: 100%;
|
||||||
|
width: -webkit-calc(100% - 180px);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="toot" tabIndex="0">
|
<div class="toot" tabIndex="0">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<img :src="originalMessage(message).account.avatar" />
|
<img :src="originalMessage(message).account.avatar" @click="openUser(originalMessage(message).account)"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
<div class="toot-header">
|
<div class="toot-header">
|
||||||
<div class="user">
|
<div class="user" @click="openUser(originalMessage(message).account)">
|
||||||
{{ username(originalMessage(message).account) }}
|
{{ username(originalMessage(message).account) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="timestamp">
|
<div class="timestamp">
|
||||||
|
@ -130,6 +130,9 @@ export default {
|
||||||
},
|
},
|
||||||
openImage (url) {
|
openImage (url) {
|
||||||
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
|
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
|
||||||
|
},
|
||||||
|
openUser (account) {
|
||||||
|
console.log(account)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div id="side_bar" v-if="openSideBar">
|
||||||
|
<div class="header">
|
||||||
|
<i class="el-icon-close" @click="close"></i>
|
||||||
|
</div>
|
||||||
|
side
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'side-bar',
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
openSideBar: state => state.TimelineSpace.SideBar.openSideBar
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close () {
|
||||||
|
this.$store.dispatch('TimelineSpace/SideBar/close')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#side_bar {
|
||||||
|
position: fixed;
|
||||||
|
top: 48px;
|
||||||
|
right: 0;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,6 +1,7 @@
|
||||||
import { ipcRenderer } from 'electron'
|
import { ipcRenderer } from 'electron'
|
||||||
import Mastodon from 'mastodon-api'
|
import Mastodon from 'mastodon-api'
|
||||||
import SideMenu from './TimelineSpace/SideMenu'
|
import SideMenu from './TimelineSpace/SideMenu'
|
||||||
|
import SideBar from './TimelineSpace/SideBar'
|
||||||
import Home from './TimelineSpace/Home'
|
import Home from './TimelineSpace/Home'
|
||||||
import Notifications from './TimelineSpace/Notifications'
|
import Notifications from './TimelineSpace/Notifications'
|
||||||
import Favourites from './TimelineSpace/Favourites'
|
import Favourites from './TimelineSpace/Favourites'
|
||||||
|
@ -15,6 +16,7 @@ const TimelineSpace = {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
modules: {
|
modules: {
|
||||||
SideMenu,
|
SideMenu,
|
||||||
|
SideBar,
|
||||||
Home,
|
Home,
|
||||||
Notifications,
|
Notifications,
|
||||||
Favourites,
|
Favourites,
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
const SideBar = {
|
||||||
|
namespaced: true,
|
||||||
|
state: {
|
||||||
|
openSideBar: true
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
changeOpenSideBar (state, value) {
|
||||||
|
state.openSideBar = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
close ({ commit }) {
|
||||||
|
commit('changeOpenSideBar', false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SideBar
|
Loading…
Reference in New Issue