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

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

Browse Source 
* wip

* Rename

* Clean up

* Clean up

* wip

* wip

* Enable tree shaking

* ✌️

* ✌️

* wip

* wip

* Clean up
This commit is contained in:
syuilo
2018-11-06 01:40:11 +09:00
committed by GitHub
parent e640dbc501
commit 9f5dc2c0df
190 changed files with 924 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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