diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 7055cdb4c6..672c9710be 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -413,9 +413,11 @@ common/views/pages/explore.vue: popular-users: "人気のユーザー" recently-updated-users: "最近投稿したユーザー" recently-registered-users: "新規ユーザー" + recently-discovered-users: "最近発見されたユーザー" popular-tags: "人気のタグ" federated: "連合" explore: "{host}を探索" + explore-fediverse: "Fediverseを探索" users-info: "現在{users}ユーザーが登録されています" common/views/components/reactions-viewer.details.vue: diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue index 9cf6971338..4ba4e67e54 100644 --- a/src/client/app/common/views/components/user-list.vue +++ b/src/client/app/common/views/components/user-list.vue @@ -1,5 +1,5 @@ <template> -<ui-container :body-togglable="true"> +<ui-container :body-togglable="true" :expanded="expanded"> <template #header><slot></slot></template> <mk-error v-if="error" @retry="init()"/> @@ -50,7 +50,11 @@ export default Vue.extend({ iconOnly: { type: Boolean, default: false - } + }, + expanded: { + type: Boolean, + default: true + }, }, computed: { diff --git a/src/client/app/common/views/pages/explore.vue b/src/client/app/common/views/pages/explore.vue index 507b0638b9..fe844936f8 100644 --- a/src/client/app/common/views/pages/explore.vue +++ b/src/client/app/common/views/pages/explore.vue @@ -1,15 +1,30 @@ <template> <div> - <ui-container :show-header="false" v-if="meta && stats"> - <div class="kpdsmpnk" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"> - <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> - </ui-container> + <div class="localfedi7" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"> + <header>{{ $t('explore', { host: meta.name }) }}</header> + <div>{{ $t('users-info', { users: num(stats.originalUsersCount) }) }}</div> + </div> - <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> <div class="vxjfqztj"> @@ -18,25 +33,18 @@ </div> </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 }} </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"> - <mk-user-list :pagination="pinnedUsers"> - <fa :icon="faBookmark" fixed-width/>{{ $t('pinned-users') }} - </mk-user-list> - <mk-user-list :pagination="popularUsers"> + <mk-user-list :pagination="popularUsersF" :expanded="false"> <fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }} </mk-user-list> - <mk-user-list :pagination="recentlyUpdatedUsers"> + <mk-user-list :pagination="recentlyUpdatedUsersF" :expanded="false"> <fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }} </mk-user-list> - <mk-user-list :pagination="recentlyRegisteredUsers"> - <fa :icon="faPlus" fixed-width/>{{ $t('recently-registered-users') }} + <mk-user-list :pagination="recentlyRegisteredUsersF" :expanded="false"> + <fa :icon="faRocket" fixed-width/>{{ $t('recently-discovered-users') }} </mk-user-list> </template> </div> @@ -45,7 +53,7 @@ <script lang="ts"> import Vue from 'vue'; 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'; export default Vue.extend({ @@ -58,6 +66,12 @@ export default Vue.extend({ } }, + inject: { + inNakedDeckColumn: { + default: false + } + }, + data() { return { pinnedUsers: { endpoint: 'pinned-users' }, @@ -75,12 +89,25 @@ export default Vue.extend({ state: 'alive', 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: [], tagsRemote: [], stats: null, meta: null, 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, params: { tag: this.tag, - state: 'alive', - origin: 'local', - sort: '+follower', - } - }; - }, - - tagRemoteUsers(): any { - return { - endpoint: 'hashtags/users', - limit: 30, - params: { - tag: this.tag, - state: 'alive', - origin: 'remote', + origin: 'combined', sort: '+follower', } }; @@ -152,6 +165,28 @@ export default Vue.extend({ </script> <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 padding 16px @@ -160,35 +195,4 @@ export default Vue.extend({ &.local 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> diff --git a/src/client/app/desktop/views/components/ui-container.vue b/src/client/app/desktop/views/components/ui-container.vue index 0489d49982..59954fee8e 100644 --- a/src/client/app/desktop/views/components/ui-container.vue +++ b/src/client/app/desktop/views/components/ui-container.vue @@ -1,9 +1,9 @@ <template> <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> <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-else><fa icon="angle-down"/></template> </button> @@ -47,6 +47,7 @@ export default Vue.extend({ }, methods: { toggleContent(show: boolean) { + if (!this.bodyTogglable) return; this.showBody = show; this.$emit('toggle', show); } @@ -77,6 +78,9 @@ export default Vue.extend({ > header background var(--faceHeader) + &.bodyTogglable + cursor pointer + > .title z-index 1 margin 0 @@ -120,6 +124,9 @@ export default Vue.extend({ color var(--text) background var(--deckColumnBg) + &.bodyTogglable + cursor pointer + > button position absolute top 0 diff --git a/src/client/app/mobile/views/components/ui-container.vue b/src/client/app/mobile/views/components/ui-container.vue index 73310c02ec..08af7035f9 100644 --- a/src/client/app/mobile/views/components/ui-container.vue +++ b/src/client/app/mobile/views/components/ui-container.vue @@ -1,9 +1,9 @@ <template> <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> <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-else><fa icon="angle-down"/></template> </button> @@ -47,6 +47,7 @@ export default Vue.extend({ }, methods: { toggleContent(show: boolean) { + if (!this.bodyTogglable) return; this.showBody = show; } } diff --git a/src/client/assets/fedi.jpg b/src/client/assets/fedi.jpg new file mode 100644 index 0000000000..cbf3748eb8 Binary files /dev/null and b/src/client/assets/fedi.jpg differ