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 #748 from amyspark/enable-account-access 

Enable account dropdown in narrow sidebar menu
This commit is contained in:
AkiraFukushima 2018-11-27 08:17:29 +09:00 committed by GitHub
parent 068457cdd4 719043f5d9
commit 53f0471548
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/renderer/components/TimelineSpace/SideMenu.vue
View File

@ -1,11 +1,15 @@
<template> <template>
<div id="side_menu"> <div id="side_menu">
<div :class="collapse ? 'profile-wrapper narrow-menu':'profile-wrapper'" style="-webkit-app-region: drag;"> <div :class="collapse ? 'profile-wrapper narrow-menu':'profile-wrapper'" style="-webkit-app-region: drag;">
<div class="profile-narrow" v-if="collapse"> <div :class="collapse ? 'profile-narrow' : 'profile-wide'">
<img :src="account.avatar" class="avatar" /> <div class="account">
</div> <div class="avatar" v-if="collapse">
<div class="profile-wide" v-else> <img :src="account.avatar" />
<div>@{{ account.username }} </div>
<div v-else>
@{{ account.username }}
<span class="domain-name">{{ account.domain }}</span>
</div>
<el-dropdown trigger="click" @command="handleProfile" :title="$t('side_menu.profile')"> <el-dropdown trigger="click" @command="handleProfile" :title="$t('side_menu.profile')">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
@ -17,8 +21,7 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<span class="domain-name">{{ account.domain }}</span> </div>
</div>
<div class="collapse"> <div class="collapse">
<el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse" :title="$t('side_menu.expand')"> <el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse" :title="$t('side_menu.expand')">
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
@ -179,17 +182,17 @@ export default {
position: fixed; position: fixed;
top: 0; top: 0;
width: 180px; width: 180px;
height: 70px; height: 82px;
font-size: 16px; font-size: 16px;
display: flex; display: flex;
flex-direction: row;
align-content: center;
justify-content: flex-end;
.profile-wide { .account {
color: #ffffff; display: flex;
font-weight: bold; align-items: center;
padding: 20px 8px 10px 20px; justify-content: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
.el-dropdown-link { .el-dropdown-link {
cursor: pointer; cursor: pointer;
@ -199,6 +202,15 @@ export default {
color: #409eff; color: #409eff;
} }
} }
}
.profile-wide {
color: #fff;
font-weight: bold;
padding: 20px 8px 18px 20px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
.domain-name { .domain-name {
word-break: break-all; word-break: break-all;
@ -207,18 +219,26 @@ export default {
} }
.profile-narrow { .profile-narrow {
float: left; padding-top: 20px;
padding-bottom: 2px;
.avatar { .avatar {
width: 36px; display: inline;
height: 36px;
border-radius: 50%; img {
margin: 18px 12px; width: 36px;
height: 36px;
border-radius: 50%;
}
}
.account {
flex-direction: column;
} }
} }
.collapse { .collapse {
margin-top: 24px; display: flex;
.do-collapse { .do-collapse {
color: #dcdfe6; color: #dcdfe6;
@ -232,7 +252,6 @@ export default {
.release-collapse { .release-collapse {
color: #dcdfe6; color: #dcdfe6;
padding: 0; padding: 0;
margin-left: -10px;
&:hover { &:hover {
color: #409eff; color: #409eff;
@ -243,8 +262,8 @@ export default {
.timeline-menu /deep/ { .timeline-menu /deep/ {
position: fixed; position: fixed;
top: 70px; top: 82px;
height: calc(100% - 70px); height: calc(100% - 82px);
width: 180px; width: 180px;
border: none; border: none;
overflow-y: auto; overflow-y: auto;