Exploreページを実装

This commit is contained in:
syuilo 2019-02-16 06:50:58 +09:00
parent 8c8f165a6e
commit c2b1bbeec5
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
20 changed files with 462 additions and 160 deletions

View file

@ -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:

View file

@ -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);

View 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>

View 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>

View file

@ -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 },

View file

@ -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,10 +46,15 @@ export default Vue.extend({
<style lang="stylus" scoped>
.kedshtep
overflow hidden
&:not(.inDeck)
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
& + .kedshtep
margin-top 16px
&.naked
background transparent !important
@ -86,4 +96,22 @@ export default Vue.extend({
&:active
color var(--faceTextButtonActive)
&.inDeck
background var(--face)
> header
margin 0
padding 8px 16px
font-size 12px
color var(--text)
background var(--deckColumnBg)
> button
position absolute
top 0
right 8px
padding 8px 6px
font-size 14px
color var(--text)
</style>

View file

@ -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>

View file

@ -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>

View file

@ -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="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);
},

View file

@ -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
},

View file

@ -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%

View file

@ -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
};
},

View 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>

View file

@ -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,32 +448,11 @@ export default Vue.extend({
font-size 80%
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
> div
.sainvnaq
display grid
grid-template-columns 1fr 1fr 1fr
gap 8px
padding 16px
background var(--face)
> *
height 70px

View file

@ -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) },

View file

@ -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>

View file

@ -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
};
},

View 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>

View file

@ -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');

View file

@ -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, {