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

8
src/client/app/desktop/views/components/activity.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="mk-activity">
<mk-widget-container :show-header="design == 0" :naked="design == 2">
<template slot="header">%fa:chart-bar%%i18n:@title%</template>
<button slot="func" title="%i18n:@toggle%" @click="toggle">%fa:sort%</button>
<template slot="header"><fa icon="chart-bar"/>%i18n:@title%</template>
<button slot="func" title="%i18n:@toggle%" @click="toggle"><fa icon="sort"/></button>
<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
<template v-else>
<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
<x-chart v-show="view == 1" :data="[].concat(activity)"/>
@ -78,7 +78,7 @@ export default Vue.extend({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>

6
src/client/app/desktop/views/components/calendar.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="mk-calendar" :data-melt="design == 4 || design == 5">
<template v-if="design == 0 || design == 1">
<button @click="prev" title="%i18n:@prev%">%fa:chevron-circle-left%</button>
<button @click="prev" title="%i18n:@prev%"><fa icon="chevron-circle-left"/></button>
<p class="title">{{ '%i18n:@title%'.replace('{1}', year).replace('{2}', month) }}</p>
<button @click="next" title="%i18n:@next%">%fa:chevron-circle-right%</button>
<button @click="next" title="%i18n:@next%"><fa icon="chevron-circle-right"/></button>
</template>
<div class="calendar">
@ -151,7 +151,7 @@ export default Vue.extend({
background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.07)
> [data-fa]
> [data-icon]
margin-right 4px
> button

6
src/client/app/desktop/views/components/choose-file-from-drive-window.vue
View file

@ -13,7 +13,7 @@
@change-selection="onChangeSelection"
/>
<div :class="$style.footer">
<button :class="$style.upload" title="%i18n:@upload%" @click="upload">%fa:upload%</button>
<button :class="$style.upload" title="%i18n:@upload%" @click="upload"><fa icon="upload"/></button>
<button :class="$style.cancel" @click="cancel">%i18n:@cancel%</button>
<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">%i18n:@ok%</button>
</div>
@ -28,7 +28,7 @@ export default Vue.extend({
default: false
},
title: {
default: '%fa:R file%%i18n:@choose-prompt%'
default: '<fa :icon="['far', 'file']"/>%i18n:@choose-prompt%'
}
},
data() {
@ -62,7 +62,7 @@ export default Vue.extend({
.title
> [data-fa]
> [data-icon]
margin-right 4px
.count

4
src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
View file

@ -21,7 +21,7 @@ import Vue from 'vue';
export default Vue.extend({
props: {
title: {
default: '%fa:R folder%%i18n:@choose-prompt%'
default: '<fa :icon="['far', 'folder']"/>%i18n:@choose-prompt%'
}
},
methods: {
@ -40,7 +40,7 @@ export default Vue.extend({
.title
> [data-fa]
> [data-icon]
margin-right 4px
.browser

14
src/client/app/desktop/views/components/context-menu.menu.vue
View file

@ -3,13 +3,13 @@
<li v-for="(item, i) in menu" :class="item ? item.type : item === null ? 'divider' : null">
<template v-if="item">
<template v-if="item.type == null || item.type == 'item'">
<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
<p @click="click(item)"><i v-if="item.icon" :class="$style.icon"><fa :icon="item.icon"/></i>{{ item.text }}</p>
</template>
<template v-else-if="item.type == 'link'">
<a :href="item.href" :target="item.target" @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</a>
<a :href="item.href" :target="item.target" @click="click(item)"><i v-if="item.icon" :class="$style.icon"><fa :icon="item.icon"/></i>{{ item.text }}</a>
</template>
<template v-else-if="item.type == 'nest'">
<p><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}...<span class="caret">%fa:caret-right%</span></p>
<p><i v-if="item.icon" :class="$style.icon"><fa :icon="item.icon"/></i>{{ item.text }}...<span class="caret"><fa icon="caret-right"/></span></p>
<me-nu :menu="item.menu" @x="click"/>
</template>
</template>
@ -113,9 +113,9 @@ export default Vue.extend({
<style lang="stylus" module>
.icon
> *
width 28px
margin-left -28px
text-align center
display inline-block
width 28px
margin-left -28px
text-align center
</style>

4
src/client/app/desktop/views/components/crop-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" is-modal width="800px" :can-close="false">
<span slot="header">%fa:crop%{{ title }}</span>
<span slot="header"><fa icon="crop"/>{{ title }}</span>
<div class="body">
<vue-cropper ref="cropper"
:src="image.url"
@ -64,7 +64,7 @@ export default Vue.extend({
.header
> [data-fa]
> [data-icon]
margin-right 4px
.img

2
src/client/app/desktop/views/components/dialog.vue
View file

@ -91,8 +91,6 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-dialog
> .bg
display block

4
src/client/app/desktop/views/components/drive-window.vue
View file

@ -2,7 +2,7 @@
<mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
<template slot="header">
<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:@used%</p>
<span :class="$style.title">%fa:cloud%%i18n:common.drive%</span>
<span :class="$style.title"><fa icon="cloud"/>%i18n:common.drive%</span>
</template>
<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
</mk-window>
@ -39,7 +39,7 @@ export default Vue.extend({
<style lang="stylus" module>
.title
> [data-fa]
> [data-icon]
margin-right 4px
.info

12
src/client/app/desktop/views/components/drive.file.vue
View file

@ -71,27 +71,27 @@ export default Vue.extend({
contextmenu((this as any).os)(e, [{
type: 'item',
text: '%i18n:@contextmenu.rename%',
icon: '%fa:i-cursor%',
icon: 'i-cursor',
action: this.rename
}, {
type: 'item',
text: this.file.isSensitive ? '%i18n:@contextmenu.unmark-as-sensitive%' : '%i18n:@contextmenu.mark-as-sensitive%',
icon: this.file.isSensitive ? '%fa:R eye%' : '%fa:R eye-slash%',
icon: this.file.isSensitive ? ['far', 'eye'] : ['far', 'eye-slash'],
action: this.toggleSensitive
}, null, {
type: 'item',
text: '%i18n:@contextmenu.copy-url%',
icon: '%fa:link%',
icon: 'link',
action: this.copyUrl
}, {
type: 'link',
href: `${this.file.url}?download`,
text: '%i18n:@contextmenu.download%',
icon: '%fa:download%',
icon: 'download',
}, null, {
type: 'item',
text: '%i18n:common.delete%',
icon: '%fa:R trash-alt%',
icon: ['far', 'trash-alt'],
action: this.deleteFile
}, null, {
type: 'nest',
@ -170,7 +170,7 @@ export default Vue.extend({
copyUrl() {
copyToClipboard(this.file.url);
(this as any).apis.dialog({
title: '%fa:check%%i18n:@contextmenu.copied%',
title: '<fa icon="check"/>%i18n:@contextmenu.copied%',
text: '%i18n:@contextmenu.copied-url-to-clipboard%',
actions: [{
text: '%i18n:common.ok%'

16
src/client/app/desktop/views/components/drive.folder.vue
View file

@ -16,8 +16,8 @@
:title="title"
>
<p class="name">
<template v-if="hover">%fa:R folder-open .fw%</template>
<template v-if="!hover">%fa:R folder .fw%</template>
<template v-if="hover"><fa :icon="['far', 'folder-open']" fixed-width/></template>
<template v-if="!hover"><fa :icon="['far', 'folder']" fixed-width/></template>
{{ folder.name }}
</p>
</div>
@ -55,22 +55,22 @@ export default Vue.extend({
contextmenu((this as any).os)(e, [{
type: 'item',
text: '%i18n:@contextmenu.move-to-this-folder%',
icon: '%fa:arrow-right%',
icon: 'arrow-right',
action: this.go
}, {
type: 'item',
text: '%i18n:@contextmenu.show-in-new-window%',
icon: '%fa:R window-restore%',
icon: ['far', 'window-restore'],
action: this.newWindow
}, null, {
type: 'item',
text: '%i18n:@contextmenu.rename%',
icon: '%fa:i-cursor%',
icon: 'i-cursor',
action: this.rename
}, null, {
type: 'item',
text: '%i18n:common.delete%',
icon: '%fa:R trash-alt%',
icon: ['far', 'trash-alt'],
action: this.deleteFolder
}], {
closed: () => {
@ -155,7 +155,7 @@ export default Vue.extend({
switch (err) {
case 'detected-circular-definition':
(this as any).apis.dialog({
title: '%fa:exclamation-triangle%%i18n:@unable-to-process%',
title: '<fa icon="exclamation-triangle"/>%i18n:@unable-to-process%',
text: '%i18n:@circular-reference-detected%',
actions: [{
text: '%i18n:common.ok%'
@ -255,7 +255,7 @@ export default Vue.extend({
font-size 0.9em
color var(--desktopDriveFolderFg)
> [data-fa]
> [data-icon]
margin-right 4px
margin-left 2px
text-align left

4
src/client/app/desktop/views/components/drive.nav-folder.vue
View file

@ -7,7 +7,7 @@
@dragleave="onDragleave"
@drop.stop="onDrop"
>
<template v-if="folder == null">%fa:cloud%</template>
<i v-if="folder == null" class="cloud"><fa icon="cloud"/></i>
<span>{{ folder == null ? '%i18n:common.drive%' : folder.name }}</span>
</div>
</template>
@ -110,7 +110,7 @@ export default Vue.extend({
&[data-draghover]
background #eee
[data-fa].cloud
i.cloud
margin-right 4px
</style>

19
src/client/app/desktop/views/components/drive.vue
View file

@ -4,10 +4,10 @@
<div class="path" @contextmenu.prevent.stop="() => {}">
<x-nav-folder :class="{ current: folder == null }"/>
<template v-for="folder in hierarchyFolders">
<span class="separator">%fa:angle-right%</span>
<span class="separator"><fa icon="angle-right"/></span>
<x-nav-folder :folder="folder" :key="folder.id"/>
</template>
<span class="separator" v-if="folder != null">%fa:angle-right%</span>
<span class="separator" v-if="folder != null"><fa icon="angle-right"/></span>
<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
</div>
<!--
@ -138,17 +138,17 @@ export default Vue.extend({
contextmenu((this as any).os)(e, [{
type: 'item',
text: '%i18n:@contextmenu.create-folder%',
icon: '%fa:R folder%',
icon: ['far', 'folder'],
action: this.createFolder
}, {
type: 'item',
text: '%i18n:@contextmenu.upload%',
icon: '%fa:upload%',
icon: 'upload',
action: this.selectLocalFile
}, {
type: 'item',
text: '%i18n:@contextmenu.url-upload%',
icon: '%fa:cloud-upload-alt%',
icon: 'cloud-upload-alt',
action: this.urlUpload
}]);
},
@ -313,7 +313,7 @@ export default Vue.extend({
switch (err) {
case 'detected-circular-definition':
(this as any).apis.dialog({
title: '%fa:exclamation-triangle%%i18n:@unable-to-process%',
title: '<fa icon="exclamation-triangle"/>%i18n:@unable-to-process%',
text: '%i18n:@circular-reference-detected%',
actions: [{
text: '%i18n:common.ok%'
@ -343,7 +343,7 @@ export default Vue.extend({
});
(this as any).apis.dialog({
title: '%fa:check%%i18n:@url-upload-requested%',
title: '<fa icon="check"/>%i18n:@url-upload-requested%',
text: '%i18n:@may-take-time%',
actions: [{
text: '%i18n:common.ok%'
@ -613,9 +613,6 @@ export default Vue.extend({
line-height 38px
cursor pointer
i
margin-right 4px
*
pointer-events none
@ -635,7 +632,7 @@ export default Vue.extend({
opacity 0.5
cursor default
> [data-fa]
> [data-icon]
margin 0
> .search

12
src/client/app/desktop/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%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked">%fa:hourglass-start%<template v-if="size == 'big'"> %i18n:@follow-processing%</template></template>
<template v-else-if="u.isFollowing">%fa:minus%<template v-if="size == 'big'"> %i18n:@following%</template></template>
<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow-request%</template></template>
<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow%</template></template>
<template v-if="u.hasPendingFollowRequestFromYou && u.isLocked"><fa icon="hourglass-half"/><template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked"><fa icon="hourglass-start"/><template v-if="size == 'big'"> %i18n:@follow-processing%</template></template>
<template v-else-if="u.isFollowing"><fa icon="minus"/><template v-if="size == 'big'"> %i18n:@following%</template></template>
<template v-else-if="!u.isFollowing && u.isLocked"><fa icon="plus"/><template v-if="size == 'big'"> %i18n:@follow-request%</template></template>
<template v-else-if="!u.isFollowing && !u.isLocked"><fa icon="plus"/><template v-if="size == 'big'"> %i18n:@follow%</template></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/desktop/views/components/friends-maker.vue
View file

@ -11,9 +11,9 @@
</div>
</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="destroyDom()" title="%i18n:@close%">%fa:times%</button>
<button class="close" @click="destroyDom()" title="%i18n:@close%"><fa icon="times"/></button>
</div>
</template>
@ -124,7 +124,7 @@ export default Vue.extend({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
> .refresh
@ -155,7 +155,7 @@ export default Vue.extend({
&:active
color #222
> [data-fa]
> [data-icon]
padding 14px
</style>

4
src/client/app/desktop/views/components/game-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
<span slot="header" :class="$style.header">%fa:gamepad%%i18n:@game%</span>
<span slot="header" :class="$style.header"><fa icon="gamepad"/>%i18n:@game%</span>
<mk-reversi :class="$style.content" @gamed="g => game = g"/>
</mk-window>
</template>
@ -27,7 +27,7 @@ export default Vue.extend({
<style lang="stylus" module>
.header
> [data-fa]
> [data-icon]
margin-right 4px
.content

6
src/client/app/desktop/views/components/home.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="mk-home" :data-customize="customize">
<div class="customize" v-if="customize">
<router-link to="/">%fa:check%%i18n:@done%</router-link>
<router-link to="/"><fa icon="check"/>%i18n:@done%</router-link>
<div>
<div class="adder">
<p>%i18n:@add-widget%</p>
@ -185,7 +185,7 @@ export default Vue.extend({
methods: {
hint() {
(this as any).apis.dialog({
title: '%fa:info-circle%%i18n:common.customization-tips.title%',
title: '<fa icon="info-circle"/>%i18n:common.customization-tips.title%',
text: '<p>%i18n:common.customization-tips.paragraph1%</p>' +
'<p>%i18n:common.customization-tips.paragraph2%</p>' +
'<p>%i18n:common.customization-tips.paragraph3%</p>' +
@ -299,7 +299,7 @@ export default Vue.extend({
background var(--primaryDarken10)
transition background 0s ease
> [data-fa]
> [data-icon]
margin-right 8px
> div

6
src/client/app/desktop/views/components/input-dialog.vue
View file

@ -1,7 +1,7 @@
<template>
<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="destroyDom">
<span slot="header" :class="$style.header">
%fa:i-cursor%{{ title }}
<fa icon="i-cursor"/>{{ title }}
</span>
<div :class="$style.body">
@ -76,10 +76,8 @@ export default Vue.extend({
<style lang="stylus" module>
.header
> [data-fa]
> [data-icon]
margin-right 4px
.body

2
src/client/app/desktop/views/components/media-image.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="ldwbgwstjsdgcjruamauqdrffetqudry" 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/desktop/views/components/media-video.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="uofhebxjdgksfmltszlxurtjnjjsvioh" 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>
@ -12,7 +12,7 @@
@click.prevent="onClick"
:title="video.name"
>
%fa:R play-circle%
<fa :icon="['far', 'play-circle']"/>
</a>
</div>
</template>

4
src/client/app/desktop/views/components/messaging-room-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
<span slot="header" :class="$style.header">%fa:comments%%i18n:@title% {{ user | userName }}</span>
<span slot="header" :class="$style.header"><fa icon="comments"/>%i18n:@title% {{ user | userName }}</span>
<mk-messaging-room :user="user" :class="$style.content"/>
</mk-window>
</template>
@ -22,7 +22,7 @@ export default Vue.extend({
<style lang="stylus" module>
.header
> [data-fa]
> [data-icon]
margin-right 4px
.content

4
src/client/app/desktop/views/components/messaging-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
<span slot="header" :class="$style.header">%fa:comments%%i18n:@title%</span>
<span slot="header" :class="$style.header"><fa icon="comments"/>%i18n:@title%</span>
<mk-messaging :class="$style.content" @navigate="navigate"/>
</mk-window>
</template>
@ -22,7 +22,7 @@ export default Vue.extend({
<style lang="stylus" module>
.header
> [data-fa]
> [data-icon]
margin-right 4px
.content

20
src/client/app/desktop/views/components/note-detail.vue
View file

@ -7,8 +7,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"/>
@ -19,7 +19,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>
@ -52,7 +52,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"/>
@ -62,18 +62,18 @@
<footer>
<mk-reactions-viewer :note="p"/>
<button class="replyButton" @click="reply" title="">
<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 class="renoteButton" @click="renote" title="%i18n:@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="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-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>
@ -278,7 +278,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/desktop/views/components/note.vue
View file

@ -15,7 +15,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" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
<span>{{ '%i18n:@reposted-by%'.substr('%i18n:@reposted-by%'.indexOf('}') + 1) }}</span>
@ -33,7 +33,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">RN:</a>
</div>
@ -41,7 +41,7 @@
<mk-media-list :media-list="appearNote.files"/>
</div>
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
<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% 位置情報</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"/> 位置情報</a>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini"/>
</div>
@ -49,18 +49,18 @@
<footer>
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
<button class="replyButton" @click="reply()" title="%i18n:@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 class="renoteButton" @click="renote()" title="%i18n:@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="reactionButton" :class="{ reacted: appearNote.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
%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 @click="menu()" ref="menuButton">
%fa:ellipsis-h%
<fa icon="ellipsis-h"/>
</button>
</footer>
</div>
@ -190,7 +190,7 @@ export default Vue.extend({
margin 0 8px 0 0
border-radius 6px
[data-fa]
[data-icon]
margin-right 4px
> span

8
src/client/app/desktop/views/components/notes.vue
View file

@ -17,8 +17,8 @@
<template v-for="(note, i) in _notes">
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/>
<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>
@ -26,7 +26,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>
@ -230,7 +230,7 @@ export default Vue.extend({
span
margin 0 16px
[data-fa]
[data-icon]
margin-right 8px
> .newer-indicator

32
src/client/app/desktop/views/components/notifications.vue
View file

@ -21,7 +21,7 @@
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p>
<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>
</template>
@ -29,11 +29,11 @@
<template v-if="notification.type == 'renote'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:retweet%
<p><fa icon="retweet"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<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>
</template>
@ -41,7 +41,7 @@
<template v-if="notification.type == 'quote'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:quote-left%
<p><fa icon="quote-left"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
@ -51,7 +51,7 @@
<template v-if="notification.type == 'follow'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:user-plus%
<p><fa icon="user-plus"/>
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p>
</div>
@ -60,7 +60,7 @@
<template v-if="notification.type == 'receiveFollowRequest'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:user-clock%
<p><fa icon="user-clock"/>
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p>
</div>
@ -69,7 +69,7 @@
<template v-if="notification.type == 'reply'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:reply%
<p><fa icon="reply"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
@ -79,7 +79,7 @@
<template v-if="notification.type == 'mention'">
<mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text">
<p>%fa:at%
<p><fa icon="at"/>
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
@ -89,23 +89,23 @@
<template v-if="notification.type == 'poll_vote'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
<p><fa icon="chart-pie"/><a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
<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>
</template>
</div>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
<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>
</div>
<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
</button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
</div>
@ -264,7 +264,7 @@ export default Vue.extend({
.note-ref
color var(--noteText)
[data-fa]
[data-icon]
font-size 1em
font-weight normal
font-style normal
@ -300,7 +300,7 @@ export default Vue.extend({
span
margin 0 16px
[data-fa]
[data-icon]
margin-right 8px
> .more
@ -319,7 +319,7 @@ export default Vue.extend({
&.fetching
cursor wait
> [data-fa]
> [data-icon]
margin-right 4px
> .empty

2
src/client/app/desktop/views/components/post-form-window.vue
View file

@ -1,7 +1,7 @@
<template>
<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation">
<span slot="header" class="mk-post-form-window--header">
<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
<span class="icon" v-if="geo"><fa icon="map-marker-alt"/></span>
<span v-if="!reply">%i18n:@note%</span>
<span v-if="reply">%i18n:@reply%</span>
<span class="count" v-if="files.length != 0">{{ '%i18n:@attaches%'.replace('{}', files.length) }}</span>

22
src/client/app/desktop/views/components/post-form.vue
View file

@ -32,18 +32,18 @@
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="saveDraft()"/>
</div>
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
<button class="upload" title="%i18n:@attach-media-from-local%" @click="chooseFile">%fa:upload%</button>
<button class="drive" title="%i18n:@attach-media-from-drive%" @click="chooseFileFromDrive">%fa:cloud%</button>
<button class="kao" title="%i18n:@insert-a-kao%" @click="kao">%fa:R smile%</button>
<button class="poll" title="%i18n:@create-poll%" @click="poll = !poll">%fa:chart-pie%</button>
<button class="poll" title="%i18n:@hide-contents%" @click="useCw = !useCw">%fa:eye-slash%</button>
<button class="geo" title="%i18n:@attach-location-information%" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
<button class="upload" title="%i18n:@attach-media-from-local%" @click="chooseFile"><fa icon="upload"/></button>
<button class="drive" title="%i18n:@attach-media-from-drive%" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
<button class="kao" title="%i18n:@insert-a-kao%" @click="kao"><fa :icon="['far', 'smile']"/></button>
<button class="poll" title="%i18n:@create-poll%" @click="poll = !poll"><fa icon="chart-pie"/></button>
<button class="poll" title="%i18n:@hide-contents%" @click="useCw = !useCw"><fa icon="eye-slash"/></button>
<button class="geo" title="%i18n:@attach-location-information%" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
<button class="visibility" title="%i18n:@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>
<p class="text-count" :class="{ over: this.trimmedLength(text) > this.maxNoteTextLength }">{{ this.maxNoteTextLength - this.trimmedLength(text) }}</p>
<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">

2
src/client/app/desktop/views/components/received-follow-requests-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
<span slot="header">%fa:envelope R% %i18n:@title%</span>
<span slot="header"><fa :icon="['far', 'envelope']"/> %i18n:@title%</span>
<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
<div v-for="req in requests">

4
src/client/app/desktop/views/components/renote-form-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" is-modal @closed="onWindowClosed" :animation="animation">
<span slot="header" :class="$style.header">%fa:retweet%%i18n:@title%</span>
<span slot="header" :class="$style.header"><fa icon="retweet"/>%i18n:@title%</span>
<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
</mk-window>
</template>
@ -58,7 +58,7 @@ export default Vue.extend({
<style lang="stylus" module>
.header
> [data-fa]
> [data-icon]
margin-right 4px
</style>

4
src/client/app/desktop/views/components/settings-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
<span slot="header" :class="$style.header">%fa:cog%%i18n:@settings%</span>
<span slot="header" :class="$style.header"><fa icon="cog"/>%i18n:@settings%</span>
<mk-settings :initial-page="initialPage" @done="close"/>
</mk-window>
</template>
@ -24,7 +24,7 @@ export default Vue.extend({
<style lang="stylus" module>
.header
> [data-fa]
> [data-icon]
margin-right 4px
</style>

2
src/client/app/desktop/views/components/settings.2fa.vue
View file

@ -16,7 +16,7 @@
<ui-button primary @click="submit">%i18n:@submit%</ui-button>
</li>
</ol>
<div class="ui info"><p>%fa:info-circle%%i18n:@info%</p></div>
<div class="ui info"><p><fa icon="info-circle"/>%i18n:@info%</p></div>
</div>
</div>
</template>

8
src/client/app/desktop/views/components/settings.signins.vue
View file

@ -3,13 +3,13 @@
<div class="signins" v-if="signins.length != 0">
<div v-for="signin in signins">
<header @click="signin._show = !signin._show">
<template v-if="signin.success">%fa:check%</template>
<template v-else>%fa:times%</template>
<template v-if="signin.success"><fa icon="check"/></template>
<template v-else><fa icon="times"/></template>
<span class="ip">{{ signin.ip }}</span>
<mk-time :time="signin.createdAt"/>
</header>
<div class="headers" v-show="signin._show">
<tree-view :data="signin.headers"/>
<!-- TODO -->
</div>
</div>
</div>
@ -62,7 +62,7 @@ export default Vue.extend({
line-height 32px
cursor pointer
> [data-fa]
> [data-icon]
margin-right 8px
text-align left

64
src/client/app/desktop/views/components/settings.vue
View file

@ -1,31 +1,31 @@
<template>
<div class="mk-settings">
<div class="nav">
<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'">%fa:user .fw%%i18n:@profile%</p>
<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'">%fa:palette .fw%%i18n:@theme%</p>
<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:common.drive%</p>
<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'">%fa:ban .fw%%i18n:@mute-and-block%</p>
<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:@security%</p>
<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
<p :class="{ active: page == 'other' }" @mousedown="page = 'other'">%fa:cogs .fw%%i18n:@other%</p>
<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>%i18n:@profile%</p>
<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'"><fa icon="palette" fixed-width/>%i18n:@theme%</p>
<p :class="{ active: page == 'web' }" @mousedown="page = 'web'"><fa icon="desktop" fixed-width/>Web</p>
<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'"><fa :icon="['far', 'bell']" fixed-width/>%i18n:@notification%</p>
<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'"><fa icon="cloud" fixed-width/>%i18n:common.drive%</p>
<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'"><fa icon="hashtag" fixed-width/>%i18n:@tags%</p>
<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'"><fa icon="ban" fixed-width/>%i18n:@mute-and-block%</p>
<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'"><fa icon="puzzle-piece" fixed-width/>%i18n:@apps%</p>
<p :class="{ active: page == 'security' }" @mousedown="page = 'security'"><fa icon="unlock-alt" fixed-width/>%i18n:@security%</p>
<p :class="{ active: page == 'api' }" @mousedown="page = 'api'"><fa icon="key" fixed-width/>API</p>
<p :class="{ active: page == 'other' }" @mousedown="page = 'other'"><fa icon="cogs" fixed-width/>%i18n:@other%</p>
</div>
<div class="pages">
<div class="profile" v-show="page == 'profile'">
<mk-profile-editor/>
<ui-card>
<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
<div slot="title"><fa :icon="['fab', 'twitter']"/> %i18n:@twitter%</div>
<section>
<mk-twitter-setting/>
</section>
</ui-card>
<ui-card>
<div slot="title">%fa:B github% %i18n:@github%</div>
<div slot="title"><fa :icon="['fab', 'github']"/> %i18n:@github%</div>
<section>
<mk-github-setting/>
</section>
@ -33,7 +33,7 @@
</div>
<ui-card class="theme" v-show="page == 'theme'">
<div slot="title">%fa:palette% %i18n:@theme%</div>
<div slot="title"><fa icon="palette"/> %i18n:@theme%</div>
<section>
<mk-theme/>
@ -41,7 +41,7 @@
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:sliders-h% %i18n:@behaviour%</div>
<div slot="title"><fa icon="sliders-h"/> %i18n:@behaviour%</div>
<section>
<ui-switch v-model="fetchOnScroll">
@ -87,7 +87,7 @@
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:desktop% %i18n:@display%</div>
<div slot="title"><fa icon="desktop"/> %i18n:@display%</div>
<section>
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
@ -138,7 +138,7 @@
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<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">
@ -152,12 +152,12 @@
max="1"
step="0.1"
/>
<ui-button @click="soundTest">%fa:volume-up% %i18n:@test%</ui-button>
<ui-button @click="soundTest"><fa icon="volume-up"/> %i18n:@test%</ui-button>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:language% %i18n:@language%</div>
<div slot="title"><fa icon="language"/> %i18n:@language%</div>
<section class="fit-top">
<ui-select v-model="lang" placeholder="%i18n:@pick-language%">
<optgroup label="%i18n:@recommended%">
@ -169,23 +169,23 @@
</optgroup>
</ui-select>
<div class="none ui info">
<p>%fa:info-circle%%i18n:@language-desc%</p>
<p><fa icon="info-circle"/>%i18n:@language-desc%</p>
</div>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:trash-alt R% %i18n:@cache%</div>
<div slot="title"><fa :icon="['far', 'trash-alt']"/> %i18n:@cache%</div>
<section>
<ui-button @click="clean">%i18n:@clean-cache%</ui-button>
<div class="none ui info warn">
<p>%fa:exclamation-triangle%%i18n:@cache-warn%</p>
<p><fa icon="exclamation-triangle"/>%i18n:@cache-warn%</p>
</div>
</section>
</ui-card>
<ui-card class="notification" v-show="page == 'notification'">
<div slot="title">%fa:bell R% %i18n:@notification%</div>
<div slot="title"><fa :icon="['far', 'bell']"/> %i18n:@notification%</div>
<section>
<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
%i18n:@auto-watch%
@ -202,7 +202,7 @@
</div>
<ui-card class="hashtags" v-show="page == 'hashtags'">
<div slot="title">%fa:hashtag% %i18n:@tags%</div>
<div slot="title"><fa icon="hashtag"/> %i18n:@tags%</div>
<section>
<x-tags/>
</section>
@ -213,28 +213,28 @@
</div>
<ui-card class="apps" v-show="page == 'apps'">
<div slot="title">%fa:puzzle-piece% %i18n:@apps%</div>
<div slot="title"><fa icon="puzzle-piece"/> %i18n:@apps%</div>
<section>
<x-apps/>
</section>
</ui-card>
<ui-card class="password" v-show="page == 'security'">
<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 class="2fa" v-show="page == 'security'">
<div slot="title">%fa:mobile-alt% %i18n:@2fa%</div>
<div slot="title"><fa icon="mobile-alt"/> %i18n:@2fa%</div>
<section>
<x-2fa/>
</section>
</ui-card>
<ui-card class="signin" v-show="page == 'security'">
<div slot="title">%fa:sign-in-alt% %i18n:@signin%</div>
<div slot="title"><fa icon="sign-in-alt"/> %i18n:@signin%</div>
<section>
<x-signins/>
</section>
@ -245,14 +245,14 @@
</div>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:info-circle% %i18n:@about%</div>
<div slot="title"><fa icon="info-circle"/> %i18n:@about%</div>
<section>
<p v-if="meta">%i18n:@operator%: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
</section>
</ui-card>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:sync-alt% %i18n:@update%</div>
<div slot="title"><fa icon="sync-alt"/> %i18n:@update%</div>
<section>
<p>
<span>%i18n:@version% <i>{{ version }}</i></span>
@ -276,7 +276,7 @@
</ui-card>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:cogs% %i18n:@advanced-settings%</div>
<div slot="title"><fa icon="cogs"/> %i18n:@advanced-settings%</div>
<section>
<ui-switch v-model="debug">
%i18n:@debug-mode%
@ -595,7 +595,7 @@ export default Vue.extend({
user-select none
transition margin-left 0.2s ease
> [data-fa]
> [data-icon]
margin-right 4px
&:hover

2
src/client/app/desktop/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" :href="`/notes/${note.renoteId}`">RN: ...</a>
</div>

4
src/client/app/desktop/views/components/timeline.core.vue
View file

@ -4,7 +4,7 @@
<mk-notes ref="timeline" :more="existMore ? more : null">
<p :class="$style.empty" slot="empty">
%fa:R comments%%i18n:@empty%
<fa :icon="['far', 'comments']"/>%i18n:@empty%
</p>
</mk-notes>
</div>
@ -182,7 +182,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

28
src/client/app/desktop/views/components/timeline.vue
View file

@ -1,17 +1,17 @@
<template>
<div class="mk-timeline">
<header>
<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 == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span>
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</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>
<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
<div class="buttons">
<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></button>
<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></button>
<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button>
<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button>
<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton"><fa icon="hashtag"/></button>
<button @click="chooseList" title="%i18n:@list%" ref="listButton"><fa icon="list"/></button>
</div>
</header>
<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
@ -104,7 +104,7 @@ export default Vue.extend({
const lists = await (this as any).api('users/lists/list');
let menu = [{
icon: '%fa:plus%',
icon: 'plus',
text: '%i18n:@add-list%',
action: () => {
(this as any).apis.input({
@ -125,7 +125,7 @@ export default Vue.extend({
}
menu = menu.concat(lists.map(list => ({
icon: '%fa:list%',
icon: 'list',
text: list.title,
action: () => {
this.list = list;
@ -142,7 +142,7 @@ export default Vue.extend({
chooseTag() {
let menu = [{
icon: '%fa:plus%',
icon: 'plus',
text: '%i18n:@add-tag-timeline%',
action: () => {
(this as any).os.new(MkSettingsWindow, {
@ -156,7 +156,7 @@ export default Vue.extend({
}
menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({
icon: '%fa:hashtag%',
icon: 'hashtag',
text: t.title,
action: () => {
this.tagTl = t;

67
src/client/app/desktop/views/components/ui.header.account.vue
View file

@ -1,47 +1,86 @@
<template>
<div class="account" v-hotkey.global="keymap">
<button class="header" :data-active="isOpen" @click="toggle">
<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen"><fa icon="angle-down"/></template><template v-if="isOpen"><fa icon="angle-up"/></template></span>
<mk-avatar class="avatar" :user="$store.state.i"/>
</button>
<transition name="zoom-in-top">
<div class="menu" v-if="isOpen">
<ul>
<li>
<router-link :to="`/@${ $store.state.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
<router-link :to="`/@${ $store.state.i.username }`">
<i><fa icon="user"/></i>
<span>%i18n:@profile%</span>
<i><fa icon="angle-right"/></i>
</router-link>
</li>
<li @click="drive">
<p>%fa:cloud%<span>%i18n:common.drive%</span>%fa:angle-right%</p>
<p>
<i><fa icon="cloud"/></i>
<span>%i18n:common.drive%</span>
<i><fa icon="angle-right"/></i>
</p>
</li>
<li>
<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
<router-link to="/i/favorites">
<i><fa icon="star"/></i>
<span>%i18n:@favorites%</span>
<i><fa icon="angle-right"/></i>
</router-link>
</li>
<li @click="list">
<p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
<p>
<i><fa icon="list"/></i>
<span>%i18n:@lists%</span>
<i><fa icon="angle-right"/></i>
</p>
</li>
<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
<p>%fa:envelope R%<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>%fa:angle-right%</p>
<p>
<i><fa :icon="['far', 'envelope']"/></i>
<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>
<i><fa icon="angle-right"/></i>
</p>
</li>
</ul>
<ul>
<li>
<router-link to="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</router-link>
<router-link to="/i/customize-home">
<i><fa icon="wrench"/></i>
<span>%i18n:@customize%</span>
<i><fa icon="angle-right"/></i>
</router-link>
</li>
<li @click="settings">
<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
<p>
<i><fa icon="cog"/></i>
<span>%i18n:@settings%</span>
<i><fa icon="angle-right"/></i>
</p>
</li>
<li v-if="$store.state.i.isAdmin">
<a href="/admin">%fa:terminal%<span>%i18n:@admin%</span>%fa:angle-right%</a>
<a href="/admin">
<i><fa icon="terminal"/></i>
<span>%i18n:@admin%</span>
<i><fa icon="angle-right"/></i>
</a>
</li>
</ul>
<ul>
<li @click="dark">
<p><span>%i18n:@dark%</span><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
<p>
<span>%i18n:@dark%</span>
<template v-if="$store.state.device.darkmode"><i><fa icon="moon"/></i></template>
<template v-else><i><fa :icon="['far', 'moon']"/></i></template>
</p>
</li>
</ul>
<ul>
<li @click="signout">
<p class="signout">%fa:power-off%<span>%i18n:@signout%</span></p>
<p class="signout">
<i><fa icon="power-off"/></i>
<span>%i18n:@signout%</span>
</p>
</li>
</ul>
</div>
@ -160,7 +199,7 @@ export default Vue.extend({
@media (max-width 1100px)
display none
[data-fa]
[data-icon]
margin-left 8px
> .avatar
@ -254,11 +293,11 @@ export default Vue.extend({
color var(--primaryForeground)
border-radius 8px
> [data-fa]:first-child
> i:first-child
margin-right 6px
width 16px
> [data-fa]:last-child
> i:last-child
display block
position absolute
top 0

20
src/client/app/desktop/views/components/ui.header.nav.vue
View file

@ -4,32 +4,32 @@
<template v-if="$store.getters.isSignedIn">
<template v-if="$store.state.device.deckDefault">
<li class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
<router-link to="/">%fa:columns%<p>%i18n:@deck%</p></router-link>
<router-link to="/"><fa icon="columns"/><p>%i18n:@deck%</p></router-link>
</li>
<li class="home" :class="{ active: $route.name == 'home' }" @click="goToTop">
<router-link to="/home">%fa:home%<p>%i18n:@home%</p></router-link>
<router-link to="/home"><fa icon="home"/><p>%i18n:@home%</p></router-link>
</li>
</template>
<template v-else>
<li class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop">
<router-link to="/">%fa:home%<p>%i18n:@home%</p></router-link>
<router-link to="/"><fa icon="home"/><p>%i18n:@home%</p></router-link>
</li>
<li class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
<router-link to="/deck">%fa:columns%<p>%i18n:@deck%</p></router-link>
<router-link to="/deck"><fa icon="columns"/><p>%i18n:@deck%</p></router-link>
</li>
</template>
<li class="messaging">
<a @click="messaging">
%fa:comments%
<fa icon="comments"/>
<p>%i18n:@messaging%</p>
<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>
<template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
</a>
</li>
<li class="game">
<a @click="game">
%fa:gamepad%
<fa icon="gamepad"/>
<p>%i18n:@game%</p>
<template v-if="hasGameInvitations">%fa:circle%</template>
<template v-if="hasGameInvitations"><fa icon="circle"/></template>
</a>
</li>
</template>
@ -139,10 +139,10 @@ export default Vue.extend({
color var(--desktopHeaderHoverFg)
text-decoration none
> [data-fa]:first-child
> [data-icon]:first-child
margin-right 8px
> [data-fa]:last-child
> [data-icon]:last-child
margin-left 5px
font-size 10px
color var(--primary)

7
src/client/app/desktop/views/components/ui.header.notifications.vue
View file

@ -1,7 +1,8 @@
<template>
<div class="notifications" v-hotkey.global="keymap">
<button :data-active="isOpen" @click="toggle" title="%i18n:@title%">
%fa:R bell%<template v-if="hasUnreadNotification">%fa:circle%</template>
<i class="bell"><fa :icon="['far', 'bell']"/></i>
<i class="circle" v-if="hasUnreadNotification"><fa icon="circle"/></i>
</button>
<div class="pop" v-if="isOpen">
<mk-notifications/>
@ -79,11 +80,11 @@ export default Vue.extend({
&[data-active='true']
color var(--desktopHeaderHoverFg)
> [data-fa].bell
> i.bell
font-size 1.2em
line-height 48px
> [data-fa].circle
> i.circle
margin-left -5px
vertical-align super
font-size 10px

2
src/client/app/desktop/views/components/ui.header.post.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="note">
<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
<button @click="post" title="%i18n:@post%"><fa icon="pencil-alt"/></button>
</div>
</template>

4
src/client/app/desktop/views/components/ui.header.search.vue
View file

@ -1,6 +1,6 @@
<template>
<form class="search" @submit.prevent="onSubmit">
%fa:search%
<i><fa icon="search"/></i>
<input v-model="q" type="search" placeholder="%i18n:@placeholder%"/>
<div class="result"></div>
</form>
@ -32,7 +32,7 @@ export default Vue.extend({
@media (max-width 800px)
display none !important
> [data-fa]
> i
display block
position absolute
top 0

28
src/client/app/desktop/views/components/ui.sidebar.vue
View file

@ -2,43 +2,43 @@
<div class="header" :class="navbar">
<div class="body">
<div class="post">
<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
<button @click="post" title="%i18n:@post%"><fa icon="pencil-alt"/></button>
</div>
<div class="nav" v-if="$store.getters.isSignedIn">
<template v-if="$store.state.device.deckDefault">
<div class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
<router-link to="/">%fa:columns%</router-link>
<router-link to="/"><fa icon="columns"/></router-link>
</div>
<div class="home" :class="{ active: $route.name == 'home' }" @click="goToTop">
<router-link to="/home">%fa:home%</router-link>
<router-link to="/home"><fa icon="home"/></router-link>
</div>
</template>
<template v-else>
<div class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop">
<router-link to="/">%fa:home%</router-link>
<router-link to="/"><fa icon="home"/></router-link>
</div>
<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
<router-link to="/deck">%fa:columns%</router-link>
<router-link to="/deck"><fa icon="columns"/></router-link>
</div>
</template>
<div class="messaging">
<a @click="messaging">%fa:comments%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template></a>
<a @click="messaging"><fa icon="comments"/><template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template></a>
</div>
<div class="game">
<a @click="game">%fa:gamepad%<template v-if="hasGameInvitations">%fa:circle%</template></a>
<a @click="game"><fa icon="gamepad"/><template v-if="hasGameInvitations"><fa icon="circle"/></template></a>
</div>
</div>
<div class="nav bottom" v-if="$store.getters.isSignedIn">
<div>
<a @click="drive">%fa:cloud%</a>
<a @click="drive"><fa icon="cloud"/></a>
</div>
<div ref="notificationsButton" :class="{ active: showNotifications }">
<a @click="notifications">%fa:R bell%</a>
<a @click="notifications"><fa :icon="['far', 'bell']"/></a>
</div>
<div>
<a @click="settings">%fa:cog%</a>
<a @click="settings"><fa icon="cog"/></a>
</div>
</div>
@ -49,20 +49,20 @@
<div class="nav menu">
<div class="signout">
<a @click="signout">%fa:power-off%</a>
<a @click="signout"><fa icon="power-off"/></a>
</div>
<div>
<router-link to="/i/favorites">%fa:star%</router-link>
<router-link to="/i/favorites"><fa icon="star"/></router-link>
</div>
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
<a @click="followRequests"><fa :icon="['far', 'envelope']"/><i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
</div>
</div>
</div>
<div class="nav dark">
<div>
<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
<a @click="dark"><template v-if="$store.state.device.darkmode"><fa icon="moon"/></template><template v-else><fa :icon="['far', 'moon']"/></template></a>
</div>
</div>
</div>

2
src/client/app/desktop/views/components/user-lists-window.vue
View file

@ -1,6 +1,6 @@
<template>
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
<span slot="header">%fa:list% %i18n:@title%</span>
<span slot="header"><fa icon="list"/> %i18n:@title%</span>
<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
<button class="ui" @click="add">%i18n:@create-list%</button>

4
src/client/app/desktop/views/components/users-list.vue
View file

@ -18,7 +18,7 @@
<p class="no" v-if="!fetching && users.length == 0">
<slot></slot>
</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>
</div>
</template>
@ -139,7 +139,7 @@ export default Vue.extend({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>

2
src/client/app/desktop/views/components/widget-container.vue
View file

@ -48,7 +48,7 @@ export default Vue.extend({
color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> [data-fa]
> [data-icon]
margin-right 6px
&:empty

11
src/client/app/desktop/views/components/window.vue
View file

@ -8,8 +8,12 @@
>
<h1><slot name="header"></slot></h1>
<div>
<button class="popout" v-if="popoutUrl" @mousedown.stop="() => {}" @click="popout" title="%i18n:@popout%">%fa:R window-restore%</button>
<button class="close" v-if="canClose" @mousedown.stop="() => {}" @click="close" title="%i18n:@close%">%fa:times%</button>
<button class="popout" v-if="popoutUrl" @mousedown.stop="() => {}" @click="popout" title="%i18n:@popout%">
<i><fa :icon="['far', 'window-restore']"/></i>
</button>
<button class="close" v-if="canClose" @mousedown.stop="() => {}" @click="close" title="%i18n:@close%">
<i><fa icon="times"/></i>
</button>
</div>
</header>
<div class="content">
@ -612,7 +616,8 @@ export default Vue.extend({
&:active
color var(--faceTextButtonActive)
> [data-fa]
> i
display inline-block
padding 0
width $header-height
line-height $header-height

26
src/client/app/desktop/views/pages/deck/deck.column.vue
View file

@ -11,13 +11,13 @@
@dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu">
<button class="toggleActive" @click="toggleActive" v-if="isStacked">
<template v-if="active">%fa:angle-up%</template>
<template v-else>%fa:angle-down%</template>
<template v-if="active"><fa icon="angle-up"/></template>
<template v-else><fa icon="angle-down"/></template>
</button>
<slot name="header"></slot>
<span class="count" v-if="count > 0">({{ count }})</span>
<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
<button v-else class="close" @click.stop="close">%fa:times%</button>
<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
</header>
<div ref="body" v-show="active">
<slot></slot>
@ -163,7 +163,7 @@ export default Vue.extend({
getMenu() {
const items = [{
icon: '%fa:pencil-alt%',
icon: 'pencil-alt',
text: '%i18n:common.deck.rename%',
action: () => {
(this as any).apis.input({
@ -175,43 +175,43 @@ export default Vue.extend({
});
}
}, null, {
icon: '%fa:arrow-left%',
icon: 'arrow-left',
text: '%i18n:common.deck.swap-left%',
action: () => {
this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
}
}, {
icon: '%fa:arrow-right%',
icon: 'arrow-right',
text: '%i18n:common.deck.swap-right%',
action: () => {
this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
}
}, this.isStacked ? {
icon: '%fa:arrow-up%',
icon: 'arrow-up',
text: '%i18n:common.deck.swap-up%',
action: () => {
this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
}
} : undefined, this.isStacked ? {
icon: '%fa:arrow-down%',
icon: 'arrow-down',
text: '%i18n:common.deck.swap-down%',
action: () => {
this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
}
} : undefined, null, {
icon: '%fa:window-restore R%',
icon: ['far', 'window-restore'],
text: '%i18n:common.deck.stack-left%',
action: () => {
this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
}
}, this.isStacked ? {
icon: '%fa:window-maximize R%',
icon: ['far', 'window-maximize'],
text: '%i18n:common.deck.pop-right%',
action: () => {
this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
}
} : undefined, null, {
icon: '%fa:trash-alt R%',
icon: ['far', 'trash-alt'],
text: '%i18n:common.deck.remove%',
action: () => {
this.$store.dispatch('settings/removeDeckColumn', this.column.id);
@ -382,7 +382,7 @@ export default Vue.extend({
box-shadow 0 3px 0 0 var(--primary)
> span
[data-fa]
[data-icon]
margin-right 8px
> .count

2
src/client/app/desktop/views/pages/deck/deck.direct-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">%fa:envelope R%{{ name }}</span>
<span slot="header"><fa :icon="['far', 'envelope']"/>{{ name }}</span>
<x-direct/>
</x-column>

2
src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
View file

@ -1,7 +1,7 @@
<template>
<x-column>
<span slot="header">
%fa:hashtag%<span>{{ tag }}</span>
<fa icon="hashtag"/><span>{{ tag }}</span>
</span>
<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">

2
src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">%fa:at%{{ name }}</span>
<span slot="header"><fa icon="at"/>{{ name }}</span>
<x-mentions ref="tl"/>
</x-column>

4
src/client/app/desktop/views/pages/deck/deck.note-column.vue
View file

@ -1,13 +1,13 @@
<template>
<x-column>
<span slot="header">
%fa:comment-alt R%<span>{{ title }}</span>
<fa :icon="['far', 'comment-alt']"/><span>{{ title }}</span>
</span>
<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
<div class="is-remote" v-if="note.user.host != null">
<details>
<summary>%fa:exclamation-triangle% %i18n:common.is-remote-post%</summary>
<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-post%</summary>
<a :href="note.url || note.uri" target="_blank">%i18n:common.view-on-remote%</a>
</details>
</div>

8
src/client/app/desktop/views/pages/deck/deck.notes.vue
View file

@ -21,8 +21,8 @@
:media-view="mediaView"
:mini="true"/>
<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>
</div>
@ -31,7 +31,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>
@ -236,7 +236,7 @@ export default Vue.extend({
span
margin 0 16px
[data-fa]
[data-icon]
margin-right 8px
> footer

18
src/client/app/desktop/views/pages/deck/deck.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>
@ -151,7 +151,7 @@ export default Vue.extend({
> .note-ref
color var(--noteText)
[data-fa]
[data-icon]
font-size 1em
font-weight normal
font-style normal

2
src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">%fa:bell R%{{ name }}</span>
<span slot="header"><fa :icon="['far', 'bell']"/>{{ name }}</span>
<x-notifications/>
</x-column>

10
src/client/app/desktop/views/pages/deck/deck.notifications.vue
View file

@ -11,13 +11,13 @@
<template v-for="(notification, i) in _notifications">
<x-notification class="notification" :notification="notification" :key="notification.id"/>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
<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" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
</button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
</div>
@ -188,7 +188,7 @@ export default Vue.extend({
span
margin 0 16px
i
[data-icon]
margin-right 8px
> .more
@ -207,7 +207,7 @@ export default Vue.extend({
&.fetching
cursor wait
> [data-fa]
> [data-icon]
margin-right 4px
> .empty

14
src/client/app/desktop/views/pages/deck/deck.tl-column.vue
View file

@ -1,12 +1,12 @@
<template>
<x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">
<template v-if="column.type == 'home'">%fa:home%</template>
<template v-if="column.type == 'local'">%fa:R comments%</template>
<template v-if="column.type == 'hybrid'">%fa:share-alt%</template>
<template v-if="column.type == 'global'">%fa:globe%</template>
<template v-if="column.type == 'list'">%fa:list%</template>
<template v-if="column.type == 'hashtag'">%fa:hashtag%</template>
<template v-if="column.type == 'home'"><fa icon="home"/></template>
<template v-if="column.type == 'local'"><fa :icon="['far', 'comments']"/></template>
<template v-if="column.type == 'hybrid'"><fa icon="share-alt"/></template>
<template v-if="column.type == 'global'"><fa icon="globe"/></template>
<template v-if="column.type == 'list'"><fa icon="list"/></template>
<template v-if="column.type == 'hashtag'"><fa icon="hashtag"/></template>
<span>{{ name }}</span>
</span>
@ -66,7 +66,7 @@ export default Vue.extend({
return {
edit: false,
menu: [{
icon: '%fa:cog%',
icon: 'cog',
text: '%i18n:@edit%',
action: () => {
this.edit = !this.edit;

28
src/client/app/desktop/views/pages/deck/deck.user-column.vue
View file

@ -1,19 +1,19 @@
<template>
<x-column>
<span slot="header">
%fa:user%<span>{{ title }}</span>
<fa icon="user"/><span>{{ title }}</span>
</span>
<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
<div class="is-remote" v-if="user.host != null">
<details>
<summary>%fa:exclamation-triangle% %i18n:common.is-remote-user%</summary>
<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%</summary>
<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a>
</details>
</div>
<header :style="bannerStyle">
<div>
<button class="menu" @click="menu" ref="menu">%fa:ellipsis-h%</button>
<button class="menu" @click="menu" ref="menu"><fa icon="ellipsis-h"/></button>
<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow"/>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<span class="name">{{ user | userName }}</span>
@ -40,17 +40,17 @@
</div>
</div>
<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
<p class="caption" @click="toggleShowPinned">%fa:thumbtack% %i18n:@pinned-notes%</p>
<span class="angle" v-if="showPinned">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> %i18n:@pinned-notes%</p>
<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
<span class="angle" v-else><fa icon="angle-down"/></span>
<div class="notes" v-show="showPinned">
<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
</div>
</div>
<div class="images" v-if="images.length > 0">
<p class="caption" @click="toggleShowImages">%fa:images R% %i18n:@images%</p>
<span class="angle" v-if="showImages">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> %i18n:@images%</p>
<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
<span class="angle" v-else><fa icon="angle-down"/></span>
<div v-show="showImages">
<router-link v-for="image in images"
:style="`background-image: url(${image.thumbnailUrl})`"
@ -61,15 +61,15 @@
</div>
</div>
<div class="activity">
<p class="caption" @click="toggleShowActivity">%fa:chart-bar R% %i18n:@activity%</p>
<span class="angle" v-if="showActivity">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> %i18n:@activity%</p>
<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
<span class="angle" v-else><fa icon="angle-down"/></span>
<div v-show="showActivity">
<div ref="chart"></div>
</div>
</div>
<div class="tl">
<p class="caption">%fa:comment-alt R% %i18n:@timeline%</p>
<p class="caption"><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</p>
<div>
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
</div>
@ -294,7 +294,7 @@ export default Vue.extend({
menu() {
let menu = [{
icon: '%fa:list%',
icon: 'list',
text: '%i18n:@push-to-a-list%',
action: () => {
const w = (this as any).os.new(MkUserListsWindow);

22
src/client/app/desktop/views/pages/deck/deck.vue
View file

@ -14,7 +14,7 @@
<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
<x-hashtag-column v-else-if="temporaryColumn.type == 'tag'" :tag="temporaryColumn.tag" :key="temporaryColumn.tag"/>
</template>
<button ref="add" @click="add" title="%i18n:common.deck.add-column%">%fa:plus%</button>
<button ref="add" @click="add" title="%i18n:common.deck.add-column%"><fa icon="plus"/></button>
</div>
</mk-ui>
</template>
@ -182,7 +182,7 @@ export default Vue.extend({
source: this.$refs.add,
compact: true,
items: [{
icon: '%fa:home%',
icon: 'home',
text: '%i18n:common.deck.home%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -191,7 +191,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:comments R%',
icon: ['far', 'comments'],
text: '%i18n:common.deck.local%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -200,7 +200,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:share-alt%',
icon: 'share-alt',
text: '%i18n:common.deck.hybrid%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -209,7 +209,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:globe%',
icon: 'globe',
text: '%i18n:common.deck.global%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -218,7 +218,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:at%',
icon: 'at',
text: '%i18n:common.deck.mentions%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -227,7 +227,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:envelope R%',
icon: ['far', 'envelope'],
text: '%i18n:common.deck.direct%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -236,7 +236,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:list%',
icon: 'list',
text: '%i18n:common.deck.list%',
action: () => {
const w = (this as any).os.new(MkUserListsWindow);
@ -250,7 +250,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:hashtag%',
icon: 'hashtag',
text: '%i18n:common.deck.hashtag%',
action: () => {
(this as any).apis.input({
@ -264,7 +264,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:bell R%',
icon: ['far', 'bell'],
text: '%i18n:common.deck.notifications%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -273,7 +273,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:calculator%',
icon: 'calculator',
text: '%i18n:common.deck.widgets%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {

6
src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" class="wtdtxvecapixsepjtcupubtsmometobz">
<span slot="header">%fa:calculator%{{ name }}</span>
<span slot="header"><fa icon="calculator"/>{{ name }}</span>
<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
<template v-if="edit">
@ -37,7 +37,7 @@
@sort="onWidgetSort"
>
<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
</div>
</x-draggable>
@ -89,7 +89,7 @@ export default Vue.extend({
created() {
this.menu = [{
icon: '%fa:cog%',
icon: 'cog',
text: '%i18n:@edit%',
action: () => {
this.edit = !this.edit;

4
src/client/app/desktop/views/pages/note.vue
View file

@ -3,8 +3,8 @@
<main v-if="!fetching">
<mk-note-detail :note="note"/>
<footer>
<router-link v-if="note.next" :to="note.next">%fa:angle-left% %i18n:@next%</router-link>
<router-link v-if="note.prev" :to="note.prev">%i18n:@prev% %fa:angle-right%</router-link>
<router-link v-if="note.next" :to="note.next"><fa icon="angle-left"/> %i18n:@next%</router-link>
<router-link v-if="note.prev" :to="note.prev">%i18n:@prev% <fa icon="angle-right"/></router-link>
</footer>
</main>
</mk-ui>

7
src/client/app/desktop/views/pages/search.vue
View file

@ -4,7 +4,7 @@
<h1>{{ q }}</h1>
</header>
<p :class="$style.notAvailable" v-if="!fetching && notAvailable">%i18n:@not-available%</p>
<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" :class="$style.notes" :more="existMore ? more : null"/>
</mk-ui>
</template>
@ -124,13 +124,12 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em
color #ccc
.notAvailable
display block
margin 0 auto
@ -139,7 +138,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

2
src/client/app/desktop/views/pages/selectdrive.vue
View file

@ -6,7 +6,7 @@
@change-selection="onChangeSelection"
/>
<footer>
<button class="upload" title="%i18n:@upload%" @click="upload">%fa:upload%</button>
<button class="upload" title="%i18n:@upload%" @click="upload"><fa icon="upload"/></button>
<button class="cancel" @click="close">%i18n:@cancel%</button>
<button class="ok" @click="ok">%i18n:@ok%</button>
</footer>

2
src/client/app/desktop/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>
<button v-if="posted" class="ui button" @click="close">%i18n:common.close%</button>
</div>

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

@ -3,7 +3,7 @@
<header :class="$style.header">
<h1>#{{ $route.params.tag }}</h1>
</header>
<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
<p :class="$style.empty" 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" :class="$style.notes" :more="existMore ? more : null"/>
</mk-ui>
</template>
@ -113,7 +113,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

4
src/client/app/desktop/views/pages/user/user.followers-you-know.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
<p class="title">%fa:users%%i18n:@title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="title"><fa icon="users"/>%i18n:@title%</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">
<router-link v-for="user in users" :to="user | userPage" :key="user.id">
<img :src="user.avatarUrl" :alt="user | userName" v-user-preview="user.id"/>

4
src/client/app/desktop/views/pages/user/user.friends.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="hozptpaliadatkehcmcayizwzwwctpbc">
<p class="title">%fa:users%%i18n:@title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="title"><fa icon="users"/>%i18n:@title%</p>
<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<template v-if="!fetching && users.length != 0">
<div class="user" v-for="friend in users">
<mk-avatar class="avatar" :user="friend"/>

2
src/client/app/desktop/views/pages/user/user.github.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="aqooishiizumijmihokohinatamihoaz">
<span>%fa:B github%<a :href="`https://github.com/${user.github.login}`" target="_blank">@{{ user.github.login }}</a></span>
<span><fa :icon="['fab', 'github']"/><a :href="`https://github.com/${user.github.login}`" target="_blank">@{{ user.github.login }}</a></span>
</div>
</template>

6
src/client/app/desktop/views/pages/user/user.header.vue
View file

@ -7,7 +7,7 @@
<p class="name">{{ user | userName }}</p>
<div>
<span class="username"><mk-acct :user="user" :detail="true" /></span>
<span v-if="user.isBot" title="%i18n:@is-bot%">%fa:robot%</span>
<span v-if="user.isBot" title="%i18n:@is-bot%"><fa icon="robot"/></span>
</div>
</div>
</div>
@ -17,8 +17,8 @@
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div>
<div class="info">
<span class="location" v-if="user.host === null && user.profile.location">%fa:map-marker% {{ user.profile.location }}</span>
<span class="birthday" v-if="user.host === null && user.profile.birthday">%fa:birthday-cake% {{ user.profile.birthday.replace('-', '%i18n:@year%').replace('-', '%i18n:@month%') + '%i18n:@day%' }} ({{ age }}%i18n:@years-old%)</span>
<span class="location" v-if="user.host === null && user.profile.location"><fa icon="map-marker"/> {{ user.profile.location }}</span>
<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', '%i18n:@year%').replace('-', '%i18n:@month%') + '%i18n:@day%' }} ({{ age }}%i18n:@years-old%)</span>
</div>
<div class="status">
<span class="notes-count"><b>{{ user.notesCount | number }}</b>%i18n:@posts%</span>

4
src/client/app/desktop/views/pages/user/user.photos.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
<p class="title">%fa:camera%%i18n:@title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="title"><fa icon="camera"/>%i18n:@title%</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">
<div v-for="image in images" class="img"
:style="`background-image: url(${image.thumbnailUrl})`"

14
src/client/app/desktop/views/pages/user/user.profile.vue
View file

@ -4,20 +4,20 @@
<mk-follow-button :user="user" size="big"/>
<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
<p class="stalk" v-if="user.isFollowing">
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %i18n:@stalk%</a></span>
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk"><fa icon="meh"/> %i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk"><fa icon="user-secret"/> %i18n:@stalk%</a></span>
</p>
</div>
<div class="action-form">
<ui-button @click="user.isMuted ? unmute() : mute()" v-if="$store.state.i.id != user.id">
<span v-if="user.isMuted">%fa:eye% %i18n:@unmute%</span>
<span v-else>%fa:eye-slash% %i18n:@mute%</span>
<span v-if="user.isMuted"><fa icon="eye"/> %i18n:@unmute%</span>
<span v-else><fa icon="eye-slash"/> %i18n:@mute%</span>
</ui-button>
<ui-button @click="user.isBlocking ? unblock() : block()" v-if="$store.state.i.id != user.id">
<span v-if="user.isBlocking">%fa:user% %i18n:@unblock%</span>
<span v-else>%fa:user-slash% %i18n:@block%</span>
<span v-if="user.isBlocking"><fa icon="user"/> %i18n:@unblock%</span>
<span v-else><fa icon="user-slash"/> %i18n:@block%</span>
</ui-button>
<ui-button @click="list">%fa:list% %i18n:@push-to-a-list%</ui-button>
<ui-button @click="list"><fa icon="list"/> %i18n:@push-to-a-list%</ui-button>
</div>
</div>
</template>

10
src/client/app/desktop/views/pages/user/user.timeline.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
<header>
<span :data-active="mode == 'default'" @click="mode = 'default'">%fa:comment-alt R% %i18n:@default%</span>
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%fa:comments% %i18n:@with-replies%</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%fa:images% %i18n:@with-media%</span>
<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> %i18n:@default%</span>
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> %i18n:@with-replies%</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa icon="images"/> %i18n:@with-media%</span>
</header>
<mk-notes ref="timeline" :more="existMore ? more : null">
<p class="empty" slot="empty">%fa:R comments%%i18n:@empty%</p>
<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>%i18n:@empty%</p>
</mk-notes>
</div>
</template>
@ -157,7 +157,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

2
src/client/app/desktop/views/pages/user/user.twitter.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="adsvaidqfznoartcbplullnejvxjphcn">
<span>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></span>
<span><fa :icon="['fab', 'twitter']"/><a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></span>
</div>
</template>

4
src/client/app/desktop/views/pages/user/user.vue
View file

@ -1,8 +1,8 @@
<template>
<mk-ui>
<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
<div class="is-remote" v-if="user.host">%fa:exclamation-triangle% %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div>
<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> %i18n:@is-suspended%</div>
<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div>
<main>
<div class="main">
<x-header :user="user"/>

16
src/client/app/desktop/views/pages/welcome.vue
View file

@ -3,8 +3,8 @@
<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
<button @click="dark">
<template v-if="$store.state.device.darkmode">%fa:moon%</template>
<template v-else>%fa:R moon%</template>
<template v-if="$store.state.device.darkmode"><fa icon="moon"/></template>
<template v-else><fa :icon="['far', 'moon']"/></template>
</button>
<mk-forkit class="forkit"/>
@ -19,8 +19,8 @@
<div class="info">
<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
<span 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>
</span>
</div>
@ -40,7 +40,7 @@
</div>
<div class="announcements block">
<header>%fa:broadcast-tower% %i18n:@announcements%</header>
<header><fa icon="broadcast-tower"/> %i18n:@announcements%</header>
<div v-if="announcements && announcements.length > 0">
<div v-for="announcement in announcements">
<h1 v-html="announcement.title"></h1>
@ -50,7 +50,7 @@
</div>
<div class="photos block">
<header>%fa:images% %i18n:@photos%</header>
<header><fa icon="images"/> %i18n:@photos%</header>
<div>
<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
</div>
@ -76,14 +76,14 @@
</div>
<div class="tl block">
<header>%fa:comment-alt R% %i18n:@timeline%</header>
<header><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</header>
<div>
<mk-welcome-timeline class="tl" :max="20"/>
</div>
</div>
<div class="info block">
<header>%fa:info-circle% %i18n:@info%</header>
<header><fa icon="info-circle"/> %i18n:@info%</header>
<div>
<div v-if="meta" class="body">
<p>Version: <b>{{ meta.version }}</b></p>

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

@ -1,8 +1,8 @@
<template>
<div class="mkw-messaging">
<mk-widget-container :show-header="props.design == 0">
<template slot="header">%fa:comments%%i18n:@title%</template>
<button slot="func" @click="add">%fa:plus%</button>
<template slot="header"><fa icon="comments"/>%i18n:@title%</template>
<button slot="func" @click="add"><fa icon="plus"/></button>
<mk-messaging ref="index" compact @navigate="navigate"/>
</mk-widget-container>

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

@ -1,8 +1,8 @@
<template>
<div class="mkw-notifications">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:R bell%%i18n:@title%</template>
<!-- <button slot="func" title="%i18n:@settings%" @click="settings">%fa:cog%</button> -->
<template slot="header"><fa :icon="['far', 'bell']"/>%i18n:@title%</template>
<!-- <button slot="func" title="%i18n:@settings%" @click="settings"><fa icon="cog"/></button> -->
<mk-notifications :class="$style.notifications"/>
</mk-widget-container>

10
src/client/app/desktop/views/widgets/polls.vue
View file

@ -1,17 +1,17 @@
<template>
<div class="mkw-polls">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:chart-pie%%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
<template slot="header"><fa icon="chart-pie"/>%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="fetch"><fa icon="sync"/></button>
<div class="mkw-polls--body">
<div class="poll" v-if="!fetching && poll != null">
<p v-if="poll.text"><router-link :to="poll | notePage">{{ poll.text }}</router-link></p>
<p v-if="!poll.text"><router-link :to="poll | notePage">%fa:link%</router-link></p>
<p v-if="!poll.text"><router-link :to="poll | notePage"><fa icon="link"/></router-link></p>
<mk-poll :note="poll"/>
</div>
<p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</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>
</mk-widget-container>
</div>
@ -88,7 +88,7 @@ export default define({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>

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

@ -1,7 +1,7 @@
<template>
<div class="mkw-post-form">
<template v-if="props.design == 0">
<p class="title">%fa:pencil-alt%%i18n:@title%</p>
<p class="title"><fa icon="pencil-alt"/>%i18n:@title%</p>
</template>
<textarea :disabled="posting" v-model="text" @keydown="onKeydown" :placeholder="placeholder"></textarea>
<button @click="post" :disabled="posting">%i18n:@note%</button>
@ -86,7 +86,7 @@ export default define({
color #888
box-shadow 0 1px rgba(#000, 0.07)
> [data-fa]
> [data-icon]
margin-right 4px
> textarea

8
src/client/app/desktop/views/widgets/trends.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="mkw-trends">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:fire%%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
<template slot="header"><fa icon="fire"/>%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="fetch"><fa icon="sync"/></button>
<div class="mkw-trends--body">
<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 class="note" v-else-if="note != null">
<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
@ -95,7 +95,7 @@ export default define({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>

8
src/client/app/desktop/views/widgets/users.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="mkw-users">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:users%%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
<template slot="header"><fa icon="users"/>%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="refresh"><fa icon="sync"/></button>
<div class="mkw-users--body">
<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>
<template v-else-if="users.length != 0">
<div class="user" v-for="_user in users">
<mk-avatar class="avatar" :user="_user"/>
@ -129,7 +129,7 @@ export default define({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>