Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix design sidebar

Browse Source
This commit is contained in:
AkiraFukushima 2022-04-22 22:46:07 +09:00
parent cb2a92ee28
commit ef38a57d34
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
4 changed files with 33 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,7 +97,7 @@ export default {
background-color: var(--theme-border-color); background-color: var(--theme-border-color);
height: calc(100% - 48px); height: calc(100% - 48px);
position: fixed; position: fixed;
top: 48px; top: 53px;
right: var(--current-sidebar-width); right: var(--current-sidebar-width);
} }
@ -124,7 +124,7 @@ export default {
#side_bar { #side_bar {
position: fixed; position: fixed;
top: 48px; top: 52px;
right: 0; right: 0;
width: var(--current-sidebar-width); width: var(--current-sidebar-width);
height: calc(100% - 48px); height: calc(100% - 48px);

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

@ -1,9 +1,12 @@
<template> <template>
<div class="side-bar" v-if="openSideBar"> <div class="side-bar" v-if="openSideBar">
<div class="header"> <div class="header">
<font-awesome-icon icon="spinner" /> <el-button type="text" @click="reload" class="action">
<font-awesome-icon icon="rotate" /> <font-awesome-icon icon="rotate" />
</el-button>
<el-button type="text" @click="close" class="action">
<font-awesome-icon icon="xmark" /> <font-awesome-icon icon="xmark" />
</el-button>
</div> </div>
<div id="sidebar_scrollable"> <div id="sidebar_scrollable">
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile> <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
@ -88,12 +91,14 @@ export default {
box-sizing: border-box; box-sizing: border-box;
font-size: 18px; font-size: 18px;
.el-icon-close { .action {
cursor: pointer; color: var(--theme-secondary-color);
} padding: 0;
margin-left: 8px;
.el-icon-refresh { &:hover {
cursor: pointer; color: #409eff;
}
} }
} }

20
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
View File

@ -382,28 +382,16 @@ export default {
} }
} }
.username /deep/ { .username {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: calc(var(--base-font-size) * 1.71); font-size: calc(var(--base-font-size) * 1.71);
margin: 0 auto 12px auto; margin: 0 auto 12px auto;
.emojione {
max-width: 1em;
max-height: 1em;
}
} }
.account { .account {
color: #409eff; color: #409eff;
} }
.note {
& /deep/ .emojione {
max-width: 1.2em;
height: 1.2em;
}
}
} }
.identity { .identity {
@ -481,6 +469,12 @@ export default {
width: 100%; width: 100%;
text-align: left; text-align: left;
line-height: 20px; line-height: 20px;
height: auto;
display: block;
}
.tab :deep(span) {
display: block;
} }
.title { .title {

31
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
View File

@ -1,18 +1,11 @@
<template> <template>
<div class="tabs" id="sidebar_tabs"> <div id="sidebar_tabs">
<el-tabs v-model="activeName" @tab-click="handleClick" stretch> <el-tabs :model-value="activeName" @tab-click="handleClick" class="tabs">
<el-tab-pane label="Posts" name="posts" <el-tab-pane label="Posts" name="posts"><Posts :account="account" :buffer="buffer" :filters="filters" /></el-tab-pane>
><Posts :account="account" :buffer="buffer" :filters="filters"
/></el-tab-pane>
<el-tab-pane label="Posts and replies" name="posts_and_replies" <el-tab-pane label="Posts and replies" name="posts_and_replies"
><PostsAndReplies ><PostsAndReplies :account="account" :buffer="buffer" :filters="filters"
:account="account"
:buffer="buffer"
:filters="filters"
/></el-tab-pane>
<el-tab-pane label="Media" name="media"
><Media :account="account" :buffer="buffer" :filters="filters"
/></el-tab-pane> /></el-tab-pane>
<el-tab-pane label="Media" name="media"><Media :account="account" :buffer="buffer" :filters="filters" /></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
@ -29,19 +22,17 @@ export default {
components: { components: {
Posts, Posts,
PostsAndReplies, PostsAndReplies,
Media, Media
}, },
data() { data() {
return { return {
activeName: 'posts', activeName: 'posts',
defaultBuffer: 200, defaultBuffer: 200,
buffer: 200, buffer: 200
} }
}, },
computed: { computed: {
...mapGetters('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', [ ...mapGetters('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', ['filters'])
'filters',
]),
}, },
mounted() { mounted() {
const timeline = document.getElementById('sidebar_tabs') const timeline = document.getElementById('sidebar_tabs')
@ -52,13 +43,13 @@ export default {
methods: { methods: {
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event) console.log(tab, event)
}, }
}, }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tabs /deep/ { .tabs :deep() {
.el-tabs__header { .el-tabs__header {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);
} }