This commit is contained in:
syuilo 2018-02-21 01:39:51 +09:00
parent 34f91f04ad
commit b2a6257f93
31 changed files with 100 additions and 94 deletions

View file

@ -2,7 +2,7 @@
<div class="index"> <div class="index">
<main v-if="os.isSignedIn"> <main v-if="os.isSignedIn">
<p class="fetching" v-if="fetching">読み込み中<mk-ellipsis/></p> <p class="fetching" v-if="fetching">読み込み中<mk-ellipsis/></p>
<fo-rm <x-form
ref="form" ref="form"
v-if="state == 'waiting'" v-if="state == 'waiting'"
:session="session" :session="session"
@ -32,11 +32,11 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import Form from './form.vue'; import XForm from './form.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'fo-rm': Form XForm
}, },
data() { data() {
return { return {

View file

@ -15,9 +15,7 @@ import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.vue'; import streamIndicator from './stream-indicator.vue';
import ellipsis from './ellipsis.vue'; import ellipsis from './ellipsis.vue';
import messaging from './messaging.vue'; import messaging from './messaging.vue';
import messagingForm from './messaging-form.vue';
import messagingRoom from './messaging-room.vue'; import messagingRoom from './messaging-room.vue';
import messagingMessage from './messaging-message.vue';
import urlPreview from './url-preview.vue'; import urlPreview from './url-preview.vue';
Vue.component('mk-signin', signin); Vue.component('mk-signin', signin);
@ -35,7 +33,5 @@ Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator); Vue.component('mk-stream-indicator', streamIndicator);
Vue.component('mk-ellipsis', ellipsis); Vue.component('mk-ellipsis', ellipsis);
Vue.component('mk-messaging', messaging); Vue.component('mk-messaging', messaging);
Vue.component('mk-messaging-form', messagingForm);
Vue.component('mk-messaging-room', messagingRoom); Vue.component('mk-messaging-room', messagingRoom);
Vue.component('mk-messaging-message', messagingMessage);
Vue.component('mk-url-preview', urlPreview); Vue.component('mk-url-preview', urlPreview);

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-messaging-message" :data-is-me="isMe"> <div class="message" :data-is-me="isMe">
<a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank"> <a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank">
<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/> <img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
</a> </a>
@ -51,7 +51,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-messaging-message .message
$me-balloon-color = #23A7B6 $me-balloon-color = #23A7B6
padding 10px 12px 10px 12px padding 10px 12px 10px 12px
@ -181,7 +181,7 @@ export default Vue.extend({
> [data-fa] > [data-fa]
margin-left 4px margin-left 4px
&:not([data-is-me='true']) &:not([data-is-me])
> .avatar-anchor > .avatar-anchor
float left float left
@ -201,7 +201,7 @@ export default Vue.extend({
> footer > footer
text-align left text-align left
&[data-is-me='true'] &[data-is-me]
> .avatar-anchor > .avatar-anchor
float right float right
@ -224,14 +224,14 @@ export default Vue.extend({
> p.is-deleted > p.is-deleted
color rgba(255, 255, 255, 0.5) color rgba(255, 255, 255, 0.5)
> [ref='text'] > .text
&, * &, *
color #fff !important color #fff !important
> footer > footer
text-align right text-align right
&[data-is-deleted='true'] &[data-is-deleted]
> .content-container > .content-container
opacity 0.5 opacity 0.5

View file

@ -8,14 +8,16 @@
<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }} <template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }}
</button> </button>
<template v-for="(message, i) in _messages"> <template v-for="(message, i) in _messages">
<mk-messaging-message :message="message" :key="message.id"/> <x-message :message="message" :key="message.id"/>
<p class="date" :key="message.id + '-time'" v-if="i != messages.length - 1 && message._date != _messages[i + 1]._date"><span>{{ _messages[i + 1]._datetext }}</span></p> <p class="date" v-if="i != messages.length - 1 && message._date != _messages[i + 1]._date">
<span>{{ _messages[i + 1]._datetext }}</span>
</p>
</template> </template>
</div> </div>
<footer> <footer>
<div ref="notifications"></div> <div ref="notifications"></div>
<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div> <div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
<mk-messaging-form :user="user"/> <x-form :user="user"/>
</footer> </footer>
</div> </div>
</template> </template>
@ -23,8 +25,14 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MessagingStreamConnection from '../../scripts/streaming/messaging-stream'; import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
import XMessage from './messaging-room.message.vue';
import XForm from './messaging-room.form.vue';
export default Vue.extend({ export default Vue.extend({
components: {
XMessage,
XForm
},
props: ['user', 'isNaked'], props: ['user', 'isNaked'],
data() { data() {
return { return {

View file

@ -6,21 +6,21 @@
</template> </template>
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<template v-else> <template v-else>
<mk-activity-widget-calender v-show="view == 0" :data="[].concat(activity)"/> <x-calender v-show="view == 0" :data="[].concat(activity)"/>
<mk-activity-widget-chart v-show="view == 1" :data="[].concat(activity)"/> <x-chart v-show="view == 1" :data="[].concat(activity)"/>
</template> </template>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import Calendar from './activity.calendar.vue'; import XCalendar from './activity.calendar.vue';
import Chart from './activity.chart.vue'; import XChart from './activity.chart.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'mk-activity-widget-calender': Calendar, XCalendar,
'mk-activity-widget-chart': Chart XChart
}, },
props: { props: {
design: { design: {

View file

@ -1,6 +1,6 @@
<template> <template>
<ul class="menu"> <ul class="menu">
<li v-for="(item, i) in menu" :key="i" :class="item.type"> <li v-for="(item, i) in menu" :class="item.type">
<template v-if="item.type == 'item'"> <template v-if="item.type == 'item'">
<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p> <p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
</template> </template>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="context-menu" :style="{ left: `${x}px`, top: `${y}px` }" @contextmenu.prevent="() => {}"> <div class="context-menu" :style="{ left: `${x}px`, top: `${y}px` }" @contextmenu.prevent="() => {}">
<me-nu :menu="menu" @x="click"/> <x-menu :menu="menu" @x="click"/>
</div> </div>
</template> </template>
@ -8,11 +8,11 @@
import Vue from 'vue'; import Vue from 'vue';
import * as anime from 'animejs'; import * as anime from 'animejs';
import contains from '../../../common/scripts/contains'; import contains from '../../../common/scripts/contains';
import meNu from './context-menu.menu.vue'; import XMenu from './context-menu.menu.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'me-nu': meNu XMenu
}, },
props: ['x', 'y', 'menu'], props: ['x', 'y', 'menu'],
mounted() { mounted() {

View file

@ -4,7 +4,7 @@
<div class="path" @contextmenu.prevent.stop="() => {}"> <div class="path" @contextmenu.prevent.stop="() => {}">
<mk-drive-nav-folder :class="{ current: folder == null }"/> <mk-drive-nav-folder :class="{ current: folder == null }"/>
<template v-for="folder in hierarchyFolders"> <template v-for="folder in hierarchyFolders">
<span class="separator" :key="folder.id + '>'">%fa:angle-right%</span> <span class="separator">%fa:angle-right%</span>
<mk-drive-nav-folder :folder="folder" :key="folder.id"/> <mk-drive-nav-folder :folder="folder" :key="folder.id"/>
</template> </template>
<span class="separator" v-if="folder != null">%fa:angle-right%</span> <span class="separator" v-if="folder != null">%fa:angle-right%</span>
@ -26,13 +26,13 @@
<div class="folders" ref="foldersContainer" v-if="folders.length > 0"> <div class="folders" ref="foldersContainer" v-if="folders.length > 0">
<mk-drive-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/> <mk-drive-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid --> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="n in 16" :key="n"></div> <div class="padding" v-for="n in 16"></div>
<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button> <button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
</div> </div>
<div class="files" ref="filesContainer" v-if="files.length > 0"> <div class="files" ref="filesContainer" v-if="files.length > 0">
<mk-drive-file v-for="file in files" :key="file.id" class="file" :file="file"/> <mk-drive-file v-for="file in files" :key="file.id" class="file" :file="file"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid --> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="n in 16" :key="n"></div> <div class="padding" v-for="n in 16"></div>
<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button> <button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
</div> </div>
<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching"> <div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">

View file

@ -79,7 +79,7 @@ import XSub from './post-detail.sub.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-sub': XSub XSub
}, },
props: { props: {
post: { post: {

View file

@ -95,7 +95,7 @@ function focus(el, fn) {
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-sub': XSub XSub
}, },
props: ['post'], props: ['post'],
data() { data() {

View file

@ -2,7 +2,10 @@
<div class="mk-posts"> <div class="mk-posts">
<template v-for="(post, i) in _posts"> <template v-for="(post, i) in _posts">
<x-post :post.sync="post" :key="post.id"/> <x-post :post.sync="post" :key="post.id"/>
<p class="date" :key="post.id + '-time'" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p> <p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
<span>%fa:angle-up%{{ post._datetext }}</span>
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
</p>
</template> </template>
<footer> <footer>
<slot name="footer"></slot> <slot name="footer"></slot>
@ -16,7 +19,7 @@ import XPost from './posts.post.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-post': XPost XPost
}, },
props: { props: {
posts: { posts: {

View file

@ -77,7 +77,7 @@ import XProfile from './settings.profile.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-profile': XProfile XProfile
}, },
data() { data() {
return { return {

View file

@ -33,12 +33,12 @@ import XClock from './ui.header.clock.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-nav': XNav, XNav,
'x-search': XSearch, XSearch,
'x-account': XAccount, XAccount,
'x-notifications': XNotifications, XNotifications,
'x-post': XPost, XPost,
'x-clock': XClock, XClock,
} }
}); });
</script> </script>

View file

@ -14,7 +14,7 @@ import XHeader from './ui.header.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-header': XHeader XHeader
}, },
mounted() { mounted() {
document.addEventListener('keydown', this.onKeydown); document.addEventListener('keydown', this.onKeydown);

View file

@ -15,7 +15,7 @@ import XPie from './server.pie.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-pie': XPie XPie
}, },
props: ['connection', 'meta'], props: ['connection', 'meta'],
data() { data() {

View file

@ -16,7 +16,7 @@ import XPie from './server.pie.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-pie': XPie XPie
}, },
props: ['connection'], props: ['connection'],
data() { data() {

View file

@ -16,7 +16,7 @@ import XPie from './server.pie.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'x-pie': XPie XPie
}, },
props: ['connection'], props: ['connection'],
data() { data() {

View file

@ -33,12 +33,12 @@ export default define({
} }
}).extend({ }).extend({
components: { components: {
'x-cpu-and-memory': XCpuMemory, XCpuMemory,
'x-cpu': XCpu, XCpu,
'x-memory': XMemory, XMemory,
'x-disk': XDisk, XDisk,
'x-uptimes': XUptimes, XUptimes,
'x-info': XInfo XInfo
}, },
data() { data() {
return { return {

View file

@ -1,16 +1,16 @@
<template> <template>
<component v-bind:is="os.isSignedIn ? 'home' : 'welcome'"></component> <component :is="os.isSignedIn ? 'home' : 'welcome'"></component>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import HomeView from './home.vue'; import Home from './home.vue';
import WelcomeView from './welcome.vue'; import Welcome from './welcome.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
home: HomeView, Home,
welcome: WelcomeView Welcome
} }
}); });
</script> </script>

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-followers-you-know"> <div class="followers-you-know">
<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p> <p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p> <p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0"> <div v-if="!fetching && users.length > 0">
@ -35,7 +35,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-followers-you-know .followers-you-know
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px border-radius 6px

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-friends"> <div class="friends">
<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p> <p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p> <p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
<template v-if="!fetching && users.length != 0"> <template v-if="!fetching && users.length != 0">
@ -41,7 +41,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-friends .friends
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px border-radius 6px

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-header" :data-is-dark-background="user.banner_url != null"> <div class="header" :data-is-dark-background="user.banner_url != null">
<div class="banner-container" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''"> <div class="banner-container" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''">
<div class="banner" ref="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div> <div class="banner" ref="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
</div> </div>
@ -62,7 +62,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-header .header
$banner-height = 320px $banner-height = 320px
$footer-height = 58px $footer-height = 58px

View file

@ -1,22 +1,22 @@
<template> <template>
<div class="mk-user-home"> <div class="home">
<div> <div>
<div ref="left"> <div ref="left">
<mk-user-profile :user="user"/> <x-profile :user="user"/>
<mk-user-photos :user="user"/> <x-photos :user="user"/>
<mk-user-followers-you-know v-if="os.isSignedIn && os.i.id != user.id" :user="user"/> <x-followers-you-know v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
<p>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p> <p>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p>
</div> </div>
</div> </div>
<main> <main>
<mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/> <mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/>
<mk-user-timeline ref="tl" :user="user"/> <x-timeline ref="tl" :user="user"/>
</main> </main>
<div> <div>
<div ref="right"> <div ref="right">
<mk-calendar @chosen="warp" :start="new Date(user.created_at)"/> <mk-calendar @chosen="warp" :start="new Date(user.created_at)"/>
<mk-activity :user="user"/> <mk-activity :user="user"/>
<mk-user-friends :user="user"/> <x-friends :user="user"/>
<div class="nav"><mk-nav/></div> <div class="nav"><mk-nav/></div>
</div> </div>
</div> </div>
@ -25,19 +25,19 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkUserTimeline from './user-timeline.vue'; import XUserTimeline from './user.timeline.vue';
import MkUserProfile from './user-profile.vue'; import XUserProfile from './user.profile.vue';
import MkUserPhotos from './user-photos.vue'; import XUserPhotos from './user.photos.vue';
import MkUserFollowersYouKnow from './user-followers-you-know.vue'; import XUserFollowersYouKnow from './user.followers-you-know.vue';
import MkUserFriends from './user-friends.vue'; import XUserFriends from './user.friends.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'mk-user-timeline': MkUserTimeline, XUserTimeline,
'mk-user-profile': MkUserProfile, XUserProfile,
'mk-user-photos': MkUserPhotos, XUserPhotos,
'mk-user-followers-you-know': MkUserFollowersYouKnow, XUserFollowersYouKnow,
'mk-user-friends': MkUserFriends XUserFriends
}, },
props: ['user'], props: ['user'],
methods: { methods: {
@ -49,7 +49,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-home .home
display flex display flex
justify-content center justify-content center
margin 0 auto margin 0 auto

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-photos"> <div class="photos">
<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p> <p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p> <p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0"> <div class="stream" v-if="!fetching && images.length > 0">
@ -39,7 +39,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-photos .photos
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px border-radius 6px

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-profile"> <div class="profile">
<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id"> <div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
<mk-follow-button :user="user" size="big"/> <mk-follow-button :user="user" size="big"/>
<p class="followed" v-if="user.is_followed">%i18n:desktop.tags.mk-user.follows-you%</p> <p class="followed" v-if="user.is_followed">%i18n:desktop.tags.mk-user.follows-you%</p>
@ -75,7 +75,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-profile .profile
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px border-radius 6px

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-user-timeline"> <div class="timeline">
<header> <header>
<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span> <span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span> <span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
@ -93,7 +93,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-user-timeline .timeline
background #fff background #fff
> header > header

View file

@ -1,9 +1,8 @@
<template> <template>
<mk-ui> <mk-ui>
<div class="user" v-if="!fetching"> <div class="user" v-if="!fetching">
<mk-user-header :user="user"/> <x-header :user="user"/>
<mk-user-home v-if="page == 'home'" :user="user"/> <x-home v-if="page == 'home'" :user="user"/>
<mk-user-graphs v-if="page == 'graphs'" :user="user"/>
</div> </div>
</mk-ui> </mk-ui>
</template> </template>
@ -11,13 +10,13 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import Progress from '../../../../common/scripts/loading'; import Progress from '../../../../common/scripts/loading';
import MkUserHeader from './user-header.vue'; import XHeader from './user.header.vue';
import MkUserHome from './user-home.vue'; import XHome from './user.home.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
'mk-user-header': MkUserHeader, XHeader,
'mk-user-home': MkUserHome XHome
}, },
props: { props: {
page: { page: {

View file

@ -3,7 +3,7 @@
<div class="notifications" v-if="notifications.length != 0"> <div class="notifications" v-if="notifications.length != 0">
<template v-for="(notification, i) in _notifications"> <template v-for="(notification, i) in _notifications">
<mk-notification :notification="notification" :key="notification.id"/> <mk-notification :notification="notification" :key="notification.id"/>
<p class="date" :key="notification.id + '-time'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date"> <p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
<span>%fa:angle-up%{ notification._datetext }</span> <span>%fa:angle-up%{ notification._datetext }</span>
<span>%fa:angle-down%{ _notifications[i + 1]._datetext }</span> <span>%fa:angle-down%{ _notifications[i + 1]._datetext }</span>
</p> </p>

View file

@ -3,7 +3,7 @@
<slot name="head"></slot> <slot name="head"></slot>
<template v-for="(post, i) in _posts"> <template v-for="(post, i) in _posts">
<mk-posts-post :post="post" :key="post.id"/> <mk-posts-post :post="post" :key="post.id"/>
<p class="date" :key="post._datetext" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date"> <p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
<span>%fa:angle-up%{{ post._datetext }}</span> <span>%fa:angle-up%{{ post._datetext }}</span>
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
</p> </p>

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-user-home-activity"> <div class="mk-user-home-activity">
<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none"> <svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
<g v-for="(d, i) in data.reverse()" :key="i"> <g v-for="(d, i) in data.reverse()">
<rect width="0.8" :height="d.postsH" <rect width="0.8" :height="d.postsH"
:x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH" :x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH"
fill="#41ddde"/> fill="#41ddde"/>