usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gulpfile.ts
View File

@ -21,7 +21,6 @@ import * as htmlmin from 'gulp-htmlmin';
const uglifyes = require('uglify-es'); const uglifyes = require('uglify-es');
const locales = require('./locales'); const locales = require('./locales');
import { fa } from './src/misc/fa';
const uglify = uglifyComposer(uglifyes, console); const uglify = uglifyComposer(uglifyes, console);
@ -164,8 +163,7 @@ gulp.task('build:client:pug', [
gulp.src('./src/client/app/base.pug') gulp.src('./src/client/app/base.pug')
.pipe(pug({ .pipe(pug({
locals: { locals: {
themeColor: constants.themeColor, themeColor: constants.themeColor
facss: fa.dom.css()
} }
})) }))
.pipe(htmlmin({ .pipe(htmlmin({

10
package.json
View File

@ -20,10 +20,11 @@
"format": "gulp format" "format": "gulp format"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "1.2.6", "@fortawesome/fontawesome-svg-core": "1.2.8",
"@fortawesome/free-brands-svg-icons": "5.4.1", "@fortawesome/free-brands-svg-icons": "5.5.0",
"@fortawesome/free-regular-svg-icons": "5.4.1", "@fortawesome/free-regular-svg-icons": "5.5.0",
"@fortawesome/free-solid-svg-icons": "5.4.1", "@fortawesome/free-solid-svg-icons": "5.5.0",
"@fortawesome/vue-fontawesome": "0.1.2",
"@koa/cors": "2.2.2", "@koa/cors": "2.2.2",
"@prezzemolo/rap": "0.1.2", "@prezzemolo/rap": "0.1.2",
"@prezzemolo/zip": "0.0.3", "@prezzemolo/zip": "0.0.3",
@ -215,7 +216,6 @@
"vue-content-loading": "1.5.3", "vue-content-loading": "1.5.3",
"vue-cropperjs": "2.2.2", "vue-cropperjs": "2.2.2",
"vue-js-modal": "1.3.26", "vue-js-modal": "1.3.26",
"vue-json-tree-view": "2.1.4",
"vue-loader": "15.4.2", "vue-loader": "15.4.2",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-style-loader": "4.1.2", "vue-style-loader": "4.1.2",

4
src/client/app/admin/views/announcements.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="cdeuzmsthagexbkpofbmatmugjuvogfb"> <div class="cdeuzmsthagexbkpofbmatmugjuvogfb">
<ui-card> <ui-card>
<div slot="title">%fa:broadcast-tower% %i18n:@announcements%</div> <div slot="title"><fa icon="broadcast-tower"/> %i18n:@announcements%</div>
<section v-for="(announcement, i) in announcements" class="fit-top"> <section v-for="(announcement, i) in announcements" class="fit-top">
<ui-input v-model="announcement.title" @change="save"> <ui-input v-model="announcement.title" @change="save">
<span>%i18n:@title%</span> <span>%i18n:@title%</span>
@ -15,7 +15,7 @@
</ui-horizon-group> </ui-horizon-group>
</section> </section>
<section> <section>
<ui-button @click="add">%fa:plus% %i18n:@add%</ui-button> <ui-button @click="add"><fa icon="plus"/> %i18n:@add%</ui-button>
</section> </section>
</ui-card> </ui-card>
</div> </div>

8
src/client/app/admin/views/ap-log.vue
View File

@ -3,10 +3,10 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th>%fa:exchange-alt% In/Out</th> <th><fa icon="exchange-alt"/> In/Out</th>
<th>%fa:server% Host</th> <th><fa icon="server"/> Host</th>
<th>%fa:bolt% Activity</th> <th><fa icon="bolt"/> Activity</th>
<th>%fa:user% Actor</th> <th><fa icon="user"/> Actor</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

2
src/client/app/admin/views/charts.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="qvgidhudpqhjttdhxubzuyrhyzgslujw"> <div class="qvgidhudpqhjttdhxubzuyrhyzgslujw">
<header> <header>
<b>%fa:chart-bar R% %i18n:@title%:</b> <b><fa :icon="['far', 'chart-bar']"/> %i18n:@title%:</b>
<select v-model="src"> <select v-model="src">
<optgroup label="%i18n:@federation%"> <optgroup label="%i18n:@federation%">
<option value="federation-instances">%i18n:@charts.federation-instances%</option> <option value="federation-instances">%i18n:@charts.federation-instances%</option>

4
src/client/app/admin/views/cpu-memory.vue
View File

@ -2,14 +2,14 @@
<div class="zyknedwtlthezamcjlolyusmipqmjgxz"> <div class="zyknedwtlthezamcjlolyusmipqmjgxz">
<div> <div>
<header> <header>
<span>%fa:microchip% CPU <span>{{ cpuP }}%</span></span> <span><fa icon="microchip"/> CPU <span>{{ cpuP }}%</span></span>
<span v-if="meta">{{ meta.cpu.model }}</span> <span v-if="meta">{{ meta.cpu.model }}</span>
</header> </header>
<div ref="cpu"></div> <div ref="cpu"></div>
</div> </div>
<div> <div>
<header> <header>
<span>%fa:memory% MEM <span>{{ memP }}%</span></span> <span><fa icon="memory"/> MEM <span>{{ memP }}%</span></span>
<span v-if="meta"></span> <span v-if="meta"></span>
</header> </header>
<div ref="mem"></div> <div ref="mem"></div>

24
src/client/app/admin/views/dashboard.vue
View File

@ -11,54 +11,54 @@
<div v-if="stats" class="stats"> <div v-if="stats" class="stats">
<div> <div>
<div> <div>
<div>%fa:user%</div> <div><fa icon="user"/></div>
<div> <div>
<span>%i18n:@accounts%</span> <span>%i18n:@accounts%</span>
<b class="primary">{{ stats.originalUsersCount | number }}</b> <b class="primary">{{ stats.originalUsersCount | number }}</b>
</div> </div>
</div> </div>
<div> <div>
<span>%fa:home% %i18n:@this-instance%</span> <span><fa icon="home"/> %i18n:@this-instance%</span>
<span @click="setChartSrc('users')">%fa:chart-bar R%</span> <span @click="setChartSrc('users')"><fa :icon="['far', 'chart-bar']"/></span>
</div> </div>
</div> </div>
<div> <div>
<div> <div>
<div>%fa:pencil-alt%</div> <div><fa icon="pencil-alt"/></div>
<div> <div>
<span>%i18n:@notes%</span> <span>%i18n:@notes%</span>
<b class="primary">{{ stats.originalNotesCount | number }}</b> <b class="primary">{{ stats.originalNotesCount | number }}</b>
</div> </div>
</div> </div>
<div> <div>
<span>%fa:home% %i18n:@this-instance%</span> <span><fa icon="home"/> %i18n:@this-instance%</span>
<span @click="setChartSrc('notes')">%fa:chart-bar R%</span> <span @click="setChartSrc('notes')"><fa :icon="['far', 'chart-bar']"/></span>
</div> </div>
</div> </div>
<div> <div>
<div> <div>
<div>%fa:database%</div> <div><fa icon="database"/></div>
<div> <div>
<span>%i18n:@drive%</span> <span>%i18n:@drive%</span>
<b>{{ stats.driveUsageLocal | bytes }}</b> <b>{{ stats.driveUsageLocal | bytes }}</b>
</div> </div>
</div> </div>
<div> <div>
<span>%fa:home% %i18n:@this-instance%</span> <span><fa icon="home"/> %i18n:@this-instance%</span>
<span @click="setChartSrc('drive')">%fa:chart-bar R%</span> <span @click="setChartSrc('drive')"><fa :icon="['far', 'chart-bar']"/></span>
</div> </div>
</div> </div>
<div> <div>
<div> <div>
<div>%fa:hdd R%</div> <div><fa :icon="['far', 'hdd']"/></div>
<div> <div>
<span>%i18n:@instances%</span> <span>%i18n:@instances%</span>
<b>{{ stats.instances | number }}</b> <b>{{ stats.instances | number }}</b>
</div> </div>
</div> </div>
<div> <div>
<span>%fa:globe% %i18n:@federated%</span> <span><fa icon="globe"/> %i18n:@federated%</span>
<span @click="setChartSrc('federation-instances-total')">%fa:chart-bar R%</span> <span @click="setChartSrc('federation-instances-total')"><fa :icon="['far', 'chart-bar']"/></span>
</div> </div>
</div> </div>
</div> </div>

8
src/client/app/admin/views/emoji.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="tumhkfkmgtvzljezfvmgkeurkfncshbe"> <div class="tumhkfkmgtvzljezfvmgkeurkfncshbe">
<ui-card> <ui-card>
<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div> <div slot="title"><fa icon="plus"/> %i18n:@add-emoji.title%</div>
<section class="fit-top"> <section class="fit-top">
<ui-horizon-group inputs> <ui-horizon-group inputs>
<ui-input v-model="name"> <ui-input v-model="name">
@ -22,7 +22,7 @@
</ui-card> </ui-card>
<ui-card> <ui-card>
<div slot="title">%fa:grin R% %i18n:@emojis.title%</div> <div slot="title"><fa :icon="['far', 'grin']"/> %i18n:@emojis.title%</div>
<section v-for="emoji in emojis"> <section v-for="emoji in emojis">
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/> <img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
<ui-horizon-group inputs> <ui-horizon-group inputs>
@ -37,8 +37,8 @@
<span>%i18n:@add-emoji.url%</span> <span>%i18n:@add-emoji.url%</span>
</ui-input> </ui-input>
<ui-horizon-group> <ui-horizon-group>
<ui-button @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button> <ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> %i18n:@emojis.update%</ui-button>
<ui-button @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button> <ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> %i18n:@emojis.remove%</ui-button>
</ui-horizon-group> </ui-horizon-group>
</section> </section>
</ui-card> </ui-card>

24
src/client/app/admin/views/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-admin" :class="{ isMobile }"> <div class="mk-admin" :class="{ isMobile }">
<header v-show="isMobile"> <header v-show="isMobile">
<button class="nav" @click="navOpend = true">%fa:bars%</button> <button class="nav" @click="navOpend = true"><fa icon="bars"/></button>
<span>MisskeyMyAdmin</span> <span>MisskeyMyAdmin</span>
</header> </header>
<div class="nav-backdrop" <div class="nav-backdrop"
@ -18,18 +18,18 @@
<p class="name">{{ $store.state.i | userName }}</p> <p class="name">{{ $store.state.i | userName }}</p>
</div> </div>
<ul> <ul>
<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:home .fw%%i18n:@dashboard%</li> <li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>%i18n:@dashboard%</li>
<li @click="nav('instance')" :class="{ active: page == 'instance' }">%fa:cog .fw%%i18n:@instance%</li> <li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>%i18n:@instance%</li>
<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li> <li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>%i18n:@users%</li>
<li @click="nav('emoji')" :class="{ active: page == 'emoji' }">%fa:grin R .fw%%i18n:@emoji%</li> <li @click="nav('emoji')" :class="{ active: page == 'emoji' }"><fa icon="grin R" fixed-width/>%i18n:@emoji%</li>
<li @click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li> <li @click="nav('announcements')" :class="{ active: page == 'announcements' }"><fa icon="broadcast-tower" fixed-width/>%i18n:@announcements%</li>
<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li> <li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }"><fa icon="hashtag" fixed-width/>%i18n:@hashtags%</li>
<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:common.drive%</li> --> <!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }"><fa icon="cloud" fixed-width/>%i18n:common.drive%</li> -->
<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> --> <!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
</ul> </ul>
<div class="back-to-misskey"> <div class="back-to-misskey">
<a href="/">%fa:arrow-left% %i18n:@back-to-misskey%</a> <a href="/"><fa icon="arrow-left"/> %i18n:@back-to-misskey%</a>
</div> </div>
<div class="version"> <div class="version">
<small>Misskey {{ version }}</small> <small>Misskey {{ version }}</small>
@ -126,7 +126,7 @@ export default Vue.extend({
line-height $headerHeight line-height $headerHeight
border-right solid 1px rgba(#000, 0.1) border-right solid 1px rgba(#000, 0.1)
> [data-fa] > [data-icon]
transition all 0.2s ease transition all 0.2s ease
> nav > nav
@ -188,7 +188,7 @@ export default Vue.extend({
&:hover &:hover
color #fff color #fff
> [data-fa] > [data-icon]
margin-right 6px margin-right 6px
> .version > .version
@ -218,7 +218,7 @@ export default Vue.extend({
&:hover &:hover
color #fff color #fff
> [data-fa] > [data-icon]
margin-right 6px margin-right 6px
&.active &.active

2
src/client/app/app.styl
View File

@ -128,7 +128,7 @@ pre
overflow auto overflow auto
tab-size 2 tab-size 2
[data-fa] [data-icon]
display inline-block display inline-block
.swal2-container .swal2-container

8
src/client/app/common/views/components/api-settings.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ui-card> <ui-card>
<div slot="title">%fa:key% API</div> <div slot="title"><fa icon="key"/> API</div>
<section class="fit-top"> <section class="fit-top">
<ui-input :value="$store.state.i.token" readonly> <ui-input :value="$store.state.i.token" readonly>
@ -9,11 +9,11 @@
<p>%i18n:@intro%</p> <p>%i18n:@intro%</p>
<ui-info warn>%i18n:@caution%</ui-info> <ui-info warn>%i18n:@caution%</ui-info>
<p>%i18n:@regeneration-of-token%</p> <p>%i18n:@regeneration-of-token%</p>
<ui-button @click="regenerateToken">%fa:sync-alt% %i18n:@regenerate-token%</ui-button> <ui-button @click="regenerateToken"><fa icon="sync-alt"/> %i18n:@regenerate-token%</ui-button>
</section> </section>
<section> <section>
<header>%fa:terminal% %i18n:@console.title%</header> <header><fa icon="terminal"/> %i18n:@console.title%</header>
<ui-input v-model="endpoint"> <ui-input v-model="endpoint">
<span>%i18n:@console.endpoint%</span> <span>%i18n:@console.endpoint%</span>
</ui-input> </ui-input>
@ -22,7 +22,7 @@
</ui-textarea> </ui-textarea>
<ui-button @click="send" :disabled="sending"> <ui-button @click="send" :disabled="sending">
<template v-if="sending">%i18n:@console.sending%</template> <template v-if="sending">%i18n:@console.sending%</template>
<template v-else>%fa:paper-plane% %i18n:@console.send%</template> <template v-else><fa icon="paper-plane"/> %i18n:@console.send%</template>
</ui-button> </ui-button>
<ui-textarea v-if="res" v-model="res" readonly tall> <ui-textarea v-if="res" v-model="res" readonly tall>
<span>%i18n:@console.response%</span> <span>%i18n:@console.response%</span>

28
src/client/app/common/views/components/connect-failed.troubleshooter.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<div class="troubleshooter"> <div class="troubleshooter">
<div class="body"> <div class="body">
<h1>%fa:wrench%%i18n:@title%</h1> <h1><fa icon="wrench"/>%i18n:@title%</h1>
<div> <div>
<p :data-wip="network == null"> <p :data-wip="network == null">
<template v-if="network != null"> <template v-if="network != null">
<template v-if="network">%fa:check%</template> <template v-if="network"><fa icon="check"/></template>
<template v-if="!network">%fa:times%</template> <template v-if="!network"><fa icon="times"/></template>
</template> </template>
{{ network == null ? '%i18n:@checking-network%' : '%i18n:@network%' }}<mk-ellipsis v-if="network == null"/> {{ network == null ? '%i18n:@checking-network%' : '%i18n:@network%' }}<mk-ellipsis v-if="network == null"/>
</p> </p>
<p v-if="network == true" :data-wip="internet == null"> <p v-if="network == true" :data-wip="internet == null">
<template v-if="internet != null"> <template v-if="internet != null">
<template v-if="internet">%fa:check%</template> <template v-if="internet"><fa icon="check"/></template>
<template v-if="!internet">%fa:times%</template> <template v-if="!internet"><fa icon="times"/></template>
</template> </template>
{{ internet == null ? '%i18n:@checking-internet%' : '%i18n:@internet%' }}<mk-ellipsis v-if="internet == null"/> {{ internet == null ? '%i18n:@checking-internet%' : '%i18n:@internet%' }}<mk-ellipsis v-if="internet == null"/>
</p> </p>
<p v-if="internet == true" :data-wip="server == null"> <p v-if="internet == true" :data-wip="server == null">
<template v-if="server != null"> <template v-if="server != null">
<template v-if="server">%fa:check%</template> <template v-if="server"><fa icon="check"/></template>
<template v-if="!server">%fa:times%</template> <template v-if="!server"><fa icon="times"/></template>
</template> </template>
{{ server == null ? '%i18n:@checking-server%' : '%i18n:@server%' }}<mk-ellipsis v-if="server == null"/> {{ server == null ? '%i18n:@checking-server%' : '%i18n:@server%' }}<mk-ellipsis v-if="server == null"/>
</p> </p>
</div> </div>
<p v-if="!end">%i18n:@finding%<mk-ellipsis/></p> <p v-if="!end">%i18n:@finding%<mk-ellipsis/></p>
<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:@no-network%</b><br>%i18n:@no-network-desc%</p> <p v-if="network === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-network%</b><br>%i18n:@no-network-desc%</p>
<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:@no-internet%</b><br>%i18n:@no-internet-desc%</p> <p v-if="internet === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-internet%</b><br>%i18n:@no-internet-desc%</p>
<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:@no-server%</b><br>%i18n:@no-server-desc%</p> <p v-if="server === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-server%</b><br>%i18n:@no-server-desc%</p>
<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:@success%</b><br>%i18n:@success-desc%</p> <p v-if="server === true" class="success"><b><fa icon="info-circle"/>%i18n:@success%</b><br>%i18n:@success-desc%</p>
</div> </div>
<footer> <footer>
<a href="/assets/flush.html">%i18n:@flush%</a> | <a href="/assets/version.html">%i18n:@set-version%</a> <a href="/assets/flush.html">%i18n:@flush%</a> | <a href="/assets/version.html">%i18n:@set-version%</a>
@ -100,7 +100,7 @@ export default Vue.extend({
color #444 color #444
border-bottom solid 1px #eee border-bottom solid 1px #eee
> [data-fa] > [data-icon]
margin-right 0.25em margin-right 0.25em
> div > div
@ -115,7 +115,7 @@ export default Vue.extend({
&[data-wip] &[data-wip]
color #888 color #888
> [data-fa] > [data-icon]
margin-right 0.25em margin-right 0.25em
&.times &.times
@ -132,7 +132,7 @@ export default Vue.extend({
border-top solid 1px #eee border-top solid 1px #eee
> b > b
> [data-fa] > [data-icon]
margin-right 0.25em margin-right 0.25em
&.success &.success

2
src/client/app/common/views/components/connect-failed.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-connect-failed"> <div class="mk-connect-failed">
<img src="data:image/jpeg;base64,%base64:/assets/error.jpg%" alt=""/> <img src="https://raw.githubusercontent.com/syuilo/misskey/develop/src/client/assets/error.jpg" alt=""/>
<h1>%i18n:@title%</h1> <h1>%i18n:@title%</h1>
<p class="text"> <p class="text">
<span>{{ '%i18n:@description%'.substr(0, '%i18n:@description%'.indexOf('{')) }}</span> <span>{{ '%i18n:@description%'.substr(0, '%i18n:@description%'.indexOf('{')) }}</span>

2
src/client/app/common/views/components/drive-settings.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ui-card> <ui-card>
<div slot="title">%fa:cloud% %i18n:common.drive%</div> <div slot="title"><fa icon="cloud"/> %i18n:common.drive%</div>
<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn"> <section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
<div class="meter"><div :style="meterStyle"></div></div> <div class="meter"><div :style="meterStyle"></div></div>

2
src/client/app/common/views/components/error.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="wjqjnyhzogztorhrdgcpqlkxhkmuetgj"> <div class="wjqjnyhzogztorhrdgcpqlkxhkmuetgj">
<p>%fa:exclamation-triangle% %i18n:common.error.title%</p> <p><fa icon="exclamation-triangle"/> %i18n:common.error.title%</p>
<ui-button @click="() => $emit('retry')">%i18n:common.error.retry%</ui-button> <ui-button @click="() => $emit('retry')">%i18n:common.error.retry%</ui-button>
</div> </div>
</template> </template>

2
src/client/app/common/views/components/file-type-icon.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<span class="mk-file-type-icon"> <span class="mk-file-type-icon">
<template v-if="kind == 'image'">%fa:file-image%</template> <template v-if="kind == 'image'"><fa icon="file-image"/></template>
</span> </span>
</template> </template>

10
src/client/app/common/views/components/games/reversi/reversi.game.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="xqnhankfuuilcwvhgsopeqncafzsquya"> <div class="xqnhankfuuilcwvhgsopeqncafzsquya">
<button class="go-index" v-if="selfNav" @click="goIndex">%fa:arrow-left%</button> <button class="go-index" v-if="selfNav" @click="goIndex"><fa icon="arrow-left"/></button>
<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>(%i18n:common.reversi.black%) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>(%i18n:common.reversi.white%)</header> <header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>(%i18n:common.reversi.black%) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>(%i18n:common.reversi.white%)</header>
<div style="overflow: hidden; line-height: 28px;"> <div style="overflow: hidden; line-height: 28px;">
@ -51,13 +51,13 @@
<div class="player" v-if="game.isEnded"> <div class="player" v-if="game.isEnded">
<div> <div>
<button @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</button> <button @click="logPos = 0" :disabled="logPos == 0"><fa icon="angle-double-left"/></button>
<button @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</button> <button @click="logPos--" :disabled="logPos == 0"><fa icon="angle-left"/></button>
</div> </div>
<span>{{ logPos }} / {{ logs.length }}</span> <span>{{ logPos }} / {{ logs.length }}</span>
<div> <div>
<button @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</button> <button @click="logPos++" :disabled="logPos == logs.length"><fa icon="angle-right"/></button>
<button @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</button> <button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa icon="angle-double-right"/></button>
</div> </div>
</div> </div>

6
src/client/app/common/views/components/games/reversi/reversi.room.vue
View File

@ -17,13 +17,13 @@
</header> </header>
<div> <div>
<div class="random" v-if="game.settings.map == null">%fa:dice%</div> <div class="random" v-if="game.settings.map == null"><fa icon="dice"/></div>
<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }"> <div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
<div v-for="(x, i) in game.settings.map.join('')" <div v-for="(x, i) in game.settings.map.join('')"
:data-none="x == ' '" :data-none="x == ' '"
@click="onPixelClick(i, x)"> @click="onPixelClick(i, x)">
<template v-if="x == 'b'"><template v-if="$store.state.device.darkmode">%fa:circle R%</template><template v-else>%fa:circle%</template></template> <template v-if="x == 'b'"><template v-if="$store.state.device.darkmode"><fa :icon="['far', 'circle']"/></template><template v-else><fa icon="circle"/></template></template>
<template v-if="x == 'w'"><template v-if="$store.state.device.darkmode">%fa:circle%</template><template v-else>%fa:circle R%</template></template> <template v-if="x == 'w'"><template v-if="$store.state.device.darkmode"><fa :icon="['far', 'circle']"/></template><template v-else><fa icon="circle"/></template></template>
</div> </div>
</div> </div>
</div> </div>

2
src/client/app/common/views/components/google.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-google"> <div class="mk-google">
<input type="search" v-model="query" :placeholder="q"> <input type="search" v-model="query" :placeholder="q">
<button @click="search">%fa:search% %i18n:common.search%</button> <button @click="search"><fa icon="search"/> %i18n:common.search%</button>
</div> </div>
</template> </template>

4
src/client/app/common/views/components/media-banner.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-media-banner"> <div class="mk-media-banner">
<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false"> <div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
<span class="icon">%fa:exclamation-triangle%</span> <span class="icon"><fa icon="exclamation-triangle"/></span>
<b>%i18n:@sensitive%</b> <b>%i18n:@sensitive%</b>
<span>%i18n:@click-to-show%</span> <span>%i18n:@click-to-show%</span>
</div> </div>
@ -18,7 +18,7 @@
:title="media.name" :title="media.name"
:download="media.name" :download="media.name"
> >
<span class="icon">%fa:download%</span> <span class="icon"><fa icon="download"/></span>
<b>{{ media.name }}</b> <b>{{ media.name }}</b>
</a> </a>
</div> </div>

7
src/client/app/common/views/components/menu.vue
View File

@ -4,7 +4,9 @@
<div class="popover" :class="{ hukidasi }" ref="popover"> <div class="popover" :class="{ hukidasi }" ref="popover">
<template v-for="item, i in items"> <template v-for="item, i in items">
<div v-if="item === null"></div> <div v-if="item === null"></div>
<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text" :tabindex="i"></button> <button v-if="item" @click="clicked(item.action)" :tabindex="i">
<fa v-if="item.icon" :icon="item.icon"/>{{ item.text }}
</button>
</template> </template>
</div> </div>
</div> </div>
@ -188,6 +190,9 @@ export default Vue.extend({
color var(--primaryForeground) color var(--primaryForeground)
background var(--primaryDarken10) background var(--primaryDarken10)
> [data-icon]
margin-right 4px
> div > div
margin 8px 0 margin 8px 0
height 1px height 1px

6
src/client/app/common/views/components/messaging-room.form.vue
View File

@ -14,13 +14,13 @@
<div class="file" @click="file = null" v-if="file">{{ file.name }}</div> <div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
<mk-uploader ref="uploader" @uploaded="onUploaded"/> <mk-uploader ref="uploader" @uploaded="onUploaded"/>
<button class="send" @click="send" :disabled="!canSend || sending" title="%i18n:@send%"> <button class="send" @click="send" :disabled="!canSend || sending" title="%i18n:@send%">
<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template> <template v-if="!sending"><fa icon="paper-plane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template>
</button> </button>
<button class="attach-from-local" @click="chooseFile" title="%i18n:@attach-from-local%"> <button class="attach-from-local" @click="chooseFile" title="%i18n:@attach-from-local%">
%fa:upload% <fa icon="upload"/>
</button> </button>
<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:@attach-from-drive%"> <button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:@attach-from-drive%">
%fa:R folder-open% <fa :icon="['far', 'folder-open']"/>
</button> </button>
<input ref="file" type="file" @change="onChangeFile"/> <input ref="file" type="file" @change="onChangeFile"/>
</div> </div>

4
src/client/app/common/views/components/messaging-room.message.vue
View File

@ -24,7 +24,7 @@
<footer> <footer>
<span class="read" v-if="isMe && message.isRead">%i18n:@is-read%</span> <span class="read" v-if="isMe && message.isRead">%i18n:@is-read%</span>
<mk-time :time="message.createdAt"/> <mk-time :time="message.createdAt"/>
<template v-if="message.is_edited">%fa:pencil-alt%</template> <template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
</footer> </footer>
</div> </div>
</div> </div>
@ -179,7 +179,7 @@ export default Vue.extend({
font-size 10px font-size 10px
color var(--messagingRoomMessageInfo) color var(--messagingRoomMessageInfo)
> [data-fa] > [data-icon]
margin-left 4px margin-left 4px
&:not([data-is-me]) &:not([data-is-me])

18
src/client/app/common/views/components/messaging-room.vue
View File

@ -4,11 +4,11 @@
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
> >
<div class="body"> <div class="body">
<p class="init" v-if="init">%fa:spinner .spin%%i18n:common.loading%</p> <p class="init" v-if="init"><fa icon="spinner .spin"/>%i18n:common.loading%</p>
<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:@empty%</p> <p class="empty" v-if="!init && messages.length == 0"><fa icon="info-circle"/>%i18n:@empty%</p>
<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages">%fa:flag%%i18n:@no-history%</p> <p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages"><fa icon="flag"/>%i18n:@no-history%</p>
<button class="more" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages"> <button class="more" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:@more%' }} <template v-if="fetchingMoreMessages"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:@more%' }}
</button> </button>
<template v-for="(message, i) in _messages"> <template v-for="(message, i) in _messages">
<x-message :message="message" :key="message.id"/> <x-message :message="message" :key="message.id"/>
@ -20,7 +20,7 @@
<footer> <footer>
<transition name="fade"> <transition name="fade">
<div class="new-message" v-show="showIndicator"> <div class="new-message" v-show="showIndicator">
<button @click="onIndicatorClick">%fa:arrow-circle-down%%i18n:@new-message%</button> <button @click="onIndicatorClick"><i><fa icon="arrow-circle-down"/></i>%i18n:@new-message%</button>
</div> </div>
</transition> </transition>
<x-form :user="user" ref="form"/> <x-form :user="user" ref="form"/>
@ -280,7 +280,7 @@ export default Vue.extend({
color var(--messagingRoomInfo) color var(--messagingRoomInfo)
opacity 0.5 opacity 0.5
[data-fa] [data-icon]
margin-right 4px margin-right 4px
> .no-history > .no-history
@ -292,7 +292,7 @@ export default Vue.extend({
color var(--messagingRoomInfo) color var(--messagingRoomInfo)
opacity 0.5 opacity 0.5
[data-fa] [data-icon]
margin-right 4px margin-right 4px
> .more > .more
@ -313,7 +313,7 @@ export default Vue.extend({
&.fetching &.fetching
cursor wait cursor wait
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> .message > .message
@ -381,7 +381,7 @@ export default Vue.extend({
&:active &:active
background var(--primaryDarken10) background var(--primaryDarken10)
> [data-fa] > i
position absolute position absolute
top 0 top 0
left 10px left 10px

8
src/client/app/common/views/components/messaging.vue
View File

@ -2,7 +2,7 @@
<div class="mk-messaging" :data-compact="compact"> <div class="mk-messaging" :data-compact="compact">
<div class="search" v-if="!compact" :style="{ top: headerTop + 'px' }"> <div class="search" v-if="!compact" :style="{ top: headerTop + 'px' }">
<div class="form"> <div class="form">
<label for="search-input">%fa:search%</label> <label for="search-input"><i><fa icon="search"/></i></label>
<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:@search-user%"/> <input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:@search-user%"/>
</div> </div>
<div class="result"> <div class="result">
@ -45,7 +45,7 @@
</template> </template>
</div> </div>
<p class="no-history" v-if="!fetching && messages.length == 0">%i18n:@no-history%</p> <p class="no-history" v-if="!fetching && messages.length == 0">%i18n:@no-history%</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> </div>
</template> </template>
@ -213,7 +213,7 @@ export default Vue.extend({
width 38px width 38px
pointer-events none pointer-events none
> [data-fa] > i
display block display block
position absolute position absolute
top 0 top 0
@ -418,7 +418,7 @@ export default Vue.extend({
text-align center text-align center
color #aaa color #aaa
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
// TODO: element base media query // TODO: element base media query

2
src/client/app/common/views/components/mute-and-block.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ui-card> <ui-card>
<div slot="title">%fa:ban% %i18n:@mute-and-block%</div> <div slot="title"><fa icon="ban"/> %i18n:@mute-and-block%</div>
<section> <section>
<header>%i18n:@mute%</header> <header>%i18n:@mute%</header>

2
src/client/app/common/views/components/nav.vue
View File

@ -8,7 +8,7 @@
<i>・</i> <i>・</i>
<a href="/dev">%i18n:@develop%</a> <a href="/dev">%i18n:@develop%</a>
<i>・</i> <i>・</i>
<a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a> <a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <fa :icon="['fab', 'twitter']"/></a>
</span> </span>
</template> </template>

12
src/client/app/common/views/components/note-header.vue
View File

@ -6,18 +6,18 @@
<span class="is-bot" v-if="note.user.isBot">bot</span> <span class="is-bot" v-if="note.user.isBot">bot</span>
<span class="is-cat" v-if="note.user.isCat">cat</span> <span class="is-cat" v-if="note.user.isCat">cat</span>
<span class="username"><mk-acct :user="note.user"/></span> <span class="username"><mk-acct :user="note.user"/></span>
<span class="is-verified" v-if="note.user.isVerified" title="%i18n:common.verified-user%">%fa:star%</span> <span class="is-verified" v-if="note.user.isVerified" title="%i18n:common.verified-user%"><fa icon="star"/></span>
<div class="info"> <div class="info">
<span class="app" v-if="note.app && !mini">via <b>{{ note.app.name }}</b></span> <span class="app" v-if="note.app && !mini">via <b>{{ note.app.name }}</b></span>
<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span> <span class="mobile" v-if="note.viaMobile"><fa icon="mobile-alt"/></span>
<router-link class="created-at" :to="note | notePage"> <router-link class="created-at" :to="note | notePage">
<mk-time :time="note.createdAt"/> <mk-time :time="note.createdAt"/>
</router-link> </router-link>
<span class="visibility" v-if="note.visibility != 'public'"> <span class="visibility" v-if="note.visibility != 'public'">
<template v-if="note.visibility == 'home'">%fa:home%</template> <template v-if="note.visibility == 'home'"><fa icon="home"/></template>
<template v-if="note.visibility == 'followers'">%fa:unlock%</template> <template v-if="note.visibility == 'followers'"><fa icon="unlock"/></template>
<template v-if="note.visibility == 'specified'">%fa:envelope%</template> <template v-if="note.visibility == 'specified'"><fa icon="envelope"/></template>
<template v-if="note.visibility == 'private'">%fa:lock%</template> <template v-if="note.visibility == 'private'"><fa icon="lock"/></template>
</span> </span>
</div> </div>
</header> </header>

16
src/client/app/common/views/components/note-menu.vue
View File

@ -15,18 +15,18 @@ export default Vue.extend({
computed: { computed: {
items() { items() {
const items = [{ const items = [{
icon: '%fa:info-circle%', icon: 'info-circle',
text: '%i18n:@detail%', text: '%i18n:@detail%',
action: this.detail action: this.detail
}, { }, {
icon: '%fa:link%', icon: 'link',
text: '%i18n:@copy-link%', text: '%i18n:@copy-link%',
action: this.copyLink action: this.copyLink
}]; }];
if (this.note.uri) { if (this.note.uri) {
items.push({ items.push({
icon: '%fa:external-link-square-alt%', icon: 'external-link-square-alt',
text: '%i18n:@remote%', text: '%i18n:@remote%',
action: () => { action: () => {
window.open(this.note.uri, '_blank'); window.open(this.note.uri, '_blank');
@ -38,13 +38,13 @@ export default Vue.extend({
if (this.note.isFavorited) { if (this.note.isFavorited) {
items.push({ items.push({
icon: '%fa:star%', icon: 'star',
text: '%i18n:@unfavorite%', text: '%i18n:@unfavorite%',
action: this.unfavorite action: this.unfavorite
}); });
} else { } else {
items.push({ items.push({
icon: '%fa:star%', icon: 'star',
text: '%i18n:@favorite%', text: '%i18n:@favorite%',
action: this.favorite action: this.favorite
}); });
@ -53,13 +53,13 @@ export default Vue.extend({
if (this.note.userId == this.$store.state.i.id) { if (this.note.userId == this.$store.state.i.id) {
if ((this.$store.state.i.pinnedNoteIds || []).includes(this.note.id)) { if ((this.$store.state.i.pinnedNoteIds || []).includes(this.note.id)) {
items.push({ items.push({
icon: '%fa:thumbtack%', icon: 'thumbtack',
text: '%i18n:@unpin%', text: '%i18n:@unpin%',
action: this.unpin action: this.unpin
}); });
} else { } else {
items.push({ items.push({
icon: '%fa:thumbtack%', icon: 'thumbtack',
text: '%i18n:@pin%', text: '%i18n:@pin%',
action: this.pin action: this.pin
}); });
@ -69,7 +69,7 @@ export default Vue.extend({
if (this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin) { if (this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin) {
items.push(null); items.push(null);
items.push({ items.push({
icon: '%fa:trash-alt R%', icon: ['far', 'trash-alt'],
text: '%i18n:@delete%', text: '%i18n:@delete%',
action: this.del action: this.del
}); });

8
src/client/app/common/views/components/poll-editor.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<div class="mk-poll-editor"> <div class="mk-poll-editor">
<p class="caution" v-if="choices.length < 2"> <p class="caution" v-if="choices.length < 2">
%fa:exclamation-triangle%%i18n:@no-only-one-choice% <fa icon="exclamation-triangle"/>%i18n:@no-only-one-choice%
</p> </p>
<ul ref="choices"> <ul ref="choices">
<li v-for="(choice, i) in choices"> <li v-for="(choice, i) in choices">
<input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:@choice-n%'.replace('{}', i + 1)"> <input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:@choice-n%'.replace('{}', i + 1)">
<button @click="remove(i)" title="%i18n:@remove%"> <button @click="remove(i)" title="%i18n:@remove%">
%fa:times% <fa icon="times"/>
</button> </button>
</li> </li>
</ul> </ul>
<button class="add" v-if="choices.length < 10" @click="add">%i18n:@add%</button> <button class="add" v-if="choices.length < 10" @click="add">%i18n:@add%</button>
<button class="destroy" @click="destroy" title="%i18n:@destroy%"> <button class="destroy" @click="destroy" title="%i18n:@destroy%">
%fa:times% <fa icon="times"/>
</button> </button>
</div> </div>
</template> </template>
@ -76,7 +76,7 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
color #f00 color #f00
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> ul > ul

4
src/client/app/common/views/components/poll.vue
View File

@ -4,7 +4,7 @@
<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:@vote-to%'.replace('{}', choice.text) : ''"> <li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:@vote-to%'.replace('{}', choice.text) : ''">
<div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div> <div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
<span> <span>
<template v-if="choice.isVoted">%fa:check%</template> <template v-if="choice.isVoted"><fa icon="check"/></template>
<span>{{ choice.text }}</span> <span>{{ choice.text }}</span>
<span class="votes" v-if="showResult">({{ '%i18n:@vote-count%'.replace('{}', choice.votes) }})</span> <span class="votes" v-if="showResult">({{ '%i18n:@vote-count%'.replace('{}', choice.votes) }})</span>
</span> </span>
@ -100,7 +100,7 @@ export default Vue.extend({
transition width 1s ease transition width 1s ease
> span > span
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> .votes > .votes

10
src/client/app/common/views/components/profile-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ui-card> <ui-card>
<div slot="title">%fa:user% %i18n:@title%</div> <div slot="title"><fa icon="user"/> %i18n:@title%</div>
<section class="fit-top"> <section class="fit-top">
<ui-form :disabled="saving"> <ui-form :disabled="saving">
@ -16,12 +16,12 @@
<ui-input v-model="location"> <ui-input v-model="location">
<span>%i18n:@location%</span> <span>%i18n:@location%</span>
<span slot="prefix">%fa:map-marker-alt%</span> <span slot="prefix"><fa icon="map-marker-alt"/></span>
</ui-input> </ui-input>
<ui-input v-model="birthday" type="date"> <ui-input v-model="birthday" type="date">
<span>%i18n:@birthday%</span> <span>%i18n:@birthday%</span>
<span slot="prefix">%fa:birthday-cake%</span> <span slot="prefix"><fa icon="birthday-cake"/></span>
</ui-input> </ui-input>
<ui-textarea v-model="description" :max="500"> <ui-textarea v-model="description" :max="500">
@ -30,13 +30,13 @@
<ui-input type="file" @change="onAvatarChange"> <ui-input type="file" @change="onAvatarChange">
<span>%i18n:@avatar%</span> <span>%i18n:@avatar%</span>
<span slot="icon">%fa:image%</span> <span slot="icon"><fa icon="image"/></span>
<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span> <span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input> </ui-input>
<ui-input type="file" @change="onBannerChange"> <ui-input type="file" @change="onBannerChange">
<span>%i18n:@banner%</span> <span>%i18n:@banner%</span>
<span slot="icon">%fa:image%</span> <span slot="icon"><fa icon="image"/></span>
<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span> <span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input> </ui-input>

2
src/client/app/common/views/components/signin.vue
View File

@ -8,7 +8,7 @@
</ui-input> </ui-input>
<ui-input v-model="password" type="password" required styl="fill"> <ui-input v-model="password" type="password" required styl="fill">
<span>%i18n:@password%</span> <span>%i18n:@password%</span>
<span slot="prefix">%fa:lock%</span> <span slot="prefix"><fa icon="lock"/></span>
</ui-input> </ui-input>
<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"/> <ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"/>
<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button> <ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>

30
src/client/app/common/views/components/signup.vue
View File

@ -3,36 +3,36 @@
<template v-if="meta"> <template v-if="meta">
<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill"> <ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill">
<span>%i18n:@invitation-code%</span> <span>%i18n:@invitation-code%</span>
<span slot="prefix">%fa:id-card-alt%</span> <span slot="prefix"><fa icon="id-card-alt"/></span>
<p slot="text" v-html="'%i18n:@invitation-info%'.replace('{}', meta.maintainer.url)"></p> <p slot="text" v-html="'%i18n:@invitation-info%'.replace('{}', meta.maintainer.url)"></p>
</ui-input> </ui-input>
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill"> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill">
<span>%i18n:@username%</span> <span>%i18n:@username%</span>
<span slot="prefix">@</span> <span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span> <span slot="suffix">@{{ host }}</span>
<p slot="text" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw% %i18n:@checking%</p> <p slot="text" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> %i18n:@checking%</p>
<p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw% %i18n:@available%</p> <p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@available%</p>
<p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@unavailable%</p> <p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@unavailable%</p>
<p slot="text" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@error%</p> <p slot="text" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@error%</p>
<p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@invalid-format%</p> <p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@invalid-format%</p>
<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-short%</p> <p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-short%</p>
<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p> <p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-long%</p>
</ui-input> </ui-input>
<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill"> <ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill">
<span>%i18n:@password%</span> <span>%i18n:@password%</span>
<span slot="prefix">%fa:lock%</span> <span slot="prefix"><fa icon="lock"/></span>
<div slot="text"> <div slot="text">
<p slot="text" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@weak-password%</p> <p slot="text" v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@weak-password%</p>
<p slot="text" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw% %i18n:@normal-password%</p> <p slot="text" v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@normal-password%</p>
<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p> <p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@strong-password%</p>
</div> </div>
</ui-input> </ui-input>
<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill"> <ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
<span>%i18n:@password% (%i18n:@retype%)</span> <span>%i18n:@password% (%i18n:@retype%)</span>
<span slot="prefix">%fa:lock%</span> <span slot="prefix"><fa icon="lock"/></span>
<div slot="text"> <div slot="text">
<p slot="text" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw% %i18n:@password-matched%</p> <p slot="text" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@password-matched%</p>
<p slot="text" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@password-not-matched%</p> <p slot="text" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@password-not-matched%</p>
</div> </div>
</ui-input> </ui-input>
<div v-if="meta.recaptchaSitekey != null" class="g-recaptcha" :data-sitekey="meta.recaptchaSitekey" style="margin: 16px 0;"></div> <div v-if="meta.recaptchaSitekey != null" class="g-recaptcha" :data-sitekey="meta.recaptchaSitekey" style="margin: 16px 0;"></div>

8
src/client/app/common/views/components/stream-indicator.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="mk-stream-indicator"> <div class="mk-stream-indicator">
<p v-if="stream.state == 'initializing'"> <p v-if="stream.state == 'initializing'">
%fa:spinner .pulse% <fa icon="spinner .pulse"/>
<span>%i18n:@connecting%<mk-ellipsis/></span> <span>%i18n:@connecting%<mk-ellipsis/></span>
</p> </p>
<p v-if="stream.state == 'reconnecting'"> <p v-if="stream.state == 'reconnecting'">
%fa:spinner .pulse% <fa icon="spinner .pulse"/>
<span>%i18n:@reconnecting%<mk-ellipsis/></span> <span>%i18n:@reconnecting%<mk-ellipsis/></span>
</p> </p>
<p v-if="stream.state == 'connected'"> <p v-if="stream.state == 'connected'">
%fa:check% <fa icon="check"/>
<span>%i18n:@connected%</span> <span>%i18n:@connected%</span>
</p> </p>
</div> </div>
@ -80,7 +80,7 @@ export default Vue.extend({
display block display block
margin 0 margin 0
> [data-fa] > [data-icon]
margin-right 0.25em margin-right 0.25em
</style> </style>

6
src/client/app/common/views/components/tag-cloud.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="jtivnzhfwquxpsfidertopbmwmchmnmo"> <div class="jtivnzhfwquxpsfidertopbmwmchmnmo">
<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>
<p class="empty" v-else-if="tags.length == 0">%fa:exclamation-circle%%i18n:@empty%</p> <p class="empty" v-else-if="tags.length == 0"><fa icon="exclamation-circle"/>%i18n:@empty%</p>
<div v-else> <div v-else>
<vue-word-cloud <vue-word-cloud
:words="tags.slice(0, 20).map(x => [x.name, x.count])" :words="tags.slice(0, 20).map(x => [x.name, x.count])"
@ -74,7 +74,7 @@ export default Vue.extend({
text-align center text-align center
color #aaa color #aaa
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> div > div

18
src/client/app/common/views/components/theme.vue
View File

@ -25,7 +25,7 @@
</label> </label>
<details class="creator"> <details class="creator">
<summary>%fa:palette% %i18n:@create-a-theme%</summary> <summary><fa icon="palette"/> %i18n:@create-a-theme%</summary>
<div> <div>
<span>%i18n:@base-theme%:</span> <span>%i18n:@base-theme%:</span>
<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio> <ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
@ -51,23 +51,23 @@
<div style="padding-bottom:8px;">%i18n:@text-color%:</div> <div style="padding-bottom:8px;">%i18n:@text-color%:</div>
<color-picker v-model="myThemeText"/> <color-picker v-model="myThemeText"/>
</div> </div>
<ui-button @click="preview()">%fa:eye% %i18n:@preview-created-theme%</ui-button> <ui-button @click="preview()"><fa icon="eye"/> %i18n:@preview-created-theme%</ui-button>
<ui-button primary @click="gen()">%fa:save R% %i18n:@save-created-theme%</ui-button> <ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> %i18n:@save-created-theme%</ui-button>
</details> </details>
<details> <details>
<summary>%fa:download% %i18n:@install-a-theme%</summary> <summary><fa icon="download"/> %i18n:@install-a-theme%</summary>
<ui-button @click="import_()">%fa:file-import% %i18n:@import%</ui-button> <ui-button @click="import_()"><fa icon="file-import"/> %i18n:@import%</ui-button>
<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/> <input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
<p>%i18n:@import-by-code%:</p> <p>%i18n:@import-by-code%:</p>
<ui-textarea v-model="installThemeCode"> <ui-textarea v-model="installThemeCode">
<span>%i18n:@theme-code%</span> <span>%i18n:@theme-code%</span>
</ui-textarea> </ui-textarea>
<ui-button @click="() => install(this.installThemeCode)">%fa:check% %i18n:@install%</ui-button> <ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> %i18n:@install%</ui-button>
</details> </details>
<details> <details>
<summary>%fa:folder-open% %i18n:@manage-themes%</summary> <summary><fa icon="folder-open"/> %i18n:@manage-themes%</summary>
<ui-select v-model="selectedThemeId" placeholder="%i18n:@select-theme%"> <ui-select v-model="selectedThemeId" placeholder="%i18n:@select-theme%">
<optgroup label="%i18n:@builtin-themes%"> <optgroup label="%i18n:@builtin-themes%">
<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option> <option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@ -89,8 +89,8 @@
<ui-textarea readonly :value="selectedThemeCode"> <ui-textarea readonly :value="selectedThemeCode">
<span>%i18n:@theme-code%</span> <span>%i18n:@theme-code%</span>
</ui-textarea> </ui-textarea>
<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export">%fa:box% %i18n:@export%</ui-button> <ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> %i18n:@export%</ui-button>
<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)">%fa:trash-alt R% %i18n:@uninstall%</ui-button> <ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> %i18n:@uninstall%</ui-button>
</template> </template>
</details> </details>
</div> </div>

6
src/client/app/common/views/components/trends.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc"> <div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc">
<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>
<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p> <p class="empty" v-else-if="stats.length == 0"><fa icon="exclamation-circle"/>%i18n:@empty%</p>
<!-- トランジションを有効にするとなぜかメモリリークする --> <!-- トランジションを有効にするとなぜかメモリリークする -->
<transition-group v-else tag="div" name="chart"> <transition-group v-else tag="div" name="chart">
<div v-for="stat in stats" :key="stat.tag"> <div v-for="stat in stats" :key="stat.tag">
@ -58,7 +58,7 @@ export default Vue.extend({
color var(--text) color var(--text)
opacity 0.7 opacity 0.7
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> div > div

4
src/client/app/common/views/components/ui/info.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="ymxyweixqwsxauxldgpvecjepnwxbylu" :class="{ warn }"> <div class="ymxyweixqwsxauxldgpvecjepnwxbylu" :class="{ warn }">
<i v-if="warn">%fa:exclamation-triangle%</i> <i v-if="warn"><fa icon="exclamation-triangle"/></i>
<i v-else>%fa:info-circle%</i> <i v-else><fa icon="info-circle"/></i>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

4
src/client/app/common/views/components/uploader.vue
View File

@ -3,7 +3,7 @@
<ol v-if="uploads.length > 0"> <ol v-if="uploads.length > 0">
<li v-for="ctx in uploads" :key="ctx.id"> <li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div> <div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<p class="name">%fa:spinner .pulse%{{ ctx.name }}</p> <p class="name"><fa icon="spinner .pulse"/>{{ ctx.name }}</p>
<p class="status"> <p class="status">
<span class="initing" v-if="ctx.progress == undefined">%i18n:@waiting%<mk-ellipsis/></span> <span class="initing" v-if="ctx.progress == undefined">%i18n:@waiting%<mk-ellipsis/></span>
<span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span> <span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
@ -155,7 +155,7 @@ export default Vue.extend({
text-overflow ellipsis text-overflow ellipsis
overflow hidden overflow hidden
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> .status > .status

4
src/client/app/common/views/components/url.vue
View File

@ -6,7 +6,7 @@
<span class="pathname" v-if="pathname != ''">{{ pathname }}</span> <span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
<span class="query">{{ query }}</span> <span class="query">{{ query }}</span>
<span class="hash">{{ hash }}</span> <span class="hash">{{ hash }}</span>
%fa:external-link-square-alt% <fa icon="external-link-square-alt"/>
</a> </a>
</template> </template>
@ -40,7 +40,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-url .mk-url
word-break break-all word-break break-all
> [data-fa] > [data-icon]
padding-left 2px padding-left 2px
font-size .9em font-size .9em
font-weight 400 font-weight 400

10
src/client/app/common/views/components/visibility-chooser.vue
View File

@ -3,34 +3,34 @@
<div class="backdrop" ref="backdrop" @click="close"></div> <div class="backdrop" ref="backdrop" @click="close"></div>
<div class="popover" :class="{ compact }" ref="popover"> <div class="popover" :class="{ compact }" ref="popover">
<div @click="choose('public')" :class="{ active: v == 'public' }"> <div @click="choose('public')" :class="{ active: v == 'public' }">
<div>%fa:globe%</div> <div><fa icon="globe"/></div>
<div> <div>
<span>%i18n:@public%</span> <span>%i18n:@public%</span>
</div> </div>
</div> </div>
<div @click="choose('home')" :class="{ active: v == 'home' }"> <div @click="choose('home')" :class="{ active: v == 'home' }">
<div>%fa:home%</div> <div><fa icon="home"/></div>
<div> <div>
<span>%i18n:@home%</span> <span>%i18n:@home%</span>
<span>%i18n:@home-desc%</span> <span>%i18n:@home-desc%</span>
</div> </div>
</div> </div>
<div @click="choose('followers')" :class="{ active: v == 'followers' }"> <div @click="choose('followers')" :class="{ active: v == 'followers' }">
<div>%fa:unlock%</div> <div><fa icon="unlock"/></div>
<div> <div>
<span>%i18n:@followers%</span> <span>%i18n:@followers%</span>
<span>%i18n:@followers-desc%</span> <span>%i18n:@followers-desc%</span>
</div> </div>
</div> </div>
<div @click="choose('specified')" :class="{ active: v == 'specified' }"> <div @click="choose('specified')" :class="{ active: v == 'specified' }">
<div>%fa:envelope%</div> <div><fa icon="envelope"/></div>
<div> <div>
<span>%i18n:@specified%</span> <span>%i18n:@specified%</span>
<span>%i18n:@specified-desc%</span> <span>%i18n:@specified-desc%</span>
</div> </div>
</div> </div>
<div @click="choose('private')" :class="{ active: v == 'private' }"> <div @click="choose('private')" :class="{ active: v == 'private' }">
<div>%fa:lock%</div> <div><fa icon="lock"/></div>
<div> <div>
<span>%i18n:@private%</span> <span>%i18n:@private%</span>
</div> </div>

12
src/client/app/common/views/pages/follow.vue
View File

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

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

@ -2,7 +2,7 @@
<div> <div>
<mk-widget-container :show-header="false"> <mk-widget-container :show-header="false">
<article class="dolfvtibguprpxxhfndqaosjitixjohx"> <article class="dolfvtibguprpxxhfndqaosjitixjohx">
<h1>%fa:heart%%i18n:@title%</h1> <h1><fa icon="heart"/>%i18n:@title%</h1>
<p v-if="meta"> <p v-if="meta">
{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }} {{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a> <a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
@ -41,7 +41,7 @@ export default define({
margin 0 0 5px 0 margin 0 0 5px 0
font-size 1em font-size 1em
> [data-fa] > [data-icon]
margin-right 0.25em margin-right 0.25em
> p > p

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

@ -1,7 +1,7 @@
<template> <template>
<div class="mkw-hashtags"> <div class="mkw-hashtags">
<mk-widget-container :show-header="!props.compact"> <mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:hashtag%%i18n:@title%</template> <template slot="header"><fa icon="hashtag"/>%i18n:@title%</template>
<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'"> <div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
<mk-trends/> <mk-trends/>

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

@ -1,7 +1,7 @@
<template> <template>
<div class="mkw-memo"> <div class="mkw-memo">
<mk-widget-container :show-header="!props.compact"> <mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:R sticky-note%%i18n:@title%</template> <template slot="header"><fa :icon="['far', 'sticky-note']"/>%i18n:@title%</template>
<div class="mkw-memo--body"> <div class="mkw-memo--body">
<textarea v-model="text" placeholder="%i18n:@memo%" @input="onChange"></textarea> <textarea v-model="text" placeholder="%i18n:@memo%" @input="onChange"></textarea>

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

@ -1,9 +1,9 @@
<template> <template>
<div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2"> <div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2"> <mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header">%fa:camera%%i18n:@title%</template> <template slot="header"><fa icon="camera"/>%i18n:@title%</template>
<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>
<div :class="$style.stream" v-if="!fetching && images.length > 0"> <div :class="$style.stream" v-if="!fetching && images.length > 0">
<div v-for="image in images" :class="$style.img" :style="`background-image: url(${image.thumbnailUrl || image.url})`"></div> <div v-for="image in images" :class="$style.img" :style="`background-image: url(${image.thumbnailUrl || image.url})`"></div>
</div> </div>
@ -94,7 +94,7 @@ export default define({
text-align center text-align center
color #aaa color #aaa
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
</style> </style>

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

@ -1,8 +1,8 @@
<template> <template>
<div class="mkw-posts-monitor"> <div class="mkw-posts-monitor">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2"> <mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header">%fa:chart-line%%i18n:@title%</template> <template slot="header"><fa icon="chart-line"/>%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button> <button slot="func" @click="toggle" title="%i18n:@toggle%"><fa icon="sort"/></button>
<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }"> <div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2"> <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">

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

@ -1,11 +1,11 @@
<template> <template>
<div class="mkw-rss"> <div class="mkw-rss">
<mk-widget-container :show-header="!props.compact"> <mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:rss-square%RSS</template> <template slot="header"><fa icon="rss-square"/>RSS</template>
<button slot="func" title="設定" @click="setting">%fa:cog%</button> <button slot="func" title="設定" @click="setting"><fa icon="cog"/></button>
<div class="mkw-rss--body" :data-mobile="platform == 'mobile'"> <div class="mkw-rss--body" :data-mobile="platform == 'mobile'">
<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="feed" v-else> <div class="feed" v-else>
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a> <a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
</div> </div>
@ -85,7 +85,7 @@ export default define({
text-align center text-align center
color #aaa color #aaa
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
&[data-mobile] &[data-mobile]

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

@ -2,7 +2,7 @@
<div class="cpu"> <div class="cpu">
<x-pie class="pie" :value="usage"/> <x-pie class="pie" :value="usage"/>
<div> <div>
<p>%fa:microchip%CPU</p> <p><fa icon="microchip"/>CPU</p>
<p>{{ meta.cpu.cores }} Cores</p> <p>{{ meta.cpu.cores }} Cores</p>
<p>{{ meta.cpu.model }}</p> <p>{{ meta.cpu.model }}</p>
</div> </div>
@ -57,7 +57,7 @@ export default Vue.extend({
&:first-child &:first-child
font-weight bold font-weight bold
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
&:after &:after

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

@ -2,7 +2,7 @@
<div class="disk"> <div class="disk">
<x-pie class="pie" :value="usage"/> <x-pie class="pie" :value="usage"/>
<div> <div>
<p>%fa:R hdd%Storage</p> <p><fa :icon="['far', 'hdd']"/>Storage</p>
<p>Total: {{ total | bytes(1) }}</p> <p>Total: {{ total | bytes(1) }}</p>
<p>Free: {{ available | bytes(1) }}</p> <p>Free: {{ available | bytes(1) }}</p>
<p>Used: {{ used | bytes(1) }}</p> <p>Used: {{ used | bytes(1) }}</p>
@ -65,7 +65,7 @@ export default Vue.extend({
&:first-child &:first-child
font-weight bold font-weight bold
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
&:after &:after

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

@ -2,7 +2,7 @@
<div class="memory"> <div class="memory">
<x-pie class="pie" :value="usage"/> <x-pie class="pie" :value="usage"/>
<div> <div>
<p>%fa:flask%Memory</p> <p><fa icon="flask"/>Memory</p>
<p>Total: {{ total | bytes(1) }}</p> <p>Total: {{ total | bytes(1) }}</p>
<p>Used: {{ used | bytes(1) }}</p> <p>Used: {{ used | bytes(1) }}</p>
<p>Free: {{ free | bytes(1) }}</p> <p>Free: {{ free | bytes(1) }}</p>
@ -65,7 +65,7 @@ export default Vue.extend({
&:first-child &:first-child
font-weight bold font-weight bold
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
&:after &:after

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

@ -1,10 +1,10 @@
<template> <template>
<div class="mkw-server"> <div class="mkw-server">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2"> <mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header">%fa:server%%i18n:@title%</template> <template slot="header"><fa icon="server"/>%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button> <button slot="func" @click="toggle" title="%i18n:@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-if="!fetching"> <template v-if="!fetching">
<x-cpu-memory v-show="props.view == 0" :connection="connection"/> <x-cpu-memory v-show="props.view == 0" :connection="connection"/>
<x-cpu v-show="props.view == 1" :connection="connection" :meta="meta"/> <x-cpu v-show="props.view == 1" :connection="connection" :meta="meta"/>
@ -87,7 +87,7 @@ export default define({
text-align center text-align center
color #aaa color #aaa
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
</style> </style>

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

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-tips"> <div class="mkw-tips">
<p ref="tip">%fa:R lightbulb%<span v-html="tip"></span></p> <p ref="tip"><fa :icon="['far', 'lightbulb']"/><span v-html="tip"></span></p>
</div> </div>
</template> </template>
@ -88,7 +88,7 @@ export default define({
font-size 0.7em font-size 0.7em
color #999 color #999
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
kbd kbd

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

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

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

@ -1,9 +1,9 @@
<template> <template>
<div class="mk-calendar" :data-melt="design == 4 || design == 5"> <div class="mk-calendar" :data-melt="design == 4 || design == 5">
<template v-if="design == 0 || design == 1"> <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> <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> </template>
<div class="calendar"> <div class="calendar">
@ -151,7 +151,7 @@ export default Vue.extend({
background var(--faceHeader) background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> button > button

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

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

8
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"> <li v-for="(item, i) in menu" :class="item ? item.type : item === null ? 'divider' : null">
<template v-if="item"> <template v-if="item">
<template v-if="item.type == null || item.type == '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>
<template v-else-if="item.type == 'link'"> <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>
<template v-else-if="item.type == 'nest'"> <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"/> <me-nu :menu="item.menu" @x="click"/>
</template> </template>
</template> </template>
@ -113,7 +113,7 @@ export default Vue.extend({
<style lang="stylus" module> <style lang="stylus" module>
.icon .icon
> * display inline-block
width 28px width 28px
margin-left -28px margin-left -28px
text-align center text-align center

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

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

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

@ -91,8 +91,6 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-dialog .mk-dialog
> .bg > .bg
display block 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"> <mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
<template slot="header"> <template slot="header">
<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:@used%</p> <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> </template>
<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/> <mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
</mk-window> </mk-window>
@ -39,7 +39,7 @@ export default Vue.extend({
<style lang="stylus" module> <style lang="stylus" module>
.title .title
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
.info .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, [{ contextmenu((this as any).os)(e, [{
type: 'item', type: 'item',
text: '%i18n:@contextmenu.rename%', text: '%i18n:@contextmenu.rename%',
icon: '%fa:i-cursor%', icon: 'i-cursor',
action: this.rename action: this.rename
}, { }, {
type: 'item', type: 'item',
text: this.file.isSensitive ? '%i18n:@contextmenu.unmark-as-sensitive%' : '%i18n:@contextmenu.mark-as-sensitive%', 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 action: this.toggleSensitive
}, null, { }, null, {
type: 'item', type: 'item',
text: '%i18n:@contextmenu.copy-url%', text: '%i18n:@contextmenu.copy-url%',
icon: '%fa:link%', icon: 'link',
action: this.copyUrl action: this.copyUrl
}, { }, {
type: 'link', type: 'link',
href: `${this.file.url}?download`, href: `${this.file.url}?download`,
text: '%i18n:@contextmenu.download%', text: '%i18n:@contextmenu.download%',
icon: '%fa:download%', icon: 'download',
}, null, { }, null, {
type: 'item', type: 'item',
text: '%i18n:common.delete%', text: '%i18n:common.delete%',
icon: '%fa:R trash-alt%', icon: ['far', 'trash-alt'],
action: this.deleteFile action: this.deleteFile
}, null, { }, null, {
type: 'nest', type: 'nest',
@ -170,7 +170,7 @@ export default Vue.extend({
copyUrl() { copyUrl() {
copyToClipboard(this.file.url); copyToClipboard(this.file.url);
(this as any).apis.dialog({ (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%', text: '%i18n:@contextmenu.copied-url-to-clipboard%',
actions: [{ actions: [{
text: '%i18n:common.ok%' text: '%i18n:common.ok%'

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

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

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

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

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

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

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

@ -5,13 +5,13 @@
:disabled="wait" :disabled="wait"
> >
<template v-if="!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-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:hourglass-start%<template v-if="size == 'big'"> %i18n:@follow-processing%</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:minus%<template v-if="size == 'big'"> %i18n:@following%</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: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-request%</template></template>
<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow%</template></template> <template v-else-if="!u.isFollowing && !u.isLocked"><fa icon="plus"/><template v-if="size == 'big'"> %i18n:@follow%</template></template>
</template> </template>
<template v-else>%fa:spinner .pulse .fw%</template> <template v-else><fa icon="spinner .pulse" fixed-width/></template>
</button> </button>
</template> </template>

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

@ -11,9 +11,9 @@
</div> </div>
</div> </div>
<p class="empty" v-if="!fetching && users.length == 0">%i18n:@empty%</p> <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> <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> </div>
</template> </template>
@ -124,7 +124,7 @@ export default Vue.extend({
text-align center text-align center
color #aaa color #aaa
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> .refresh > .refresh
@ -155,7 +155,7 @@ export default Vue.extend({
&:active &:active
color #222 color #222
> [data-fa] > [data-icon]
padding 14px padding 14px
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -7,8 +7,8 @@
@click="fetchConversation" @click="fetchConversation"
:disabled="conversationFetching" :disabled="conversationFetching"
> >
<template v-if="!conversationFetching">%fa:ellipsis-v%</template> <template v-if="!conversationFetching"><fa icon="ellipsis-v"/></template>
<template v-if="conversationFetching">%fa:spinner .pulse%</template> <template v-if="conversationFetching"><fa icon="spinner .pulse"/></template>
</button> </button>
<div class="conversation"> <div class="conversation">
<x-sub v-for="note in conversation" :key="note.id" :note="note"/> <x-sub v-for="note in conversation" :key="note.id" :note="note"/>
@ -19,7 +19,7 @@
<div class="renote" v-if="isRenote"> <div class="renote" v-if="isRenote">
<p> <p>
<mk-avatar class="avatar" :user="note.user"/> <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> <router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span> <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> <a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
@ -52,7 +52,7 @@
</div> </div>
<mk-poll v-if="p.poll" :note="p"/> <mk-poll v-if="p.poll" :note="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/> <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="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote"> <div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote"/> <mk-note-preview :note="p.renote"/>
@ -62,18 +62,18 @@
<footer> <footer>
<mk-reactions-viewer :note="p"/> <mk-reactions-viewer :note="p"/>
<button class="replyButton" @click="reply" title=""> <button class="replyButton" @click="reply" title="">
<template v-if="p.reply">%fa:reply-all%</template> <template v-if="p.reply"><fa icon="reply-all"/></template>
<template v-else>%fa:reply%</template> <template v-else><fa icon="reply"/></template>
<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p> <p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
</button> </button>
<button class="renoteButton" @click="renote" title="%i18n:@renote%"> <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>
<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%"> <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>
<button @click="menu" ref="menuButton"> <button @click="menu" ref="menuButton">
%fa:ellipsis-h% <fa icon="ellipsis-h"/>
</button> </button>
</footer> </footer>
</article> </article>
@ -278,7 +278,7 @@ export default Vue.extend({
margin 0 8px 0 0 margin 0 8px 0 0
border-radius 6px border-radius 6px
[data-fa] [data-icon]
margin-right 4px margin-right 4px
.name .name

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

@ -15,7 +15,7 @@
</div> </div>
<div class="renote" v-if="isRenote"> <div class="renote" v-if="isRenote">
<mk-avatar class="avatar" :user="note.user"/> <mk-avatar class="avatar" :user="note.user"/>
%fa:retweet% <fa icon="retweet"/>
<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span> <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> <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> <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="content" v-show="appearNote.cw == null || showContent">
<div class="text"> <div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">%i18n:@private%</span> <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"/> <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> <a class="rp" v-if="appearNote.renote">RN:</a>
</div> </div>
@ -41,7 +41,7 @@
<mk-media-list :media-list="appearNote.files"/> <mk-media-list :media-list="appearNote.files"/>
</div> </div>
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/> <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> <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"/> <mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini"/>
</div> </div>
@ -49,18 +49,18 @@
<footer> <footer>
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/> <mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
<button class="replyButton" @click="reply()" title="%i18n:@reply%"> <button class="replyButton" @click="reply()" title="%i18n:@reply%">
<template v-if="appearNote.reply">%fa:reply-all%</template> <template v-if="appearNote.reply"><fa icon="reply-all"/></template>
<template v-else>%fa:reply%</template> <template v-else><fa icon="reply"/></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p> <p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button> </button>
<button class="renoteButton" @click="renote()" title="%i18n:@renote%"> <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>
<button class="reactionButton" :class="{ reacted: appearNote.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%"> <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>
<button @click="menu()" ref="menuButton"> <button @click="menu()" ref="menuButton">
%fa:ellipsis-h% <fa icon="ellipsis-h"/>
</button> </button>
</footer> </footer>
</div> </div>
@ -190,7 +190,7 @@ export default Vue.extend({
margin 0 8px 0 0 margin 0 8px 0 0
border-radius 6px border-radius 6px
[data-fa] [data-icon]
margin-right 4px margin-right 4px
> span > span

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

@ -17,8 +17,8 @@
<template v-for="(note, i) in _notes"> <template v-for="(note, i) in _notes">
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/> <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"> <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 icon="angle-up"/>{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span> <span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
</p> </p>
</template> </template>
</component> </component>
@ -26,7 +26,7 @@
<footer v-if="more"> <footer v-if="more">
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">%i18n:@load-more%</template> <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> </button>
</footer> </footer>
</div> </div>
@ -230,7 +230,7 @@ export default Vue.extend({
span span
margin 0 16px margin 0 16px
[data-fa] [data-icon]
margin-right 8px margin-right 8px
> .newer-indicator > .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> <router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p> </p>
<router-link class="note-ref" :to="notification.note | notePage"> <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> </router-link>
</div> </div>
</template> </template>
@ -29,11 +29,11 @@
<template v-if="notification.type == 'renote'"> <template v-if="notification.type == 'renote'">
<mk-avatar class="avatar" :user="notification.note.user"/> <mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text"> <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> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </p>
<router-link class="note-ref" :to="notification.note | notePage"> <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> </router-link>
</div> </div>
</template> </template>
@ -41,7 +41,7 @@
<template v-if="notification.type == 'quote'"> <template v-if="notification.type == 'quote'">
<mk-avatar class="avatar" :user="notification.note.user"/> <mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text"> <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> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link> <router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
@ -51,7 +51,7 @@
<template v-if="notification.type == 'follow'"> <template v-if="notification.type == 'follow'">
<mk-avatar class="avatar" :user="notification.user"/> <mk-avatar class="avatar" :user="notification.user"/>
<div class="text"> <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> <router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p> </p>
</div> </div>
@ -60,7 +60,7 @@
<template v-if="notification.type == 'receiveFollowRequest'"> <template v-if="notification.type == 'receiveFollowRequest'">
<mk-avatar class="avatar" :user="notification.user"/> <mk-avatar class="avatar" :user="notification.user"/>
<div class="text"> <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> <router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p> </p>
</div> </div>
@ -69,7 +69,7 @@
<template v-if="notification.type == 'reply'"> <template v-if="notification.type == 'reply'">
<mk-avatar class="avatar" :user="notification.note.user"/> <mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text"> <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> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link> <router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
@ -79,7 +79,7 @@
<template v-if="notification.type == 'mention'"> <template v-if="notification.type == 'mention'">
<mk-avatar class="avatar" :user="notification.note.user"/> <mk-avatar class="avatar" :user="notification.note.user"/>
<div class="text"> <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> <router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p> </p>
<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a> <a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
@ -89,23 +89,23 @@
<template v-if="notification.type == 'poll_vote'"> <template v-if="notification.type == 'poll_vote'">
<mk-avatar class="avatar" :user="notification.user"/> <mk-avatar class="avatar" :user="notification.user"/>
<div class="text"> <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"> <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> </router-link>
</div> </div>
</template> </template>
</div> </div>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'"> <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 icon="angle-up"/>{{ notification._datetext }}</span>
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span> <span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
</p> </p>
</template> </template>
</component> </component>
</div> </div>
<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications"> <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> </button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p> <p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
</div> </div>
@ -264,7 +264,7 @@ export default Vue.extend({
.note-ref .note-ref
color var(--noteText) color var(--noteText)
[data-fa] [data-icon]
font-size 1em font-size 1em
font-weight normal font-weight normal
font-style normal font-style normal
@ -300,7 +300,7 @@ export default Vue.extend({
span span
margin 0 16px margin 0 16px
[data-fa] [data-icon]
margin-right 8px margin-right 8px
> .more > .more
@ -319,7 +319,7 @@ export default Vue.extend({
&.fetching &.fetching
cursor wait cursor wait
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
> .empty > .empty

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

@ -1,7 +1,7 @@
<template> <template>
<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation"> <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 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:@note%</span>
<span v-if="reply">%i18n:@reply%</span> <span v-if="reply">%i18n:@reply%</span>
<span class="count" v-if="files.length != 0">{{ '%i18n:@attaches%'.replace('{}', files.length) }}</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()"/> <mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="saveDraft()"/>
</div> </div>
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/> <mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
<button class="upload" title="%i18n:@attach-media-from-local%" @click="chooseFile">%fa:upload%</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:cloud%</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:R smile%</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:chart-pie%</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:eye-slash%</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:map-marker-alt%</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"> <button class="visibility" title="%i18n:@visibility%" @click="setVisibility" ref="visibilityButton">
<span v-if="visibility === 'public'">%fa:globe%</span> <span v-if="visibility === 'public'"><fa icon="globe"/></span>
<span v-if="visibility === 'home'">%fa:home%</span> <span v-if="visibility === 'home'"><fa icon="home"/></span>
<span v-if="visibility === 'followers'">%fa:unlock%</span> <span v-if="visibility === 'followers'"><fa icon="unlock"/></span>
<span v-if="visibility === 'specified'">%fa:envelope%</span> <span v-if="visibility === 'specified'"><fa icon="envelope"/></span>
<span v-if="visibility === 'private'">%fa:lock%</span> <span v-if="visibility === 'private'"><fa icon="lock"/></span>
</button> </button>
<p class="text-count" :class="{ over: this.trimmedLength(text) > this.maxNoteTextLength }">{{ this.maxNoteTextLength - this.trimmedLength(text) }}</p> <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"> <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> <template>
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom"> <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 class="slpqaxdoxhvglersgjukmvizkqbmbokc">
<div v-for="req in requests"> <div v-for="req in requests">

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom"> <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-settings :initial-page="initialPage" @done="close"/>
</mk-window> </mk-window>
</template> </template>
@ -24,7 +24,7 @@ export default Vue.extend({
<style lang="stylus" module> <style lang="stylus" module>
.header .header
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
</style> </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> <ui-button primary @click="submit">%i18n:@submit%</ui-button>
</li> </li>
</ol> </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>
</div> </div>
</template> </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 class="signins" v-if="signins.length != 0">
<div v-for="signin in signins"> <div v-for="signin in signins">
<header @click="signin._show = !signin._show"> <header @click="signin._show = !signin._show">
<template v-if="signin.success">%fa:check%</template> <template v-if="signin.success"><fa icon="check"/></template>
<template v-else>%fa:times%</template> <template v-else><fa icon="times"/></template>
<span class="ip">{{ signin.ip }}</span> <span class="ip">{{ signin.ip }}</span>
<mk-time :time="signin.createdAt"/> <mk-time :time="signin.createdAt"/>
</header> </header>
<div class="headers" v-show="signin._show"> <div class="headers" v-show="signin._show">
<tree-view :data="signin.headers"/> <!-- TODO -->
</div> </div>
</div> </div>
</div> </div>
@ -62,7 +62,7 @@ export default Vue.extend({
line-height 32px line-height 32px
cursor pointer cursor pointer
> [data-fa] > [data-icon]
margin-right 8px margin-right 8px
text-align left text-align left

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

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

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

@ -3,7 +3,7 @@
<div class="body"> <div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span> <span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span>
<span v-if="note.deletedAt" style="opacity: 0.5">%i18n:@deleted%</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"/> <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> <a class="rp" v-if="note.renoteId" :href="`/notes/${note.renoteId}`">RN: ...</a>
</div> </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"> <mk-notes ref="timeline" :more="existMore ? more : null">
<p :class="$style.empty" slot="empty"> <p :class="$style.empty" slot="empty">
%fa:R comments%%i18n:@empty% <fa :icon="['far', 'comments']"/>%i18n:@empty%
</p> </p>
</mk-notes> </mk-notes>
</div> </div>
@ -182,7 +182,7 @@ export default Vue.extend({
text-align center text-align center
color #999 color #999
> [data-fa] > [data-icon]
display block display block
margin-bottom 16px margin-bottom 16px
font-size 3em font-size 3em

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

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

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

@ -1,47 +1,86 @@
<template> <template>
<div class="account" v-hotkey.global="keymap"> <div class="account" v-hotkey.global="keymap">
<button class="header" :data-active="isOpen" @click="toggle"> <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"/> <mk-avatar class="avatar" :user="$store.state.i"/>
</button> </button>
<transition name="zoom-in-top"> <transition name="zoom-in-top">
<div class="menu" v-if="isOpen"> <div class="menu" v-if="isOpen">
<ul> <ul>
<li> <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>
<li @click="drive"> <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>
<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>
<li @click="list"> <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>
<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)"> <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> </li>
</ul> </ul>
<ul> <ul>
<li> <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>
<li @click="settings"> <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>
<li v-if="$store.state.i.isAdmin"> <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> </li>
</ul> </ul>
<ul> <ul>
<li @click="dark"> <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> </li>
</ul> </ul>
<ul> <ul>
<li @click="signout"> <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> </li>
</ul> </ul>
</div> </div>
@ -160,7 +199,7 @@ export default Vue.extend({
@media (max-width 1100px) @media (max-width 1100px)
display none display none
[data-fa] [data-icon]
margin-left 8px margin-left 8px
> .avatar > .avatar
@ -254,11 +293,11 @@ export default Vue.extend({
color var(--primaryForeground) color var(--primaryForeground)
border-radius 8px border-radius 8px
> [data-fa]:first-child > i:first-child
margin-right 6px margin-right 6px
width 16px width 16px
> [data-fa]:last-child > i:last-child
display block display block
position absolute position absolute
top 0 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.getters.isSignedIn">
<template v-if="$store.state.device.deckDefault"> <template v-if="$store.state.device.deckDefault">
<li class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop"> <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>
<li class="home" :class="{ active: $route.name == 'home' }" @click="goToTop"> <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> </li>
</template> </template>
<template v-else> <template v-else>
<li class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop"> <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>
<li class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop"> <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> </li>
</template> </template>
<li class="messaging"> <li class="messaging">
<a @click="messaging"> <a @click="messaging">
%fa:comments% <fa icon="comments"/>
<p>%i18n:@messaging%</p> <p>%i18n:@messaging%</p>
<template v-if="hasUnreadMessagingMessage">%fa:circle%</template> <template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
</a> </a>
</li> </li>
<li class="game"> <li class="game">
<a @click="game"> <a @click="game">
%fa:gamepad% <fa icon="gamepad"/>
<p>%i18n:@game%</p> <p>%i18n:@game%</p>
<template v-if="hasGameInvitations">%fa:circle%</template> <template v-if="hasGameInvitations"><fa icon="circle"/></template>
</a> </a>
</li> </li>
</template> </template>
@ -139,10 +139,10 @@ export default Vue.extend({
color var(--desktopHeaderHoverFg) color var(--desktopHeaderHoverFg)
text-decoration none text-decoration none
> [data-fa]:first-child > [data-icon]:first-child
margin-right 8px margin-right 8px
> [data-fa]:last-child > [data-icon]:last-child
margin-left 5px margin-left 5px
font-size 10px font-size 10px
color var(--primary) color var(--primary)

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<div class="note"> <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> </div>
</template> </template>

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

@ -1,6 +1,6 @@
<template> <template>
<form class="search" @submit.prevent="onSubmit"> <form class="search" @submit.prevent="onSubmit">
%fa:search% <i><fa icon="search"/></i>
<input v-model="q" type="search" placeholder="%i18n:@placeholder%"/> <input v-model="q" type="search" placeholder="%i18n:@placeholder%"/>
<div class="result"></div> <div class="result"></div>
</form> </form>
@ -32,7 +32,7 @@ export default Vue.extend({
@media (max-width 800px) @media (max-width 800px)
display none !important display none !important
> [data-fa] > i
display block display block
position absolute position absolute
top 0 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="header" :class="navbar">
<div class="body"> <div class="body">
<div class="post"> <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>
<div class="nav" v-if="$store.getters.isSignedIn"> <div class="nav" v-if="$store.getters.isSignedIn">
<template v-if="$store.state.device.deckDefault"> <template v-if="$store.state.device.deckDefault">
<div class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop"> <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>
<div class="home" :class="{ active: $route.name == 'home' }" @click="goToTop"> <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> </div>
</template> </template>
<template v-else> <template v-else>
<div class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop"> <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>
<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop"> <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> </div>
</template> </template>
<div class="messaging"> <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>
<div class="game"> <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> </div>
<div class="nav bottom" v-if="$store.getters.isSignedIn"> <div class="nav bottom" v-if="$store.getters.isSignedIn">
<div> <div>
<a @click="drive">%fa:cloud%</a> <a @click="drive"><fa icon="cloud"/></a>
</div> </div>
<div ref="notificationsButton" :class="{ active: showNotifications }"> <div ref="notificationsButton" :class="{ active: showNotifications }">
<a @click="notifications">%fa:R bell%</a> <a @click="notifications"><fa :icon="['far', 'bell']"/></a>
</div> </div>
<div> <div>
<a @click="settings">%fa:cog%</a> <a @click="settings"><fa icon="cog"/></a>
</div> </div>
</div> </div>
@ -49,20 +49,20 @@
<div class="nav menu"> <div class="nav menu">
<div class="signout"> <div class="signout">
<a @click="signout">%fa:power-off%</a> <a @click="signout"><fa icon="power-off"/></a>
</div> </div>
<div> <div>
<router-link to="/i/favorites">%fa:star%</router-link> <router-link to="/i/favorites"><fa icon="star"/></router-link>
</div> </div>
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)"> <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>
</div> </div>
<div class="nav dark"> <div class="nav dark">
<div> <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> </div>
</div> </div>

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

@ -1,6 +1,6 @@
<template> <template>
<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom"> <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"> <div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
<button class="ui" @click="add">%i18n:@create-list%</button> <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"> <p class="no" v-if="!fetching && users.length == 0">
<slot></slot> <slot></slot>
</p> </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> </div>
</template> </template>
@ -139,7 +139,7 @@ export default Vue.extend({
text-align center text-align center
color #aaa color #aaa
> [data-fa] > [data-icon]
margin-right 4px margin-right 4px
</style> </style>

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

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

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

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

Some files were not shown because too many files have changed in this diff Show More