Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve UI

Browse source
This commit is contained in:
syuilo 2019-02-16 10:58:44 +09:00
parent 5a28dc0198
commit 88dc4c83cb
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
19 changed files with 451 additions and 702 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/client/app/desktop/views/home/user/user.vue → src/client/app/desktop/views/home/user/index.vue
View file

@ -1,22 +1,10 @@
<template>
<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
<div class="omechnps" v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</div>
<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></div>
<div class="main">
<x-header :user="user"/>
<x-integrations :user="user" v-if="user.twitter || user.github || user.discord"/>
<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
<div class="activity">
<ui-container :body-togglable="true">
<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
<x-activity :user="user" :limit="35" style="padding: 16px;"/>
</ui-container>
</div>
<x-photos :user="user"/>
<x-friends :user="user"/>
<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
<x-timeline class="timeline" ref="tl" :user="user"/>
<x-header class="header" :user="user"/>
<router-view :user="user"></router-view>
</div>
</div>
</template>
@ -27,23 +15,11 @@ import i18n from '../../../../i18n';
import parseAcct from '../../../../../../misc/acct/parse';
import Progress from '../../../../common/scripts/loading';
import XHeader from './user.header.vue';
import XTimeline from './user.timeline.vue';
import XPhotos from './user.photos.vue';
import XFollowersYouKnow from './user.followers-you-know.vue';
import XFriends from './user.friends.vue';
import XIntegrations from './user.integrations.vue';
import XActivity from '../../../../common/views/components/activity.vue';
export default Vue.extend({
i18n: i18n(),
components: {
XHeader,
XTimeline,
XPhotos,
XFollowersYouKnow,
XFriends,
XIntegrations,
XActivity
XHeader
},
data() {
return {
@ -76,7 +52,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.xygkxeaeontfaokvqmiblezmhvhostak
.omechnps
width 100%
margin 0 auto
@ -100,10 +76,7 @@ export default Vue.extend({
font-weight bold
> .main
> *
> .header
margin-bottom 16px
> .timeline
box-shadow var(--shadow)
</style>

2
src/client/app/desktop/views/home/user/user.header.vue
View file

@ -40,7 +40,7 @@
<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', $t('year')).replace('-', $t('month')) + $t('day') }} ({{ $t('years-old', { age }) }})</span>
</div>
<div class="status">
<span class="notes-count"><b>{{ user.notesCount | number }}</b>{{ $t('posts') }}</span>
<router-link :to="user | userPage()" class="notes-count"><b>{{ user.notesCount | number }}</b>{{ $t('posts') }}</router-link>
<router-link :to="user | userPage('following')" class="following clickable"><b>{{ user.followingCount | number }}</b>{{ $t('following') }}</router-link>
<router-link :to="user | userPage('followers')" class="followers clickable"><b>{{ user.followersCount | number }}</b>{{ $t('followers') }}</router-link>
</div>

63
src/client/app/desktop/views/home/user/user.home.vue Normal file
View file

@ -0,0 +1,63 @@
<template>
<div class="lnctpgve">
<x-integrations :user="user" v-if="user.twitter || user.github || user.discord"/>
<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
<div class="activity">
<ui-container :body-togglable="true">
<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
<x-activity :user="user" :limit="35" style="padding: 16px;"/>
</ui-container>
</div>
<x-photos :user="user"/>
<x-friends :user="user"/>
<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
<x-timeline class="timeline" ref="tl" :user="user"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import parseAcct from '../../../../../../misc/acct/parse';
import Progress from '../../../../common/scripts/loading';
import XTimeline from './user.timeline.vue';
import XPhotos from './user.photos.vue';
import XFollowersYouKnow from './user.followers-you-know.vue';
import XFriends from './user.friends.vue';
import XIntegrations from './user.integrations.vue';
import XActivity from '../../../../common/views/components/activity.vue';
export default Vue.extend({
i18n: i18n(),
components: {
XTimeline,
XPhotos,
XFollowersYouKnow,
XFriends,
XIntegrations,
XActivity
},
props: {
user: {
type: Object,
required: true
}
},
methods: {
warp(date) {
(this.$refs.tl as any).warp(date);
}
}
});
</script>
<style lang="stylus" scoped>
.lnctpgve
> *
margin-bottom 16px
> .timeline
box-shadow var(--shadow)
</style>