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

Fix timeline design

This commit is contained in:
AkiraFukushima 2022-04-23 00:13:04 +09:00
parent ef38a57d34
commit cd8881bbb8
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
14 changed files with 102 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
View File

@ -21,7 +21,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -215,5 +215,9 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

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

@ -23,7 +23,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -299,6 +299,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

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

@ -22,7 +22,7 @@
</DynamicScroller> </DynamicScroller>
<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="ElIconArrowUp" @click="upper" circle> <el-button type="primary" :icon="ElIconArrowUp" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -210,5 +210,9 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

1
src/renderer/components/TimelineSpace/Contents/Hashtag.vue
View File

@ -65,7 +65,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
#hashtag { #hashtag {
border-top: 1px solid var(--theme-border-color);
height: calc(100% - 1px); height: calc(100% - 1px);
overflow: hidden; overflow: hidden;

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

@ -23,7 +23,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -306,6 +306,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

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

@ -31,7 +31,7 @@
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="angle-up" class="icon" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -307,10 +307,6 @@ export default {
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
transition: all 0.5s; transition: all 0.5s;
.icon {
padding: 3px;
}
} }
.upper-with-side-bar { .upper-with-side-bar {
@ -319,6 +315,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

68
src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
View File

@ -1,16 +1,8 @@
<template> <template>
<div id="lists"> <div id="lists">
<div <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
class="new-list"
v-loading="creating"
:element-loading-background="loadingBackground"
>
<el-form :inline="true"> <el-form :inline="true">
<input <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
v-model="title"
:placeholder="$t('lists.index.new_list')"
class="list-title"
/>
<el-button type="text" class="create" @click="createList"> <el-button type="text" class="create" @click="createList">
<font-awesome-icon icon="plus" /> <font-awesome-icon icon="plus" />
</el-button> </el-button>
@ -40,14 +32,14 @@ export default {
data() { data() {
return { return {
title: '', title: '',
creating: false, creating: false
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
lists: (state) => state.TimelineSpace.Contents.Lists.Index.lists, lists: state => state.TimelineSpace.Contents.Lists.Index.lists,
loadingBackground: (state) => state.App.theme.wrapper_mask_color, loadingBackground: state => state.App.theme.wrapper_mask_color
}), })
}, },
created() { created() {
this.$store.commit('TimelineSpace/changeLoading', true) this.$store.commit('TimelineSpace/changeLoading', true)
@ -60,29 +52,22 @@ export default {
return this.$route.params.id return this.$route.params.id
}, },
fetch() { fetch() {
return this.$store return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists').catch(() => {
.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists') this.$message({
.catch(() => { message: this.$t('message.lists_fetch_error'),
this.$message({ type: 'error'
message: this.$t('message.lists_fetch_error'),
type: 'error',
})
}) })
})
}, },
async createList() { async createList() {
this.creating = true this.creating = true
try { try {
await this.$store.dispatch( await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title)
'TimelineSpace/Contents/Lists/Index/createList', await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
this.title
)
await this.$store.dispatch(
'TimelineSpace/Contents/Lists/Index/fetchLists'
)
} catch (err) { } catch (err) {
this.$message({ this.$message({
message: this.$t('message.list_create_error'), message: this.$t('message.list_create_error'),
type: 'error', type: 'error'
}) })
} finally { } finally {
this.creating = false this.creating = false
@ -93,24 +78,17 @@ export default {
return this.$router.push(`/${this.id()}/lists/${list.id}/edit`) return this.$router.push(`/${this.id()}/lists/${list.id}/edit`)
}, },
del(list) { del(list) {
this.$confirm( this.$confirm(this.$t('lists.index.delete.confirm.message'), this.$t('lists.index.delete.confirm.title'), {
this.$t('lists.index.delete.confirm.message'), confirmButtonText: this.$t('lists.index.delete.confirm.ok'),
this.$t('lists.index.delete.confirm.title'), cancelButtonText: this.$t('lists.index.delete.confirm.cancel'),
{ type: 'warning'
confirmButtonText: this.$t('lists.index.delete.confirm.ok'), })
cancelButtonText: this.$t('lists.index.delete.confirm.cancel'),
type: 'warning',
}
)
.then(() => { .then(() => {
this.$store.dispatch( this.$store.dispatch('TimelineSpace/Contents/Lists/Index/deleteList', list)
'TimelineSpace/Contents/Lists/Index/deleteList',
list
)
}) })
.catch(() => {}) .catch(() => {})
}, }
}, }
} }
</script> </script>
@ -145,7 +123,7 @@ export default {
.list { .list {
padding: 4px 24px; padding: 4px 24px;
display: flex; display: flex;
flex-dirrection: row; flex-direction: row;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid var(--theme-border-color); border-bottom: 1px solid var(--theme-border-color);

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

@ -23,7 +23,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -306,6 +306,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

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

@ -23,7 +23,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -61,7 +61,7 @@ export default {
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar, openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
backgroundColor: state => state.App.theme.background_color, backgroundColor: state => state.App.theme.background_color,
startReload: state => state.TimelineSpace.HeaderMenu.reload, startReload: state => state.TimelineSpace.HeaderMenu.reload,
unreadNotification: state => state.TimelineSpace.unreadNotification unreadNotification: state => state.TimelineSpace.timelineSetting.unreadNotification
}), }),
...mapGetters('TimelineSpace/Modals', ['modalOpened']), ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function () { shortcutEnabled: function () {
@ -77,6 +77,7 @@ export default {
} }
}, },
async mounted() { async mounted() {
console.log(this.unreadNotification)
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false) this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
document.getElementById('scroller').addEventListener('scroll', this.onScroll) document.getElementById('scroller').addEventListener('scroll', this.onScroll)
if (!this.unreadNotification.local) { if (!this.unreadNotification.local) {
@ -296,6 +297,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

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

@ -29,7 +29,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -300,6 +300,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

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

@ -28,7 +28,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -297,6 +297,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

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

@ -23,7 +23,7 @@
</DynamicScroller> </DynamicScroller>
<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" @click="upper" circle> <el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" /> <font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button> </el-button>
</div> </div>
</div> </div>
@ -299,6 +299,10 @@ export default {
right: calc(20px + var(--current-sidebar-width)); right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s; transition: all 0.5s;
} }
.upper-icon {
padding: 3px;
}
} }
</style> </style>

58
src/renderer/components/TimelineSpace/Contents/Search.vue
View File

@ -2,7 +2,7 @@
<div id="search"> <div id="search">
<div class="search-header"> <div class="search-header">
<el-form :inline="true"> <el-form :inline="true">
<el-select v-model="target" :placeholder="$t('search.search')" class="search-target"> <el-select :model-value="target" :placeholder="$t('search.search')" class="search-target" size="large">
<el-option v-for="item in searchTargets" :key="item.target" :label="item.label" :value="item.target"> </el-option> <el-option v-for="item in searchTargets" :key="item.target" :label="item.label" :value="item.target"> </el-option>
</el-select> </el-select>
<input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-on:keyup.enter="search" autofocus /> <input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-on:keyup.enter="search" autofocus />
@ -18,6 +18,7 @@
</template> </template>
<script> <script>
import { ref } from 'vue'
import SearchAccount from './Search/Account' import SearchAccount from './Search/Account'
import SearchTag from './Search/Tag' import SearchTag from './Search/Tag'
import SearchToots from './Search/Toots' import SearchToots from './Search/Toots'
@ -27,28 +28,22 @@ export default {
components: { SearchAccount, SearchTag, SearchToots }, components: { SearchAccount, SearchTag, SearchToots },
data() { data() {
return { return {
target: 'account', target: ref('account'),
query: '' query: '',
} searchTargets: [
}, {
computed: { target: 'account',
searchTargets: { label: this.$t('search.account')
get() { },
return [ {
{ target: 'tag',
target: 'account', label: this.$t('search.tag')
label: this.$t('search.account') },
}, {
{ target: 'toot',
target: 'tag', label: this.$t('search.toot')
label: this.$t('search.tag') }
}, ]
{
target: 'toot',
label: this.$t('search.toot')
}
]
}
} }
}, },
methods: { methods: {
@ -88,22 +83,21 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
#search { #search {
border-top: 1px solid var(--theme-border-color);
.search-header { .search-header {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);
padding: 8px 12px; padding: 8px 12px;
.search-target /deep/ { .search-target {
float: left; float: left;
width: 20%; width: 20%;
}
.el-input__inner { .search-target :deep(.el-input__inner) {
background-color: var(--theme-background-color); background-color: var(--theme-background-color);
border: none; border: none;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
color: var(--theme-primary-color); color: var(--theme-primary-color);
} box-shadow: none;
} }
.search-keyword { .search-keyword {

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

@ -992,7 +992,7 @@ export default {
<style lang="scss"> <style lang="scss">
.status-menu-popper { .status-menu-popper {
padding: 2px 0; padding: 2px 0 !important;
border-color: #909399; border-color: #909399;
.menu-list { .menu-list {