sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[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
190 changed files with 924 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app/mobile/views/components/dialog.vue
View File

@@ -152,8 +152,6 @@ export default Vue.extend({
</style>
<style lang="stylus" module>
.header
margin 0 0 1em 0
color var(--primary)

4
src/client/app/mobile/views/components/drive-file-chooser.vue
View File

@@ -3,8 +3,8 @@
<div class="body">
<header>
<h1>%i18n:@select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1>
<button class="close" @click="cancel">%fa:times%</button>
<button v-if="multiple" class="ok" @click="ok">%fa:check%</button>
<button class="close" @click="cancel"><fa icon="times"/></button>
<button v-if="multiple" class="ok" @click="ok"><fa icon="check"/></button>
</header>
<mk-drive class="drive" ref="browser"
:select-file="true"

4
src/client/app/mobile/views/components/drive-folder-chooser.vue
View File

@@ -3,8 +3,8 @@
<div class="body">
<header>
<h1>%i18n:@select-folder%</h1>
<button class="close" @click="cancel">%fa:times%</button>
<button class="ok" @click="ok">%fa:check%</button>
<button class="close" @click="cancel"><fa icon="times"/></button>
<button class="ok" @click="ok"><fa icon="check"/></button>
</header>
<mk-drive ref="browser"
select-folder

24
src/client/app/mobile/views/components/drive.file-detail.vue
View File

@@ -6,7 +6,7 @@
:alt="file.name"
:title="file.name"
:style="style">
<template v-if="kind != 'image'">%fa:file%</template>
<template v-if="kind != 'image'"><fa icon="file"/></template>
<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
<span class="size">
<span class="width">{{ file.properties.width }}</span>
@@ -28,27 +28,27 @@
<span class="separator"></span>
<span class="data-size">{{ file.datasize | bytes }}</span>
<span class="separator"></span>
<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time :time="file.createdAt"/></span>
<span class="created-at" @click="showCreatedAt"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
<span class="nsfw"><fa icon="eye-slash"/> %i18n:@nsfw%</span>
</template>
</div>
</div>
<div class="menu">
<div>
<ui-button link :href="`${file.url}?download`" :download="file.name">%fa:download% %i18n:@download%</ui-button>
<ui-button @click="rename">%fa:pencil-alt% %i18n:@rename%</ui-button>
<ui-button @click="move">%fa:R folder-open% %i18n:@move%</ui-button>
<ui-button @click="toggleSensitive" v-if="file.isSensitive">%fa:R eye% %i18n:@unmark-as-sensitive%</ui-button>
<ui-button @click="toggleSensitive" v-else>%fa:R eye-slash% %i18n:@mark-as-sensitive%</ui-button>
<ui-button @click="del">%fa:trash-alt R% %i18n:@delete%</ui-button>
<ui-button link :href="`${file.url}?download`" :download="file.name"><fa icon="download"/> %i18n:@download%</ui-button>
<ui-button @click="rename"><fa icon="pencil-alt"/> %i18n:@rename%</ui-button>
<ui-button @click="move"><fa :icon="['far', 'folder-open']"/> %i18n:@move%</ui-button>
<ui-button @click="toggleSensitive" v-if="file.isSensitive"><fa :icon="['far', 'eye']"/> %i18n:@unmark-as-sensitive%</ui-button>
<ui-button @click="toggleSensitive" v-else><fa :icon="['far', 'eye-slash']"/> %i18n:@mark-as-sensitive%</ui-button>
<ui-button @click="del"><fa :icon="['far', 'trash-alt']"/> %i18n:@delete%</ui-button>
</div>
</div>
<div class="hash">
<div>
<p>
%fa:hashtag%%i18n:@hash%
<fa icon="hashtag"/>%i18n:@hash%
</p>
<code>{{ file.md5 }}</code>
</div>
@@ -191,7 +191,7 @@ export default Vue.extend({
> .created-at
> [data-fa]
> [data-icon]
margin-right 2px
> .nsfw
@@ -220,7 +220,7 @@ export default Vue.extend({
color var(--text)
font-size 0.9em
> [data-fa]
> [data-icon]
margin-right 4px
> code

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

@@ -12,10 +12,10 @@
<span class="separator"></span>
<span class="data-size">{{ file.datasize | bytes }}</span>
<span class="separator"></span>
<span class="created-at">%fa:R clock%<mk-time :time="file.createdAt"/></span>
<span class="created-at"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
<span class="nsfw"><fa icon="eye-slash"/> %i18n:@nsfw%</span>
</template>
</footer>
</div>
@@ -142,7 +142,7 @@ export default Vue.extend({
> .created-at
opacity 0.7
> [data-fa]
> [data-icon]
margin-right 2px
> .nsfw

6
src/client/app/mobile/views/components/drive.folder.vue
View File

@@ -1,7 +1,7 @@
<template>
<a class="jvwxssxsytqlqvrpiymarjlzlsxskqsr" @click.prevent="onClick" :href="`/i/drive/folder/${ folder.id }`">
<div class="container">
<p class="name">%fa:folder%{{ folder.name }}</p>%fa:angle-right%
<p class="name"><fa icon="folder"/>{{ folder.name }}</p><fa icon="angle-right"/>
</div>
</a>
</template>
@@ -43,10 +43,10 @@ export default Vue.extend({
margin 0
padding 0
> [data-fa]
> [data-icon]
margin-right 6px
> [data-fa]
> [data-icon]
position absolute
top 0
bottom 0

10
src/client/app/mobile/views/components/drive.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="kmmwchoexgckptowjmjgfsygeltxfeqs">
<nav ref="nav">
<a @click.prevent="goRoot()" href="/i/drive">%fa:cloud%%i18n:common.drive%</a>
<a @click.prevent="goRoot()" href="/i/drive"><fa icon="cloud"/>%i18n:common.drive%</a>
<template v-for="folder in hierarchyFolders">
<span :key="folder.id + '>'">%fa:angle-right%</span>
<span :key="folder.id + '>'"><fa icon="angle-right"/></span>
<a :key="folder.id" @click.prevent="cd(folder)" :href="`/i/drive/folder/${folder.id}`">{{ folder.name }}</a>
</template>
<template v-if="folder != null">
<span>%fa:angle-right%</span>
<span><fa icon="angle-right"/></span>
<p>{{ folder.name }}</p>
</template>
<template v-if="file != null">
<span>%fa:angle-right%</span>
<span><fa icon="angle-right"/></span>
<p>{{ file.name }}</p>
</template>
</nav>
@@ -497,7 +497,7 @@ export default Vue.extend({
&:last-child
font-weight bold
> [data-fa]
> [data-icon]
margin-right 4px
> span

12
src/client/app/mobile/views/components/follow-button.vue
View File

@@ -5,13 +5,13 @@
:disabled="wait"
>
<template v-if="!wait">
<template v-if="u.hasPendingFollowRequestFromYou && u.isLocked">%fa:hourglass-half% %i18n:@request-pending%</template>
<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked">%fa:hourglass-start% %i18n:@follow-processing%</template>
<template v-else-if="u.isFollowing">%fa:minus% %i18n:@following%</template>
<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus% %i18n:@follow-request%</template>
<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus% %i18n:@follow%</template>
<template v-if="u.hasPendingFollowRequestFromYou && u.isLocked"><fa icon="hourglass-half"/> %i18n:@request-pending%</template>
<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked"><fa icon="hourglass-start"/> %i18n:@follow-processing%</template>
<template v-else-if="u.isFollowing"><fa icon="minus"/> %i18n:@following%</template>
<template v-else-if="!u.isFollowing && u.isLocked"><fa icon="plus"/> %i18n:@follow-request%</template>
<template v-else-if="!u.isFollowing && !u.isLocked"><fa icon="plus"/> %i18n:@follow%</template>
</template>
<template v-else>%fa:spinner .pulse .fw%</template>
<template v-else><fa icon="spinner .pulse" fixed-width/></template>
</button>
</template>

8
src/client/app/mobile/views/components/friends-maker.vue
View File

@@ -5,9 +5,9 @@
<mk-user-card v-for="user in users" :key="user.id" :user="user"/>
</div>
<p class="empty" v-if="!fetching && users.length == 0">%i18n:@empty%</p>
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@fetching%<mk-ellipsis/></p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@fetching%<mk-ellipsis/></p>
<a class="refresh" @click="refresh">%i18n:@refresh%</a>
<button class="close" @click="close" title="%i18n:@close%">%fa:times%</button>
<button class="close" @click="close" title="%i18n:@close%"><fa icon="times"/></button>
</div>
</template>
@@ -89,7 +89,7 @@ export default Vue.extend({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
> .refresh
@@ -121,7 +121,7 @@ export default Vue.extend({
&:active
color #222
> [data-fa]
> [data-icon]
padding 10px
</style>

2
src/client/app/mobile/views/components/media-image.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="qjewsnkgzzxlxtzncydssfbgjibiehcy" v-if="image.isSensitive && hide && !$store.state.device.alwaysShowNsfw" @click="hide = false">
<div>
<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
<b><fa icon="exclamation-triangle"/> %i18n:@sensitive%</b>
<span>%i18n:@click-to-show%</span>
</div>
</div>

4
src/client/app/mobile/views/components/media-video.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="video.isSensitive && hide" @click="hide = false">
<div>
<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
<b><fa icon="exclamation-triangle"/> %i18n:@sensitive%</b>
<span>%i18n:@click-to-show%</span>
</div>
</div>
@@ -11,7 +11,7 @@
:style="imageStyle"
:title="video.name"
>
%fa:R play-circle%
<fa :icon="['far', 'play-circle']"/>
</a>
</template>

20
src/client/app/mobile/views/components/note-detail.vue
View File

@@ -6,8 +6,8 @@
@click="fetchConversation"
:disabled="conversationFetching"
>
<template v-if="!conversationFetching">%fa:ellipsis-v%</template>
<template v-if="conversationFetching">%fa:spinner .pulse%</template>
<template v-if="!conversationFetching"><fa icon="ellipsis-v"/></template>
<template v-if="conversationFetching"><fa icon="spinner .pulse"/></template>
</button>
<div class="conversation">
<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
@@ -18,7 +18,7 @@
<div class="renote" v-if="isRenote">
<p>
<mk-avatar class="avatar" :user="note.user"/>
%fa:retweet%
<fa icon="retweet"/>
<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span>
<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
@@ -50,7 +50,7 @@
</div>
<mk-poll v-if="p.poll" :note="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> %i18n:@location%</a>
<div class="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote"/>
@@ -63,18 +63,18 @@
<footer>
<mk-reactions-viewer :note="p"/>
<button @click="reply" title="%i18n:@reply%">
<template v-if="p.reply">%fa:reply-all%</template>
<template v-else>%fa:reply%</template>
<template v-if="p.reply"><fa icon="reply-all"/></template>
<template v-else><fa icon="reply"/></template>
<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
</button>
<button @click="renote" title="Renote">
%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
<fa icon="retweet"/><p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
</button>
<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@reaction%">
%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
<fa icon="plus"/><p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
</button>
<button @click="menu" ref="menuButton">
%fa:ellipsis-h%
<fa icon="ellipsis-h"/>
</button>
</footer>
</article>
@@ -281,7 +281,7 @@ export default Vue.extend({
margin 0 8px 0 0
border-radius 6px
[data-fa]
[data-icon]
margin-right 4px
.name

18
src/client/app/mobile/views/components/note.vue
View File

@@ -11,7 +11,7 @@
</div>
<div class="renote" v-if="isRenote">
<mk-avatar class="avatar" :user="note.user"/>
%fa:retweet%
<fa icon="retweet"/>
<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span>
<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
<span>{{ '%i18n:@reposted-by%'.substr('%i18n:@reposted-by%'.indexOf('}') + 1) }}</span>
@@ -29,7 +29,7 @@
<div class="content" v-show="appearNote.cw == null || showContent">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
<a class="reply" v-if="appearNote.reply">%fa:reply%</a>
<a class="reply" v-if="appearNote.reply"><fa icon="reply"/></a>
<misskey-flavored-markdown v-if="appearNote.text" :text="appearNote.text" :i="$store.state.i" :class="$style.text" :customEmojis="appearNote.emojis"/>
<a class="rp" v-if="appearNote.renote != null">RN:</a>
</div>
@@ -38,7 +38,7 @@
</div>
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> %i18n:@location%</a>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
</div>
<span class="app" v-if="appearNote.app">via <b>{{ appearNote.app.name }}</b></span>
@@ -46,18 +46,18 @@
<footer>
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
<button @click="reply()">
<template v-if="appearNote.reply">%fa:reply-all%</template>
<template v-else>%fa:reply%</template>
<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
<template v-else><fa icon="reply"/></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button>
<button @click="renote()" title="Renote">
%fa:retweet%<p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
<fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
</button>
<button :class="{ reacted: appearNote.myReaction != null }" @click="react()" ref="reactButton">
%fa:plus%<p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
<fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
</button>
<button class="menu" @click="menu()" ref="menuButton">
%fa:ellipsis-h%
<fa icon="ellipsis-h"/>
</button>
</footer>
</div>
@@ -155,7 +155,7 @@ export default Vue.extend({
width 28px
height 28px
[data-fa]
[data-icon]
margin-right 4px
> span

10
src/client/app/mobile/views/components/notes.vue
View File

@@ -20,8 +20,8 @@
<template v-for="(note, i) in _notes">
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
<span><fa icon="angle-up"/>{{ note._datetext }}</span>
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
</p>
</template>
</component>
@@ -29,7 +29,7 @@
<footer v-if="more">
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">%i18n:@load-more%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
<template v-if="moreFetching"><fa icon="spinner .pulse" fixed-width/></template>
</button>
</footer>
</div>
@@ -233,7 +233,7 @@ export default Vue.extend({
span
margin 0 16px
[data-fa]
[data-icon]
margin-right 8px
> .placeholder
@@ -250,7 +250,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

22
src/client/app/mobile/views/components/notification-preview.vue
View File

@@ -4,22 +4,22 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user | userName }}</p>
<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
<p class="note-ref"><fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/></p>
</div>
</template>
<template v-if="notification.type == 'renote'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:retweet%{{ notification.note.user | userName }}</p>
<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p>
<p><fa icon="retweet"/>{{ notification.note.user | userName }}</p>
<p class="note-ref"><fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/></p>
</div>
</template>
<template v-if="notification.type == 'quote'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:quote-left%{{ notification.note.user | userName }}</p>
<p><fa icon="quote-left"/>{{ notification.note.user | userName }}</p>
<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
</div>
</template>
@@ -27,21 +27,21 @@
<template v-if="notification.type == 'follow'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:user-plus%{{ notification.user | userName }}</p>
<p><fa icon="user-plus"/>{{ notification.user | userName }}</p>
</div>
</template>
<template v-if="notification.type == 'receiveFollowRequest'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:user-clock%{{ notification.user | userName }}</p>
<p><fa icon="user-clock"/>{{ notification.user | userName }}</p>
</div>
</template>
<template v-if="notification.type == 'reply'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:reply%{{ notification.note.user | userName }}</p>
<p><fa icon="reply"/>{{ notification.note.user | userName }}</p>
<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
</div>
</template>
@@ -49,7 +49,7 @@
<template v-if="notification.type == 'mention'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:at%{{ notification.note.user | userName }}</p>
<p><fa icon="at"/>{{ notification.note.user | userName }}</p>
<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
</div>
</template>
@@ -57,8 +57,8 @@
<template v-if="notification.type == 'poll_vote'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:chart-pie%{{ notification.user | userName }}</p>
<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
<p><fa icon="chart-pie"/>{{ notification.user | userName }}</p>
<p class="note-ref"><fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/></p>
</div>
</template>
</div>
@@ -110,7 +110,7 @@ export default Vue.extend({
.note-ref
[data-fa]
[data-icon]
font-size 1em
font-weight normal
font-style normal

18
src/client/app/mobile/views/components/notification.vue
View File

@@ -9,8 +9,8 @@
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}
%fa:quote-right%
<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}
<fa icon="quote-right"/>
</router-link>
</div>
</div>
@@ -19,12 +19,12 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:retweet%
<fa icon="retweet"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
</router-link>
</div>
</div>
@@ -33,7 +33,7 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:user-plus%
<fa icon="user-plus"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
@@ -44,7 +44,7 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:user-clock%
<fa icon="user-clock"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
@@ -55,12 +55,12 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:chart-pie%
<fa icon="chart-pie"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
</router-link>
</div>
</div>
@@ -163,7 +163,7 @@ export default Vue.extend({
> .note-ref
color var(--noteText)
[data-fa]
[data-icon]
font-size 1em
font-weight normal
font-style normal

10
src/client/app/mobile/views/components/notifications.vue
View File

@@ -11,14 +11,14 @@
<template v-for="(notification, i) in _notifications">
<mk-notification :notification="notification" :key="notification.id"/>
<p class="date" :key="notification.id + '_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>
<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
</p>
</template>
</component>
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>
{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
</button>
@@ -165,7 +165,7 @@ export default Vue.extend({
span
margin 0 16px
i
[data-icon]
margin-right 8px
> .more
@@ -175,7 +175,7 @@ export default Vue.extend({
color var(--text)
border-top solid 1px rgba(#000, 0.05)
> [data-fa]
> [data-icon]
margin-right 4px
> .empty

26
src/client/app/mobile/views/components/post-form.vue
View File

@@ -2,10 +2,10 @@
<div class="mk-post-form">
<div class="form">
<header>
<button class="cancel" @click="cancel">%fa:times%</button>
<button class="cancel" @click="cancel"><fa icon="times"/></button>
<div>
<span class="text-count" :class="{ over: trimmedLength(text) > this.maxNoteTextLength }">{{ this.maxNoteTextLength - trimmedLength(text) }}</span>
<span class="geo" v-if="geo">%fa:map-marker-alt%</span>
<span class="geo" v-if="geo"><fa icon="map-marker-alt"/></span>
<button class="submit" :disabled="!canPost" @click="post">{{ submitText }}</button>
</div>
</header>
@@ -28,18 +28,18 @@
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false"/>
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
<footer>
<button class="upload" @click="chooseFile">%fa:upload%</button>
<button class="drive" @click="chooseFileFromDrive">%fa:cloud%</button>
<button class="kao" @click="kao">%fa:R smile%</button>
<button class="poll" @click="poll = true">%fa:chart-pie%</button>
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
<button class="upload" @click="chooseFile"><fa icon="upload"/></button>
<button class="drive" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
<button class="kao" @click="kao"><fa :icon="['far', 'smile']"/></button>
<button class="poll" @click="poll = true"><fa icon="chart-pie"/></button>
<button class="poll" @click="useCw = !useCw"><fa icon="eye-slash"/></button>
<button class="geo" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
<button class="visibility" @click="setVisibility" ref="visibilityButton">
<span v-if="visibility === 'public'">%fa:globe%</span>
<span v-if="visibility === 'home'">%fa:home%</span>
<span v-if="visibility === 'followers'">%fa:unlock%</span>
<span v-if="visibility === 'specified'">%fa:envelope%</span>
<span v-if="visibility === 'private'">%fa:lock%</span>
<span v-if="visibility === 'public'"><fa icon="globe"/></span>
<span v-if="visibility === 'home'"><fa icon="home"/></span>
<span v-if="visibility === 'followers'"><fa icon="unlock"/></span>
<span v-if="visibility === 'specified'"><fa icon="envelope"/></span>
<span v-if="visibility === 'private'"><fa icon="lock"/></span>
</button>
</footer>
<input ref="file" class="file" type="file" multiple="multiple" @change="onChangeFile"/>

2
src/client/app/mobile/views/components/sub-note-content.vue
View File

@@ -3,7 +3,7 @@
<div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
<span v-if="note.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
<a class="reply" v-if="note.replyId">%fa:reply%</a>
<a class="reply" v-if="note.replyId"><fa icon="reply"/></a>
<misskey-flavored-markdown v-if="note.text" :text="note.text" :i="$store.state.i" :customEmojis="note.emojis"/>
<a class="rp" v-if="note.renoteId">RN: ...</a>
</div>

8
src/client/app/mobile/views/components/ui.header.vue
View File

@@ -5,8 +5,8 @@
<div class="main" ref="main">
<div class="backdrop"></div>
<div class="content" ref="mainContainer">
<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
<button class="nav" @click="$parent.isDrawerOpening = true"><fa icon="bars"/></button>
<i v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation" class="circle"><fa icon="circle"/></i>
<h1>
<slot>{{ os.instanceName }}</slot>
</h1>
@@ -147,10 +147,10 @@ export default Vue.extend({
line-height $height
border-right solid 1px rgba(#000, 0.1)
> [data-fa]
> [data-icon]
transition all 0.2s ease
> [data-fa].circle
> i.circle
position absolute
top 8px
left 8px

34
src/client/app/mobile/views/components/ui.nav.vue
View File

@@ -15,23 +15,23 @@
</router-link>
<div class="links">
<ul>
<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@timeline%%fa:angle-right%</router-link></li>
<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotification">%fa:circle%</template>%fa:angle-right%</router-link></li>
<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>%fa:angle-right%</router-link></li>
<li v-if="$store.getters.isSignedIn && ($store.state.i.isLocked || $store.state.i.carefulBot)"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'">%fa:R envelope%%i18n:@follow-requests%<template v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount">%fa:circle%</template>%fa:angle-right%</router-link></li>
<li><router-link to="/reversi" :data-active="$route.name == 'reversi'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
<li><router-link to="/" :data-active="$route.name == 'index'"><i><fa icon="home"/></i>%i18n:@timeline%<i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'"><i><fa :icon="['far', 'bell']"/></i>%i18n:@notifications%<i v-if="hasUnreadNotification" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'"><i><fa :icon="['far', 'comments']"/></i>%i18n:@messaging%<i v-if="hasUnreadMessagingMessage" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
<li v-if="$store.getters.isSignedIn && ($store.state.i.isLocked || $store.state.i.carefulBot)"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'"><i><fa :icon="['far', 'envelope']"/></i>%i18n:@follow-requests%<i v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/reversi" :data-active="$route.name == 'reversi'"><i><fa icon="gamepad"/></i>%i18n:@game%<i v-if="hasGameInvitation" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
</ul>
<ul>
<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:R calendar-alt%%i18n:@widgets%%fa:angle-right%</router-link></li>
<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'">%fa:star%%i18n:@favorites%%fa:angle-right%</router-link></li>
<li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'">%fa:list%%i18n:@user-lists%%fa:angle-right%</router-link></li>
<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:common.drive%%fa:angle-right%</router-link></li>
<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'"><i><fa :icon="['far', 'calendar-alt']"/></i>%i18n:@widgets%<i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'"><i><fa icon="star"/></i>%i18n:@favorites%<i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'"><i><fa icon="list"/></i>%i18n:@user-lists%<i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/i/drive" :data-active="$route.name == 'drive'"><i><fa icon="cloud"/></i>%i18n:common.drive%<i><fa icon="angle-right"/></i></router-link></li>
</ul>
<ul>
<li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li>
<li><router-link to="/i/settings" :data-active="$route.name == 'settings'">%fa:cog%%i18n:@settings%%fa:angle-right%</router-link></li>
<li v-if="$store.getters.isSignedIn && $store.state.i.isAdmin"><a href="/admin">%fa:terminal%<span>%i18n:@admin%</span>%fa:angle-right%</a></li>
<li @click="dark"><p><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template><span>%i18n:@darkmode%</span></p></li>
<li><a @click="search"><i><fa icon="search"/></i>%i18n:@search%<i><fa icon="angle-right"/></i></a></li>
<li><router-link to="/i/settings" :data-active="$route.name == 'settings'"><i><fa icon="cog"/></i>%i18n:@settings%<i><fa icon="angle-right"/></i></router-link></li>
<li v-if="$store.getters.isSignedIn && $store.state.i.isAdmin"><a href="/admin"><i><fa icon="terminal"/></i><span>%i18n:@admin%</span><i><fa icon="angle-right"/></i></a></li>
<li @click="dark"><p><template v-if="$store.state.device.darkmode"><i><fa icon="moon"/></i></template><template v-else><i><fa :icon="['far', 'moon']"/></i></template><span>%i18n:@darkmode%</span></p></li>
</ul>
</div>
<div class="announcements" v-if="announcements && announcements.length > 0">
@@ -195,20 +195,20 @@ export default Vue.extend({
color var(--primaryForeground)
background var(--primary)
> [data-fa]:last-child
> i:last-child
color var(--primaryForeground)
> [data-fa]:first-child
> i:first-child
margin-right 0.5em
width 20px
text-align center
> [data-fa].circle
> i.circle
margin-left 6px
font-size 10px
color var(--primary)
> [data-fa]:last-child
> i:last-child
position absolute
top 0
right 0

2
src/client/app/mobile/views/components/user-timeline.vue
View File

@@ -2,7 +2,7 @@
<div class="mk-user-timeline">
<mk-notes ref="timeline" :more="existMore ? more : null">
<div slot="empty">
%fa:R comments%
<fa :icon="['far', 'comments']"/>
{{ withMedia ? '%i18n:@no-notes-with-media%' : '%i18n:@no-notes%' }}
</div>
</mk-notes>

4
src/client/app/mobile/views/components/users-list.vue
View File

@@ -14,7 +14,7 @@
<p class="no" v-if="!fetching && users.length == 0">
<slot></slot>
</p>
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
</div>
</template>
@@ -127,7 +127,7 @@ export default Vue.extend({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>

2
src/client/app/mobile/views/components/widget-container.vue
View File

@@ -45,7 +45,7 @@ export default Vue.extend({
background var(--faceHeader)
border-radius 8px 8px 0 0
> [data-fa]
> [data-icon]
margin-right 6px
&:empty

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"/>

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

@@ -1,7 +1,7 @@
<template>
<div class="mkw-activity">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:chart-bar%%i18n:@activity%</template>
<template slot="header"><fa icon="chart-bar"/>%i18n:@activity%</template>
<div :class="$style.body">
<mk-activity :user="$store.state.i"/>
</div>