みつけるに連合分を表示するように (#5490)

* みつける Fediverse

* discovered
This commit is contained in:
MeiMei 2019-10-14 02:00:29 +09:00 committed by syuilo
parent 8da278a279
commit 488fe2e7bd
6 changed files with 93 additions and 75 deletions

View file

@ -413,9 +413,11 @@ common/views/pages/explore.vue:
popular-users: "人気のユーザー" popular-users: "人気のユーザー"
recently-updated-users: "最近投稿したユーザー" recently-updated-users: "最近投稿したユーザー"
recently-registered-users: "新規ユーザー" recently-registered-users: "新規ユーザー"
recently-discovered-users: "最近発見されたユーザー"
popular-tags: "人気のタグ" popular-tags: "人気のタグ"
federated: "連合" federated: "連合"
explore: "{host}を探索" explore: "{host}を探索"
explore-fediverse: "Fediverseを探索"
users-info: "現在{users}ユーザーが登録されています" users-info: "現在{users}ユーザーが登録されています"
common/views/components/reactions-viewer.details.vue: common/views/components/reactions-viewer.details.vue:

View file

@ -1,5 +1,5 @@
<template> <template>
<ui-container :body-togglable="true"> <ui-container :body-togglable="true" :expanded="expanded">
<template #header><slot></slot></template> <template #header><slot></slot></template>
<mk-error v-if="error" @retry="init()"/> <mk-error v-if="error" @retry="init()"/>
@ -50,7 +50,11 @@ export default Vue.extend({
iconOnly: { iconOnly: {
type: Boolean, type: Boolean,
default: false default: false
} },
expanded: {
type: Boolean,
default: true
},
}, },
computed: { computed: {

View file

@ -1,15 +1,30 @@
<template> <template>
<div> <div>
<ui-container :show-header="false" v-if="meta && stats"> <div class="localfedi7" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
<div class="kpdsmpnk" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"> <header>{{ $t('explore', { host: meta.name }) }}</header>
<div> <div>{{ $t('users-info', { users: num(stats.originalUsersCount) }) }}</div>
<router-link to="/explore" class="title">{{ $t('explore', { host: meta.name || 'Misskey' }) }}</router-link>
<span>{{ $t('users-info', { users: num(stats.originalUsersCount) }) }}</span>
</div> </div>
</div>
</ui-container>
<ui-container :body-togglable="true" :expanded="tag == null" ref="tags"> <template v-if="tag == null">
<mk-user-list :pagination="pinnedUsers" :expanded="false">
<fa :icon="faBookmark" fixed-width/>{{ $t('pinned-users') }}
</mk-user-list>
<mk-user-list :pagination="popularUsers" :expanded="false">
<fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }}
</mk-user-list>
<mk-user-list :pagination="recentlyUpdatedUsers" :expanded="false">
<fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }}
</mk-user-list>
<mk-user-list :pagination="recentlyRegisteredUsers" :expanded="false">
<fa :icon="faPlus" fixed-width/>{{ $t('recently-registered-users') }}
</mk-user-list>
</template>
<div class="localfedi7" v-if="tag == null" :style="{ backgroundImage: `url(/assets/fedi.jpg)` }">
<header>{{ $t('explore-fediverse') }}</header>
</div>
<ui-container :body-togglable="true" :expanded="false" ref="tags">
<template #header><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template> <template #header><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
<div class="vxjfqztj"> <div class="vxjfqztj">
@ -18,25 +33,18 @@
</div> </div>
</ui-container> </ui-container>
<mk-user-list v-if="tag != null" :pagination="tagUsers" :key="`${tag}-local`"> <mk-user-list v-if="tag != null" :pagination="tagUsers" :key="`${tag}`">
<fa :icon="faHashtag" fixed-width/>{{ tag }} <fa :icon="faHashtag" fixed-width/>{{ tag }}
</mk-user-list> </mk-user-list>
<mk-user-list v-if="tag != null" :pagination="tagRemoteUsers" :key="`${tag}-remote`">
<fa :icon="faHashtag" fixed-width/>{{ tag }} ({{ $t('federated') }})
</mk-user-list>
<template v-if="tag == null"> <template v-if="tag == null">
<mk-user-list :pagination="pinnedUsers"> <mk-user-list :pagination="popularUsersF" :expanded="false">
<fa :icon="faBookmark" fixed-width/>{{ $t('pinned-users') }}
</mk-user-list>
<mk-user-list :pagination="popularUsers">
<fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }} <fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }}
</mk-user-list> </mk-user-list>
<mk-user-list :pagination="recentlyUpdatedUsers"> <mk-user-list :pagination="recentlyUpdatedUsersF" :expanded="false">
<fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }} <fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }}
</mk-user-list> </mk-user-list>
<mk-user-list :pagination="recentlyRegisteredUsers"> <mk-user-list :pagination="recentlyRegisteredUsersF" :expanded="false">
<fa :icon="faPlus" fixed-width/>{{ $t('recently-registered-users') }} <fa :icon="faRocket" fixed-width/>{{ $t('recently-discovered-users') }}
</mk-user-list> </mk-user-list>
</template> </template>
</div> </div>
@ -45,7 +53,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import { faChartLine, faPlus, faHashtag } from '@fortawesome/free-solid-svg-icons'; import { faChartLine, faPlus, faHashtag, faRocket } from '@fortawesome/free-solid-svg-icons';
import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons'; import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
export default Vue.extend({ export default Vue.extend({
@ -58,6 +66,12 @@ export default Vue.extend({
} }
}, },
inject: {
inNakedDeckColumn: {
default: false
}
},
data() { data() {
return { return {
pinnedUsers: { endpoint: 'pinned-users' }, pinnedUsers: { endpoint: 'pinned-users' },
@ -75,12 +89,25 @@ export default Vue.extend({
state: 'alive', state: 'alive',
sort: '+createdAt', sort: '+createdAt',
} }, } },
popularUsersF: { endpoint: 'users', limit: 10, params: {
state: 'alive',
origin: 'combined',
sort: '+follower',
} },
recentlyUpdatedUsersF: { endpoint: 'users', limit: 10, params: {
origin: 'combined',
sort: '+updatedAt',
} },
recentlyRegisteredUsersF: { endpoint: 'users', limit: 10, params: {
origin: 'combined',
sort: '+createdAt',
} },
tagsLocal: [], tagsLocal: [],
tagsRemote: [], tagsRemote: [],
stats: null, stats: null,
meta: null, meta: null,
num: Vue.filter('number'), num: Vue.filter('number'),
faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag, faRocket
}; };
}, },
@ -91,21 +118,7 @@ export default Vue.extend({
limit: 30, limit: 30,
params: { params: {
tag: this.tag, tag: this.tag,
state: 'alive', origin: 'combined',
origin: 'local',
sort: '+follower',
}
};
},
tagRemoteUsers(): any {
return {
endpoint: 'hashtags/users',
limit: 30,
params: {
tag: this.tag,
state: 'alive',
origin: 'remote',
sort: '+follower', sort: '+follower',
} }
}; };
@ -152,6 +165,28 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.localfedi7
overflow hidden
background var(--face)
color #fff
text-shadow 0 0 8px #000
border-radius 6px
padding 16px
margin-top 16px
margin-bottom 16px
height 80px
background-position 50%
background-size cover
> header
font-size 20px
font-weight bold
> div
font-size 14px
opacity 0.8
.localfedi7:first-child
margin-top 0
.vxjfqztj .vxjfqztj
padding 16px padding 16px
@ -160,35 +195,4 @@ export default Vue.extend({
&.local &.local
font-weight bold font-weight bold
.kpdsmpnk
min-height 100px
padding 16px
background-position center
background-size cover
&:before
content ""
display block
position absolute
top 0
left 0
width 100%
height 100%
background rgba(0, 0, 0, 0.3)
> div
color #fff
text-shadow 0 0 8px #00
> .title
display block
font-size 20px
font-weight bold
color inherit
> span
font-size 14px
opacity 0.8
</style> </style>

View file

@ -1,9 +1,9 @@
<template> <template>
<div class="kedshtep" :class="{ naked, inNakedDeckColumn, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }"> <div class="kedshtep" :class="{ naked, inNakedDeckColumn, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<header v-if="showHeader"> <header v-if="showHeader" :class="{ bodyTogglable }" @click="toggleContent(!showBody)">
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<slot name="func"></slot> <slot name="func"></slot>
<button v-if="bodyTogglable" @click="toggleContent(!showBody)"> <button v-if="bodyTogglable">
<template v-if="showBody"><fa icon="angle-up"/></template> <template v-if="showBody"><fa icon="angle-up"/></template>
<template v-else><fa icon="angle-down"/></template> <template v-else><fa icon="angle-down"/></template>
</button> </button>
@ -47,6 +47,7 @@ export default Vue.extend({
}, },
methods: { methods: {
toggleContent(show: boolean) { toggleContent(show: boolean) {
if (!this.bodyTogglable) return;
this.showBody = show; this.showBody = show;
this.$emit('toggle', show); this.$emit('toggle', show);
} }
@ -77,6 +78,9 @@ export default Vue.extend({
> header > header
background var(--faceHeader) background var(--faceHeader)
&.bodyTogglable
cursor pointer
> .title > .title
z-index 1 z-index 1
margin 0 margin 0
@ -120,6 +124,9 @@ export default Vue.extend({
color var(--text) color var(--text)
background var(--deckColumnBg) background var(--deckColumnBg)
&.bodyTogglable
cursor pointer
> button > button
position absolute position absolute
top 0 top 0

View file

@ -1,9 +1,9 @@
<template> <template>
<div class="ukygtjoj" :class="{ naked, inNakedDeckColumn, hideHeader: !showHeader, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }"> <div class="ukygtjoj" :class="{ naked, inNakedDeckColumn, hideHeader: !showHeader, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<header v-if="showHeader"> <header v-if="showHeader" @click="() => showBody = !showBody">
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<slot name="func"></slot> <slot name="func"></slot>
<button v-if="bodyTogglable" @click="() => showBody = !showBody"> <button v-if="bodyTogglable">
<template v-if="showBody"><fa icon="angle-up"/></template> <template v-if="showBody"><fa icon="angle-up"/></template>
<template v-else><fa icon="angle-down"/></template> <template v-else><fa icon="angle-down"/></template>
</button> </button>
@ -47,6 +47,7 @@ export default Vue.extend({
}, },
methods: { methods: {
toggleContent(show: boolean) { toggleContent(show: boolean) {
if (!this.bodyTogglable) return;
this.showBody = show; this.showBody = show;
} }
} }

BIN
src/client/assets/fedi.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB