sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UI

Browse Source
This commit is contained in:
syuilo
2019-02-16 10:58:44 +09:00
parent 5a28dc0198
commit 88dc4c83cb
19 changed files with 451 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/app/mobile/script.ts
View File

@@ -21,8 +21,6 @@ import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkReceivedFollowRequests from './views/pages/received-follow-requests.vue';
import MkNote from './views/pages/note.vue';
import MkSearch from './views/pages/search.vue';
import MkFollowers from './views/pages/followers.vue';
import MkFollowing from './views/pages/following.vue';
import MkFavorites from './views/pages/favorites.vue';
import MkUserLists from './views/pages/user-lists.vue';
import MkUserList from './views/pages/user-list.vue';
@@ -137,9 +135,11 @@ init((launch) => {
{ 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) },
{ path: '/@:user/followers', component: MkFollowers },
{ path: '/@:user/following', component: MkFollowing },
{ path: '/@:user', component: () => import('./views/pages/user/index.vue').then(m => m.default), children: [
{ path: '', name: 'user', component: () => import('./views/pages/user/home.vue').then(m => m.default) },
{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
{ path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) },
]},
{ path: '/notes/:note', component: MkNote },
{ path: '/authorize-follow', component: MkFollow },
{ path: '*', component: MkNotFound }

2
src/client/app/mobile/views/components/index.ts
View File

@@ -13,7 +13,6 @@ import friendsMaker from './friends-maker.vue';
import notification from './notification.vue';
import notifications from './notifications.vue';
import notificationPreview from './notification-preview.vue';
import usersList from './users-list.vue';
import userPreview from './user-preview.vue';
import userTimeline from './user-timeline.vue';
import userListTimeline from './user-list-timeline.vue';
@@ -33,7 +32,6 @@ Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-notification', notification);
Vue.component('mk-notifications', notifications);
Vue.component('mk-notification-preview', notificationPreview);
Vue.component('mk-users-list', usersList);
Vue.component('mk-user-preview', userPreview);
Vue.component('mk-user-timeline', userTimeline);
Vue.component('mk-user-list-timeline', userListTimeline);

135
src/client/app/mobile/views/components/users-list.vue
View File

@@ -1,135 +0,0 @@
<template>
<div class="mk-users-list">
<nav>
<span :data-active="mode == 'all'" @click="mode = 'all'">{{ $t('all') }}<span>{{ count }}</span></span>
<span v-if="$store.getters.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">{{ $t('known') }}<span>{{ youKnowCount }}</span></span>
</nav>
<div class="users" v-if="!fetching && users.length != 0">
<mk-user-preview v-for="u in users" :user="u" :key="u.id"/>
</div>
<ui-button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
<span v-if="!moreFetching">{{ $t('@.load-more') }}</span>
<span v-if="moreFetching">{{ $t('@.loading') }}<mk-ellipsis/></span>
</ui-button>
<p class="no" v-if="!fetching && users.length == 0">
<slot></slot>
</p>
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('mobile/views/components/users-list.vue'),
props: ['fetch', 'count', 'youKnowCount'],
data() {
return {
limit: 30,
mode: 'all',
fetching: true,
moreFetching: false,
users: [],
next: null
};
},
watch: {
mode() {
this._fetch();
}
},
mounted() {
this._fetch(() => {
this.$emit('loaded');
});
},
methods: {
_fetch(cb?) {
this.fetching = true;
this.fetch(this.mode == 'iknow', this.limit, null, obj => {
this.users = obj.users;
this.next = obj.next;
this.fetching = false;
if (cb) cb();
});
},
more() {
this.moreFetching = true;
this.fetch(this.mode == 'iknow', this.limit, this.next, obj => {
this.moreFetching = false;
this.users = this.users.concat(obj.users);
this.next = obj.next;
});
}
}
});
</script>
<style lang="stylus" scoped>
.mk-users-list
> nav
display flex
justify-content center
margin 0 auto
max-width 600px
border-bottom solid 1px rgba(#000, 0.2)
> span
display block
flex 1 1
text-align center
line-height 52px
font-size 14px
color #657786
border-bottom solid 2px transparent
&[data-active]
font-weight bold
color var(--primary)
border-color var(--primary)
> span
display inline-block
margin-left 4px
padding 2px 5px
font-size 12px
line-height 1
color #fff
background rgba(#000, 0.3)
border-radius 20px
> .users
margin 8px auto
max-width 500px
width calc(100% - 16px)
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(#000, 0.2)
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
> *
border-bottom solid 1px rgba(#000, 0.05)
> .no
margin 0
padding 16px
text-align center
color var(--text)
> .fetching
margin 0
padding 16px
text-align center
color var(--text)
> [data-icon]
margin-right 4px
</style>

70
src/client/app/mobile/views/pages/followers.vue
View File

@@ -1,70 +0,0 @@
<template>
<mk-ui>
<template slot="header" v-if="!fetching">
<img :src="user.avatarUrl" alt="">
<mfm :text="$t('followers-of', { name })" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
</template>
<mk-users-list
v-if="!fetching"
:fetch="fetchUsers"
:count="user.followersCount"
:you-know-count="user.followersYouKnowCount"
@loaded="onLoaded"
>
%i18n:@no-users%
</mk-users-list>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import Progress from '../../../common/scripts/loading';
import parseAcct from '../../../../../misc/acct/parse';
import getUserName from '../../../../../misc/get-user-name';
export default Vue.extend({
i18n: i18n('mobile/views/pages/followers.vue'),
data() {
return {
fetching: true,
user: null
};
},
computed: {
name() {
return getUserName(this.user);
}
},
watch: {
$route: 'fetch'
},
created() {
this.fetch();
},
methods: {
fetch() {
Progress.start();
this.fetching = true;
this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
this.user = user;
this.fetching = false;
document.title = `${this.$t('followers-of').replace('{}', this.name)} | ${this.$root.instanceName}`;
});
},
onLoaded() {
Progress.done();
},
fetchUsers(iknow, limit, cursor, cb) {
this.$root.api('users/followers', {
userId: this.user.id,
iknow: iknow,
limit: limit,
cursor: cursor ? cursor : undefined
}).then(cb);
}
}
});
</script>

69
src/client/app/mobile/views/pages/following.vue
View File

@@ -1,69 +0,0 @@
<template>
<mk-ui>
<template slot="header" v-if="!fetching">
<img :src="user.avatarUrl" alt="">
<mfm :text="$t('following-of', { name })" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
</template>
<mk-users-list
v-if="!fetching"
:fetch="fetchUsers"
:count="user.followingCount"
:you-know-count="user.followingYouKnowCount"
@loaded="onLoaded"
>
%i18n:@no-users%
</mk-users-list>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import Progress from '../../../common/scripts/loading';
import parseAcct from '../../../../../misc/acct/parse';
export default Vue.extend({
i18n: i18n('mobile/views/pages/following.vue'),
data() {
return {
fetching: true,
user: null
};
},
computed: {
name(): string {
return Vue.filter('userName')(this.user);
}
},
watch: {
$route: 'fetch'
},
created() {
this.fetch();
},
methods: {
fetch() {
Progress.start();
this.fetching = true;
this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
this.user = user;
this.fetching = false;
document.title = `${this.$t('followers-of').replace('{}', this.name)} | ${this.$root.instanceName}`;
});
},
onLoaded() {
Progress.done();
},
fetchUsers(iknow, limit, cursor, cb) {
this.$root.api('users/following', {
userId: this.user.id,
iknow: iknow,
limit: limit,
cursor: cursor ? cursor : undefined
}).then(cb);
}
}
});
</script>

37
src/client/app/mobile/views/pages/user.vue → src/client/app/mobile/views/pages/user/index.vue
View File

@@ -43,22 +43,22 @@
</p>
</div>
<div class="status">
<a>
<router-link :to="user | userPage()">
<b>{{ user.notesCount | number }}</b>
<i>{{ $t('notes') }}</i>
</a>
<a :href="user | userPage('following')">
</router-link>
<router-link :to="user | userPage('following')">
<b>{{ user.followingCount | number }}</b>
<i>{{ $t('following') }}</i>
</a>
<a :href="user | userPage('followers')">
</router-link>
<router-link :to="user | userPage('followers')">
<b>{{ user.followersCount | number }}</b>
<i>{{ $t('followers') }}</i>
</a>
</router-link>
</div>
</div>
</header>
<nav>
<nav v-if="$route.name == 'user'">
<div class="nav-container">
<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> {{ $t('overview') }}</a>
<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</a>
@@ -66,9 +66,12 @@
</div>
</nav>
<div class="body">
<x-home v-if="page == 'home'" :user="user"/>
<mk-user-timeline v-if="page == 'notes'" :user="user" key="tl"/>
<mk-user-timeline v-if="page == 'media'" :user="user" :with-media="true" key="media"/>
<template v-if="$route.name == 'user'">
<x-home v-if="page == 'home'" :user="user"/>
<mk-user-timeline v-if="page == 'notes'" :user="user" key="tl"/>
<mk-user-timeline v-if="page == 'media'" :user="user" :with-media="true" key="media"/>
</template>
<router-view :user="user"></router-view>
</div>
</main>
</mk-ui>
@@ -76,13 +79,13 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import i18n from '../../../../i18n';
import * as age from 's-age';
import parseAcct from '../../../../../misc/acct/parse';
import Progress from '../../../common/scripts/loading';
import XUserMenu from '../../../common/views/components/user-menu.vue';
import XHome from './user/home.vue';
import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
import parseAcct from '../../../../../../misc/acct/parse';
import Progress from '../../../../common/scripts/loading';
import XUserMenu from '../../../../common/views/components/user-menu.vue';
import XHome from './home.vue';
import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
export default Vue.extend({
i18n: i18n('mobile/views/pages/user.vue'),
@@ -93,7 +96,7 @@ export default Vue.extend({
return {
fetching: true,
user: null,
page: 'home'
page: this.$route.name == 'user' ? 'home' : null
};
},
computed: {