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

View File

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

View File

@ -1,5 +1,5 @@
<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">
<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
</a>
@ -51,7 +51,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-messaging-message
.message
$me-balloon-color = #23A7B6
padding 10px 12px 10px 12px
@ -181,7 +181,7 @@ export default Vue.extend({
> [data-fa]
margin-left 4px
&:not([data-is-me='true'])
&:not([data-is-me])
> .avatar-anchor
float left
@ -201,7 +201,7 @@ export default Vue.extend({
> footer
text-align left
&[data-is-me='true']
&[data-is-me]
> .avatar-anchor
float right
@ -224,14 +224,14 @@ export default Vue.extend({
> p.is-deleted
color rgba(255, 255, 255, 0.5)
> [ref='text']
> .text
&, *
color #fff !important
> footer
text-align right
&[data-is-deleted='true']
&[data-is-deleted]
> .content-container
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%' }}
</button>
<template v-for="(message, i) in _messages">
<mk-messaging-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>
<x-message :message="message" :key="message.id"/>
<p class="date" v-if="i != messages.length - 1 && message._date != _messages[i + 1]._date">
<span>{{ _messages[i + 1]._datetext }}</span>
</p>
</template>
</div>
<footer>
<div ref="notifications"></div>
<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
<mk-messaging-form :user="user"/>
<x-form :user="user"/>
</footer>
</div>
</template>
@ -23,8 +25,14 @@
<script lang="ts">
import Vue from 'vue';
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({
components: {
XMessage,
XForm
},
props: ['user', 'isNaked'],
data() {
return {

View File

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

View File

@ -1,6 +1,6 @@
<template>
<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'">
<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
</template>

View File

@ -1,6 +1,6 @@
<template>
<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>
</template>
@ -8,11 +8,11 @@
import Vue from 'vue';
import * as anime from 'animejs';
import contains from '../../../common/scripts/contains';
import meNu from './context-menu.menu.vue';
import XMenu from './context-menu.menu.vue';
export default Vue.extend({
components: {
'me-nu': meNu
XMenu
},
props: ['x', 'y', 'menu'],
mounted() {

View File

@ -4,7 +4,7 @@
<div class="path" @contextmenu.prevent.stop="() => {}">
<mk-drive-nav-folder :class="{ current: folder == null }"/>
<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"/>
</template>
<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">
<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 -->
<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>
</div>
<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"/>
<!-- 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>
</div>
<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({
components: {
'x-sub': XSub
XSub
},
props: {
post: {

View File

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

View File

@ -2,7 +2,10 @@
<div class="mk-posts">
<template v-for="(post, i) in _posts">
<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>
<footer>
<slot name="footer"></slot>
@ -16,7 +19,7 @@ import XPost from './posts.post.vue';
export default Vue.extend({
components: {
'x-post': XPost
XPost
},
props: {
posts: {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<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="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">
@ -35,7 +35,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-followers-you-know
.followers-you-know
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px

View File

@ -1,5 +1,5 @@
<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="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">
@ -41,7 +41,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-friends
.friends
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<template>
<div class="mk-user-photos">
<div class="photos">
<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>
<div class="stream" v-if="!fetching && images.length > 0">
@ -39,7 +39,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-photos
.photos
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px

View File

@ -1,5 +1,5 @@
<template>
<div class="mk-user-profile">
<div class="profile">
<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
<mk-follow-button :user="user" size="big"/>
<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>
<style lang="stylus" scoped>
.mk-user-profile
.profile
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px

View File

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

View File

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

View File

@ -3,7 +3,7 @@
<div class="notifications" v-if="notifications.length != 0">
<template v-for="(notification, i) in _notifications">
<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-down%{ _notifications[i + 1]._datetext }</span>
</p>

View File

@ -3,7 +3,7 @@
<slot name="head"></slot>
<template v-for="(post, i) in _posts">
<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-down%{{ _posts[i + 1]._datetext }}</span>
</p>

View File

@ -1,7 +1,7 @@
<template>
<div class="mk-user-home-activity">
<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"
:x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH"
fill="#41ddde"/>