mirror/iceshrimp
1
0
Fork 0
mirror of https://iceshrimp.dev/iceshrimp/iceshrimp synced 2024-11-28 14:58:09 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo 2019-02-15 15:35:52 +09:00
parent 34d8b00039
commit a577eea7c2
28 changed files with 103 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/app/common/views/widgets/analog-clock.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mkw-analog-clock"> <div class="mkw-analog-clock">
<mk-widget-container :naked="props.style % 2 === 0" :show-header="false"> <ui-container :naked="props.style % 2 === 0" :show-header="false">
<div class="mkw-analog-clock--body"> <div class="mkw-analog-clock--body">
<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/> <mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/broadcast.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="anltbovirfeutcigvwgmgxipejaeozxi"> <div class="anltbovirfeutcigvwgmgxipejaeozxi">
<mk-widget-container :show-header="false" :naked="props.design == 1"> <ui-container :show-header="false" :naked="props.design == 1">
<div class="anltbovirfeutcigvwgmgxipejaeozxi-body" <div class="anltbovirfeutcigvwgmgxipejaeozxi-body"
:data-found="announcements && announcements.length != 0" :data-found="announcements && announcements.length != 0"
:data-melt="props.design == 1" :data-melt="props.design == 1"
@ -23,7 +23,7 @@
</p> </p>
<a v-if="announcements.length > 1" @click="next">{{ $t('next') }} &gt;&gt;</a> <a v-if="announcements.length > 1" @click="next">{{ $t('next') }} &gt;&gt;</a>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/calendar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-calendar" :data-special="special" :data-mobile="platform == 'mobile'"> <div class="mkw-calendar" :data-special="special" :data-mobile="platform == 'mobile'">
<mk-widget-container :naked="props.design == 1" :show-header="false"> <ui-container :naked="props.design == 1" :show-header="false">
<div class="mkw-calendar--body"> <div class="mkw-calendar--body">
<div class="calendar" :data-is-holiday="isHoliday"> <div class="calendar" :data-is-holiday="isHoliday">
<p class="month-and-year"> <p class="month-and-year">
@ -31,7 +31,7 @@
</div> </div>
</div> </div>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/hashtags.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="mkw-hashtags"> <div class="mkw-hashtags">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa icon="hashtag"/>{{ $t('title') }}</template> <template slot="header"><fa icon="hashtag"/>{{ $t('title') }}</template>
<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'"> <div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
<mk-trends/> <mk-trends/>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/instance.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="mkw-instance"> <div class="mkw-instance">
<mk-widget-container> <ui-container>
<mk-instance/> <mk-instance/>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/memo.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="mkw-memo"> <div class="mkw-memo">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template> <template slot="header"><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template>
<div class="mkw-memo--body"> <div class="mkw-memo--body">
<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea> <textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
<button @click="saveMemo" :disabled="!changed">{{ $t('save') }}</button> <button @click="saveMemo" :disabled="!changed">{{ $t('save') }}</button>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/nav.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mkw-nav"> <div class="mkw-nav">
<mk-widget-container> <ui-container>
<div class="mkw-nav--body"> <div class="mkw-nav--body">
<mk-nav/> <mk-nav/>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/photo-stream.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2"> <div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2"> <ui-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header"><fa icon="camera"/>{{ $t('title') }}</template> <template slot="header"><fa icon="camera"/>{{ $t('title') }}</template>
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p> <p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
@ -13,7 +13,7 @@
></div> ></div>
</div> </div>
<p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p> <p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/posts-monitor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-posts-monitor"> <div class="mkw-posts-monitor">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2"> <ui-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header"><fa icon="chart-line"/>{{ $t('title') }}</template> <template slot="header"><fa icon="chart-line"/>{{ $t('title') }}</template>
<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button> <button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
@ -64,7 +64,7 @@
<text x="1" y="5">Fedi</text> <text x="1" y="5">Fedi</text>
</svg> </svg>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/rss.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-rss"> <div class="mkw-rss">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa icon="rss-square"/>RSS</template> <template slot="header"><fa icon="rss-square"/>RSS</template>
<button slot="func" title="設定" @click="setting"><fa icon="cog"/></button> <button slot="func" title="設定" @click="setting"><fa icon="cog"/></button>
@ -10,7 +10,7 @@
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a> <a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
</div> </div>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/common/views/widgets/server.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-server"> <div class="mkw-server">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2"> <ui-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header"><fa icon="server"/>{{ $t('title') }}</template> <template slot="header"><fa icon="server"/>{{ $t('title') }}</template>
<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button> <button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
@ -13,7 +13,7 @@
<x-uptimes v-show="props.view == 4" :connection="connection"/> <x-uptimes v-show="props.view == 4" :connection="connection"/>
<x-info v-show="props.view == 5" :connection="connection" :meta="meta"/> <x-info v-show="props.view == 5" :connection="connection" :meta="meta"/>
</template> </template>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

5
src/client/app/desktop/script.ts
View File

@ -158,7 +158,10 @@ init(async (launch, os) => {
{ path: '/authorize-follow', component: MkFollow }, { path: '/authorize-follow', component: MkFollow },
{ path: '/deck', redirect: '/' }, { path: '/deck', redirect: '/' },
{ path: '*', component: MkNotFound } { path: '*', component: MkNotFound }
] ],
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 };
}
}); });
// Launch the app // Launch the app

4
src/client/app/desktop/views/components/activity.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-activity"> <div class="mk-activity">
<mk-widget-container :show-header="design == 0" :naked="design == 2"> <ui-container :show-header="design == 0" :naked="design == 2">
<template slot="header"><fa icon="chart-bar"/>{{ $t('title') }}</template> <template slot="header"><fa icon="chart-bar"/>{{ $t('title') }}</template>
<button slot="func" :title="$t('toggle')" @click="toggle"><fa icon="sort"/></button> <button slot="func" :title="$t('toggle')" @click="toggle"><fa icon="sort"/></button>
@ -9,7 +9,7 @@
<x-calendar v-show="view == 0" :data="[].concat(activity)"/> <x-calendar v-show="view == 0" :data="[].concat(activity)"/>
<x-chart v-show="view == 1" :data="[].concat(activity)"/> <x-chart v-show="view == 1" :data="[].concat(activity)"/>
</template> </template>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/desktop/views/components/index.ts
View File

@ -18,7 +18,7 @@ import activity from './activity.vue';
import friendsMaker from './friends-maker.vue'; import friendsMaker from './friends-maker.vue';
import userCard from './user-card.vue'; import userCard from './user-card.vue';
import userListTimeline from './user-list-timeline.vue'; import userListTimeline from './user-list-timeline.vue';
import widgetContainer from './widget-container.vue'; import uiContainer from './ui-container.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-ui-notification', uiNotification); Vue.component('mk-ui-notification', uiNotification);
@ -38,4 +38,4 @@ Vue.component('mk-activity', activity);
Vue.component('mk-friends-maker', friendsMaker); Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-user-card', userCard); Vue.component('mk-user-card', userCard);
Vue.component('mk-user-list-timeline', userListTimeline); Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('mk-widget-container', widgetContainer); Vue.component('ui-container', uiContainer);

23
src/client/app/desktop/views/components/widget-container.vue → src/client/app/desktop/views/components/ui-container.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<div class="mk-widget-container" :class="{ naked }"> <div class="kedshtep" :class="{ naked }">
<header v-if="showHeader"> <header v-if="showHeader">
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<slot name="func"></slot> <slot name="func"></slot>
<button v-if="bodyTogglable" @click="() => showBody = !showBody">
<template v-if="showBody"><fa icon="angle-up"/></template>
<template v-else><fa icon="angle-down"/></template>
</button>
</header> </header>
<slot></slot> <div v-show="showBody">
<slot></slot>
</div>
</div> </div>
</template> </template>
@ -19,13 +25,22 @@ export default Vue.extend({
naked: { naked: {
type: Boolean, type: Boolean,
default: false default: false
} },
bodyTogglable: {
type: Boolean,
default: false
},
},
data() {
return {
showBody: true
};
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-widget-container .kedshtep
background var(--face) background var(--face)
box-shadow var(--shadow) box-shadow var(--shadow)
border-radius var(--round) border-radius var(--round)

63
src/client/app/desktop/views/home/user/user.photos.vue
View File

@ -1,20 +1,27 @@
<template> <template>
<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd"> <ui-container :body-togglable="true">
<p class="title"><fa icon="camera"/>{{ $t('title') }}</p> <span slot="header"><fa icon="camera"/> {{ $t('title') }}</span>
<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0"> <div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
<div v-for="(image, i) in images" :key="i" class="img" <p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
:style="`background-image: url(${thumbnail(image)})`" <div class="stream" v-if="!fetching && images.length > 0">
></div> <router-link v-for="image in images" class="img"
:style="`background-image: url(${image.thumbnailUrl})`"
:key="`${image.id}:${image._note.id}`"
:to="image._note | notePage"
:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
></router-link>
</div>
<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
</div> </div>
<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p> </ui-container>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../../i18n'; import i18n from '../../../../i18n';
import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url'; import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
import { concat } from '../../../../../../prelude/array';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.photos.vue'), i18n: i18n('desktop/views/pages/user/user.photos.vue'),
@ -41,9 +48,11 @@ export default Vue.extend({
}).then(notes => { }).then(notes => {
for (const note of notes) { for (const note of notes) {
for (const file of note.files) { for (const file of note.files) {
if (this.images.length < 9) this.images.push(file); file._note = note;
} }
} }
const files = concat(notes.map((n: any): any[] => n.files));
this.images = files.filter(f => image.includes(f.type)).slice(0, 9);
this.fetching = false; this.fetching = false;
}); });
}, },
@ -59,39 +68,19 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.dzsuvbsrrrwobdxifudxuefculdfiaxd .dzsuvbsrrrwobdxifudxuefculdfiaxd
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
background var(--faceHeader)
color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> i
margin-right 4px
> .stream > .stream
display flex display grid
justify-content center grid-template-columns 1fr 1fr 1fr
flex-wrap wrap gap 8px
padding 8px padding 16px
background var(--face)
> .img > *
flex 1 1 33%
width 33%
height 120px height 120px
background-position center center background-position center center
background-size cover background-size cover
background-clip content-box background-clip content-box
border solid 2px transparent border-radius 4px
> .initializing > .initializing
> .empty > .empty

6
src/client/app/desktop/views/home/user/user.vue
View File

@ -4,14 +4,14 @@
<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="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"> <div class="main">
<x-header :user="user"/> <x-header :user="user"/>
<x-integrations :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-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>--> <!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
<div class="activity"> <div class="activity">
<mk-widget-container :show-header="true" :naked="false"> <ui-container :body-togglable="true">
<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template> <template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
<x-activity :user="user" :limit="35" style="padding: 16px;"/> <x-activity :user="user" :limit="35" style="padding: 16px;"/>
</mk-widget-container> </ui-container>
</div> </div>
<x-photos :user="user"/> <x-photos :user="user"/>
<x-friends :user="user"/> <x-friends :user="user"/>

4
src/client/app/desktop/views/widgets/messaging.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="mkw-messaging"> <div class="mkw-messaging">
<mk-widget-container :show-header="props.design == 0"> <ui-container :show-header="props.design == 0">
<template slot="header"><fa icon="comments"/>{{ $t('title') }}</template> <template slot="header"><fa icon="comments"/>{{ $t('title') }}</template>
<button slot="func" @click="add"><fa icon="plus"/></button> <button slot="func" @click="add"><fa icon="plus"/></button>
<x-messaging ref="index" compact @navigate="navigate"/> <x-messaging ref="index" compact @navigate="navigate"/>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/desktop/views/widgets/notifications.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="mkw-notifications"> <div class="mkw-notifications">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa :icon="['far', 'bell']"/>{{ $t('title') }}</template> <template slot="header"><fa :icon="['far', 'bell']"/>{{ $t('title') }}</template>
<!-- <button slot="func" :title="$t('title')" @click="settings"><fa icon="cog"/></button> --> <!-- <button slot="func" :title="$t('title')" @click="settings"><fa icon="cog"/></button> -->
<mk-notifications :class="$style.notifications"/> <mk-notifications :class="$style.notifications"/>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/desktop/views/widgets/polls.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-polls"> <div class="mkw-polls">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template> <template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template>
<button slot="func" :title="$t('title')" @click="fetch"> <button slot="func" :title="$t('title')" @click="fetch">
<fa v-if="!fetching && more" icon="arrow-right"/> <fa v-if="!fetching && more" icon="arrow-right"/>
@ -16,7 +16,7 @@
<p class="empty" v-if="!fetching && poll == null">{{ $t('nothing') }}</p> <p class="empty" v-if="!fetching && poll == null">{{ $t('nothing') }}</p>
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p> <p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/desktop/views/widgets/post-form.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<mk-widget-container :show-header="props.design == 0"> <ui-container :show-header="props.design == 0">
<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template> <template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body" <div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body"
@ -37,7 +37,7 @@
<button @click="post" :disabled="posting" class="post">{{ $t('note') }}</button> <button @click="post" :disabled="posting" class="post">{{ $t('note') }}</button>
</footer> </footer>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/desktop/views/widgets/profile.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="egwyvoaaryotefqhqtmiyawwefemjfsd"> <div class="egwyvoaaryotefqhqtmiyawwefemjfsd">
<mk-widget-container :show-header="false" :naked="props.design == 2"> <ui-container :show-header="false" :naked="props.design == 2">
<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body" <div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
:data-compact="props.design == 1 || props.design == 2" :data-compact="props.design == 1 || props.design == 2"
:data-melt="props.design == 2" :data-melt="props.design == 2"
@ -18,7 +18,7 @@
<router-link class="name" :to="$store.state.i | userPage"><mk-user-name :user="$store.state.i"/></router-link> <router-link class="name" :to="$store.state.i | userPage"><mk-user-name :user="$store.state.i"/></router-link>
<p class="username">@{{ $store.state.i | acct }}</p> <p class="username">@{{ $store.state.i | acct }}</p>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/desktop/views/widgets/trends.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-trends"> <div class="mkw-trends">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa icon="fire"/>{{ $t('title') }}</template> <template slot="header"><fa icon="fire"/>{{ $t('title') }}</template>
<button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button> <button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button>
@ -12,7 +12,7 @@
</div> </div>
<p class="empty" v-else>{{ $t('nothing') }}</p> <p class="empty" v-else>{{ $t('nothing') }}</p>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/desktop/views/widgets/users.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-users"> <div class="mkw-users">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa icon="users"/>{{ $t('title') }}</template> <template slot="header"><fa icon="users"/>{{ $t('title') }}</template>
<button slot="func" :title="$t('title')" @click="refresh"> <button slot="func" :title="$t('title')" @click="refresh">
<fa v-if="!fetching && more" icon="arrow-right"/> <fa v-if="!fetching && more" icon="arrow-right"/>
@ -20,7 +20,7 @@
</template> </template>
<p class="empty" v-else>{{ $t('no-one') }}</p> <p class="empty" v-else>{{ $t('no-one') }}</p>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

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

@ -17,7 +17,7 @@ import usersList from './users-list.vue';
import userPreview from './user-preview.vue'; import userPreview from './user-preview.vue';
import userTimeline from './user-timeline.vue'; import userTimeline from './user-timeline.vue';
import userListTimeline from './user-list-timeline.vue'; import userListTimeline from './user-list-timeline.vue';
import widgetContainer from './widget-container.vue'; import uiContainer from './ui-container.vue';
import postForm from './post-form.vue'; import postForm from './post-form.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
@ -37,5 +37,5 @@ Vue.component('mk-users-list', usersList);
Vue.component('mk-user-preview', userPreview); Vue.component('mk-user-preview', userPreview);
Vue.component('mk-user-timeline', userTimeline); Vue.component('mk-user-timeline', userTimeline);
Vue.component('mk-user-list-timeline', userListTimeline); Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('mk-widget-container', widgetContainer); Vue.component('ui-container', uiContainer);
Vue.component('mk-post-form', postForm); Vue.component('mk-post-form', postForm);

8
src/client/app/mobile/views/components/widget-container.vue → src/client/app/mobile/views/components/ui-container.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<div class="mk-widget-container" :class="{ naked, hideHeader: !showHeader }"> <div class="ukygtjoj" :class="{ naked, hideHeader: !showHeader }">
<header v-if="showHeader"> <header v-if="showHeader">
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<slot name="func"></slot> <slot name="func"></slot>
</header> </header>
<slot></slot> <div v-show="showBody">
<slot></slot>
</div>
</div> </div>
</template> </template>
@ -25,7 +27,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-widget-container .ukygtjoj
background var(--face) background var(--face)
border-radius 8px border-radius 8px
box-shadow 0 4px 16px rgba(#000, 0.1) box-shadow 0 4px 16px rgba(#000, 0.1)

4
src/client/app/mobile/views/widgets/activity.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="mkw-activity"> <div class="mkw-activity">
<mk-widget-container :show-header="!props.compact"> <ui-container :show-header="!props.compact">
<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template> <template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
<div :class="$style.body"> <div :class="$style.body">
<x-activity :user="$store.state.i"/> <x-activity :user="$store.state.i"/>
</div> </div>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>

4
src/client/app/mobile/views/widgets/profile.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-profile"> <div class="mkw-profile">
<mk-widget-container> <ui-container>
<div :class="$style.banner" <div :class="$style.banner"
:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''" :style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
></div> ></div>
@ -11,7 +11,7 @@
<router-link :class="$style.name" :to="$store.state.i | userPage"> <router-link :class="$style.name" :to="$store.state.i | userPage">
<mk-user-name :user="$store.state.i"/> <mk-user-name :user="$store.state.i"/>
</router-link> </router-link>
</mk-widget-container> </ui-container>
</div> </div>
</template> </template>