mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-15 07:08:56 +09:00
wip
This commit is contained in:
parent
34f91f04ad
commit
b2a6257f93
@ -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 {
|
||||||
|
@ -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);
|
||||||
|
@ -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
|
||||||
|
|
@ -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 {
|
||||||
|
@ -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: {
|
||||||
|
@ -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>
|
||||||
|
@ -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() {
|
||||||
|
@ -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">
|
||||||
|
@ -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: {
|
||||||
|
@ -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() {
|
||||||
|
@ -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: {
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
@ -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() {
|
||||||
|
@ -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() {
|
||||||
|
@ -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() {
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
@ -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
|
@ -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
|
||||||
|
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
@ -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: {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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"/>
|
||||||
|
Loading…
Reference in New Issue
Block a user