limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-23 02:17:40 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve user column

Browse source
This commit is contained in:
syuilo 2018-10-23 12:32:24 +09:00
parent 369f327501
commit 401139d6f9
2 changed files with 106 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
locales/ja-JP.yml
View file

@ -1109,6 +1109,12 @@ desktop/views/pages/deck/deck.tl-column.vue:
edit: "オプション" edit: "オプション"
desktop/views/pages/deck/deck.user-column.vue: desktop/views/pages/deck/deck.user-column.vue:
posts: "投稿"
following: "フォロー"
followers: "フォロワー"
images: "画像"
activity: "アクティビティ"
timeline: "タイムライン"
pinned-notes: "ピン留めされた投稿" pinned-notes: "ピン留めされた投稿"
push-to-a-list: "リストに追加" push-to-a-list: "リストに追加"

130
src/client/app/desktop/views/pages/deck/deck.user-column.vue
View file

@ -24,26 +24,55 @@
<div class="description"> <div class="description">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/> <misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div> </div>
<div class="counts">
<div>
<b>{{ user.notesCount | number }}</b>
<span>%i18n:@posts%</span>
</div>
<div>
<b>{{ user.followingCount | number }}</b>
<span>%i18n:@following%</span>
</div>
<div>
<b>{{ user.followersCount | number }}</b>
<span>%i18n:@followers%</span>
</div>
</div>
</div> </div>
<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0"> <div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
<p>%fa:thumbtack% %i18n:@pinned-notes%</p> <p class="caption" @click="toggleShowPinned">%fa:thumbtack% %i18n:@pinned-notes%</p>
<div class="notes"> <span class="angle" v-if="showPinned">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<div class="notes" v-show="showPinned">
<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/> <x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
</div> </div>
</div> </div>
<div class="images" v-if="images.length > 0"> <div class="images" v-if="images.length > 0">
<router-link v-for="image in images" <p class="caption" @click="toggleShowImages">%fa:images R% %i18n:@images%</p>
:style="`background-image: url(${image.thumbnailUrl})`" <span class="angle" v-if="showImages">%fa:angle-up%</span>
:key="`${image.id}:${image._note.id}`" <span class="angle" v-else>%fa:angle-down%</span>
:to="image._note | notePage" <div v-show="showImages">
:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`" <router-link v-for="image in images"
></router-link> :style="`background-image: url(${image.thumbnailUrl})`"
:key="`${image.id}:${image._note.id}`"
:to="image._note | notePage"
:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
></router-link>
</div>
</div> </div>
<div class="activity"> <div class="activity">
<div ref="chart"></div> <p class="caption" @click="toggleShowActivity">%fa:chart-bar R% %i18n:@activity%</p>
<span class="angle" v-if="showActivity">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<div v-show="showActivity">
<div ref="chart"></div>
</div>
</div> </div>
<div class="tl"> <div class="tl">
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/> <p class="caption">%fa:comment-alt R% %i18n:@timeline%</p>
<div>
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
</div>
</div> </div>
</div> </div>
</x-column> </x-column>
@ -84,7 +113,10 @@ export default Vue.extend({
existMore: false, existMore: false,
moreFetching: false, moreFetching: false,
withFiles: false, withFiles: false,
images: [] images: [],
showPinned: true,
showImages: true,
showActivity: true
}; };
}, },
@ -282,6 +314,18 @@ export default Vue.extend({
compact: false, compact: false,
items: menu items: menu
}); });
},
toggleShowPinned() {
this.showPinned = !this.showPinned;
},
toggleShowImages() {
this.showImages = !this.showImages;
},
toggleShowActivity() {
this.showActivity = !this.showActivity;
} }
} }
}); });
@ -365,39 +409,65 @@ export default Vue.extend({
border-right solid 16px transparent border-right solid 16px transparent
border-bottom solid 16px var(--face) border-bottom solid 16px var(--face)
> .pinned > .counts
padding-bottom 16px display grid
background var(--deckColumnBg) grid-template-columns 1fr 1fr 1fr
margin-top 8px
border-top solid 1px var(--faceDivider)
> p > div
padding 8px 8px 0 8px
text-align center
> b
display block
font-size 120%
> span
display block
font-size 90%
opacity 0.7
> *
> p.caption
margin 0 margin 0
padding 8px 16px padding 8px 16px
font-size 12px font-size 12px
color var(--text) color var(--text)
& + .angle
position absolute
top 0
right 8px
padding 6px
font-size 14px
color var(--text)
> .pinned
> .notes > .notes
background var(--face) background var(--face)
> .images > .images
display grid > div
grid-template-columns 1fr 1fr 1fr display grid
gap 8px grid-template-columns 1fr 1fr 1fr
padding 16px gap 8px
margin-bottom 16px padding 16px
background var(--face) background var(--face)
> * > *
height 70px height 70px
background-position center center background-position center center
background-size cover background-size cover
background-clip content-box background-clip content-box
border-radius 4px border-radius 4px
> .activity > .activity
margin-bottom 16px > div
background var(--face) background var(--face)
> .tl > .tl
background var(--face) > div
background var(--face)
</style> </style>