mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-13 13:37:31 -07:00
Exploreページを実装
This commit is contained in:
syuilo
parent
069c5b9a31
commit
d1513e97e1
20 changed files with 462 additions and 160 deletions
|
|
@ -60,6 +60,8 @@ common:
|
|||
trash: "ゴミ箱"
|
||||
drive: "ドライブ"
|
||||
messaging: "トーク"
|
||||
deck: "デッキ"
|
||||
explore: "みつける"
|
||||
|
||||
weekday-short:
|
||||
sunday: "日"
|
||||
|
|
@ -1084,7 +1086,6 @@ desktop/views/components/ui.header.account.vue:
|
|||
|
||||
desktop/views/components/ui.header.nav.vue:
|
||||
home: "ホーム"
|
||||
deck: "デッキ"
|
||||
game: "ゲーム"
|
||||
|
||||
desktop/views/components/ui.header.notifications.vue:
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ import urlPreview from './url-preview.vue';
|
|||
import fileTypeIcon from './file-type-icon.vue';
|
||||
import emoji from './emoji.vue';
|
||||
import welcomeTimeline from './welcome-timeline.vue';
|
||||
import userList from './user-list.vue';
|
||||
import uiInput from './ui/input.vue';
|
||||
import uiButton from './ui/button.vue';
|
||||
import uiHorizonGroup from './ui/horizon-group.vue';
|
||||
|
|
@ -79,6 +80,7 @@ Vue.component('mk-url-preview', urlPreview);
|
|||
Vue.component('mk-file-type-icon', fileTypeIcon);
|
||||
Vue.component('mk-emoji', emoji);
|
||||
Vue.component('mk-welcome-timeline', welcomeTimeline);
|
||||
Vue.component('mk-user-list', userList);
|
||||
Vue.component('ui-input', uiInput);
|
||||
Vue.component('ui-button', uiButton);
|
||||
Vue.component('ui-horizon-group', uiHorizonGroup);
|
||||
|
|
|
|||
73
src/client/app/common/views/components/user-list.vue
Normal file
73
src/client/app/common/views/components/user-list.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<ui-container :body-togglable="true">
|
||||
<template slot="header"><slot></slot></template>
|
||||
<div class="efvhhmdq">
|
||||
<div class="user" v-for="friend in users">
|
||||
<mk-avatar class="avatar" :user="friend"/>
|
||||
<div class="body">
|
||||
<router-link class="name" :to="friend | userPage" v-user-preview="friend.id"><mk-user-name :user="friend"/></router-link>
|
||||
<p class="username">@{{ friend | acct }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
users: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
iconOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.efvhhmdq
|
||||
> .user
|
||||
padding 16px
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
float left
|
||||
margin 0 12px 0 0
|
||||
width 42px
|
||||
height 42px
|
||||
border-radius 8px
|
||||
|
||||
> .body
|
||||
float left
|
||||
width calc(100% - 54px)
|
||||
|
||||
> .name
|
||||
margin 0
|
||||
font-size 16px
|
||||
line-height 24px
|
||||
color var(--text)
|
||||
|
||||
> .username
|
||||
display block
|
||||
margin 0
|
||||
font-size 15px
|
||||
line-height 16px
|
||||
color var(--text)
|
||||
opacity 0.7
|
||||
|
||||
</style>
|
||||
64
src/client/app/common/views/pages/explore.vue
Normal file
64
src/client/app/common/views/pages/explore.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div>
|
||||
<mk-user-list :users="verifiedUsers">
|
||||
<span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span>
|
||||
</mk-user-list>
|
||||
<mk-user-list :users="popularUsers">
|
||||
<span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span>
|
||||
</mk-user-list>
|
||||
<mk-user-list :users="recentlyUpdatedUsers">
|
||||
<span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span>
|
||||
</mk-user-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import { faChartLine } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('common/views/pages/explore.vue'),
|
||||
|
||||
data() {
|
||||
return {
|
||||
verifiedUsers: [],
|
||||
popularUsers: [],
|
||||
recentlyUpdatedUsers: [],
|
||||
faBookmark, faChartLine, faCommentAlt
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$root.api('users', {
|
||||
state: 'verified',
|
||||
origin: 'local',
|
||||
sort: '+follower',
|
||||
limit: 10
|
||||
}).then(users => {
|
||||
this.verifiedUsers = users;
|
||||
});
|
||||
|
||||
this.$root.api('users', {
|
||||
state: 'alive',
|
||||
origin: 'local',
|
||||
sort: '+follower',
|
||||
limit: 10
|
||||
}).then(users => {
|
||||
this.popularUsers = users;
|
||||
});
|
||||
|
||||
this.$root.api('users', {
|
||||
origin: 'local',
|
||||
sort: '+updatedAt',
|
||||
limit: 10
|
||||
}).then(users => {
|
||||
this.recentlyUpdatedUsers = users;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
</style>
|
||||
|
|
@ -135,6 +135,7 @@ init(async (launch, os) => {
|
|||
{ path: '/search', component: () => import('./views/deck/deck.search-column.vue').then(m => m.default) },
|
||||
{ path: '/tags/:tag', name: 'tag', component: () => import('./views/deck/deck.hashtag-column.vue').then(m => m.default) },
|
||||
{ path: '/featured', component: () => import('./views/deck/deck.featured-column.vue').then(m => m.default) },
|
||||
{ path: '/explore', component: () => import('./views/deck/deck.explore-column.vue').then(m => m.default) },
|
||||
{ path: '/i/favorites', component: () => import('./views/deck/deck.favorites-column.vue').then(m => m.default) }
|
||||
]}
|
||||
: { path: '/', component: MkHome, children: [
|
||||
|
|
@ -144,6 +145,7 @@ init(async (launch, os) => {
|
|||
{ path: '/search', component: () => import('./views/home/search.vue').then(m => m.default) },
|
||||
{ path: '/tags/:tag', name: 'tag', component: () => import('./views/home/tag.vue').then(m => m.default) },
|
||||
{ path: '/featured', component: () => import('./views/home/featured.vue').then(m => m.default) },
|
||||
{ path: '/explore', component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
|
||||
{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) }
|
||||
]},
|
||||
{ path: '/i/messaging/:user', component: MkMessagingRoom },
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="kedshtep" :class="{ naked }">
|
||||
<div class="kedshtep" :class="{ naked, inDeck }">
|
||||
<header v-if="showHeader">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<slot name="func"></slot>
|
||||
|
|
@ -31,6 +31,11 @@ export default Vue.extend({
|
|||
default: false
|
||||
},
|
||||
},
|
||||
inject: {
|
||||
inDeck: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showBody: true
|
||||
|
|
@ -41,49 +46,72 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.kedshtep
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
&.naked
|
||||
background transparent !important
|
||||
box-shadow none !important
|
||||
&:not(.inDeck)
|
||||
background var(--face)
|
||||
box-shadow var(--shadow)
|
||||
border-radius var(--round)
|
||||
|
||||
> header
|
||||
background var(--faceHeader)
|
||||
& + .kedshtep
|
||||
margin-top 16px
|
||||
|
||||
> .title
|
||||
z-index 1
|
||||
&.naked
|
||||
background transparent !important
|
||||
box-shadow none !important
|
||||
|
||||
> header
|
||||
background var(--faceHeader)
|
||||
|
||||
> .title
|
||||
z-index 1
|
||||
margin 0
|
||||
padding 0 16px
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color var(--faceHeaderText)
|
||||
box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
|
||||
|
||||
> [data-icon]
|
||||
margin-right 6px
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> button
|
||||
position absolute
|
||||
z-index 2
|
||||
top 0
|
||||
right 0
|
||||
padding 0
|
||||
width 42px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color var(--faceTextButton)
|
||||
|
||||
&:hover
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color var(--faceTextButtonActive)
|
||||
|
||||
&.inDeck
|
||||
background var(--face)
|
||||
|
||||
> header
|
||||
margin 0
|
||||
padding 0 16px
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color var(--faceHeaderText)
|
||||
box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
|
||||
padding 8px 16px
|
||||
font-size 12px
|
||||
color var(--text)
|
||||
background var(--deckColumnBg)
|
||||
|
||||
> [data-icon]
|
||||
margin-right 6px
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> button
|
||||
position absolute
|
||||
z-index 2
|
||||
top 0
|
||||
right 0
|
||||
padding 0
|
||||
width 42px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color var(--faceTextButton)
|
||||
|
||||
&:hover
|
||||
color var(--faceTextButtonHover)
|
||||
|
||||
&:active
|
||||
color var(--faceTextButtonActive)
|
||||
> button
|
||||
position absolute
|
||||
top 0
|
||||
right 8px
|
||||
padding 8px 6px
|
||||
font-size 14px
|
||||
color var(--text)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,13 @@
|
|||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li @click="toggleDeckMode">
|
||||
<p>
|
||||
<span>{{ $t('@.deck') }}</span>
|
||||
<template v-if="$store.state.device.deckMode"><i><fa :icon="faHome"/></i></template>
|
||||
<template v-else><i><fa :icon="faColumns"/></i></template>
|
||||
</p>
|
||||
</li>
|
||||
<li @click="dark">
|
||||
<p>
|
||||
<span>{{ $t('dark') }}</span>
|
||||
|
|
@ -90,12 +97,14 @@ import MkFollowRequestsWindow from './received-follow-requests-window.vue';
|
|||
import MkSettingsWindow from './settings-window.vue';
|
||||
import MkDriveWindow from './drive-window.vue';
|
||||
import contains from '../../../common/scripts/contains';
|
||||
import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('desktop/views/components/ui.header.account.vue'),
|
||||
data() {
|
||||
return {
|
||||
isOpen: false
|
||||
isOpen: false,
|
||||
faHome, faColumns
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -154,7 +163,11 @@ export default Vue.extend({
|
|||
key: 'darkmode',
|
||||
value: !this.$store.state.device.darkmode
|
||||
});
|
||||
}
|
||||
},
|
||||
toggleDeckMode() {
|
||||
this.$store.commit('device/set', { key: 'deckMode', value: !this.$store.state.device.deckMode });
|
||||
location.reload();
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div class="toltmoik">
|
||||
<button @click="open()" :title="$t('@.messaging')">
|
||||
<i class="bell"><fa :icon="faComments"/></i>
|
||||
<i class="circle" v-if="hasUnreadMessagingMessage"><fa icon="circle"/></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import MkMessagingWindow from './messaging-window.vue';
|
||||
import { faComments } from '@fortawesome/free-regular-svg-icons';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(),
|
||||
|
||||
data() {
|
||||
return {
|
||||
faComments
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasUnreadMessagingMessage(): boolean {
|
||||
return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open() {
|
||||
this.$root.new(MkMessagingWindow);
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.toltmoik
|
||||
> button
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
width 32px
|
||||
color var(--desktopHeaderFg)
|
||||
border none
|
||||
background transparent
|
||||
cursor pointer
|
||||
|
||||
*
|
||||
pointer-events none
|
||||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color var(--desktopHeaderHoverFg)
|
||||
|
||||
> i.bell
|
||||
font-size 1.2em
|
||||
line-height 48px
|
||||
|
||||
> i.circle
|
||||
margin-left -5px
|
||||
vertical-align super
|
||||
font-size 10px
|
||||
color var(--notificationIndicator)
|
||||
|
||||
</style>
|
||||
|
|
@ -1,34 +1,15 @@
|
|||
<template>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<template v-if="$store.getters.isSignedIn">
|
||||
<template v-if="$store.state.device.deckMode">
|
||||
<li class="deck active" @click="goToTop">
|
||||
<router-link to="/"><fa icon="columns"/><p>{{ $t('deck') }}</p></router-link>
|
||||
</li>
|
||||
<li class="home">
|
||||
<a @click="toggleDeckMode(false)"><fa icon="home"/><p>{{ $t('home') }}</p></a>
|
||||
</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li class="home active" @click="goToTop">
|
||||
<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
|
||||
</li>
|
||||
<li class="deck">
|
||||
<a @click="toggleDeckMode(true)"><fa icon="columns"/><p>{{ $t('deck') }}</p></a>
|
||||
</li>
|
||||
</template>
|
||||
<li class="messaging">
|
||||
<a @click="messaging">
|
||||
<fa icon="comments"/>
|
||||
<p>{{ $t('@.messaging') }}</p>
|
||||
<template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<li class="home active" @click="goToTop">
|
||||
<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
|
||||
</li>
|
||||
<li class="featured">
|
||||
<router-link to="/featured"><fa :icon="faNewspaper"/><p>{{ $t('@.featured-notes') }}</p></router-link>
|
||||
</li>
|
||||
<li class="explore">
|
||||
<router-link to="/explore"><fa :icon="faHashtag"/><p>{{ $t('@.explore') }}</p></router-link>
|
||||
</li>
|
||||
<li class="game">
|
||||
<a @click="game">
|
||||
<fa icon="gamepad"/>
|
||||
|
|
@ -43,9 +24,8 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import MkMessagingWindow from './messaging-window.vue';
|
||||
import MkGameWindow from './game-window.vue';
|
||||
import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('desktop/views/components/ui.header.nav.vue'),
|
||||
|
|
@ -53,14 +33,9 @@ export default Vue.extend({
|
|||
return {
|
||||
hasGameInvitations: false,
|
||||
connection: null,
|
||||
faNewspaper
|
||||
faNewspaper, faHashtag
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasUnreadMessagingMessage(): boolean {
|
||||
return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$store.getters.isSignedIn) {
|
||||
this.connection = this.$root.stream.useSharedConnection('main');
|
||||
|
|
@ -75,11 +50,6 @@ export default Vue.extend({
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
toggleDeckMode(deck) {
|
||||
this.$store.commit('device/set', { key: 'deckMode', value: deck });
|
||||
location.reload();
|
||||
},
|
||||
|
||||
onReversiInvited() {
|
||||
this.hasGameInvitations = true;
|
||||
},
|
||||
|
|
@ -88,10 +58,6 @@ export default Vue.extend({
|
|||
this.hasGameInvitations = false;
|
||||
},
|
||||
|
||||
messaging() {
|
||||
this.$root.new(MkMessagingWindow);
|
||||
},
|
||||
|
||||
game() {
|
||||
this.$root.new(MkGameWindow);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<div class="right">
|
||||
<x-search/>
|
||||
<x-account v-if="$store.getters.isSignedIn"/>
|
||||
<x-messaging v-if="$store.getters.isSignedIn"/>
|
||||
<x-notifications v-if="$store.getters.isSignedIn"/>
|
||||
<x-post v-if="$store.getters.isSignedIn"/>
|
||||
<x-clock v-if="$store.state.settings.showClockOnHeader" class="clock"/>
|
||||
|
|
@ -37,6 +38,7 @@ import XAccount from './ui.header.account.vue';
|
|||
import XNotifications from './ui.header.notifications.vue';
|
||||
import XPost from './ui.header.post.vue';
|
||||
import XClock from './ui.header.clock.vue';
|
||||
import XMessaging from './ui.header.messaging.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(),
|
||||
|
|
@ -45,6 +47,7 @@ export default Vue.extend({
|
|||
XSearch,
|
||||
XAccount,
|
||||
XNotifications,
|
||||
XMessaging,
|
||||
XPost,
|
||||
XClock
|
||||
},
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@ export default Vue.extend({
|
|||
height 280px
|
||||
overflow hidden
|
||||
font-size 13px
|
||||
text-align center
|
||||
background $bg
|
||||
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
|
||||
color var(--faceText)
|
||||
|
|
@ -54,7 +53,7 @@ export default Vue.extend({
|
|||
|
||||
> .avatar
|
||||
display block
|
||||
margin -40px auto 0 auto
|
||||
margin -40px 0 0 16px
|
||||
width 80px
|
||||
height 80px
|
||||
border-radius 100%
|
||||
|
|
@ -67,6 +66,7 @@ export default Vue.extend({
|
|||
|
||||
> .body
|
||||
padding 0px 24px
|
||||
margin-top -40px
|
||||
|
||||
> .name
|
||||
font-size 120%
|
||||
|
|
|
|||
|
|
@ -109,7 +109,8 @@ export default Vue.extend({
|
|||
return {
|
||||
column: this,
|
||||
isScrollTop: this.isScrollTop,
|
||||
count: v => this.count = v
|
||||
count: v => this.count = v,
|
||||
inDeck: !this.naked
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
34
src/client/app/desktop/views/deck/deck.explore-column.vue
Normal file
34
src/client/app/desktop/views/deck/deck.explore-column.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<x-column>
|
||||
<span slot="header">
|
||||
<fa :icon="faHashtag"/>{{ $t('@.explore') }}
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<x-explore/>
|
||||
</div>
|
||||
</x-column>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import XColumn from './deck.column.vue';
|
||||
import XExplore from '../../../common/views/pages/explore.vue';
|
||||
import { faHashtag } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(),
|
||||
|
||||
components: {
|
||||
XColumn,
|
||||
XExplore,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
faHashtag
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -56,19 +56,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
|
||||
<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</p>
|
||||
<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
|
||||
<span class="angle" v-else><fa icon="angle-down"/></span>
|
||||
<div class="notes" v-show="showPinned">
|
||||
<ui-container v-if="user.pinnedNotes && user.pinnedNotes.length > 0" :body-togglable="true">
|
||||
<span slot="header"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</span>
|
||||
<div>
|
||||
<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="images" v-if="images.length > 0">
|
||||
<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> {{ $t('images') }}</p>
|
||||
<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
|
||||
<span class="angle" v-else><fa icon="angle-down"/></span>
|
||||
<div v-show="showImages">
|
||||
</ui-container>
|
||||
<ui-container v-if="images.length > 0" :body-togglable="true">
|
||||
<span slot="header"><fa :icon="['far', 'images']"/> {{ $t('images') }}</span>
|
||||
<div class="sainvnaq">
|
||||
<router-link v-for="image in images"
|
||||
:style="`background-image: url(${image.thumbnailUrl})`"
|
||||
:key="`${image.id}:${image._note.id}`"
|
||||
|
|
@ -76,21 +72,19 @@
|
|||
:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
|
||||
></router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity">
|
||||
<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</p>
|
||||
<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
|
||||
<span class="angle" v-else><fa icon="angle-down"/></span>
|
||||
<div v-show="showActivity">
|
||||
</ui-container>
|
||||
<ui-container :body-togglable="true">
|
||||
<span slot="header"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</span>
|
||||
<div>
|
||||
<div ref="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl">
|
||||
<p class="caption"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</p>
|
||||
</ui-container>
|
||||
<ui-container>
|
||||
<span slot="header"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</span>
|
||||
<div>
|
||||
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
|
||||
</div>
|
||||
</div>
|
||||
</ui-container>
|
||||
</div>
|
||||
</x-column>
|
||||
</template>
|
||||
|
|
@ -124,9 +118,6 @@ export default Vue.extend({
|
|||
moreFetching: false,
|
||||
withFiles: false,
|
||||
images: [],
|
||||
showPinned: true,
|
||||
showImages: true,
|
||||
showActivity: true
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -314,18 +305,6 @@ export default Vue.extend({
|
|||
source: this.$refs.menu,
|
||||
user: this.user
|
||||
});
|
||||
},
|
||||
|
||||
toggleShowPinned() {
|
||||
this.showPinned = !this.showPinned;
|
||||
},
|
||||
|
||||
toggleShowImages() {
|
||||
this.showImages = !this.showImages;
|
||||
},
|
||||
|
||||
toggleShowActivity() {
|
||||
this.showActivity = !this.showActivity;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -469,39 +448,18 @@ export default Vue.extend({
|
|||
font-size 80%
|
||||
opacity 0.7
|
||||
|
||||
> *
|
||||
> p.caption
|
||||
margin 0
|
||||
padding 8px 16px
|
||||
font-size 12px
|
||||
color var(--text)
|
||||
.sainvnaq
|
||||
display grid
|
||||
grid-template-columns 1fr 1fr 1fr
|
||||
gap 8px
|
||||
padding 16px
|
||||
|
||||
& + .angle
|
||||
position absolute
|
||||
top 0
|
||||
right 8px
|
||||
padding 6px
|
||||
font-size 14px
|
||||
color var(--text)
|
||||
|
||||
> .pinned
|
||||
> .notes
|
||||
background var(--face)
|
||||
|
||||
> .images
|
||||
> 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
|
||||
> div
|
||||
|
|
|
|||
|
|
@ -134,6 +134,7 @@ init((launch) => {
|
|||
{ path: '/search', component: MkSearch },
|
||||
{ path: '/tags/:tag', component: MkTag },
|
||||
{ path: '/featured', name: 'featured', component: () => import('./views/pages/featured.vue').then(m => m.default) },
|
||||
{ path: '/explore', name: 'explore', component: () => import('./views/pages/explore.vue').then(m => m.default) },
|
||||
{ path: '/share', component: MkShare },
|
||||
{ path: '/games/reversi/:game?', name: 'reversi', component: MkReversi },
|
||||
{ path: '/@:user', component: () => import('./views/pages/user.vue').then(m => m.default) },
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
<header v-if="showHeader">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<slot name="func"></slot>
|
||||
<button v-if="bodyTogglable" @click="() => showBody = !showBody">
|
||||
<template v-if="showBody"><fa icon="angle-up"/></template>
|
||||
<template v-else><fa icon="angle-down"/></template>
|
||||
</button>
|
||||
</header>
|
||||
<div v-show="showBody">
|
||||
<slot></slot>
|
||||
|
|
@ -21,7 +25,16 @@ export default Vue.extend({
|
|||
naked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
bodyTogglable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showBody: true
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'"><i><fa :icon="['far', 'comments']" fixed-width/></i>{{ $t('@.messaging') }}<i v-if="hasUnreadMessagingMessage" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
|
||||
<li v-if="$store.getters.isSignedIn && ($store.state.i.isLocked || $store.state.i.carefulBot)"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'"><i><fa :icon="['far', 'envelope']" fixed-width/></i>{{ $t('follow-requests') }}<i v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
|
||||
<li><router-link to="/featured" :data-active="$route.name == 'featured'"><i><fa :icon="faNewspaper" fixed-width/></i>{{ $t('@.featured-notes') }}<i><fa icon="angle-right"/></i></router-link></li>
|
||||
<li><router-link to="/explore" :data-active="$route.name == 'explore'"><i><fa :icon="faHashtag" fixed-width/></i>{{ $t('@.explore') }}<i><fa icon="angle-right"/></i></router-link></li>
|
||||
<li><router-link to="/games/reversi" :data-active="$route.name == 'reversi'"><i><fa icon="gamepad" fixed-width/></i>{{ $t('game') }}<i v-if="hasGameInvitation" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
|
||||
</ul>
|
||||
<ul>
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import { lang } from '../../../config';
|
||||
import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/components/ui.nav.vue'),
|
||||
|
|
@ -64,7 +65,7 @@ export default Vue.extend({
|
|||
aboutUrl: `/docs/${lang}/about`,
|
||||
announcements: [],
|
||||
searching: false,
|
||||
faNewspaper
|
||||
faNewspaper, faHashtag
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
37
src/client/app/mobile/views/pages/explore.vue
Normal file
37
src/client/app/mobile/views/pages/explore.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header"><span style="margin-right:4px;"><fa :icon="faHashtag"/></span>{{ $t('@.explore') }}</span>
|
||||
|
||||
<main>
|
||||
<x-explore/>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../i18n';
|
||||
import { faHashtag } from '@fortawesome/free-solid-svg-icons';
|
||||
import XExplore from '../../../common/views/pages/explore.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(''),
|
||||
components: {
|
||||
XExplore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
faHashtag
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
main
|
||||
width 100%
|
||||
max-width 680px
|
||||
margin 0 auto
|
||||
padding 8px
|
||||
|
||||
</style>
|
||||
|
|
@ -15,6 +15,9 @@ import Emoji from './emoji';
|
|||
|
||||
const User = db.get<IUser>('users');
|
||||
|
||||
User.createIndex('createdAt');
|
||||
User.createIndex('updatedAt');
|
||||
User.createIndex('followersCount');
|
||||
User.createIndex('username');
|
||||
User.createIndex('usernameLower');
|
||||
User.createIndex('host');
|
||||
|
|
|
|||
|
|
@ -27,6 +27,18 @@ export const meta = {
|
|||
]),
|
||||
},
|
||||
|
||||
state: {
|
||||
validator: $.optional.str.or([
|
||||
'all',
|
||||
'admin',
|
||||
'moderator',
|
||||
'adminOrModerator',
|
||||
'verified',
|
||||
'alive'
|
||||
]),
|
||||
default: 'all'
|
||||
},
|
||||
|
||||
origin: {
|
||||
validator: $.optional.str.or([
|
||||
'combined',
|
||||
|
|
@ -72,10 +84,32 @@ export default define(meta, (ps, me) => new Promise(async (res, rej) => {
|
|||
};
|
||||
}
|
||||
|
||||
const q =
|
||||
const q = {
|
||||
$and: []
|
||||
} as any;
|
||||
|
||||
// state
|
||||
q.$and.push(
|
||||
ps.state == 'admin' ? { isAdmin: true } :
|
||||
ps.state == 'moderator' ? { isModerator: true } :
|
||||
ps.state == 'adminOrModerator' ? {
|
||||
$or: [{
|
||||
isAdmin: true
|
||||
}, {
|
||||
isModerator: true
|
||||
}]
|
||||
} :
|
||||
ps.state == 'verified' ? { isVerified: true } :
|
||||
ps.state == 'alive' ? { updatedAt: { $gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 5)) } } :
|
||||
{}
|
||||
);
|
||||
|
||||
// origin
|
||||
q.$and.push(
|
||||
ps.origin == 'local' ? { host: null } :
|
||||
ps.origin == 'remote' ? { host: { $ne: null } } :
|
||||
{};
|
||||
{}
|
||||
);
|
||||
|
||||
const users = await User
|
||||
.find(q, {
|
||||
|
|
|
|||
Loading…
Reference in a new issue