Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #1053 from h3poteto/iss-1046 

closes #1046 Allow resize sidebar using drag
This commit is contained in:
AkiraFukushima 2019-09-30 22:43:26 +09:00 committed by GitHub
parent 6e1456b48d 8819545dc7
commit 4d53b65fe6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 247 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/TimelineSpace.vue
View File

@ -129,8 +129,10 @@ export default {
return false return false
}, },
onDragEnter(e) { onDragEnter(e) {
if (e.dataTransfer.types.indexOf('Files') >= 0) {
this.dropTarget = e.target this.dropTarget = e.target
this.droppableVisible = true this.droppableVisible = true
}
}, },
onDragLeave(e) { onDragLeave(e) {
if (e.target === this.dropTarget) { if (e.target === this.dropTarget) {

100
src/renderer/components/TimelineSpace/Contents.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="contents"> <div id="contents" ref="contents" :style="customWidth" @mouseup="dragEnd" @mousemove="resize">
<div <div
id="scrollable" id="scrollable"
:class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'" :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
@ -10,7 +10,19 @@
> >
<router-view></router-view> <router-view></router-view>
</div> </div>
<side-bar :overlaid="modalOpened"></side-bar> <template v-if="openSideBar">
<transition name="slide-detail">
<div>
<div id="resizer">
<div class="border"></div>
<div class="knob" @mousedown="dragStart">
<icon name="ellipsis-v" class="icon"></icon>
</div>
</div>
<side-bar id="side_bar" :overlaid="modalOpened"></side-bar>
</div>
</transition>
</template>
</div> </div>
</template> </template>
@ -20,6 +32,12 @@ import SideBar from './Contents/SideBar'
export default { export default {
name: 'contents', name: 'contents',
data() {
return {
sidebarWidth: 360,
dragging: false
}
},
components: { components: {
SideBar SideBar
}, },
@ -30,16 +48,39 @@ export default {
...mapState('TimelineSpace/Contents/SideBar', { ...mapState('TimelineSpace/Contents/SideBar', {
openSideBar: state => state.openSideBar openSideBar: state => state.openSideBar
}), }),
...mapGetters('TimelineSpace/Modals', ['modalOpened']) ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
customWidth: function() {
return {
'--current-sidebar-width': `${this.sidebarWidth}px`
}
}
},
methods: {
resize(event) {
if (this.dragging && event.clientX) {
this.sidebarWidth = window.innerWidth - event.clientX
}
},
dragStart() {
this.dragging = true
this.$refs.contents.style.setProperty('user-select', 'none')
},
dragEnd() {
this.dragging = false
this.$refs.contents.style.setProperty('user-select', 'text')
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#contents { #contents {
--current-sidebar-width: 360px;
padding-top: 48px; padding-top: 48px;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
user-select: text;
.timeline-wrapper { .timeline-wrapper {
height: 100%; height: 100%;
@ -51,10 +92,61 @@ export default {
.timeline-wrapper-with-side-bar { .timeline-wrapper-with-side-bar {
height: 100%; height: 100%;
width: calc(100% - 360px); width: calc(100% - var(--current-sidebar-width));
overflow: auto; overflow: auto;
transition: all 0.5s; transition: all 0.5s;
scroll-behavior: auto; scroll-behavior: auto;
} }
#resizer {
.border {
width: 1px;
background-color: var(--theme-border-color);
height: calc(100% - 48px);
position: fixed;
top: 48px;
right: var(--current-sidebar-width);
}
.knob {
width: 8px;
background-color: var(--theme-border-color);
height: 72px;
position: fixed;
top: 50%;
right: calc(var(--current-sidebar-width) - 8px);
z-index: 1000;
border-radius: 0 8px 8px 0;
cursor: col-resize;
text-align: center;
vertical-align: middle;
line-height: 72px;
.icon {
display: inline-block;
color: var(--theme-secondary-color);
}
}
}
#side_bar {
position: fixed;
top: 48px;
right: 0;
width: var(--current-sidebar-width);
height: calc(100% - 48px);
border-left: solid 1px var(--theme-border-color);
}
}
.slide-detail-enter-active,
.slide-detail-leave-active {
transition: all 0.5s;
}
.slide-detail-enter,
.slide-detail-leave-to {
margin-right: -360px;
opacity: 0;
} }
</style> </style>

2
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -248,7 +248,7 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
} }

3
src/renderer/components/TimelineSpace/Contents/Favourites.vue
View File

@ -203,6 +203,7 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
} }
</style> </style>

3
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
View File

@ -253,7 +253,8 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
} }
</style> </style>
<style src="@/assets/timeline-transition.scss"></style> <style src="@/assets/timeline-transition.scss"></style>

2
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -229,7 +229,7 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
} }

3
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
View File

@ -253,7 +253,8 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
} }
</style> </style>
<style src="@/assets/timeline-transition.scss"></style> <style src="@/assets/timeline-transition.scss"></style>

3
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -241,7 +241,8 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
} }
} }
</style> </style>

80
src/renderer/components/TimelineSpace/Contents/Mentions.vue
View File

@ -1,8 +1,7 @@
<template> <template>
<div id="mentions" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey"> <div id="mentions" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div> <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()"> <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
</div>
<transition-group name="timeline" tag="div"> <transition-group name="timeline" tag="div">
<div class="mentions" v-for="message in mentions" :key="message.id"> <div class="mentions" v-for="message in mentions" :key="message.id">
<notification <notification
@ -19,13 +18,11 @@
</notification> </notification>
</div> </div>
</transition-group> </transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"> <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
</div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading"> <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</el-button> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -39,7 +36,7 @@ export default {
name: 'mentions', name: 'mentions',
components: { Notification }, components: { Notification },
mixins: [reloadable], mixins: [reloadable],
data () { data() {
return { return {
focusedId: null focusedId: null
} }
@ -60,13 +57,9 @@ export default {
unread: state => state.unreadMentions, unread: state => state.unreadMentions,
filter: state => state.filter filter: state => state.filter
}), }),
...mapGetters('TimelineSpace/Modals', [ ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
'modalOpened' ...mapGetters('TimelineSpace/Contents/Mentions', ['mentions']),
]), shortcutEnabled: function() {
...mapGetters('TimelineSpace/Contents/Mentions', [
'mentions'
]),
shortcutEnabled: function () {
if (this.modalOpened) { if (this.modalOpened) {
return false return false
} }
@ -78,27 +71,27 @@ export default {
return currentIndex === -1 return currentIndex === -1
} }
}, },
mounted () { mounted() {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false) this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
document.getElementById('scrollable').addEventListener('scroll', this.onScroll) document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-timeline', () => { Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events. // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId const previousFocusedId = this.focusedId
this.focusedId = 0 this.focusedId = 0
this.$nextTick(function () { this.$nextTick(function() {
this.focusedId = previousFocusedId this.focusedId = previousFocusedId
}) })
}) })
}, },
beforeUpdate () { beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) { if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false) this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
} }
}, },
beforeDestroy () { beforeDestroy() {
Event.$off('focus-timeline') Event.$off('focus-timeline')
}, },
destroyed () { destroyed() {
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true) this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions') this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
this.$store.commit('TimelineSpace/Contents/Mentions/archiveMentions') this.$store.commit('TimelineSpace/Contents/Mentions/archiveMentions')
@ -108,15 +101,14 @@ export default {
} }
}, },
watch: { watch: {
startReload: function (newState, oldState) { startReload: function(newState, oldState) {
if (!oldState && newState) { if (!oldState && newState) {
this.reload() this.reload().finally(() => {
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false) this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
}) })
} }
}, },
focusedId: function (newState, _oldState) { focusedId: function(newState, _oldState) {
if (newState && this.heading) { if (newState && this.heading) {
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false) this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
} else if (newState === null && !this.heading) { } else if (newState === null && !this.heading) {
@ -126,11 +118,13 @@ export default {
} }
}, },
methods: { methods: {
onScroll (event) { onScroll(event) {
// for lazyLoading // for lazyLoading
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('mentions').clientHeight - 10) && !this.lazyloading) { if (
this.$store.dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1]) event.target.clientHeight + event.target.scrollTop >= document.getElementById('mentions').clientHeight - 10 &&
.catch(() => { !this.lazyloading
) {
this.$store.dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1]).catch(() => {
this.$message({ this.$message({
message: this.$t('message.timeline_fetch_error'), message: this.$t('message.timeline_fetch_error'),
type: 'error' type: 'error'
@ -138,14 +132,14 @@ export default {
}) })
} }
// for unread control // for unread control
if ((event.target.scrollTop > 10) && this.heading) { if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false) this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
} else if ((event.target.scrollTop <= 10) && !this.heading) { } else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true) this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions') this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
} }
}, },
async reload () { async reload() {
this.$store.commit('TimelineSpace/changeLoading', true) this.$store.commit('TimelineSpace/changeLoading', true)
try { try {
await this.reloadable() await this.reloadable()
@ -153,17 +147,14 @@ export default {
this.$store.commit('TimelineSpace/changeLoading', false) this.$store.commit('TimelineSpace/changeLoading', false)
} }
}, },
updateToot (message) { updateToot(message) {
this.$store.commit('TimelineSpace/Contents/Mentions/updateToot', message) this.$store.commit('TimelineSpace/Contents/Mentions/updateToot', message)
}, },
upper () { upper() {
scrollTop( scrollTop(document.getElementById('scrollable'), 0)
document.getElementById('scrollable'),
0
)
this.focusedId = null this.focusedId = null
}, },
focusNext () { focusNext() {
const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id) const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
if (currentIndex === -1) { if (currentIndex === -1) {
this.focusedId = this.mentions[0].id this.focusedId = this.mentions[0].id
@ -171,7 +162,7 @@ export default {
this.focusedId = this.mentions[currentIndex + 1].id this.focusedId = this.mentions[currentIndex + 1].id
} }
}, },
focusPrev () { focusPrev() {
const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id) const currentIndex = this.mentions.findIndex(toot => this.focusedId === toot.id)
if (currentIndex === 0) { if (currentIndex === 0) {
this.focusedId = null this.focusedId = null
@ -179,13 +170,13 @@ export default {
this.focusedId = this.mentions[currentIndex - 1].id this.focusedId = this.mentions[currentIndex - 1].id
} }
}, },
focusNotification (message) { focusNotification(message) {
this.focusedId = message.id this.focusedId = message.id
}, },
focusSidebar () { focusSidebar() {
Event.$emit('focus-sidebar') Event.$emit('focus-sidebar')
}, },
handleKey (event) { handleKey(event) {
switch (event.srcKey) { switch (event.srcKey) {
case 'next': case 'next':
this.focusedId = this.mentions[0].id this.focusedId = this.mentions[0].id
@ -229,7 +220,8 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
} }
} }
</style> </style>

76
src/renderer/components/TimelineSpace/Contents/Notifications.vue
View File

@ -1,8 +1,7 @@
<template> <template>
<div id="notifications" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey"> <div id="notifications" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div> <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()"> <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
</div>
<transition-group name="timeline" tag="div"> <transition-group name="timeline" tag="div">
<div class="notifications" v-for="message in notifications" v-bind:key="message.id"> <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
<notification <notification
@ -19,13 +18,11 @@
</notification> </notification>
</div> </div>
</transition-group> </transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"> <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
</div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading"> <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</el-button> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -39,7 +36,7 @@ export default {
name: 'notifications', name: 'notifications',
components: { Notification }, components: { Notification },
mixins: [reloadable], mixins: [reloadable],
data () { data() {
return { return {
focusedId: null focusedId: null
} }
@ -55,10 +52,8 @@ export default {
unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications, unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
filter: state => state.TimelineSpace.Contents.Notifications.filter filter: state => state.TimelineSpace.Contents.Notifications.filter
}), }),
...mapGetters('TimelineSpace/Modals', [ ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
'modalOpened' shortcutEnabled: function() {
]),
shortcutEnabled: function () {
if (this.modalOpened) { if (this.modalOpened) {
return false return false
} }
@ -70,7 +65,7 @@ export default {
return currentIndex === -1 return currentIndex === -1
} }
}, },
mounted () { mounted() {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false) this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge') this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
document.getElementById('scrollable').addEventListener('scroll', this.onScroll) document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
@ -79,20 +74,20 @@ export default {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events. // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId const previousFocusedId = this.focusedId
this.focusedId = 0 this.focusedId = 0
this.$nextTick(function () { this.$nextTick(function() {
this.focusedId = previousFocusedId this.focusedId = previousFocusedId
}) })
}) })
}, },
beforeUpdate () { beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) { if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false) this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
} }
}, },
beforeDestroy () { beforeDestroy() {
Event.$off('focus-timeline') Event.$off('focus-timeline')
}, },
destroyed () { destroyed() {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true) this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications') this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications') this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications')
@ -102,15 +97,14 @@ export default {
} }
}, },
watch: { watch: {
startReload: function (newState, oldState) { startReload: function(newState, oldState) {
if (!oldState && newState) { if (!oldState && newState) {
this.reload() this.reload().finally(() => {
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false) this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
}) })
} }
}, },
focusedId: function (newState, _oldState) { focusedId: function(newState, _oldState) {
if (newState >= 0 && this.heading) { if (newState >= 0 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false) this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
} else if (newState === null && !this.heading) { } else if (newState === null && !this.heading) {
@ -121,9 +115,13 @@ export default {
} }
}, },
methods: { methods: {
onScroll (event) { onScroll(event) {
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) { if (
this.$store.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1]) event.target.clientHeight + event.target.scrollTop >= document.getElementById('notifications').clientHeight - 10 &&
!this.lazyloading
) {
this.$store
.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
.catch(() => { .catch(() => {
this.$message({ this.$message({
message: this.$t('message.notification_fetch_error'), message: this.$t('message.notification_fetch_error'),
@ -132,15 +130,15 @@ export default {
}) })
} }
// for unread control // for unread control
if ((event.target.scrollTop > 10) && this.heading) { if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false) this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
} else if ((event.target.scrollTop <= 10) && !this.heading) { } else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true) this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications') this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge') this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
} }
}, },
async reload () { async reload() {
this.$store.commit('TimelineSpace/changeLoading', true) this.$store.commit('TimelineSpace/changeLoading', true)
try { try {
await this.reloadable() await this.reloadable()
@ -149,17 +147,14 @@ export default {
this.$store.commit('TimelineSpace/changeLoading', false) this.$store.commit('TimelineSpace/changeLoading', false)
} }
}, },
updateToot (message) { updateToot(message) {
this.$store.commit('TimelineSpace/Contents/Notifications/updateToot', message) this.$store.commit('TimelineSpace/Contents/Notifications/updateToot', message)
}, },
upper () { upper() {
scrollTop( scrollTop(document.getElementById('scrollable'), 0)
document.getElementById('scrollable'),
0
)
this.focusedId = null this.focusedId = null
}, },
focusNext () { focusNext() {
const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id) const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
if (currentIndex === -1) { if (currentIndex === -1) {
this.focusedId = this.notifications[0].id this.focusedId = this.notifications[0].id
@ -167,7 +162,7 @@ export default {
this.focusedId = this.notifications[currentIndex + 1].id this.focusedId = this.notifications[currentIndex + 1].id
} }
}, },
focusPrev () { focusPrev() {
const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id) const currentIndex = this.notifications.findIndex(notification => this.focusedId === notification.id)
if (currentIndex === 0) { if (currentIndex === 0) {
this.focusedId = null this.focusedId = null
@ -175,13 +170,13 @@ export default {
this.focusedId = this.notifications[currentIndex - 1].id this.focusedId = this.notifications[currentIndex - 1].id
} }
}, },
focusNotification (notification) { focusNotification(notification) {
this.focusedId = notification.id this.focusedId = notification.id
}, },
focusSidebar () { focusSidebar() {
Event.$emit('focus-sidebar') Event.$emit('focus-sidebar')
}, },
handleKey (event) { handleKey(event) {
switch (event.srcKey) { switch (event.srcKey) {
case 'next': case 'next':
this.focusedId = this.notifications[0].id this.focusedId = this.notifications[0].id
@ -225,7 +220,8 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
} }
} }
</style> </style>

3
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -241,7 +241,8 @@ export default {
.upper-with-side-bar { .upper-with-side-bar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: calc(20px + 360px); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
} }
} }
</style> </style>

24
src/renderer/components/TimelineSpace/Contents/SideBar.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<transition name="slide-detail"> <div class="side-bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
<div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
<div class="header"> <div class="header">
<i class="el-icon-loading" v-show="loading"></i> <i class="el-icon-loading" v-show="loading"></i>
<i class="el-icon-refresh" @click="reload"></i> <i class="el-icon-refresh" @click="reload"></i>
@ -19,7 +18,6 @@
></div> ></div>
</div> </div>
</div> </div>
</transition>
</template> </template>
<script> <script>
@ -79,14 +77,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#side_bar { .side-bar {
position: fixed;
top: 48px;
right: 0;
width: 360px;
height: calc(100% - 48px);
border-left: solid 1px var(--theme-border-color);
.header { .header {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);
padding: 4px 8px; padding: 4px 8px;
@ -115,15 +106,4 @@ export default {
height: 100%; height: 100%;
} }
} }
.slide-detail-enter-active,
.slide-detail-leave-active {
transition: all 0.5s;
}
.slide-detail-enter,
.slide-detail-leave-to {
margin-right: -360px;
opacity: 0;
}
</style> </style>

4
src/renderer/components/organisms/Toot.vue
View File

@ -576,6 +576,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.status {
background-color: var(--theme-background-color);
}
.toot { .toot {
padding: 8px 0 0 16px; padding: 8px 0 0 16px;