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

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

@ -23,7 +23,7 @@
</DynamicScroller>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" />
<font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button>
</div>
</div>
@ -299,6 +299,10 @@ export default {
right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
}
.upper-icon {
padding: 3px;
}
}
</style>

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

@ -22,7 +22,7 @@
</DynamicScroller>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<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>
</div>
</div>
@ -210,5 +210,9 @@ export default {
right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
}
.upper-icon {
padding: 3px;
}
}
</style>

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

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

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

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

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

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

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

@ -23,7 +23,7 @@
</DynamicScroller>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" />
<font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button>
</div>
</div>
@ -306,6 +306,10 @@ export default {
right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
}
.upper-icon {
padding: 3px;
}
}
</style>

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

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

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

@ -29,7 +29,7 @@
</DynamicScroller>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" />
<font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button>
</div>
</div>
@ -300,6 +300,10 @@ export default {
right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
}
.upper-icon {
padding: 3px;
}
}
</style>

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

@ -28,7 +28,7 @@
</DynamicScroller>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" />
<font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button>
</div>
</div>
@ -297,6 +297,10 @@ export default {
right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
}
.upper-icon {
padding: 3px;
}
}
</style>

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

@ -23,7 +23,7 @@
</DynamicScroller>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="arrow-up" />
<font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button>
</div>
</div>
@ -299,6 +299,10 @@ export default {
right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
}
.upper-icon {
padding: 3px;
}
}
</style>

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

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

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

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