Merge pull request #422 from h3poteto/iss-341
closes #341 Add small window layout menu
This commit is contained in:
commit
d27f7cf4c0
|
@ -645,6 +645,27 @@ ipcMain.on('save-preferences', (event, data) => {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ipcMain.on('change-collapse', (event, value) => {
|
||||||
|
const preferences = new Preferences(preferencesDBPath)
|
||||||
|
preferences.update(
|
||||||
|
{
|
||||||
|
state: {
|
||||||
|
collapse: value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
log.error(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('get-collapse', (event, _) => {
|
||||||
|
const preferences = new Preferences(preferencesDBPath)
|
||||||
|
preferences.load()
|
||||||
|
.then((conf) => {
|
||||||
|
event.sender.send('response-get-collapse', conf.state.collapse)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
// hashtag
|
// hashtag
|
||||||
ipcMain.on('save-hashtag', (event, tag) => {
|
ipcMain.on('save-hashtag', (event, tag) => {
|
||||||
const hashtags = new Hashtags(hashtagsDB)
|
const hashtags = new Hashtags(hashtagsDB)
|
||||||
|
|
|
@ -10,6 +10,9 @@ const Base = {
|
||||||
theme: 'white',
|
theme: 'white',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
displayNameStyle: 0
|
displayNameStyle: 0
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
collapse: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,4 +50,11 @@ export default class Preferences {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async update (obj) {
|
||||||
|
const current = await this.load()
|
||||||
|
const data = objectAssignDeep({}, current, obj)
|
||||||
|
const result = await this.save(data)
|
||||||
|
return result
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
element-loading-spinner="el-icon-loading"
|
element-loading-spinner="el-icon-loading"
|
||||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||||
<side-menu></side-menu>
|
<side-menu></side-menu>
|
||||||
<div class="page">
|
<div :class="collapse ? 'page-narrow':'page'">
|
||||||
<header class="header" style="-webkit-app-region: drag;">
|
<header class="header" style="-webkit-app-region: drag;">
|
||||||
<header-menu></header-menu>
|
<header-menu></header-menu>
|
||||||
</header>
|
</header>
|
||||||
|
@ -29,7 +29,8 @@ export default {
|
||||||
components: { SideMenu, HeaderMenu, Modals, Contents },
|
components: { SideMenu, HeaderMenu, Modals, Contents },
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
loading: state => state.TimelineSpace.loading
|
loading: state => state.TimelineSpace.loading,
|
||||||
|
collapse: state => state.TimelineSpace.SideMenu.collapse
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
@ -126,4 +127,19 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-narrow {
|
||||||
|
margin-left: 76px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: calc(100% - 141px);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 141px;
|
||||||
|
height: 48px;
|
||||||
|
border-bottom: solid 1px var(--theme-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,7 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="side_menu">
|
<div id="side_menu">
|
||||||
<div class="profile-wrapper" style="-webkit-app-region: drag;">
|
<div :class="collapse ? 'profile-wrapper narrow-menu':'profile-wrapper'" style="-webkit-app-region: drag;">
|
||||||
<div class="profile">
|
<div class="profile-narrow" v-if="collapse">
|
||||||
|
<img :src="account.avatar" class="avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="profile-wide" v-else>
|
||||||
<div>@{{ account.username }}
|
<div>@{{ account.username }}
|
||||||
<el-dropdown trigger="click" @command="handleProfile">
|
<el-dropdown trigger="click" @command="handleProfile">
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
|
@ -14,14 +17,24 @@
|
||||||
</div>
|
</div>
|
||||||
<span>{{ account.domain }}</span>
|
<span>{{ account.domain }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="collapse">
|
||||||
|
<el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse">
|
||||||
|
<i class="el-icon-arrow-right"></i>
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" class="do-collapse" @click="doCollapse" v-else>
|
||||||
|
<i class="el-icon-arrow-left"></i>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
</div>
|
</div>
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeRoute()"
|
:default-active="activeRoute()"
|
||||||
:background-color="themeColor"
|
:background-color="themeColor"
|
||||||
text-color="#909399"
|
text-color="#909399"
|
||||||
|
:collapse="collapse"
|
||||||
active-text-color="#ffffff"
|
active-text-color="#ffffff"
|
||||||
:router="true"
|
:router="true"
|
||||||
class="el-menu-vertical timeline-menu">
|
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'">
|
||||||
<el-menu-item :index="`/${id()}/home`">
|
<el-menu-item :index="`/${id()}/home`">
|
||||||
<icon name="home"></icon>
|
<icon name="home"></icon>
|
||||||
<span>Home</span>
|
<span>Home</span>
|
||||||
|
@ -83,9 +96,13 @@ export default {
|
||||||
unreadLocalTimeline: state => state.TimelineSpace.SideMenu.unreadLocalTimeline,
|
unreadLocalTimeline: state => state.TimelineSpace.SideMenu.unreadLocalTimeline,
|
||||||
lists: state => state.TimelineSpace.SideMenu.lists,
|
lists: state => state.TimelineSpace.SideMenu.lists,
|
||||||
themeColor: state => state.App.theme.side_menu_color,
|
themeColor: state => state.App.theme.side_menu_color,
|
||||||
overrideActivePath: state => state.TimelineSpace.SideMenu.overrideActivePath
|
overrideActivePath: state => state.TimelineSpace.SideMenu.overrideActivePath,
|
||||||
|
collapse: state => state.TimelineSpace.SideMenu.collapse
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
created () {
|
||||||
|
this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
activeRoute () {
|
activeRoute () {
|
||||||
if (this.overrideActivePath === null) {
|
if (this.overrideActivePath === null) {
|
||||||
|
@ -103,6 +120,12 @@ export default {
|
||||||
shell.openExternal(this.account.baseURL + '/settings/profile')
|
shell.openExternal(this.account.baseURL + '/settings/profile')
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
doCollapse () {
|
||||||
|
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', true)
|
||||||
|
},
|
||||||
|
releaseCollapse () {
|
||||||
|
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -119,7 +142,8 @@ export default {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
.profile {
|
.profile-wide {
|
||||||
|
float: left;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 20px 8px 10px 20px;
|
padding: 20px 8px 10px 20px;
|
||||||
|
@ -131,6 +155,32 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile-narrow {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 18px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse {
|
||||||
|
float: right;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
.do-collapse {
|
||||||
|
color: #606266;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.release-collapse {
|
||||||
|
color: #606266;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-menu /deep/ {
|
.timeline-menu /deep/ {
|
||||||
|
@ -164,5 +214,9 @@ export default {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.narrow-menu {
|
||||||
|
width: 76px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import Mastodon from 'megalodon'
|
import Mastodon from 'megalodon'
|
||||||
|
import { ipcRenderer } from 'electron'
|
||||||
|
|
||||||
const SideMenu = {
|
const SideMenu = {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
|
@ -7,7 +8,8 @@ const SideMenu = {
|
||||||
unreadNotifications: false,
|
unreadNotifications: false,
|
||||||
unreadLocalTimeline: false,
|
unreadLocalTimeline: false,
|
||||||
lists: [],
|
lists: [],
|
||||||
overrideActivePath: null
|
overrideActivePath: null,
|
||||||
|
collapse: false
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
changeUnreadHomeTimeline (state, value) {
|
changeUnreadHomeTimeline (state, value) {
|
||||||
|
@ -24,6 +26,9 @@ const SideMenu = {
|
||||||
},
|
},
|
||||||
updateOverrideActivePath (state, path) {
|
updateOverrideActivePath (state, path) {
|
||||||
state.overrideActivePath = path
|
state.overrideActivePath = path
|
||||||
|
},
|
||||||
|
changeCollapse (state, collapse) {
|
||||||
|
state.collapse = collapse
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
@ -43,6 +48,16 @@ const SideMenu = {
|
||||||
commit('changeUnreadHomeTimeline', false)
|
commit('changeUnreadHomeTimeline', false)
|
||||||
commit('changeUnreadNotifications', false)
|
commit('changeUnreadNotifications', false)
|
||||||
commit('changeUnreadLocalTimeline', false)
|
commit('changeUnreadLocalTimeline', false)
|
||||||
|
},
|
||||||
|
changeCollapse ({ commit }, value) {
|
||||||
|
commit('changeCollapse', value)
|
||||||
|
ipcRenderer.send('change-collapse', value)
|
||||||
|
},
|
||||||
|
readCollapse ({ commit }) {
|
||||||
|
ipcRenderer.send('get-collapse')
|
||||||
|
ipcRenderer.once('response-get-collapse', (event, value) => {
|
||||||
|
commit('changeCollapse', value)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue