diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c217c719a..c2b0df6ce 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1109,6 +1109,12 @@ desktop/views/pages/deck/deck.tl-column.vue: edit: "オプション" desktop/views/pages/deck/deck.user-column.vue: + posts: "投稿" + following: "フォロー" + followers: "フォロワー" + images: "画像" + activity: "アクティビティ" + timeline: "タイムライン" pinned-notes: "ピン留めされた投稿" push-to-a-list: "リストに追加" diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue index dd62fe714..8e8fe6882 100644 --- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue @@ -24,26 +24,55 @@
+
+
+ {{ user.notesCount | number }} + %i18n:@posts% +
+
+ {{ user.followingCount | number }} + %i18n:@following% +
+
+ {{ user.followersCount | number }} + %i18n:@followers% +
+
-

%fa:thumbtack% %i18n:@pinned-notes%

-
+

%fa:thumbtack% %i18n:@pinned-notes%

+ %fa:angle-up% + %fa:angle-down% +
- +

%fa:images R% %i18n:@images%

+ %fa:angle-up% + %fa:angle-down% +
+ +
-
+

%fa:chart-bar R% %i18n:@activity%

+ %fa:angle-up% + %fa:angle-down% +
+
+
- +

%fa:comment-alt R% %i18n:@timeline%

+
+ +
@@ -84,7 +113,10 @@ export default Vue.extend({ existMore: false, moreFetching: false, withFiles: false, - images: [] + images: [], + showPinned: true, + showImages: true, + showActivity: true }; }, @@ -282,6 +314,18 @@ export default Vue.extend({ compact: false, 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-bottom solid 16px var(--face) - > .pinned - padding-bottom 16px - background var(--deckColumnBg) + > .counts + display grid + 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 padding 8px 16px font-size 12px color var(--text) + & + .angle + position absolute + top 0 + right 8px + padding 6px + font-size 14px + color var(--text) + + > .pinned > .notes background var(--face) > .images - display grid - grid-template-columns 1fr 1fr 1fr - gap 8px - padding 16px - margin-bottom 16px - background var(--face) + > div + display grid + grid-template-columns 1fr 1fr 1fr + gap 8px + padding 16px + background var(--face) - > * - height 70px - background-position center center - background-size cover - background-clip content-box - border-radius 4px + > * + height 70px + background-position center center + background-size cover + background-clip content-box + border-radius 4px > .activity - margin-bottom 16px - background var(--face) + > div + background var(--face) > .tl - background var(--face) + > div + background var(--face)