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 #716 from amyspark/update-toot-layout 

Update Toot layout
This commit is contained in:
AkiraFukushima 2018-11-17 18:02:33 +09:00 committed by GitHub
parent 08af4bc609 fb01521781
commit cfff3a183f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 115 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,8 +10,8 @@
<div class="header">
<div class="follow-follower" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
<div class="follower-status">
<span class="status" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</span>
<span class="status" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</span>
<el-tag class="status" size="small" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</el-tag>
<el-tag class="status" size="medium" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</el-tag>
</div>
</div>
<div class="user-info">
@ -254,9 +254,9 @@ export default {
.follower-status {
.status {
border-radius: 4px;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
padding: 4px 8px;
font-size: 1rem;
}
}
}

39
src/renderer/components/molecules/Notification/Favourite.vue
View File

@ -42,10 +42,10 @@
<div class="content-wrapper">
<div class="spoiler" v-show="spoilered(message.status)">
<span v-html="spoilerText(message.status)"></span>
<el-button v-show="!isShowContent(message.status)" type="text" @click="showContent = true">
<el-button v-if="!isShowContent(message.status)" plain type="primary" size="medium" class="spoil-button" @click="showContent = true">
{{ $t('cards.toot.show_more') }}
</el-button>
<el-button v-show="isShowContent(message.status)" type="text" @click="showContent = false">
<el-button v-else plain type="primary" size="medium" class="spoil-button" @click="showContent = false">
{{ $t('cards.toot.hide')}}
</el-button>
</div>
@ -61,6 +61,8 @@
</el-button>
<div class="media" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" alt="attached media" />
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div>
</div>
<div class="clearfix"></div>
@ -248,6 +250,14 @@ export default {
.favourite {
padding: 8px 0 0 16px;
.fa-icon {
font-size: 0.9em;
width: auto;
height: 1em;
max-width: 100%;
max-height: 100%;
}
.action {
margin-right: 8px;
@ -341,8 +351,19 @@ export default {
}
}
.spoiler {
margin: 8px 0;
.spoil-button {
background-color: var(--theme-selected-background-color);
border-color: var(--theme-border-color);
padding: 2px 4px;
}
}
.attachments {
position: relative;
margin: 4px 0 8px;
.show-sensitive {
padding: 20px 32px;
@ -364,12 +385,26 @@ export default {
.media {
float: left;
margin-right: 8px;
width: 200px;
height: 200px;
img {
cursor: zoom-in;
object-fit: cover;
max-width: 200px;
max-height: 200px;
width: 100%;
height: 100%;
border-radius: 8px;
}
.media-label {
position: absolute;
bottom: 6px;
left: 4px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
}
}
}

39
src/renderer/components/molecules/Notification/Reblog.vue
View File

@ -42,10 +42,10 @@
<div class="content-wrapper">
<div class="spoiler" v-show="spoilered(message.status)">
<span v-html="spoilerText(message.status)"></span>
<el-button v-show="!isShowContent(message.status)" type="text" @click="showContent = true">
<el-button v-if="!isShowContent(message.status)" plain type="primary" size="medium" class="spoil-button" @click="showContent = true">
{{ $t('cards.toot.show_more') }}
</el-button>
<el-button v-show="isShowContent(message.status)" type="text" @click="showContent = false">
<el-button v-else plain type="primary" size="medium" class="spoil-button" @click="showContent = false">
{{ $t('cards.toot.hide')}}
</el-button>
</div>
@ -61,6 +61,8 @@
</el-button>
<div class="media" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" alt="attached media" />
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div>
</div>
<div class="clearfix"></div>
@ -246,6 +248,14 @@ export default {
.reblog {
padding: 8px 0 0 16px;
.fa-icon {
font-size: 0.9em;
width: auto;
height: 1em;
max-width: 100%;
max-height: 100%;
}
.action {
margin-right: 8px;
@ -338,8 +348,19 @@ export default {
}
}
.spoiler {
margin: 8px 0;
.spoil-button {
background-color: var(--theme-selected-background-color);
border-color: var(--theme-border-color);
padding: 2px 4px;
}
}
.attachments {
position: relative;
margin: 4px 0 8px;
.show-sensitive {
padding: 20px 32px;
@ -361,12 +382,26 @@ export default {
.media {
float: left;
margin-right: 8px;
width: 200px;
height: 200px;
img {
cursor: zoom-in;
object-fit: cover;
max-width: 200px;
max-height: 200px;
width: 100%;
height: 100%;
border-radius: 8px;
}
.media-label {
position: absolute;
bottom: 6px;
left: 4px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
}
}
}

47
src/renderer/components/molecules/Toot.vue
View File

@ -34,10 +34,10 @@
<div class="content-wrapper">
<div class="spoiler" v-show="spoilered(message)">
<span v-html="spoilerText(message)"></span>
<el-button v-show="!isShowContent(message)" type="text" @click="showContent = true">
<el-button v-if="!isShowContent(message)" plain type="primary" size="medium" class="spoil-button" @click="showContent = true">
{{ $t('cards.toot.show_more') }}
</el-button>
<el-button v-show="isShowContent(message)" type="text" @click="showContent = false">
<el-button v-else type="primary" size="medium" class="spoil-button" @click="showContent = false">
{{ $t('cards.toot.hide')}}
</el-button>
</div>
@ -52,9 +52,9 @@
<icon name="eye" class="hide"></icon>
</el-button>
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message)">
<FailoverImg :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))"/>
<span class="media-label" v-if="media.type == 'gifv'">GIF</span>
<span class="media-label" v-else-if="media.type == 'video'">VIDEO</span>
<FailoverImg :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))" :title="media.description" />
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div>
</div>
<div class="clearfix"></div>
@ -482,6 +482,14 @@ export default {
.toot {
padding: 8px 0 0 16px;
.fa-icon {
font-size: 0.9em;
width: auto;
height: 1em;
max-width: 100%;
max-height: 100%;
}
.icon {
float: left;
@ -547,8 +555,19 @@ export default {
}
}
.spoiler {
margin: 8px 0;
.spoil-button {
background-color: var(--theme-selected-background-color);
border-color: var(--theme-border-color);
padding: 2px 4px;
}
}
.attachments {
position: relative;
margin: 4px 0 8px;
.show-sensitive {
padding: 20px 32px;
@ -570,22 +589,26 @@ export default {
.media {
float: left;
margin-right: 8px;
margin-bottom: 4px;
width: 200px;
height: 200px;
img {
cursor: zoom-in;
object-fit: cover;
max-width: 200px;
max-height: 200px;
width: 100%;
height: 100%;
border-radius: 8px;
}
.media-label {
position: absolute;
bottom: 8px;
left: 8px;
bottom: 6px;
left: 4px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
font-size: 0.8rem;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.3);
}
}
}
@ -616,6 +639,10 @@ export default {
.tool-box {
float: left;
.fa-icon {
vertical-align: bottom;
}
button {
margin: 0 8px;
padding: 0;