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

[WIP] Use FontAwesome Component for Vue (#3127)

Browse source 
* wip

* Rename

* Clean up

* Clean up

* wip

* wip

* Enable tree shaking

* ✌️

* ✌️

* wip

* wip

* Clean up
This commit is contained in:
syuilo 2018-11-06 01:40:11 +09:00 • committed by GitHub
parent e640dbc501
commit 9f5dc2c0df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
190 changed files with 924 additions and 865 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/client/app/mobile/views/pages/drive.vue
View file

@ -1,11 +1,11 @@
<template>
<mk-ui>
<span slot="header">
<template v-if="folder"><span style="margin-right:4px;">%fa:R folder-open%</span>{{ folder.name }}</template>
<template v-if="folder"><span style="margin-right:4px;"><fa :icon="['far', 'folder-open']"/></span>{{ folder.name }}</template>
<template v-if="file"><mk-file-type-icon data-icon :type="file.type" style="margin-right:4px;"/>{{ file.name }}</template>
<template v-if="!folder && !file"><span style="margin-right:4px;">%fa:cloud%</span>%i18n:common.drive%</template>
<template v-if="!folder && !file"><span style="margin-right:4px;"><fa icon="cloud"/></span>%i18n:common.drive%</template>
</span>
<template slot="func"><button @click="fn">%fa:ellipsis-h%</button></template>
<template slot="func"><button @click="fn"><fa icon="ellipsis-h"/></button></template>
<mk-drive
ref="browser"
:init-folder="initFolder"

2
src/client/app/mobile/views/pages/favorites.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:star%</span>%i18n:@title%</span>
<span slot="header"><span style="margin-right:4px;"><fa icon="star"/></span>%i18n:@title%</span>
<main>
<template v-for="favorite in favorites">

2
src/client/app/mobile/views/pages/games/reversi.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:gamepad%</span>%i18n:@reversi%</span>
<span slot="header"><span style="margin-right:4px;"><fa icon="gamepad"/></span>%i18n:@reversi%</span>
<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
</mk-ui>
</template>

2
src/client/app/mobile/views/pages/home.timeline.vue
View file

@ -4,7 +4,7 @@
<mk-notes ref="timeline" :more="existMore ? more : null">
<div slot="empty">
%fa:R comments%
<fa :icon="['far', 'comments']"/>
%i18n:@empty%
</div>
</mk-notes>

42
src/client/app/mobile/views/pages/home.vue
View file

@ -2,24 +2,24 @@
<mk-ui>
<span slot="header" @click="showNav = true">
<span :class="$style.title">
<span v-if="src == 'home'">%fa:home%%i18n:@home%</span>
<span v-if="src == 'local'">%fa:R comments%%i18n:@local%</span>
<span v-if="src == 'hybrid'">%fa:share-alt%%i18n:@hybrid%</span>
<span v-if="src == 'global'">%fa:globe%%i18n:@global%</span>
<span v-if="src == 'mentions'">%fa:at%%i18n:@mentions%</span>
<span v-if="src == 'messages'">%fa:envelope R%%i18n:@messages%</span>
<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
<span v-if="src == 'tag'">%fa:hashtag%{{ tagTl.title }}</span>
<span v-if="src == 'home'"><fa icon="home"/>%i18n:@home%</span>
<span v-if="src == 'local'"><fa :icon="['far', 'comments']"/>%i18n:@local%</span>
<span v-if="src == 'hybrid'"><fa icon="share-alt"/>%i18n:@hybrid%</span>
<span v-if="src == 'global'"><fa icon="globe"/>%i18n:@global%</span>
<span v-if="src == 'mentions'"><fa icon="at"/>%i18n:@mentions%</span>
<span v-if="src == 'messages'"><fa :icon="['far', 'envelope']"/>%i18n:@messages%</span>
<span v-if="src == 'list'"><fa icon="list"/>{{ list.title }}</span>
<span v-if="src == 'tag'"><fa icon="hashtag"/>{{ tagTl.title }}</span>
</span>
<span style="margin-left:8px">
<template v-if="!showNav">%fa:angle-down%</template>
<template v-else>%fa:angle-up%</template>
<template v-if="!showNav"><fa icon="angle-down"/></template>
<template v-else><fa icon="angle-up"/></template>
</span>
<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i>
<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i>
</span>
<template slot="func">
<button @click="fn">%fa:pencil-alt%</button>
<button @click="fn"><fa icon="pencil-alt"/></button>
</template>
<main>
@ -28,19 +28,19 @@
<div class="pointer"></div>
<div class="body">
<div>
<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span>
<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> %i18n:@home%</span>
<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> %i18n:@local%</span>
<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> %i18n:@hybrid%</span>
<span :data-active="src == 'global'" @click="src = 'global'"><fa icon="globe"/> %i18n:@global%</span>
<div class="hr"></div>
<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></span>
<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></span>
<span :data-active="src == 'mentions'" @click="src = 'mentions'"><fa icon="at"/> %i18n:@mentions%<i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></span>
<span :data-active="src == 'messages'" @click="src = 'messages'"><fa :icon="['far', 'envelope']"/> %i18n:@messages%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></span>
<template v-if="lists">
<div class="hr" v-if="lists.length > 0"></div>
<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id"><fa icon="list"/> {{ l.title }}</span>
</template>
<div class="hr" v-if="$store.state.settings.tagTimelines && $store.state.settings.tagTimelines.length > 0"></div>
<span v-for="tl in $store.state.settings.tagTimelines" :data-active="src == 'tag' && tagTl == tl" @click="src = 'tag'; tagTl = tl" :key="tl.id">%fa:hashtag% {{ tl.title }}</span>
<span v-for="tl in $store.state.settings.tagTimelines" :data-active="src == 'tag' && tagTl == tl" @click="src = 'tag'; tagTl = tl" :key="tl.id"><fa icon="hashtag"/> {{ tl.title }}</span>
</div>
</div>
</div>
@ -239,7 +239,7 @@ main
<style lang="stylus" module>
.title
i
[data-icon]
margin-right 4px
.badge

2
src/client/app/mobile/views/pages/messaging-room.vue
View file

@ -1,7 +1,7 @@
<template>
<mk-ui>
<span slot="header">
<template v-if="user"><span style="margin-right:4px;">%fa:R comments%</span>{{ user | userName }}</template>
<template v-if="user"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ user | userName }}</template>
<template v-else><mk-ellipsis/></template>
</span>
<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>

2
src/client/app/mobile/views/pages/messaging.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:R comments%</span>%i18n:@messaging%</span>
<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>%i18n:@messaging%</span>
<mk-messaging @navigate="navigate" :header-top="48"/>
</mk-ui>
</template>

6
src/client/app/mobile/views/pages/note.vue
View file

@ -1,13 +1,13 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:R sticky-note%</span>%i18n:@title%</span>
<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'sticky-note']"/></span>%i18n:@title%</span>
<main v-if="!fetching">
<div>
<mk-note-detail :note="note"/>
</div>
<footer>
<router-link v-if="note.prev" :to="note.prev">%fa:angle-left% %i18n:@prev%</router-link>
<router-link v-if="note.next" :to="note.next">%i18n:@next% %fa:angle-right%</router-link>
<router-link v-if="note.prev" :to="note.prev"><fa icon="angle-left"/> %i18n:@prev%</router-link>
<router-link v-if="note.next" :to="note.next">%i18n:@next% <fa icon="angle-right"/></router-link>
</footer>
</main>
</mk-ui>

4
src/client/app/mobile/views/pages/notifications.vue
View file

@ -1,7 +1,7 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:R bell%</span>%i18n:@notifications%</span>
<template slot="func"><button @click="fn">%fa:check%</button></template>
<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'bell']"/></span>%i18n:@notifications%</span>
<template slot="func"><button @click="fn"><fa icon="check"/></button></template>
<main>
<mk-notifications @fetched="onFetched"/>

2
src/client/app/mobile/views/pages/received-follow-requests.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-ui>
<span slot="header">%fa:envelope R%%i18n:@title%</span>
<span slot="header"><fa :icon="['far', 'envelope']"/>%i18n:@title%</span>
<main>
<div v-for="req in requests">

4
src/client/app/mobile/views/pages/search.vue
View file

@ -1,9 +1,9 @@
<template>
<mk-ui>
<span slot="header">%fa:search% {{ q }}</span>
<span slot="header"><fa icon="search"/> {{ q }}</span>
<main>
<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:not-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:not-found%'.split('{}')[1] }}</p>
<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ '%i18n:not-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:not-found%'.split('{}')[1] }}</p>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
</main>
</mk-ui>

4
src/client/app/mobile/views/pages/selectdrive.vue
View file

@ -2,8 +2,8 @@
<div class="mk-selectdrive">
<header>
<h1>%i18n:@select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1>
<button class="upload" @click="upload">%fa:upload%</button>
<button v-if="multiple" class="ok" @click="ok">%fa:check%</button>
<button class="upload" @click="upload"><fa icon="upload"/></button>
<button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button>
</header>
<mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="$store.state.uiHeaderHeight"/>
</div>

22
src/client/app/mobile/views/pages/settings.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span>
<span slot="header"><span style="margin-right:4px;"><fa icon="cog"/></span>%i18n:@settings%</span>
<main>
<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
@ -8,14 +8,14 @@
<mk-profile-editor/>
<ui-card>
<div slot="title">%fa:palette% %i18n:@theme%</div>
<div slot="title"><fa icon="palette"/> %i18n:@theme%</div>
<section>
<mk-theme/>
</section>
</ui-card>
<ui-card>
<div slot="title">%fa:poll-h% %i18n:@design%</div>
<div slot="title"><fa icon="poll-h"/> %i18n:@design%</div>
<section>
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
@ -58,7 +58,7 @@
</ui-card>
<ui-card>
<div slot="title">%fa:sliders-h% %i18n:@behavior%</div>
<div slot="title"><fa icon="sliders-h"/> %i18n:@behavior%</div>
<section>
<ui-switch v-model="fetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
@ -89,7 +89,7 @@
<mk-mute-and-block/>
<ui-card>
<div slot="title">%fa:volume-up% %i18n:@sound%</div>
<div slot="title"><fa icon="volume-up"/> %i18n:@sound%</div>
<section>
<ui-switch v-model="enableSounds">%i18n:@enable-sounds%</ui-switch>
@ -97,7 +97,7 @@
</ui-card>
<ui-card>
<div slot="title">%fa:language% %i18n:@lang%</div>
<div slot="title"><fa icon="language"/> %i18n:@lang%</div>
<section class="fit-top">
<ui-select v-model="lang" placeholder="%i18n:@auto%">
@ -109,12 +109,12 @@
<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
</optgroup>
</ui-select>
<span>%fa:info-circle% %i18n:@lang-tip%</span>
<span><fa icon="info-circle"/> %i18n:@lang-tip%</span>
</section>
</ui-card>
<ui-card>
<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
<div slot="title"><fa :icon="['fab', 'twitter']"/> %i18n:@twitter%</div>
<section>
<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
@ -127,7 +127,7 @@
</ui-card>
<ui-card>
<div slot="title">%fa:B github% %i18n:@github%</div>
<div slot="title"><fa :icon="['fab', 'github']"/> %i18n:@github%</div>
<section>
<p class="account" v-if="$store.state.i.github"><a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p>
@ -142,14 +142,14 @@
<mk-api-settings />
<ui-card>
<div slot="title">%fa:unlock-alt% %i18n:@password%</div>
<div slot="title"><fa icon="unlock-alt"/> %i18n:@password%</div>
<section>
<mk-password-settings/>
</section>
</ui-card>
<ui-card>
<div slot="title">%fa:sync-alt% %i18n:@update%</div>
<div slot="title"><fa icon="sync-alt"/> %i18n:@update%</div>
<section>
<div>%i18n:@version% <i>{{ version }}</i></div>

2
src/client/app/mobile/views/pages/share.vue
View file

@ -4,7 +4,7 @@
<div>
<mk-signin v-if="!$store.getters.isSignedIn"/>
<mk-post-form v-else-if="!posted" :initial-text="text" :instant="true" @posted="posted = true"/>
<p v-if="posted" class="posted">%fa:check%</p>
<p v-if="posted" class="posted"><fa icon="check"/></p>
</div>
<ui-button class="close" v-if="posted" @click="close">%i18n:common.close%</ui-button>
</div>

4
src/client/app/mobile/views/pages/tag.vue
View file

@ -1,9 +1,9 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:hashtag%</span>{{ $route.params.tag }}</span>
<span slot="header"><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</span>
<main>
<p v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
<p v-if="!fetching && empty"><fa icon="search"/> {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
</main>
</mk-ui>

2
src/client/app/mobile/views/pages/user-list.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-ui>
<span slot="header" v-if="!fetching">%fa:list%{{ list.title }}</span>
<span slot="header" v-if="!fetching"><fa icon="list"/>{{ list.title }}</span>
<main v-if="!fetching">
<ul>

4
src/client/app/mobile/views/pages/user-lists.vue
View file

@ -1,7 +1,7 @@
<template>
<mk-ui>
<span slot="header">%fa:list%%i18n:@title%</span>
<template slot="func"><button @click="fn">%fa:plus%</button></template>
<span slot="header"><fa icon="list"/>%i18n:@title%</span>
<template slot="func"><button @click="fn"><fa icon="plus"/></button></template>
<main>
<ul>

20
src/client/app/mobile/views/pages/user.vue
View file

@ -2,8 +2,8 @@
<mk-ui>
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
<main v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></p></div>
<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></p></div>
<header>
<div class="banner" :style="style"></div>
<div class="body">
@ -11,7 +11,7 @@
<a class="avatar">
<img :src="user.avatarUrl" alt="avatar"/>
</a>
<button class="menu" ref="menu" @click="menu">%fa:ellipsis-h%</button>
<button class="menu" ref="menu" @click="menu"><fa icon="ellipsis-h"/></button>
<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
</div>
<div class="title">
@ -24,10 +24,10 @@
</div>
<div class="info">
<p class="location" v-if="user.host === null && user.profile.location">
%fa:map-marker%{{ user.profile.location }}
<fa icon="map-marker"/>{{ user.profile.location }}
</p>
<p class="birthday" v-if="user.host === null && user.profile.birthday">
%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)
<fa icon="birthday-cake"/>{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)
</p>
</div>
<div class="status">
@ -48,9 +48,9 @@
</header>
<nav>
<div class="nav-container">
<a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a>
<a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a>
<a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a>
<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> %i18n:@overview%</a>
<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</a>
<a :data-active="page == 'media'" @click="page = 'media'"><fa icon="image"/> %i18n:@media%</a>
</div>
</nav>
<div class="body">
@ -114,7 +114,7 @@ export default Vue.extend({
menu() {
let menu = [{
icon: this.user.isMuted ? '%fa:eye%' : '%fa:eye-slash%',
icon: this.user.isMuted ? '<fa icon="eye"/>' : '<fa icon="eye-slash"/>',
text: this.user.isMuted ? '%i18n:@unmute%' : '%i18n:@mute%',
action: () => {
if (this.user.isMuted) {
@ -136,7 +136,7 @@ export default Vue.extend({
}
}
}, {
icon: this.user.isBlocking ? '%fa:user%' : '%fa:user-slash%',
icon: this.user.isBlocking ? '<fa icon="user"/>' : '<fa icon="user-slash"/>',
text: this.user.isBlocking ? '%i18n:@unblock%' : '%i18n:@block%',
action: () => {
if (this.user.isBlocking) {

2
src/client/app/mobile/views/pages/user/home.followers-you-know.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="root followers-you-know">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0">
<a v-for="user in users" :key="user.id" :href="user | userPage">
<img :src="user.avatarUrl" :alt="user | userName"/>

2
src/client/app/mobile/views/pages/user/home.friends.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="root friends">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0">
<mk-user-card v-for="user in users" :key="user.id" :user="user"/>
</div>

2
src/client/app/mobile/views/pages/user/home.notes.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="root notes">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<div v-if="!fetching && notes.length > 0">
<mk-note-card v-for="note in notes" :key="note.id" :note="note"/>
</div>

2
src/client/app/mobile/views/pages/user/home.photos.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="root photos">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0">
<a v-for="image in images"
class="img"

10
src/client/app/mobile/views/pages/user/home.vue
View file

@ -2,31 +2,31 @@
<div class="root home">
<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
<section class="recent-notes">
<h2>%fa:R comments%%i18n:@recent-notes%</h2>
<h2><fa :icon="['far', 'comments']"/>%i18n:@recent-notes%</h2>
<div>
<x-notes :user="user"/>
</div>
</section>
<section class="images">
<h2>%fa:image%%i18n:@images%</h2>
<h2><fa icon="image"/>%i18n:@images%</h2>
<div>
<x-photos :user="user"/>
</div>
</section>
<section class="activity">
<h2>%fa:chart-bar%%i18n:@activity%</h2>
<h2><fa icon="chart-bar"/>%i18n:@activity%</h2>
<div>
<mk-activity :user="user"/>
</div>
</section>
<section class="frequently-replied-users">
<h2>%fa:users%%i18n:@frequently-replied-users%</h2>
<h2><fa icon="users"/>%i18n:@frequently-replied-users%</h2>
<div>
<x-friends :user="user"/>
</div>
</section>
<section class="followers-you-know" v-if="$store.getters.isSignedIn && $store.state.i.id !== user.id">
<h2>%fa:users%%i18n:@followers-you-know%</h2>
<h2><fa icon="users"/>%i18n:@followers-you-know%</h2>
<div>
<x-followers-you-know :user="user"/>
</div>

4
src/client/app/mobile/views/pages/welcome.vue
View file

@ -23,8 +23,8 @@
<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
</div>
<div class="stats" v-if="stats">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
<span><fa icon="user"/> {{ stats.originalUsersCount | number }}</span>
<span><fa icon="pencil-alt"/> {{ stats.originalNotesCount | number }}</span>
</div>
<div class="announcements" v-if="announcements && announcements.length > 0">
<article v-for="announcement in announcements">

6
src/client/app/mobile/views/pages/widgets.vue
View file

@ -1,8 +1,8 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:home%</span>%i18n:@dashboard%</span>
<span slot="header"><span style="margin-right:4px;"><fa icon="home"/></span>%i18n:@dashboard%</span>
<template slot="func">
<button @click="customizing = !customizing">%fa:cog%</button>
<button @click="customizing = !customizing"><fa icon="cog"/></button>
</template>
<main>
<template v-if="customizing">
@ -34,7 +34,7 @@
>
<div v-for="widget in widgets" class="customize-container" :key="widget.id">
<header>
<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
<span class="handle"><fa icon="bars"/></span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
</header>
<div @click="widgetFunc(widget.id)">
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="mobile"/>