profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #969 from syuilo/fa5

Browse source 
Fa5 SSR
This commit is contained in:
syuilo 2017-12-08 13:43:46 +09:00 • committed by GitHub
commit c952c03e00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
116 changed files with 636 additions and 560 deletions
Download patch file Download diff file Expand all files Collapse all files

13
gulpfile.ts
View file

@ -20,6 +20,16 @@ import * as mocha from 'gulp-mocha';
import * as replace from 'gulp-replace'; import * as replace from 'gulp-replace';
import * as htmlmin from 'gulp-htmlmin'; import * as htmlmin from 'gulp-htmlmin';
const uglifyes = require('uglify-es'); const uglifyes = require('uglify-es');
import * as fontawesome from '@fortawesome/fontawesome';
import * as regular from '@fortawesome/fontawesome-free-regular';
import * as solid from '@fortawesome/fontawesome-free-solid';
import * as brands from '@fortawesome/fontawesome-free-brands';
// Add icons
fontawesome.library.add(regular);
fontawesome.library.add(solid);
fontawesome.library.add(brands);
import version from './src/version'; import version from './src/version';
const uglify = uglifyComposer(uglifyes, console); const uglify = uglifyComposer(uglifyes, console);
@ -169,7 +179,8 @@ gulp.task('build:client:pug', [
gulp.src('./src/web/app/base.pug') gulp.src('./src/web/app/base.pug')
.pipe(pug({ .pipe(pug({
locals: { locals: {
themeColor: constants.themeColor themeColor: constants.themeColor,
facss: fontawesome.dom.css()
} }
})) }))
.pipe(htmlmin({ .pipe(htmlmin({

4
package.json
View file

@ -22,6 +22,10 @@
"format": "gulp format" "format": "gulp format"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome": "^1.0.0",
"@fortawesome/fontawesome-free-brands": "^5.0.0",
"@fortawesome/fontawesome-free-regular": "^5.0.0",
"@fortawesome/fontawesome-free-solid": "^5.0.0",
"@prezzemolo/rap": "0.1.2", "@prezzemolo/rap": "0.1.2",
"@prezzemolo/zip": "0.0.3", "@prezzemolo/zip": "0.0.3",
"@types/bcryptjs": "2.4.1", "@types/bcryptjs": "2.4.1",

3
src/web/app/base.pug
View file

@ -21,7 +21,8 @@ html
script script
include ./../../../built/web/assets/safe.js include ./../../../built/web/assets/safe.js
script(src='https://use.fontawesome.com/db921426cb.js' async) // FontAwesome style
style #{facss}
body body
noscript: p noscript: p

8
src/web/app/ch/tags/channel.tag
View file

@ -244,10 +244,10 @@
<p if={ reply }><b>&gt;&gt;{ reply.index }</b> ({ reply.user.name }): <a onclick={ clearReply }>[x]</a></p> <p if={ reply }><b>&gt;&gt;{ reply.index }</b> ({ reply.user.name }): <a onclick={ clearReply }>[x]</a></p>
<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder="%i18n:ch.tags.mk-channel-form.textarea%"></textarea> <textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder="%i18n:ch.tags.mk-channel-form.textarea%"></textarea>
<div class="actions"> <div class="actions">
<button onclick={ selectFile }><i class="fa fa-upload"></i>%i18n:ch.tags.mk-channel-form.upload%</button> <button onclick={ selectFile }>%fa:upload%%i18n:ch.tags.mk-channel-form.upload%</button>
<button onclick={ drive }><i class="fa fa-cloud"></i>%i18n:ch.tags.mk-channel-form.drive%</button> <button onclick={ drive }>%fa:cloud%%i18n:ch.tags.mk-channel-form.drive%</button>
<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }> <button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
<i class="fa fa-paper-plane" if={ !wait }></i>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis if={ wait }/> <virtual if={ !wait }>%fa:paper-plane%</virtual>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis if={ wait }/>
</button> </button>
</div> </div>
<mk-uploader ref="uploader"/> <mk-uploader ref="uploader"/>
@ -269,7 +269,7 @@
display flex display flex
> button > button
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
&:last-child &:last-child

26
src/web/app/common/tags/error.tag
View file

@ -96,17 +96,17 @@
</mk-error> </mk-error>
<mk-troubleshooter> <mk-troubleshooter>
<h1><i class="fa fa-wrench"></i>%i18n:common.tags.mk-error.troubleshooter.title%</h1> <h1>%fa:wrench%%i18n:common.tags.mk-error.troubleshooter.title%</h1>
<div> <div>
<p data-wip={ network == null }><i if={ network != null } class="fa fa-{ network ? 'check' : 'times' }"></i>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis if={ network == null }/></p> <p data-wip={ network == null }><virtual if={ network != null }><virtual if={ network }>%fa:check%</virtual><virtual if={ !network }>%fa:times%</virtual></virtual>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis if={ network == null }/></p>
<p if={ network == true } data-wip={ internet == null }><i if={ internet != null } class="fa fa-{ internet ? 'check' : 'times' }"></i>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis if={ internet == null }/></p> <p if={ network == true } data-wip={ internet == null }><virtual if={ internet != null }><virtual if={ internet }>%fa:check%</virtual><virtual if={ !internet }>%fa:times%</virtual></virtual>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis if={ internet == null }/></p>
<p if={ internet == true } data-wip={ server == null }><i if={ server != null } class="fa fa-{ server ? 'check' : 'times' }"></i>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis if={ server == null }/></p> <p if={ internet == true } data-wip={ server == null }><virtual if={ server != null }><virtual if={ server }>%fa:check%</virtual><virtual if={ !server }>%fa:times%</virtual></virtual>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis if={ server == null }/></p>
</div> </div>
<p if={ !end }>%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p> <p if={ !end }>%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p>
<p if={ network === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p> <p if={ network === false }><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>
<p if={ internet === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p> <p if={ internet === false }><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p>
<p if={ server === false }><b><i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p> <p if={ server === false }><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p>
<p if={ server === true } class="success"><b><i class="fa fa-info-circle"></i>%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p> <p if={ server === true } class="success"><b>%fa:info-circle%%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p>
<style> <style>
:scope :scope
@ -125,7 +125,7 @@
color #444 color #444
border-bottom solid 1px #eee border-bottom solid 1px #eee
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
> div > div
@ -140,13 +140,13 @@
&[data-wip] &[data-wip]
color #888 color #888
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
&.fa-times &.times
color #e03524 color #e03524
&.fa-check &.check
color #84c32f color #84c32f
> p > p
@ -157,7 +157,7 @@
border-top solid 1px #eee border-top solid 1px #eee
> b > b
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
&.success &.success

2
src/web/app/common/tags/file-type-icon.tag
View file

@ -1,5 +1,5 @@
<mk-file-type-icon> <mk-file-type-icon>
<i class="fa fa-file-image-o" if={ kind == 'image' }></i> <virtual if={ kind == 'image' }>%fa:file-image%</virtual>
<style> <style>
:scope :scope
display inline display inline

6
src/web/app/common/tags/messaging/form.tag
View file

@ -3,13 +3,13 @@
<div class="files"></div> <div class="files"></div>
<mk-uploader ref="uploader"/> <mk-uploader ref="uploader"/>
<button class="send" onclick={ send } disabled={ sending } title="%i18n:common.send%"> <button class="send" onclick={ send } disabled={ sending } title="%i18n:common.send%">
<i class="fa fa-paper-plane" if={ !sending }></i><i class="fa fa-spinner fa-spin" if={ sending }></i> <virtual if={ !sending }>%fa:paper-plane%</virtual><virtual if={ sending }>%fa:spinner .spin%</virtual>
</button> </button>
<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%"> <button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
<i class="fa fa-upload"></i> %fa:upload%
</button> </button>
<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%"> <button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
<i class="fa fa-folder-open"></i> %fa:R folder-open%
</button> </button>
<input name="file" type="file" accept="image/*"/> <input name="file" type="file" accept="image/*"/>
<style> <style>

9
src/web/app/common/tags/messaging/index.tag
View file

@ -1,7 +1,7 @@
<mk-messaging data-compact={ opts.compact }> <mk-messaging data-compact={ opts.compact }>
<div class="search" if={ !opts.compact }> <div class="search" if={ !opts.compact }>
<div class="form"> <div class="form">
<label for="search-input"><i class="fa fa-search"></i></label> <label for="search-input">%fa:search%</label>
<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/> <input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
</div> </div>
<div class="result"> <div class="result">
@ -32,7 +32,7 @@
</virtual> </virtual>
</div> </div>
<p class="no-history" if={ !fetching && history.length == 0 }>%i18n:common.tags.mk-messaging.no-history%</p> <p class="no-history" if={ !fetching && history.length == 0 }>%i18n:common.tags.mk-messaging.no-history%</p>
<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -87,7 +87,7 @@
width 38px width 38px
pointer-events none pointer-events none
> i > [data-fa]
display block display block
position absolute position absolute
top 0 top 0
@ -189,7 +189,6 @@
font-weight normal font-weight normal
color rgba(0, 0, 0, 0.3) color rgba(0, 0, 0, 0.3)
> .history > .history
> a > a
@ -304,7 +303,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
// TODO: element base media query // TODO: element base media query

4
src/web/app/common/tags/messaging/message.tag
View file

@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<footer> <footer>
<mk-time time={ message.created_at }/><i class="fa fa-pencil is-edited" if={ message.is_edited }></i> <mk-time time={ message.created_at }/><virtual if={ message.is_edited }>%fa:pencil-alt%</virtual>
</footer> </footer>
</div> </div>
<style> <style>
@ -147,7 +147,7 @@
font-size 10px font-size 10px
color rgba(0, 0, 0, 0.4) color rgba(0, 0, 0, 0.4)
> .is-edited > [data-fa]
margin-left 4px margin-left 4px
&:not([data-is-me='true']) &:not([data-is-me='true'])

20
src/web/app/common/tags/messaging/room.tag
View file

@ -1,10 +1,10 @@
<mk-messaging-room> <mk-messaging-room>
<div class="stream"> <div class="stream">
<p class="init" if={ init }><i class="fa fa-spinner fa-spin"></i>%i18n:common.loading%</p> <p class="init" if={ init }>%fa:spinner .spin%%i18n:common.loading%</p>
<p class="empty" if={ !init && messages.length == 0 }><i class="fa fa-info-circle"></i>%i18n:common.tags.mk-messaging-room.empty%</p> <p class="empty" if={ !init && messages.length == 0 }>%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
<p class="no-history" if={ !init && messages.length > 0 && !moreMessagesIsInStock }><i class="fa fa-flag"></i>%i18n:common.tags.mk-messaging-room.no-history%</p> <p class="no-history" if={ !init && messages.length > 0 && !moreMessagesIsInStock }>%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
<button class="more { fetching: fetchingMoreMessages }" if={ moreMessagesIsInStock } onclick={ fetchMoreMessages } disabled={ fetchingMoreMessages }> <button class="more { fetching: fetchingMoreMessages }" if={ moreMessagesIsInStock } onclick={ fetchMoreMessages } disabled={ fetchingMoreMessages }>
<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreMessages }></i>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' } <virtual if={ fetchingMoreMessages }>%fa:spinner .pluse .fw%</virtual>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
</button> </button>
<virtual each={ message, i in messages }> <virtual each={ message, i in messages }>
<mk-messaging-message message={ message }/> <mk-messaging-message message={ message }/>
@ -32,7 +32,7 @@
font-size 0.8em font-size 0.8em
color rgba(0, 0, 0, 0.4) color rgba(0, 0, 0, 0.4)
i [data-fa]
margin-right 4px margin-right 4px
> .empty > .empty
@ -43,7 +43,7 @@
font-size 0.8em font-size 0.8em
color rgba(0, 0, 0, 0.4) color rgba(0, 0, 0, 0.4)
i [data-fa]
margin-right 4px margin-right 4px
> .no-history > .no-history
@ -54,7 +54,7 @@
font-size 0.8em font-size 0.8em
color rgba(0, 0, 0, 0.4) color rgba(0, 0, 0, 0.4)
i [data-fa]
margin-right 4px margin-right 4px
> .more > .more
@ -75,7 +75,7 @@
&.fetching &.fetching
cursor wait cursor wait
> i > [data-fa]
margin-right 4px margin-right 4px
> .message > .message
@ -141,7 +141,7 @@
border-radius 16px border-radius 16px
transition opacity 1s ease transition opacity 1s ease
> i > [data-fa]
position absolute position absolute
top 0 top 0
left 10px left 10px
@ -291,7 +291,7 @@
this.notify = message => { this.notify = message => {
const n = document.createElement('p'); const n = document.createElement('p');
n.innerHTML = '<i class="fa fa-arrow-circle-down"></i>' + message; n.innerHTML = '%fa:arrow-circle-down%' + message;
n.onclick = () => { n.onclick = () => {
this.scrollToBottom(); this.scrollToBottom();
n.parentNode.removeChild(n); n.parentNode.removeChild(n);

2
src/web/app/common/tags/nav-links.tag
View file

@ -1,5 +1,5 @@
<mk-nav-links> <mk-nav-links>
<a href={ _ABOUT_URL_ }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a> <a href={ _ABOUT_URL_ }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
<style> <style>
:scope :scope
display inline display inline

8
src/web/app/common/tags/poll-editor.tag
View file

@ -1,18 +1,18 @@
<mk-poll-editor> <mk-poll-editor>
<p class="caution" if={ choices.length < 2 }> <p class="caution" if={ choices.length < 2 }>
<i class="fa fa-exclamation-triangle"></i>%i18n:common.tags.mk-poll-editor.no-only-one-choice% %fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
</p> </p>
<ul ref="choices"> <ul ref="choices">
<li each={ choice, i in choices }> <li each={ choice, i in choices }>
<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }> <input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
<button onclick={ remove.bind(null, i) } title="%i18n:common.tags.mk-poll-editor.remove%"> <button onclick={ remove.bind(null, i) } title="%i18n:common.tags.mk-poll-editor.remove%">
<i class="fa fa-times"></i> %fa:times%
</button> </button>
</li> </li>
</ul> </ul>
<button class="add" if={ choices.length < 10 } onclick={ add }>%i18n:common.tags.mk-poll-editor.add%</button> <button class="add" if={ choices.length < 10 } onclick={ add }>%i18n:common.tags.mk-poll-editor.add%</button>
<button class="destroy" onclick={ destroy } title="%i18n:common.tags.mk-poll-editor.destroy%"> <button class="destroy" onclick={ destroy } title="%i18n:common.tags.mk-poll-editor.destroy%">
<i class="fa fa-times"></i> %fa:times%
</button> </button>
<style> <style>
:scope :scope
@ -24,7 +24,7 @@
font-size 0.8em font-size 0.8em
color #f00 color #f00
> i > [data-fa]
margin-right 4px margin-right 4px
> ul > ul

2
src/web/app/common/tags/poll.tag
View file

@ -3,7 +3,7 @@
<li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted } title={ !parent.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', text) : '' }> <li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted } title={ !parent.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', text) : '' }>
<div class="backdrop" style={ 'width:' + (parent.result ? (votes / parent.total * 100) : 0) + '%' }></div> <div class="backdrop" style={ 'width:' + (parent.result ? (votes / parent.total * 100) : 0) + '%' }></div>
<span> <span>
<i class="fa fa-check" if={ is_voted }></i> <virtual if={ is_voted }>%fa:check%</virtual>
{ text } { text }
<span class="votes" if={ parent.result }>({ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', votes) })</span> <span class="votes" if={ parent.result }>({ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', votes) })</span>
</span> </span>

12
src/web/app/common/tags/signin-history.tag
View file

@ -2,7 +2,11 @@
<div class="records" if={ history.length != 0 }> <div class="records" if={ history.length != 0 }>
<div each={ history }> <div each={ history }>
<mk-time time={ created_at }/> <mk-time time={ created_at }/>
<header><i class="fa fa-check" if={ success }></i><i class="fa fa-times" if={ !success }></i><span class="ip">{ ip }</span></header> <header>
<virtual if={ success }>%fa:check%</virtual>
<virtual if={ !success }>%fa:times%</virtual>
<span class="ip">{ ip }</span>
</header>
<pre><code>{ JSON.stringify(headers, null, ' ') }</code></pre> <pre><code>{ JSON.stringify(headers, null, ' ') }</code></pre>
</div> </div>
</div> </div>
@ -17,13 +21,13 @@
> header > header
> i > [data-fa]
margin-right 8px margin-right 8px
&.fa-check &.check
color #0fda82 color #0fda82
&.fa-times &.times
color #ff3100 color #ff3100
> .ip > .ip

6
src/web/app/common/tags/signin.tag
View file

@ -1,10 +1,10 @@
<mk-signin> <mk-signin>
<form class={ signing: signing } onsubmit={ onsubmit }> <form class={ signing: signing } onsubmit={ onsubmit }>
<label class="user-name"> <label class="user-name">
<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/><i class="fa fa-at"></i> <input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/>%fa:at%
</label> </label>
<label class="password"> <label class="password">
<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/><i class="fa fa-lock"></i> <input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/>%fa:lock%
</label> </label>
<button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button> <button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button>
</form> </form>
@ -24,7 +24,7 @@
display block display block
margin 12px 0 margin 12px 0
i [data-fa]
display block display block
pointer-events none pointer-events none
position absolute position absolute

38
src/web/app/common/tags/signup.tag
View file

@ -1,35 +1,35 @@
<mk-signup> <mk-signup>
<form onsubmit={ onsubmit } autocomplete="off"> <form onsubmit={ onsubmit } autocomplete="off">
<label class="username"> <label class="username">
<p class="caption"><i class="fa fa-at"></i>%i18n:common.tags.mk-signup.username%</p> <p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
<input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup={ onChangeUsername }/> <input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup={ onChangeUsername }/>
<p class="profile-page-url-preview" if={ refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange' }>{ _URL_ + '/' + refs.username.value }</p> <p class="profile-page-url-preview" if={ refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange' }>{ _URL_ + '/' + refs.username.value }</p>
<p class="info" if={ usernameState == 'wait' } style="color:#999"><i class="fa fa-fw fa-spinner fa-pulse"></i>%i18n:common.tags.mk-signup.checking%</p> <p class="info" if={ usernameState == 'wait' } style="color:#999">%fa:spinner .pluse .fw%%i18n:common.tags.mk-signup.checking%</p>
<p class="info" if={ usernameState == 'ok' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.available%</p> <p class="info" if={ usernameState == 'ok' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.available%</p>
<p class="info" if={ usernameState == 'unavailable' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.unavailable%</p> <p class="info" if={ usernameState == 'unavailable' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.unavailable%</p>
<p class="info" if={ usernameState == 'error' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.error%</p> <p class="info" if={ usernameState == 'error' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.error%</p>
<p class="info" if={ usernameState == 'invalid-format' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.invalid-format%</p> <p class="info" if={ usernameState == 'invalid-format' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.invalid-format%</p>
<p class="info" if={ usernameState == 'min-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.too-short%</p> <p class="info" if={ usernameState == 'min-range' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-short%</p>
<p class="info" if={ usernameState == 'max-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.too-long%</p> <p class="info" if={ usernameState == 'max-range' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-long%</p>
</label> </label>
<label class="password"> <label class="password">
<p class="caption"><i class="fa fa-lock"></i>%i18n:common.tags.mk-signup.password%</p> <p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%</p>
<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePassword }/> <input ref="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePassword }/>
<div class="meter" if={ passwordStrength != '' } data-strength={ passwordStrength }> <div class="meter" if={ passwordStrength != '' } data-strength={ passwordStrength }>
<div class="value" ref="passwordMetar"></div> <div class="value" ref="passwordMetar"></div>
</div> </div>
<p class="info" if={ passwordStrength == 'low' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.weak-password%</p> <p class="info" if={ passwordStrength == 'low' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.weak-password%</p>
<p class="info" if={ passwordStrength == 'medium' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.normal-password%</p> <p class="info" if={ passwordStrength == 'medium' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.normal-password%</p>
<p class="info" if={ passwordStrength == 'high' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.strong-password%</p> <p class="info" if={ passwordStrength == 'high' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.strong-password%</p>
</label> </label>
<label class="retype-password"> <label class="retype-password">
<p class="caption"><i class="fa fa-lock"></i>%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p> <p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
<input ref="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePasswordRetype }/> <input ref="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePasswordRetype }/>
<p class="info" if={ passwordRetypeState == 'match' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>%i18n:common.tags.mk-signup.password-matched%</p> <p class="info" if={ passwordRetypeState == 'match' } style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
<p class="info" if={ passwordRetypeState == 'not-match' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>%i18n:common.tags.mk-signup.password-not-matched%</p> <p class="info" if={ passwordRetypeState == 'not-match' } style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
</label> </label>
<label class="recaptcha"> <label class="recaptcha">
<p class="caption"><i class="fa fa-toggle-on" if={ recaptchaed }></i><i class="fa fa-toggle-off" if={ !recaptchaed }></i>%i18n:common.tags.mk-signup.recaptcha%</p> <p class="caption"><virtual if={ recaptchaed }>%fa:toggle-on%</virtual><virtual if={ !recaptchaed }>%fa:toggle-off%</virtual>%i18n:common.tags.mk-signup.recaptcha%</p>
<div if={ recaptcha } class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div> <div if={ recaptcha } class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div>
</label> </label>
<label class="agree-tou"> <label class="agree-tou">
@ -55,7 +55,7 @@
color #828888 color #828888
font-size 0.95em font-size 0.95em
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
color #96adac color #96adac
@ -64,7 +64,7 @@
margin 4px 0 margin 4px 0
font-size 0.8em font-size 0.8em
> i > [data-fa]
margin-right 0.3em margin-right 0.3em
&.username &.username
@ -182,7 +182,7 @@
this.passwordRetypeState = null; this.passwordRetypeState = null;
this.recaptchaed = false; this.recaptchaed = false;
window.onEecaptchaed = () => { window.onRecaptchaed = () => {
this.recaptchaed = true; this.recaptchaed = true;
this.update(); this.update();
}; };

8
src/web/app/common/tags/stream-indicator.tag
View file

@ -1,14 +1,14 @@
<mk-stream-indicator> <mk-stream-indicator>
<p if={ connection.state == 'initializing' }> <p if={ connection.state == 'initializing' }>
<i class="fa fa-spinner fa-spin"></i> %fa:spinner .spin .pulse%
<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span> <span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
</p> </p>
<p if={ connection.state == 'reconnecting' }> <p if={ connection.state == 'reconnecting' }>
<i class="fa fa-spinner fa-spin"></i> %fa:spinner .spin .pulse%
<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span> <span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
</p> </p>
<p if={ connection.state == 'connected' }> <p if={ connection.state == 'connected' }>
<i class="fa fa-check"></i> %fa:check%
<span>%i18n:common.tags.mk-stream-indicator.connected%</span> <span>%i18n:common.tags.mk-stream-indicator.connected%</span>
</p> </p>
<style> <style>
@ -30,7 +30,7 @@
display block display block
margin 0 margin 0
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
</style> </style>

4
src/web/app/common/tags/uploader.tag
View file

@ -2,7 +2,7 @@
<ol if={ uploads.length > 0 }> <ol if={ uploads.length > 0 }>
<li each={ uploads }> <li each={ uploads }>
<div class="img" style="background-image: url({ img })"></div> <div class="img" style="background-image: url({ img })"></div>
<p class="name"><i class="fa fa-spinner fa-pulse"></i>{ name }</p> <p class="name">%fa:spinner .pluse%{ name }</p>
<p class="status"><span class="initing" if={ progress == undefined }>%i18n:common.tags.mk-uploader.waiting%<mk-ellipsis/></span><span class="kb" if={ progress != undefined }>{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" if={ progress != undefined }>{ Math.floor((progress.value / progress.max) * 100) }</span></p> <p class="status"><span class="initing" if={ progress == undefined }>%i18n:common.tags.mk-uploader.waiting%<mk-ellipsis/></span><span class="kb" if={ progress != undefined }>{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" if={ progress != undefined }>{ Math.floor((progress.value / progress.max) * 100) }</span></p>
<progress if={ progress != undefined && progress.value != progress.max } value={ progress.value } max={ progress.max }></progress> <progress if={ progress != undefined && progress.value != progress.max } value={ progress.value } max={ progress.max }></progress>
<div class="progress initing" if={ progress == undefined }></div> <div class="progress initing" if={ progress == undefined }></div>
@ -60,7 +60,7 @@
text-overflow ellipsis text-overflow ellipsis
overflow hidden overflow hidden
> i > [data-fa]
margin-right 4px margin-right 4px
> .status > .status

16
src/web/app/common/tags/url.tag
View file

@ -1,14 +1,20 @@
<mk-url><a href={ url } target={ opts.target }><span class="schema">{ schema }//</span><span class="hostname">{ hostname }</span><span class="port" if={ port != '' }>:{ port }</span><span class="pathname" if={ pathname != '' }>{ pathname }</span><span class="query">{ query }</span><span class="hash">{ hash }</span></a> <mk-url>
<a href={ url } target={ opts.target }>
<span class="schema">{ schema }//</span>
<span class="hostname">{ hostname }</span>
<span class="port" if={ port != '' }>:{ port }</span>
<span class="pathname" if={ pathname != '' }>{ pathname }</span>
<span class="query">{ query }</span>
<span class="hash">{ hash }</span>
%fa:external-link-square-alt%
</a>
<style> <style>
:scope :scope
word-break break-all word-break break-all
> a > a
&:after > [data-fa]
content "\f14c"
display inline-block
padding-left 2px padding-left 2px
font-family FontAwesome
font-size .9em font-size .9em
font-weight 400 font-weight 400
font-style normal font-style normal

2
src/web/app/desktop/scripts/fuck-ad-block.ts
View file

@ -12,7 +12,7 @@ export default () => {
}; };
function adBlockDetected() { function adBlockDetected() {
dialog('<i class="fa fa-exclamation-triangle"></i>広告ブロッカーを無効にしてください', dialog('%fa:exclamation-triangle%広告ブロッカーを無効にしてください',
'<strong>Misskeyは広告を掲載していません</strong>が、広告をブロックする機能が有効だと一部の機能が利用できなかったり、不具合が発生する場合があります。', '<strong>Misskeyは広告を掲載していません</strong>が、広告をブロックする機能が有効だと一部の機能が利用できなかったり、不具合が発生する場合があります。',
[{ [{
text: 'OK' text: 'OK'

2
src/web/app/desktop/scripts/not-implemented-exception.ts
View file

@ -1,7 +1,7 @@
import dialog from './dialog'; import dialog from './dialog';
export default () => { export default () => {
dialog('<i class="fa fa-exclamation-triangle"></i>Not implemented yet', dialog('%fa:exclamation-triangle%Not implemented yet',
'要求された操作は実装されていません。<br>→<a href="https://github.com/syuilo/misskey" target="_blank">Misskeyの開発に参加する</a>', [{ '要求された操作は実装されていません。<br>→<a href="https://github.com/syuilo/misskey" target="_blank">Misskeyの開発に参加する</a>', [{
text: 'OK' text: 'OK'
}]); }]);

4
src/web/app/desktop/scripts/update-avatar.ts
View file

@ -63,7 +63,7 @@ export default (I, cb, file = null) => {
api(I, 'i/update', { api(I, 'i/update', {
avatar_id: file.id avatar_id: file.id
}).then(i => { }).then(i => {
dialog('<i class="fa fa-info-circle"></i>アバターを更新しました', dialog('%fa:info-circle%アバターを更新しました',
'新しいアバターが反映されるまで時間がかかる場合があります。', '新しいアバターが反映されるまで時間がかかる場合があります。',
[{ [{
text: 'わかった' text: 'わかった'
@ -78,7 +78,7 @@ export default (I, cb, file = null) => {
} else { } else {
const browser = (riot as any).mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), { const browser = (riot as any).mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), {
multiple: false, multiple: false,
title: '<i class="fa fa-picture-o"></i>アバターにする画像を選択' title: '%fa:image%アバターにする画像を選択'
})[0]; })[0];
browser.one('selected', file => { browser.one('selected', file => {

4
src/web/app/desktop/scripts/update-banner.ts
View file

@ -63,7 +63,7 @@ export default (I, cb, file = null) => {
api(I, 'i/update', { api(I, 'i/update', {
banner_id: file.id banner_id: file.id
}).then(i => { }).then(i => {
dialog('<i class="fa fa-info-circle"></i>バナーを更新しました', dialog('%fa:info-circle%バナーを更新しました',
'新しいバナーが反映されるまで時間がかかる場合があります。', '新しいバナーが反映されるまで時間がかかる場合があります。',
[{ [{
text: 'わかりました。' text: 'わかりました。'
@ -78,7 +78,7 @@ export default (I, cb, file = null) => {
} else { } else {
const browser = (riot as any).mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), { const browser = (riot as any).mount(document.body.appendChild(document.createElement('mk-select-file-from-drive-window')), {
multiple: false, multiple: false,
title: '<i class="fa fa-picture-o"></i>バナーにする画像を選択' title: '%fa:image%バナーにする画像を選択'
})[0]; })[0];
browser.one('selected', file => { browser.one('selected', file => {

8
src/web/app/desktop/tags/big-follow-button.tag
View file

@ -1,6 +1,10 @@
<mk-big-follow-button> <mk-big-follow-button>
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }><span if={ !wait && user.is_following }><i class="fa fa-minus"></i>フォロー解除</span><span if={ !wait && !user.is_following }><i class="fa fa-plus"></i>フォロー</span><i class="fa fa-spinner fa-pulse fa-fw" if={ wait }></i></button> <button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
<div class="init" if={ init }><i class="fa fa-spinner fa-pulse fa-fw"></i></div> <span if={ !wait && user.is_following }>%fa:minus%フォロー解除</span>
<span if={ !wait && !user.is_following }>%fa:plus%フォロー</span>
<virtual if={ wait }>%fa:spinner .pluse .fw%</virtual>
</button>
<div class="init" if={ init }>%fa:spinner .pluse .fw%</div>
<style> <style>
:scope :scope
display block display block

2
src/web/app/desktop/tags/contextmenu.tag
View file

@ -36,7 +36,7 @@
> p > p
cursor default cursor default
> i:last-child > [data-fa]:last-child
position absolute position absolute
top 0 top 0
right 8px right 8px

10
src/web/app/desktop/tags/crop-window.tag
View file

@ -1,12 +1,14 @@
<mk-crop-window> <mk-crop-window>
<mk-window ref="window" is-modal={ true } width={ '800px' }><yield to="header"><i class="fa fa-crop"></i>{ parent.title }</yield> <mk-window ref="window" is-modal={ true } width={ '800px' }>
<yield to="content"> <yield to="header">%fa:crop%{ parent.title }</yield>
<yield to="content">
<div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div> <div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div>
<div class="action"> <div class="action">
<button class="skip" onclick={ parent.skip }>クロップをスキップ</button> <button class="skip" onclick={ parent.skip }>クロップをスキップ</button>
<button class="cancel" onclick={ parent.cancel }>キャンセル</button> <button class="cancel" onclick={ parent.cancel }>キャンセル</button>
<button class="ok" onclick={ parent.ok }>決定</button> <button class="ok" onclick={ parent.ok }>決定</button>
</div></yield> </div>
</yield>
</mk-window> </mk-window>
<style> <style>
:scope :scope
@ -14,7 +16,7 @@
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > [data-fa]
margin-right 4px margin-right 4px
[data-yield='content'] [data-yield='content']

6
src/web/app/desktop/tags/drive/base-contextmenu.tag
View file

@ -2,13 +2,13 @@
<mk-contextmenu ref="ctx"> <mk-contextmenu ref="ctx">
<ul> <ul>
<li onclick={ parent.createFolder }> <li onclick={ parent.createFolder }>
<p><i class="fa fa-folder-o"></i>%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p> <p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
</li> </li>
<li onclick={ parent.upload }> <li onclick={ parent.upload }>
<p><i class="fa fa-upload"></i>%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p> <p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
</li> </li>
<li onclick={ parent.urlUpload }> <li onclick={ parent.urlUpload }>
<p><i class="fa fa-cloud-upload"></i>%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p> <p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
</li> </li>
</ul> </ul>
</mk-contextmenu> </mk-contextmenu>

4
src/web/app/desktop/tags/drive/browser-window.tag
View file

@ -2,7 +2,7 @@
<mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' } popout={ popout }> <mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' } popout={ popout }>
<yield to="header"> <yield to="header">
<p class="info" if={ parent.usage }><b>{ parent.usage.toFixed(1) }%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p> <p class="info" if={ parent.usage }><b>{ parent.usage.toFixed(1) }%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
<i class="fa fa-cloud"></i>%i18n:desktop.tags.mk-drive-browser-window.drive% %fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%
</yield> </yield>
<yield to="content"> <yield to="content">
<mk-drive-browser multiple={ true } folder={ parent.folder } ref="browser"/> <mk-drive-browser multiple={ true } folder={ parent.folder } ref="browser"/>
@ -19,7 +19,7 @@
margin 0 margin 0
font-size 80% font-size 80%
> i > [data-fa]
margin-right 4px margin-right 4px
[data-yield='content'] [data-yield='content']

10
src/web/app/desktop/tags/drive/browser.tag
View file

@ -3,10 +3,10 @@
<div class="path" oncontextmenu={ pathOncontextmenu }> <div class="path" oncontextmenu={ pathOncontextmenu }>
<mk-drive-browser-nav-folder class={ current: folder == null } folder={ null }/> <mk-drive-browser-nav-folder class={ current: folder == null } folder={ null }/>
<virtual each={ folder in hierarchyFolders }> <virtual each={ folder in hierarchyFolders }>
<span class="separator"><i class="fa fa-angle-right"></i></span> <span class="separator">%fa:angle-right%</span>
<mk-drive-browser-nav-folder folder={ folder }/> <mk-drive-browser-nav-folder folder={ folder }/>
</virtual> </virtual>
<span class="separator" if={ folder != null }><i class="fa fa-angle-right"></i></span> <span class="separator" if={ folder != null }>%fa:angle-right%</span>
<span class="folder current" if={ folder != null }>{ folder.name }</span> <span class="folder current" if={ folder != null }>{ folder.name }</span>
</div> </div>
<input class="search" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-drive-browser.search%"/> <input class="search" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-drive-browser.search%"/>
@ -100,7 +100,7 @@
opacity 0.5 opacity 0.5
cursor default cursor default
> i > [data-fa]
margin 0 margin 0
> .search > .search
@ -450,7 +450,7 @@
}).catch(err => { }).catch(err => {
switch (err) { switch (err) {
case 'detected-circular-definition': case 'detected-circular-definition':
dialog('<i class="fa fa-exclamation-triangle"></i>%i18n:desktop.tags.mk-drive-browser.unable-to-process%', dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
'%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%', [{ '%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%', [{
text: '%i18n:common.ok%' text: '%i18n:common.ok%'
}]); }]);
@ -492,7 +492,7 @@
folder_id: this.folder ? this.folder.id : undefined folder_id: this.folder ? this.folder.id : undefined
}); });
dialog('<i class="fa fa-check"></i>%i18n:desktop.tags.mk-drive-browser.url-upload-requested%', dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
'%i18n:desktop.tags.mk-drive-browser.may-take-time%', [{ '%i18n:desktop.tags.mk-drive-browser.may-take-time%', [{
text: '%i18n:common.ok%' text: '%i18n:common.ok%'
}]); }]);

14
src/web/app/desktop/tags/drive/file-contextmenu.tag
View file

@ -2,19 +2,19 @@
<mk-contextmenu ref="ctx"> <mk-contextmenu ref="ctx">
<ul> <ul>
<li onclick={ parent.rename }> <li onclick={ parent.rename }>
<p><i class="fa fa-i-cursor"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p> <p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p>
</li> </li>
<li onclick={ parent.copyUrl }> <li onclick={ parent.copyUrl }>
<p><i class="fa fa-link"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p> <p>%fa:link%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p>
</li> </li>
<li><a href={ parent.file.url + '?download' } download={ parent.file.name } onclick={ parent.download }><i class="fa fa-download"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li> <li><a href={ parent.file.url + '?download' } download={ parent.file.name } onclick={ parent.download }>%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
<li class="separator"></li> <li class="separator"></li>
<li onclick={ parent.delete }> <li onclick={ parent.delete }>
<p><i class="fa fa-trash-o"></i>%i18n:common.delete%</p> <p>%fa:R trash-alt%%i18n:common.delete%</p>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li class="has-child"> <li class="has-child">
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%<i class="fa fa-caret-right"></i></p> <p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%%fa:caret-right%</p>
<ul> <ul>
<li onclick={ parent.setAvatar }> <li onclick={ parent.setAvatar }>
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%</p> <p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%</p>
@ -25,7 +25,7 @@
</ul> </ul>
</li> </li>
<li class="has-child"> <li class="has-child">
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...<i class="fa fa-caret-right"></i></p> <p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...%fa:caret-right%</p>
<ul> <ul>
<li onclick={ parent.addApp }> <li onclick={ parent.addApp }>
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...</p> <p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...</p>
@ -72,7 +72,7 @@
this.copyUrl = () => { this.copyUrl = () => {
copyToClipboard(this.file.url); copyToClipboard(this.file.url);
this.refs.ctx.close(); this.refs.ctx.close();
dialog('<i class="fa fa-check"></i>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%', dialog('%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
'%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%', [{ '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%', [{
text: '%i18n:common.ok%' text: '%i18n:common.ok%'
}]); }]);

8
src/web/app/desktop/tags/drive/folder-contextmenu.tag
View file

@ -2,18 +2,18 @@
<mk-contextmenu ref="ctx"> <mk-contextmenu ref="ctx">
<ul> <ul>
<li onclick={ parent.move }> <li onclick={ parent.move }>
<p><i class="fa fa-arrow-right"></i>%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p> <p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
</li> </li>
<li onclick={ parent.newWindow }> <li onclick={ parent.newWindow }>
<p><i class="fa fa-share-square-o"></i>%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p> <p>%fa:R window-restore%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li onclick={ parent.rename }> <li onclick={ parent.rename }>
<p><i class="fa fa-i-cursor"></i>%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p> <p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li onclick={ parent.delete }> <li onclick={ parent.delete }>
<p><i class="fa fa-trash-o"></i>%i18n:common.delete%</p> <p>%fa:R trash-alt%%i18n:common.delete%</p>
</li> </li>
</ul> </ul>
</mk-contextmenu> </mk-contextmenu>

6
src/web/app/desktop/tags/drive/folder.tag
View file

@ -1,5 +1,5 @@
<mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } onclick={ onclick } onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }> <mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } onclick={ onclick } onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
<p class="name"><i class="fa fa-fw { fa-folder-o: !hover, fa-folder-open-o: hover }"></i>{ folder.name }</p> <p class="name"><virtual if={ hover }>%fa:R folder-open .fw%</virtual><virtual if={ !hover }>%fa:R folder .fw%</virtual>{ folder.name }</p>
<style> <style>
:scope :scope
display block display block
@ -41,7 +41,7 @@
font-size 0.9em font-size 0.9em
color darken($theme-color, 30%) color darken($theme-color, 30%)
> i > [data-fa]
margin-right 4px margin-right 4px
margin-left 2px margin-left 2px
text-align left text-align left
@ -143,7 +143,7 @@
}).catch(err => { }).catch(err => {
switch (err) { switch (err) {
case 'detected-circular-definition': case 'detected-circular-definition':
dialog('<i class="fa fa-exclamation-triangle"></i>%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%', dialog('%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
'%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%', [{ '%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%', [{
text: '%i18n:common.ok%' text: '%i18n:common.ok%'
}]); }]);

3
src/web/app/desktop/tags/drive/nav-folder.tag
View file

@ -1,4 +1,5 @@
<mk-drive-browser-nav-folder data-draghover={ draghover } onclick={ onclick } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }><i class="fa fa-cloud" if={ folder == null }></i><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span> <mk-drive-browser-nav-folder data-draghover={ draghover } onclick={ onclick } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
<virtual if={ folder == null }>%fa:cloud%</virtual><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
<style> <style>
:scope :scope
&[data-draghover] &[data-draghover]

8
src/web/app/desktop/tags/follow-button.tag
View file

@ -1,6 +1,10 @@
<mk-follow-button> <mk-follow-button>
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }><i class="fa fa-minus" if={ !wait && user.is_following }></i><i class="fa fa-plus" if={ !wait && !user.is_following }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ wait }></i></button> <button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
<div class="init" if={ init }><i class="fa fa-spinner fa-pulse fa-fw"></i></div> <virtual if={ !wait && user.is_following }>%fa:minus%</virtual>
<virtual if={ !wait && !user.is_following }>%fa:plus%</virtual>
<virtual if={ wait }>%fa:spinner .pluse .fw%</virtual>
</button>
<div class="init" if={ init }>%fa:spinner .pluse .fw%</div>
<style> <style>
:scope :scope
display block display block

8
src/web/app/desktop/tags/following-setuper.tag
View file

@ -9,9 +9,9 @@
</div> </div>
</div> </div>
<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p> <p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p> <p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%読み込んでいます<mk-ellipsis/></p>
<a class="refresh" onclick={ refresh }>もっと見る</a> <a class="refresh" onclick={ refresh }>もっと見る</a>
<button class="close" onclick={ close } title="閉じる"><i class="fa fa-times"></i></button> <button class="close" onclick={ close } title="閉じる">%fa:times%</button>
<style> <style>
:scope :scope
display block display block
@ -85,7 +85,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
> .refresh > .refresh
@ -116,7 +116,7 @@
&:active &:active
color #222 color #222
> i > [data-fa]
padding 14px padding 14px
</style> </style>

4
src/web/app/desktop/tags/home-widgets/access-log.tag
View file

@ -1,6 +1,6 @@
<mk-access-log-home-widget> <mk-access-log-home-widget>
<virtual if={ data.design == 0 }> <virtual if={ data.design == 0 }>
<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-access-log-home-widget.title%</p> <p class="title">%fa:server%%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
</virtual> </virtual>
<div ref="log"> <div ref="log">
<p each={ requests }> <p each={ requests }>
@ -27,7 +27,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> div > div

6
src/web/app/desktop/tags/home-widgets/channel.tag
View file

@ -1,9 +1,9 @@
<mk-channel-home-widget> <mk-channel-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title"><i class="fa fa-television"></i>{ <p class="title">%fa:tv%{
channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%' channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
}</p> }</p>
<button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%"><i class="fa fa-cog"></i></button> <button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
</virtual> </virtual>
<p class="get-started" if={ this.data.channel == null }>%i18n:desktop.tags.mk-channel-home-widget.get-started%</p> <p class="get-started" if={ this.data.channel == null }>%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
<mk-channel ref="channel" show={ this.data.channel }/> <mk-channel ref="channel" show={ this.data.channel }/>
@ -25,7 +25,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button

4
src/web/app/desktop/tags/home-widgets/donation.tag
View file

@ -1,6 +1,6 @@
<mk-donation-home-widget> <mk-donation-home-widget>
<article> <article>
<h1><i class="fa fa-heart"></i>%i18n:desktop.tags.mk-donation-home-widget.title%</h1> <h1>%fa:heart%%i18n:desktop.tags.mk-donation-home-widget.title%</h1>
<p>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr(0, '%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('{'))}<a href="/syuilo" data-user-preview="@syuilo">@syuilo</a>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr('%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('}') + 1)}</p> <p>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr(0, '%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('{'))}<a href="/syuilo" data-user-preview="@syuilo">@syuilo</a>{'%i18n:desktop.tags.mk-donation-home-widget.text%'.substr('%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('}') + 1)}</p>
</article> </article>
<style> <style>
@ -18,7 +18,7 @@
font-size 1em font-size 1em
color #888 color #888
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
> p > p

11
src/web/app/desktop/tags/home-widgets/mentions.tag
View file

@ -3,8 +3,13 @@
<div class="loading" if={ isLoading }> <div class="loading" if={ isLoading }>
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
</div> </div>
<p class="empty" if={ isEmpty }><i class="fa fa-comments-o"></i><span if={ mode == 'all' }>あなた宛ての投稿はありません。</span><span if={ mode == 'following' }>あなたがフォローしているユーザーからの言及はありません。</span></p> <p class="empty" if={ isEmpty }>%fa:R comments%<span if={ mode == 'all' }>あなた宛ての投稿はありません。</span><span if={ mode == 'following' }>あなたがフォローしているユーザーからの言及はありません。</span></p>
<mk-timeline ref="timeline"><yield to="footer"><i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i></yield/> <mk-timeline ref="timeline">
<yield to="footer">
<virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
</yield/>
</mk-timeline>
<style> <style>
:scope :scope
display block display block
@ -40,7 +45,7 @@
text-align center text-align center
color #999 color #999
> i > [data-fa]
display block display block
margin-bottom 16px margin-bottom 16px
font-size 3em font-size 3em

4
src/web/app/desktop/tags/home-widgets/messaging.tag
View file

@ -1,6 +1,6 @@
<mk-messaging-home-widget> <mk-messaging-home-widget>
<virtual if={ data.design == 0 }> <virtual if={ data.design == 0 }>
<p class="title"><i class="fa fa-comments"></i>%i18n:desktop.tags.mk-messaging-home-widget.title%</p> <p class="title">%fa:comments%%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
</virtual> </virtual>
<mk-messaging ref="index" compact={ true }/> <mk-messaging ref="index" compact={ true }/>
<style> <style>
@ -21,7 +21,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> mk-messaging > mk-messaging

6
src/web/app/desktop/tags/home-widgets/notifications.tag
View file

@ -1,7 +1,7 @@
<mk-notifications-home-widget> <mk-notifications-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title"><i class="fa fa-bell-o"></i>%i18n:desktop.tags.mk-notifications-home-widget.title%</p> <p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
<button onclick={ settings } title="%i18n:desktop.tags.mk-notifications-home-widget.settings%"><i class="fa fa-cog"></i></button> <button onclick={ settings } title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
</virtual> </virtual>
<mk-notifications/> <mk-notifications/>
<style> <style>
@ -21,7 +21,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button

8
src/web/app/desktop/tags/home-widgets/photo-stream.tag
View file

@ -1,8 +1,8 @@
<mk-photo-stream-home-widget data-melt={ data.design == 2 }> <mk-photo-stream-home-widget data-melt={ data.design == 2 }>
<virtual if={ data.design == 0 }> <virtual if={ data.design == 0 }>
<p class="title"><i class="fa fa-camera"></i>%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p> <p class="title">%fa:camera%%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
</virtual> </virtual>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div class="stream" if={ !initializing && images.length > 0 }> <div class="stream" if={ !initializing && images.length > 0 }>
<virtual each={ image in images }> <virtual each={ image in images }>
<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div> <div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
@ -37,7 +37,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> .stream > .stream
@ -65,7 +65,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

4
src/web/app/desktop/tags/home-widgets/post-form.tag
View file

@ -2,7 +2,7 @@
<mk-post-form if={ place == 'main' }/> <mk-post-form if={ place == 'main' }/>
<virtual if={ place != 'main' }> <virtual if={ place != 'main' }>
<virtual if={ data.design == 0 }> <virtual if={ data.design == 0 }>
<p class="title"><i class="fa fa-pencil"></i>%i18n:desktop.tags.mk-post-form-home-widget.title%</p> <p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
</virtual> </virtual>
<textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea> <textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
<button onclick={ post } disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button> <button onclick={ post } disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
@ -25,7 +25,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> textarea > textarea

12
src/web/app/desktop/tags/home-widgets/recommended-polls.tag
View file

@ -1,15 +1,15 @@
<mk-recommended-polls-home-widget> <mk-recommended-polls-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title"><i class="fa fa-pie-chart"></i>%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p> <p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%"><i class="fa fa-refresh"></i></button> <button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
</virtual> </virtual>
<div class="poll" if={ !loading && poll != null }> <div class="poll" if={ !loading && poll != null }>
<p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p> <p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
<p if={ !poll.text }><a href="/{ poll.user.username }/{ poll.id }"><i class="fa fa-link"></i></a></p> <p if={ !poll.text }><a href="/{ poll.user.username }/{ poll.id }">%fa:link%</a></p>
<mk-poll post={ poll }/> <mk-poll post={ poll }/>
</div> </div>
<p class="empty" if={ !loading && poll == null }>%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p> <p class="empty" if={ !loading && poll == null }>%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p>
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -26,7 +26,7 @@
color #888 color #888
border-bottom solid 1px #eee border-bottom solid 1px #eee
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button
@ -69,7 +69,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

10
src/web/app/desktop/tags/home-widgets/rss-reader.tag
View file

@ -1,12 +1,12 @@
<mk-rss-reader-home-widget> <mk-rss-reader-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title"><i class="fa fa-rss-square"></i>RSS</p> <p class="title">%fa:rss-square%RSS</p>
<button onclick={ settings } title="設定"><i class="fa fa-cog"></i></button> <button onclick={ settings } title="設定">%fa:cog%</button>
</virtual> </virtual>
<div class="feed" if={ !initializing }> <div class="feed" if={ !initializing }>
<virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual> <virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual>
</div> </div>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -23,7 +23,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button
@ -61,7 +61,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

22
src/web/app/desktop/tags/home-widgets/server.tag
View file

@ -1,9 +1,9 @@
<mk-server-home-widget data-melt={ data.design == 2 }> <mk-server-home-widget data-melt={ data.design == 2 }>
<virtual if={ data.design == 0 }> <virtual if={ data.design == 0 }>
<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-server-home-widget.title%</p> <p class="title">%fa:server%%i18n:desktop.tags.mk-server-home-widget.title%</p>
<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button> <button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%">%fa:sort%</button>
</virtual> </virtual>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/> <mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/>
<mk-server-home-widget-cpu if={ !initializing } show={ data.view == 1 } connection={ connection } meta={ meta }/> <mk-server-home-widget-cpu if={ !initializing } show={ data.view == 1 } connection={ connection } meta={ meta }/>
<mk-server-home-widget-memory if={ !initializing } show={ data.view == 2 } connection={ connection }/> <mk-server-home-widget-memory if={ !initializing } show={ data.view == 2 } connection={ connection }/>
@ -31,7 +31,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button
@ -57,7 +57,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>
@ -235,7 +235,7 @@
<mk-server-home-widget-cpu> <mk-server-home-widget-cpu>
<mk-server-home-widget-pie ref="pie"/> <mk-server-home-widget-pie ref="pie"/>
<div> <div>
<p><i class="fa fa-microchip"></i>CPU</p> <p>%fa:microchip%CPU</p>
<p>{ cores } Cores</p> <p>{ cores } Cores</p>
<p>{ model }</p> <p>{ model }</p>
</div> </div>
@ -261,7 +261,7 @@
&:first-child &:first-child
font-weight bold font-weight bold
> i > [data-fa]
margin-right 4px margin-right 4px
&:after &:after
@ -292,7 +292,7 @@
<mk-server-home-widget-memory> <mk-server-home-widget-memory>
<mk-server-home-widget-pie ref="pie"/> <mk-server-home-widget-pie ref="pie"/>
<div> <div>
<p><i class="fa fa-flask"></i>Memory</p> <p>%fa:flask%Memory</p>
<p>Total: { bytesToSize(total, 1) }</p> <p>Total: { bytesToSize(total, 1) }</p>
<p>Used: { bytesToSize(used, 1) }</p> <p>Used: { bytesToSize(used, 1) }</p>
<p>Free: { bytesToSize(free, 1) }</p> <p>Free: { bytesToSize(free, 1) }</p>
@ -319,7 +319,7 @@
&:first-child &:first-child
font-weight bold font-weight bold
> i > [data-fa]
margin-right 4px margin-right 4px
&:after &:after
@ -358,7 +358,7 @@
<mk-server-home-widget-disk> <mk-server-home-widget-disk>
<mk-server-home-widget-pie ref="pie"/> <mk-server-home-widget-pie ref="pie"/>
<div> <div>
<p><i class="fa fa-hdd-o"></i>Storage</p> <p>%fa:R hdd%Storage</p>
<p>Total: { bytesToSize(total, 1) }</p> <p>Total: { bytesToSize(total, 1) }</p>
<p>Available: { bytesToSize(available, 1) }</p> <p>Available: { bytesToSize(available, 1) }</p>
<p>Used: { bytesToSize(used, 1) }</p> <p>Used: { bytesToSize(used, 1) }</p>
@ -385,7 +385,7 @@
&:first-child &:first-child
font-weight bold font-weight bold
> i > [data-fa]
margin-right 4px margin-right 4px
&:after &:after

2
src/web/app/desktop/tags/home-widgets/slideshow.tag
View file

@ -5,7 +5,7 @@
<div ref="slideA" class="slide a"></div> <div ref="slideA" class="slide a"></div>
<div ref="slideB" class="slide b"></div> <div ref="slideB" class="slide b"></div>
</div> </div>
<button onclick={ resize }><i class="fa fa-expand"></i></button> <button onclick={ resize }>%fa:expand%</button>
<style> <style>
:scope :scope
display block display block

7
src/web/app/desktop/tags/home-widgets/timeline.tag
View file

@ -3,10 +3,11 @@
<div class="loading" if={ isLoading }> <div class="loading" if={ isLoading }>
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
</div> </div>
<p class="empty" if={ isEmpty && !isLoading }><i class="fa fa-comments-o"></i>自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p> <p class="empty" if={ isEmpty && !isLoading }>%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p>
<mk-timeline ref="timeline" hide={ isLoading }> <mk-timeline ref="timeline" hide={ isLoading }>
<yield to="footer"> <yield to="footer">
<i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i> <virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
</yield/> </yield/>
</mk-timeline> </mk-timeline>
<style> <style>
@ -30,7 +31,7 @@
text-align center text-align center
color #999 color #999
> i > [data-fa]
display block display block
margin-bottom 16px margin-bottom 16px
font-size 3em font-size 3em

4
src/web/app/desktop/tags/home-widgets/tips.tag
View file

@ -1,5 +1,5 @@
<mk-tips-home-widget> <mk-tips-home-widget>
<p ref="tip"><i class="fa fa-lightbulb-o"></i><span ref="text"></span></p> <p ref="tip">%fa:R lightbulb%<span ref="text"></span></p>
<style> <style>
:scope :scope
display block display block
@ -13,7 +13,7 @@
font-size 0.7em font-size 0.7em
color #999 color #999
> i > [data-fa]
margin-right 4px margin-right 4px
kbd kbd

10
src/web/app/desktop/tags/home-widgets/trends.tag
View file

@ -1,14 +1,14 @@
<mk-trends-home-widget> <mk-trends-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title"><i class="fa fa-fire"></i>%i18n:desktop.tags.mk-trends-home-widget.title%</p> <p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%"><i class="fa fa-refresh"></i></button> <button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
</virtual> </virtual>
<div class="post" if={ !loading && post != null }> <div class="post" if={ !loading && post != null }>
<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p> <p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
<p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p> <p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p>
</div> </div>
<p class="empty" if={ !loading && post == null }>%i18n:desktop.tags.mk-trends-home-widget.nothing%</p> <p class="empty" if={ !loading && post == null }>%i18n:desktop.tags.mk-trends-home-widget.nothing%</p>
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -25,7 +25,7 @@
color #888 color #888
border-bottom solid 1px #eee border-bottom solid 1px #eee
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button
@ -71,7 +71,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

10
src/web/app/desktop/tags/home-widgets/user-recommendation.tag
View file

@ -1,7 +1,7 @@
<mk-user-recommendation-home-widget> <mk-user-recommendation-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title"><i class="fa fa-users"></i>%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p> <p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
<button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%"><i class="fa fa-refresh"></i></button> <button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
</virtual> </virtual>
<div class="user" if={ !loading && users.length != 0 } each={ _user in users }> <div class="user" if={ !loading && users.length != 0 } each={ _user in users }>
<a class="avatar-anchor" href={ '/' + _user.username }> <a class="avatar-anchor" href={ '/' + _user.username }>
@ -14,7 +14,7 @@
<mk-follow-button user={ _user }/> <mk-follow-button user={ _user }/>
</div> </div>
<p class="empty" if={ !loading && users.length == 0 }>%i18n:desktop.tags.mk-user-recommendation-home-widget.no-one%</p> <p class="empty" if={ !loading && users.length == 0 }>%i18n:desktop.tags.mk-user-recommendation-home-widget.no-one%</p>
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -31,7 +31,7 @@
color #888 color #888
border-bottom solid 1px #eee border-bottom solid 1px #eee
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button
@ -110,7 +110,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

6
src/web/app/desktop/tags/home.tag
View file

@ -1,6 +1,6 @@
<mk-home data-customize={ opts.customize }> <mk-home data-customize={ opts.customize }>
<div class="customize" if={ opts.customize }> <div class="customize" if={ opts.customize }>
<a href="/"><i class="fa fa-check"></i>完了</a> <a href="/">%fa:check%完了</a>
<div> <div>
<div class="adder"> <div class="adder">
<p>ウィジェットを追加:</p> <p>ウィジェットを追加:</p>
@ -96,7 +96,7 @@
background darken($theme-color, 10%) background darken($theme-color, 10%)
transition background 0s ease transition background 0s ease
> i > [data-fa]
margin-right 8px margin-right 8px
> div > div
@ -221,7 +221,7 @@
} }
if (this.opts.customize) { if (this.opts.customize) {
dialog('<i class="fa fa-info-circle"></i>カスタマイズのヒント', dialog('%fa:info-circle%カスタマイズのヒント',
'<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' + '<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' +
'<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' + '<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' +
'<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' + '<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' +

4
src/web/app/desktop/tags/input-dialog.tag
View file

@ -1,7 +1,7 @@
<mk-input-dialog> <mk-input-dialog>
<mk-window ref="window" is-modal={ true } width={ '500px' }> <mk-window ref="window" is-modal={ true } width={ '500px' }>
<yield to="header"> <yield to="header">
<i class="fa fa-i-cursor"></i>{ parent.title } %fa:i-cursor%{ parent.title }
</yield> </yield>
<yield to="content"> <yield to="content">
<div class="body"> <div class="body">
@ -19,7 +19,7 @@
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > [data-fa]
margin-right 4px margin-right 4px
[data-yield='content'] [data-yield='content']

4
src/web/app/desktop/tags/messaging/room-window.tag
View file

@ -1,6 +1,6 @@
<mk-messaging-room-window> <mk-messaging-room-window>
<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout={ popout }> <mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout={ popout }>
<yield to="header"><i class="fa fa-comments"></i>メッセージ: { parent.user.name }</yield> <yield to="header">%fa:comments%メッセージ: { parent.user.name }</yield>
<yield to="content"> <yield to="content">
<mk-messaging-room user={ parent.user }/> <mk-messaging-room user={ parent.user }/>
</yield> </yield>
@ -9,7 +9,7 @@
:scope :scope
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > [data-fa]
margin-right 4px margin-right 4px
[data-yield='content'] [data-yield='content']

4
src/web/app/desktop/tags/messaging/window.tag
View file

@ -1,6 +1,6 @@
<mk-messaging-window> <mk-messaging-window>
<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }> <mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
<yield to="header"><i class="fa fa-comments"></i>メッセージ</yield> <yield to="header">%fa:comments%メッセージ</yield>
<yield to="content"> <yield to="content">
<mk-messaging ref="index"/> <mk-messaging ref="index"/>
</yield> </yield>
@ -9,7 +9,7 @@
:scope :scope
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > [data-fa]
margin-right 4px margin-right 4px
[data-yield='content'] [data-yield='content']

50
src/web/app/desktop/tags/notifications.tag
View file

@ -8,7 +8,10 @@
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
</a>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'repost' }> <virtual if={ notification.type == 'repost' }>
@ -16,7 +19,10 @@
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p><i class="fa fa-retweet"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a> <p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
</a>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'quote' }> <virtual if={ notification.type == 'quote' }>
@ -24,7 +30,8 @@
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p><i class="fa fa-quote-left"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'follow' }> <virtual if={ notification.type == 'follow' }>
@ -32,7 +39,7 @@
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p><i class="fa fa-user-plus"></i><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p> <p>%fa:user-plus%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'reply' }> <virtual if={ notification.type == 'reply' }>
@ -40,7 +47,8 @@
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p><i class="fa fa-reply"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'mention' }> <virtual if={ notification.type == 'mention' }>
@ -48,7 +56,8 @@
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p><i class="fa fa-at"></i><a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'poll_vote' }> <virtual if={ notification.type == 'poll_vote' }>
@ -56,18 +65,24 @@
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p><i class="fa fa-pie-chart"></i><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
</a>
</div> </div>
</virtual> </virtual>
</div> </div>
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p> <p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }>
<span>%fa:angle-up%{ notification._datetext }</span>
<span>%fa:angle-down%{ notifications[i + 1]._datetext }</span>
</p>
</virtual> </virtual>
</div> </div>
<button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }> <button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' } <virtual if={ fetchingMoreNotifications }>%fa:spinner .pluse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
</button> </button>
<p class="empty" if={ notifications.length == 0 && !loading }>ありません！</p> <p class="empty" if={ notifications.length == 0 && !loading }>ありません！</p>
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -129,20 +144,13 @@
.post-ref .post-ref
color rgba(0, 0, 0, 0.7) color rgba(0, 0, 0, 0.7)
&:before, &:after [data-fa]
font-family FontAwesome
font-size 1em font-size 1em
font-weight normal font-weight normal
font-style normal font-style normal
display inline-block display inline-block
margin-right 3px margin-right 3px
&:before
content "\f10d"
&:after
content "\f10e"
&.repost, &.quote &.repost, &.quote
.text p i .text p i
color #77B255 color #77B255
@ -168,7 +176,7 @@
span span
margin 0 16px margin 0 16px
i [data-fa]
margin-right 8px margin-right 8px
> .more > .more
@ -187,7 +195,7 @@
&.fetching &.fetching
cursor wait cursor wait
> i > [data-fa]
margin-right 4px margin-right 4px
> .empty > .empty
@ -202,7 +210,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

8
src/web/app/desktop/tags/pages/entrance.tag
View file

@ -150,7 +150,7 @@
</mk-entrance> </mk-entrance>
<mk-entrance-signin> <mk-entrance-signin>
<a class="help" href={ _ABOUT_URL_ + '/help' } title="お困りですか？"><i class="fa fa-question"></i></a> <a class="help" href={ _ABOUT_URL_ + '/help' } title="お困りですか？">%fa:question%</a>
<div class="form"> <div class="form">
<h1><img if={ user } src={ user.avatar_url + '?thumbnail&size=32' }/> <h1><img if={ user } src={ user.avatar_url + '?thumbnail&size=32' }/>
<p>{ user ? user.name : 'アカウント' }</p> <p>{ user ? user.name : 'アカウント' }</p>
@ -194,7 +194,7 @@
&:active &:active
color #222 color #222
> i > [data-fa]
padding 14px padding 14px
> .form > .form
@ -295,7 +295,7 @@
<mk-entrance-signup> <mk-entrance-signup>
<mk-signup/> <mk-signup/>
<button class="cancel" type="button" onclick={ parent.signin } title="キャンセル"><i class="fa fa-times"></i></button> <button class="cancel" type="button" onclick={ parent.signin } title="キャンセル">%fa:times%</button>
<style> <style>
:scope :scope
display block display block
@ -335,7 +335,7 @@
&:active &:active
color #222 color #222
> i > [data-fa]
padding 14px padding 14px
</style> </style>

6
src/web/app/desktop/tags/pages/post.tag
View file

@ -1,9 +1,9 @@
<mk-post-page> <mk-post-page>
<mk-ui ref="ui"> <mk-ui ref="ui">
<main if={ !parent.fetching }> <main if={ !parent.fetching }>
<a if={ parent.post.next } href={ parent.post.next }><i class="fa fa-angle-up"></i>%i18n:desktop.tags.mk-post-page.next%</a> <a if={ parent.post.next } href={ parent.post.next }>%fa:angle-up%%i18n:desktop.tags.mk-post-page.next%</a>
<mk-post-detail ref="detail" post={ parent.post }/> <mk-post-detail ref="detail" post={ parent.post }/>
<a if={ parent.post.prev } href={ parent.post.prev }><i class="fa fa-angle-down"></i>%i18n:desktop.tags.mk-post-page.prev%</a> <a if={ parent.post.prev } href={ parent.post.prev }>%fa:angle-down%%i18n:desktop.tags.mk-post-page.prev%</a>
</main> </main>
</mk-ui> </mk-ui>
<style> <style>
@ -23,7 +23,7 @@
&:last-child &:last-child
margin-top 4px margin-top 4px
> i > [data-fa]
margin-right 4px margin-right 4px
> mk-post-detail > mk-post-detail

2
src/web/app/desktop/tags/pages/selectdrive.tag
View file

@ -1,7 +1,7 @@
<mk-selectdrive-page> <mk-selectdrive-page>
<mk-drive-browser ref="browser" multiple={ multiple }/> <mk-drive-browser ref="browser" multiple={ multiple }/>
<div> <div>
<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" onclick={ upload }><i class="fa fa-upload"></i></button> <button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" onclick={ upload }>%fa:upload%</button>
<button class="cancel" onclick={ close }>%i18n:desktop.tags.mk-selectdrive-page.cancel%</button> <button class="cancel" onclick={ close }>%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
<button class="ok" onclick={ ok }>%i18n:desktop.tags.mk-selectdrive-page.ok%</button> <button class="ok" onclick={ ok }>%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
</div> </div>

26
src/web/app/desktop/tags/post-detail.tag
View file

@ -1,8 +1,8 @@
<mk-post-detail title={ title }> <mk-post-detail title={ title }>
<div class="main"> <div class="main">
<button class="read-more" if={ p.reply && p.reply.reply_id && context == null } title="会話をもっと読み込む" onclick={ loadContext } disabled={ contextFetching }> <button class="read-more" if={ p.reply && p.reply.reply_id && context == null } title="会話をもっと読み込む" onclick={ loadContext } disabled={ contextFetching }>
<i class="fa fa-ellipsis-v" if={ !contextFetching }></i> <virtual if={ !contextFetching }>%fa:ellipsis-v%</virtual>
<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i> <virtual if={ contextFetching }>%fa:spinner .pluse%</virtual>
</button> </button>
<div class="context"> <div class="context">
<virtual each={ post in context }> <virtual each={ post in context }>
@ -17,7 +17,7 @@
<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }> <a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/> <img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
</a> </a>
<i class="fa fa-retweet"></i><a class="name" href={ '/' + post.user.username }> %fa:retweet%<a class="name" href={ '/' + post.user.username }>
{ post.user.name } { post.user.name }
</a> </a>
がRepost がRepost
@ -44,16 +44,16 @@
<footer> <footer>
<mk-reactions-viewer post={ p }/> <mk-reactions-viewer post={ p }/>
<button onclick={ reply } title="返信"> <button onclick={ reply } title="返信">
<i class="fa fa-reply"></i><p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p> %fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
</button> </button>
<button onclick={ repost } title="Repost"> <button onclick={ repost } title="Repost">
<i class="fa fa-retweet"></i><p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p> %fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
</button> </button>
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション"> <button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション">
<i class="fa fa-plus"></i><p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p> %fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
</button> </button>
<button onclick={ menu } ref="menuButton"> <button onclick={ menu } ref="menuButton">
<i class="fa fa-ellipsis-h"></i> %fa:ellipsis-h%
</button> </button>
</footer> </footer>
</article> </article>
@ -124,7 +124,7 @@
margin 0 8px 0 0 margin 0 8px 0 0
border-radius 6px border-radius 6px
i [data-fa]
margin-right 4px margin-right 4px
.name .name
@ -205,16 +205,6 @@
font-size 1.5em font-size 1.5em
color #717171 color #717171
.link
&:after
content "\f14c"
display inline-block
padding-left 2px
font-family FontAwesome
font-size .9em
font-weight 400
font-style normal
> mk-url-preview > mk-url-preview
margin-top 8px margin-top 8px

10
src/web/app/desktop/tags/post-form.tag
View file

@ -7,17 +7,17 @@
<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div> <div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
<img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/> <img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
</li> </li>
<li class="add" if={ files.length < 4 } title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }><i class="fa fa-plus"></i></li> <li class="add" if={ files.length < 4 } title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:plus%</li>
</ul> </ul>
<p class="remain">{ 4 - files.length }/4</p> <p class="remain">{ 4 - files.length }/4</p>
</div> </div>
<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/> <mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/>
</div> </div>
<mk-uploader ref="uploader"/> <mk-uploader ref="uploader"/>
<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }><i class="fa fa-upload"></i></button> <button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:upload%</button>
<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button> <button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" onclick={ selectFileFromDrive }>%fa:cloud%</button>
<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" onclick={ kao }><i class="fa fa-smile-o"></i></button> <button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" onclick={ kao }>%fa:R smile%</button>
<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }><i class="fa fa-pie-chart"></i></button> <button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }>%fa:chart-pie%</button>
<p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p> <p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p>
<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } onclick={ post }> <button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } onclick={ post }>
{ wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis if={ wait }/> { wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis if={ wait }/>

4
src/web/app/desktop/tags/repost-form-window.tag
View file

@ -1,7 +1,7 @@
<mk-repost-form-window> <mk-repost-form-window>
<mk-window ref="window" is-modal={ true }> <mk-window ref="window" is-modal={ true }>
<yield to="header"> <yield to="header">
<i class="fa fa-retweet"></i>%i18n:desktop.tags.mk-repost-form-window.title% %fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%
</yield> </yield>
<yield to="content"> <yield to="content">
<mk-repost-form ref="form" post={ parent.opts.post }/> <mk-repost-form ref="form" post={ parent.opts.post }/>
@ -11,7 +11,7 @@
:scope :scope
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

11
src/web/app/desktop/tags/search-posts.tag
View file

@ -2,8 +2,13 @@
<div class="loading" if={ isLoading }> <div class="loading" if={ isLoading }>
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
</div> </div>
<p class="empty" if={ isEmpty }><i class="fa fa-search"></i>「{ query }」に関する投稿は見つかりませんでした。</p> <p class="empty" if={ isEmpty }>%fa:search%「{ query }」に関する投稿は見つかりませんでした。</p>
<mk-timeline ref="timeline"><yield to="footer"><i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i></yield/> <mk-timeline ref="timeline">
<yield to="footer">
<virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
</yield/>
</mk-timeline>
<style> <style>
:scope :scope
display block display block
@ -20,7 +25,7 @@
text-align center text-align center
color #999 color #999
> i > [data-fa]
display block display block
margin-bottom 16px margin-bottom 16px
font-size 3em font-size 3em

6
src/web/app/desktop/tags/select-file-from-drive-window.tag
View file

@ -7,7 +7,7 @@
<yield to="content"> <yield to="content">
<mk-drive-browser ref="browser" multiple={ parent.multiple }/> <mk-drive-browser ref="browser" multiple={ parent.multiple }/>
<div> <div>
<button class="upload" title="PCからドライブにファイルをアップロード" onclick={ parent.upload }><i class="fa fa-upload"></i></button> <button class="upload" title="PCからドライブにファイルをアップロード" onclick={ parent.upload }>%fa:upload%</button>
<button class="cancel" onclick={ parent.close }>キャンセル</button> <button class="cancel" onclick={ parent.close }>キャンセル</button>
<button class="ok" disabled={ parent.multiple && parent.files.length == 0 } onclick={ parent.ok }>決定</button> <button class="ok" disabled={ parent.multiple && parent.files.length == 0 } onclick={ parent.ok }>決定</button>
</div> </div>
@ -18,7 +18,7 @@
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> mk-raw > mk-raw
> i > [data-fa]
margin-right 4px margin-right 4px
.count .count
@ -138,7 +138,7 @@
this.files = []; this.files = [];
this.multiple = this.opts.multiple != null ? this.opts.multiple : false; this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
this.title = this.opts.title || '<i class="fa fa-file-o"></i>ファイルを選択'; this.title = this.opts.title || '%fa:R file%ファイルを選択';
this.on('mount', () => { this.on('mount', () => {
this.refs.window.refs.browser.on('selected', file => { this.refs.window.refs.browser.on('selected', file => {

4
src/web/app/desktop/tags/select-folder-from-drive-window.tag
View file

@ -16,7 +16,7 @@
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> mk-raw > mk-raw
> i > [data-fa]
margin-right 4px margin-right 4px
[data-yield='content'] [data-yield='content']
@ -92,7 +92,7 @@
<script> <script>
this.files = []; this.files = [];
this.title = this.opts.title || '<i class="fa fa-folder-o"></i>フォルダを選択'; this.title = this.opts.title || '%fa:R folder%フォルダを選択';
this.on('mount', () => { this.on('mount', () => {
this.refs.window.on('closed', () => { this.refs.window.on('closed', () => {

2
src/web/app/desktop/tags/set-avatar-suggestion.tag
View file

@ -1,6 +1,6 @@
<mk-set-avatar-suggestion onclick={ set }> <mk-set-avatar-suggestion onclick={ set }>
<p><b>アバターを設定</b>してみませんか？ <p><b>アバターを設定</b>してみませんか？
<button onclick={ close }><i class="fa fa-times"></i></button> <button onclick={ close }>%fa:times%</button>
</p> </p>
<style> <style>
:scope :scope

2
src/web/app/desktop/tags/set-banner-suggestion.tag
View file

@ -1,6 +1,6 @@
<mk-set-banner-suggestion onclick={ set }> <mk-set-banner-suggestion onclick={ set }>
<p><b>バナーを設定</b>してみませんか？ <p><b>バナーを設定</b>してみませんか？
<button onclick={ close }><i class="fa fa-times"></i></button> <button onclick={ close }>%fa:times%</button>
</p> </p>
<style> <style>
:scope :scope

4
src/web/app/desktop/tags/settings-window.tag
View file

@ -1,6 +1,6 @@
<mk-settings-window> <mk-settings-window>
<mk-window ref="window" is-modal={ true } width={ '700px' } height={ '550px' }> <mk-window ref="window" is-modal={ true } width={ '700px' } height={ '550px' }>
<yield to="header"><i class="fa fa-cog"></i>設定</yield> <yield to="header">%fa:cog%設定</yield>
<yield to="content"> <yield to="content">
<mk-settings/> <mk-settings/>
</yield> </yield>
@ -9,7 +9,7 @@
:scope :scope
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > [data-fa]
margin-right 4px margin-right 4px
[data-yield='content'] [data-yield='content']

20
src/web/app/desktop/tags/settings.tag
View file

@ -1,14 +1,14 @@
<mk-settings> <mk-settings>
<div class="nav"> <div class="nav">
<p class={ active: page == 'account' } onmousedown={ setPage.bind(null, 'account') }><i class="fa fa-fw fa-user"></i>アカウント</p> <p class={ active: page == 'account' } onmousedown={ setPage.bind(null, 'account') }>%fa:user .fw%アカウント</p>
<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }><i class="fa fa-fw fa-desktop"></i>Web</p> <p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }><i class="fa fa-fw fa-bell-o"></i>通知</p> <p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }><i class="fa fa-fw fa-cloud"></i>ドライブ</p> <p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%ドライブ</p>
<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }><i class="fa fa-fw fa-puzzle-piece"></i>アプリ</p> <p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }><i class="fa fa-fw fa-twitter"></i>Twitter</p> <p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }><i class="fa fa-fw fa-sign-in"></i>ログイン履歴</p> <p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in-alt .fw%ログイン履歴</p>
<p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }><i class="fa fa-fw fa-unlock-alt"></i>%i18n:desktop.tags.mk-settings.password%</p> <p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.password%</p>
<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }><i class="fa fa-fw fa-key"></i>API</p> <p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
</div> </div>
<div class="pages"> <div class="pages">
<section class="account" show={ page == 'account' }> <section class="account" show={ page == 'account' }>
@ -111,7 +111,7 @@
user-select none user-select none
transition margin-left 0.2s ease transition margin-left 0.2s ease
> i > [data-fa]
margin-right 4px margin-right 4px
&:hover &:hover

2
src/web/app/desktop/tags/sub-post-content.tag
View file

@ -1,7 +1,7 @@
<mk-sub-post-content> <mk-sub-post-content>
<div class="body"> <div class="body">
<a class="reply" if={ post.reply_id }> <a class="reply" if={ post.reply_id }>
<i class="fa fa-reply"></i> %fa:reply%
</a> </a>
<span ref="text"></span> <span ref="text"></span>
<a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a> <a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a>

36
src/web/app/desktop/tags/timeline.tag
View file

@ -1,7 +1,7 @@
<mk-timeline> <mk-timeline>
<virtual each={ post, i in posts }> <virtual each={ post, i in posts }>
<mk-timeline-post post={ post }/> <mk-timeline-post post={ post }/>
<p class="date" if={ i != posts.length - 1 && post._date != posts[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ post._datetext }</span><span><i class="fa fa-angle-down"></i>{ posts[i + 1]._datetext }</span></p> <p class="date" if={ i != posts.length - 1 && post._date != posts[i + 1]._date }><span>%fa:angle-up%{ post._datetext }</span><span>%fa:angle-down%{ posts[i + 1]._datetext }</span></p>
</virtual> </virtual>
<footer data-yield="footer"> <footer data-yield="footer">
<yield from="footer"/> <yield from="footer"/>
@ -23,7 +23,7 @@
span span
margin 0 16px margin 0 16px
i [data-fa]
margin-right 8px margin-right 8px
> footer > footer
@ -90,7 +90,7 @@
<a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }> <a class="avatar-anchor" href={ '/' + post.user.username } data-user-preview={ post.user_id }>
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/> <img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/>
</a> </a>
<i class="fa fa-retweet"></i>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)} %fa:retweet%{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}<a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a>{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}
</p> </p>
<mk-time time={ post.created_at }/> <mk-time time={ post.created_at }/>
</div> </div>
@ -114,7 +114,7 @@
<div class="text" ref="text"> <div class="text" ref="text">
<p class="channel" if={ p.channel != null }><a href={ _CH_URL_ + '/' + p.channel.id } target="_blank">{ p.channel.title }</a>:</p> <p class="channel" if={ p.channel != null }><a href={ _CH_URL_ + '/' + p.channel.id } target="_blank">{ p.channel.title }</a>:</p>
<a class="reply" if={ p.reply }> <a class="reply" if={ p.reply }>
<i class="fa fa-reply"></i> %fa:reply%
</a> </a>
<p class="dummy"></p> <p class="dummy"></p>
<a class="quote" if={ p.repost != null }>RP:</a> <a class="quote" if={ p.repost != null }>RP:</a>
@ -123,27 +123,27 @@
<mk-images-viewer images={ p.media }/> <mk-images-viewer images={ p.media }/>
</div> </div>
<mk-poll if={ p.poll } post={ p } ref="pollViewer"/> <mk-poll if={ p.poll } post={ p } ref="pollViewer"/>
<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i> <div class="repost" if={ p.repost }>%fa:quote-right -flip-h%
<mk-post-preview class="repost" post={ p.repost }/> <mk-post-preview class="repost" post={ p.repost }/>
</div> </div>
</div> </div>
<footer> <footer>
<mk-reactions-viewer post={ p } ref="reactionsViewer"/> <mk-reactions-viewer post={ p } ref="reactionsViewer"/>
<button onclick={ reply } title="%i18n:desktop.tags.mk-timeline-post.reply%"> <button onclick={ reply } title="%i18n:desktop.tags.mk-timeline-post.reply%">
<i class="fa fa-reply"></i><p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p> %fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
</button> </button>
<button onclick={ repost } title="%i18n:desktop.tags.mk-timeline-post.repost%"> <button onclick={ repost } title="%i18n:desktop.tags.mk-timeline-post.repost%">
<i class="fa fa-retweet"></i><p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p> %fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
</button> </button>
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%"> <button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%">
<i class="fa fa-plus"></i><p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p> %fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
</button> </button>
<button onclick={ menu } ref="menuButton"> <button onclick={ menu } ref="menuButton">
<i class="fa fa-ellipsis-h"></i> %fa:ellipsis-h%
</button> </button>
<button onclick={ toggleDetail } title="%i18n:desktop.tags.mk-timeline-post.detail"> <button onclick={ toggleDetail } title="%i18n:desktop.tags.mk-timeline-post.detail">
<i class="fa fa-caret-down" if={ !isDetailOpened }></i> <virtual if={ !isDetailOpened }>%fa:caret-down%</virtual>
<i class="fa fa-caret-up" if={ isDetailOpened }></i> <virtual if={ isDetailOpened }>%fa:caret-up%</virtual>
</button> </button>
</footer> </footer>
</div> </div>
@ -203,7 +203,7 @@
margin 0 8px 0 0 margin 0 8px 0 0
border-radius 6px border-radius 6px
i [data-fa]
margin-right 4px margin-right 4px
.name .name
@ -324,16 +324,6 @@
mk-url-preview mk-url-preview
margin-top 8px margin-top 8px
.link
&:after
content "\f14c"
display inline-block
padding-left 2px
font-family FontAwesome
font-size .9em
font-weight 400
font-style normal
> .channel > .channel
margin 0 margin 0
@ -378,7 +368,7 @@
> .repost > .repost
margin 8px 0 margin 8px 0
> i:first-child > [data-fa]:first-child
position absolute position absolute
top -8px top -8px
left -8px left -8px

41
src/web/app/desktop/tags/ui.tag
View file

@ -171,7 +171,7 @@
</mk-ui-header-search> </mk-ui-header-search>
<mk-ui-header-post-button> <mk-ui-header-post-button>
<button onclick={ post } title="%i18n:desktop.tags.mk-ui-header-post-button.post%"><i class="fa fa-pencil"></i></button> <button onclick={ post } title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
<style> <style>
:scope :scope
display inline-block display inline-block
@ -215,7 +215,7 @@
<mk-ui-header-notifications> <mk-ui-header-notifications>
<button data-active={ isOpen } onclick={ toggle } title="%i18n:desktop.tags.mk-ui-header-notifications.title%"> <button data-active={ isOpen } onclick={ toggle } title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
<i class="fa fa-bell-o icon"></i><i class="fa fa-circle badge" if={ hasUnreadNotifications }></i> %fa:R bell%<virtual if={ hasUnreadNotifications }>%fa:circle%</virtual>
</button> </button>
<div class="notifications" if={ isOpen }> <div class="notifications" if={ isOpen }>
<mk-notifications/> <mk-notifications/>
@ -245,11 +245,11 @@
&:active &:active
color darken(#9eaba8, 30%) color darken(#9eaba8, 30%)
> .icon > [data-fa].bell
font-size 1.2em font-size 1.2em
line-height 48px line-height 48px
> .badge > [data-fa].circle
margin-left -5px margin-left -5px
vertical-align super vertical-align super
font-size 10px font-size 10px
@ -380,27 +380,27 @@
<virtual if={ SIGNIN }> <virtual if={ SIGNIN }>
<li class="home { active: page == 'home' }"> <li class="home { active: page == 'home' }">
<a href={ _URL_ }> <a href={ _URL_ }>
<i class="fa fa-home"></i> %fa:home%
<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p> <p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
</a> </a>
</li> </li>
<li class="messaging"> <li class="messaging">
<a onclick={ messaging }> <a onclick={ messaging }>
<i class="fa fa-comments"></i> %fa:comments%
<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p> <p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
<i class="fa fa-circle" if={ hasUnreadMessagingMessages }></i> <virtual if={ hasUnreadMessagingMessages }>%fa:circle%</virtual>
</a> </a>
</li> </li>
</virtual> </virtual>
<li class="ch"> <li class="ch">
<a href={ _CH_URL_ } target="_blank"> <a href={ _CH_URL_ } target="_blank">
<i class="fa fa-television"></i> %fa:tv%
<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p> <p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
</a> </a>
</li> </li>
<li class="info"> <li class="info">
<a href="https://twitter.com/misskey_xyz" target="_blank"> <a href="https://twitter.com/misskey_xyz" target="_blank">
<i class="fa fa-info"></i> %fa:info%
<p>%i18n:desktop.tags.mk-ui-header-nav.info%</p> <p>%i18n:desktop.tags.mk-ui-header-nav.info%</p>
</a> </a>
</li> </li>
@ -450,12 +450,11 @@
color darken(#9eaba8, 20%) color darken(#9eaba8, 20%)
text-decoration none text-decoration none
> i:first-child > [data-fa]:first-child
margin-right 8px margin-right 8px
> i:last-child > [data-fa]:last-child
margin-left 5px margin-left 5px
vertical-align super
font-size 10px font-size 10px
color $theme-color color $theme-color
@ -616,29 +615,29 @@
<mk-ui-header-account> <mk-ui-header-account>
<button class="header" data-active={ isOpen.toString() } onclick={ toggle }> <button class="header" data-active={ isOpen.toString() } onclick={ toggle }>
<span class="username">{ I.username }<i class="fa fa-angle-down" if={ !isOpen }></i><i class="fa fa-angle-up" if={ isOpen }></i></span> <span class="username">{ I.username }<virtual if={ !isOpen }>%fa:angle-down%</virtual><virtual if={ isOpen }>%fa:angle-up%</virtual></span>
<img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
</button> </button>
<div class="menu" if={ isOpen }> <div class="menu" if={ isOpen }>
<ul> <ul>
<li> <li>
<a href={ '/' + I.username }><i class="fa fa-user"></i>%i18n:desktop.tags.mk-ui-header-account.profile%<i class="fa fa-angle-right"></i></a> <a href={ '/' + I.username }>%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
</li> </li>
<li onclick={ drive }> <li onclick={ drive }>
<p><i class="fa fa-cloud"></i>%i18n:desktop.tags.mk-ui-header-account.drive%<i class="fa fa-angle-right"></i></p> <p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
</li> </li>
<li> <li>
<a href="/i/mentions"><i class="fa fa-at"></i>%i18n:desktop.tags.mk-ui-header-account.mentions%<i class="fa fa-angle-right"></i></a> <a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
</li> </li>
</ul> </ul>
<ul> <ul>
<li onclick={ settings }> <li onclick={ settings }>
<p><i class="fa fa-cog"></i>%i18n:desktop.tags.mk-ui-header-account.settings%<i class="fa fa-angle-right"></i></p> <p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
</li> </li>
</ul> </ul>
<ul> <ul>
<li onclick={ signout }> <li onclick={ signout }>
<p><i class="fa fa-power-off"></i>%i18n:desktop.tags.mk-ui-header-account.signout%<i class="fa fa-angle-right"></i></p> <p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
</li> </li>
</ul> </ul>
</div> </div>
@ -679,7 +678,7 @@
font-family Meiryo, sans-serif font-family Meiryo, sans-serif
text-decoration none text-decoration none
i [data-fa]
margin-left 8px margin-left 8px
> .avatar > .avatar
@ -756,10 +755,10 @@
* *
pointer-events none pointer-events none
> i:first-of-type > [data-fa]:first-of-type
margin-right 6px margin-right 6px
> i:last-of-type > [data-fa]:last-of-type
display block display block
position absolute position absolute
top 0 top 0

11
src/web/app/desktop/tags/user-timeline.tag
View file

@ -5,8 +5,13 @@
<div class="loading" if={ isLoading }> <div class="loading" if={ isLoading }>
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
</div> </div>
<p class="empty" if={ isEmpty }><i class="fa fa-comments-o"></i>このユーザーはまだ何も投稿していないようです。</p> <p class="empty" if={ isEmpty }>%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
<mk-timeline ref="timeline"><yield to="footer"><i class="fa fa-moon-o" if={ !parent.moreLoading }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ parent.moreLoading }></i></yield/> <mk-timeline ref="timeline">
<yield to="footer">
<virtual if={ !parent.moreLoading }>%fa:moon%</virtual>
<virtual if={ parent.moreLoading }>%fa:spinner .pluse .fw%</virtual>
</yield/>
</mk-timeline>
<style> <style>
:scope :scope
display block display block
@ -40,7 +45,7 @@
text-align center text-align center
color #999 color #999
> i > [data-fa]
display block display block
margin-bottom 16px margin-bottom 16px
font-size 3em font-size 3em

32
src/web/app/desktop/tags/user.tag
View file

@ -48,12 +48,12 @@
<div class="title"> <div class="title">
<p class="name" href={ '/' + user.username }>{ user.name }</p> <p class="name" href={ '/' + user.username }>{ user.name }</p>
<p class="username">@{ user.username }</p> <p class="username">@{ user.username }</p>
<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p> <p class="location" if={ user.profile.location }>%fa:map-marker%{ user.profile.location }</p>
</div> </div>
<footer> <footer>
<a href={ '/' + user.username } data-active={ parent.page == 'home' }><i class="fa fa-home"></i>概要</a> <a href={ '/' + user.username } data-active={ parent.page == 'home' }>%fa:home%概要</a>
<a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }><i class="fa fa-picture-o"></i>メディア</a> <a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }>%fa:image%メディア</a>
<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }><i class="fa fa-bar-chart"></i>グラフ</a> <a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }>%fa:chart-bar%グラフ</a>
</footer> </footer>
</div> </div>
<style> <style>
@ -230,15 +230,15 @@
</div> </div>
<div class="description" if={ user.description }>{ user.description }</div> <div class="description" if={ user.description }>{ user.description }</div>
<div class="birthday" if={ user.profile.birthday }> <div class="birthday" if={ user.profile.birthday }>
<p><i class="fa fa-birthday-cake"></i>{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p> <p>%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
</div> </div>
<div class="twitter" if={ user.twitter }> <div class="twitter" if={ user.twitter }>
<p><i class="fa fa-twitter"></i><a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p> <p>%fa:B twitter%<a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
</div> </div>
<div class="status"> <div class="status">
<p class="posts-count"><i class="fa fa-angle-right"></i><a>{ user.posts_count }</a><b>ポスト</b></p> <p class="posts-count">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p>
<p class="following"><i class="fa fa-angle-right"></i><a onclick={ showFollowing }>{ user.following_count }</a>人を<b>フォロー</b></p> <p class="following">%fa:angle-right%<a onclick={ showFollowing }>{ user.following_count }</a>人を<b>フォロー</b></p>
<p class="followers"><i class="fa fa-angle-right"></i><a onclick={ showFollowers }>{ user.followers_count }</a>人の<b>フォロワー</b></p> <p class="followers">%fa:angle-right%<a onclick={ showFollowers }>{ user.followers_count }</a>人の<b>フォロワー</b></p>
</div> </div>
<style> <style>
:scope :scope
@ -329,8 +329,8 @@
</mk-user-profile> </mk-user-profile>
<mk-user-photos> <mk-user-photos>
<p class="title"><i class="fa fa-camera"></i>%i18n:desktop.tags.mk-user.photos.title%</p> <p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
<div class="stream" if={ !initializing && images.length > 0 }> <div class="stream" if={ !initializing && images.length > 0 }>
<virtual each={ image in images }> <virtual each={ image in images }>
<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div> <div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
@ -423,8 +423,8 @@
</mk-user-photos> </mk-user-photos>
<mk-user-frequently-replied-users> <mk-user-frequently-replied-users>
<p class="title"><i class="fa fa-users"></i>%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p> <p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
<div class="user" if={ !initializing && users.length != 0 } each={ _user in users }> <div class="user" if={ !initializing && users.length != 0 } each={ _user in users }>
<a class="avatar-anchor" href={ '/' + _user.username }> <a class="avatar-anchor" href={ '/' + _user.username }>
<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/> <img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>
@ -535,8 +535,8 @@
</mk-user-frequently-replied-users> </mk-user-frequently-replied-users>
<mk-user-followers-you-know> <mk-user-followers-you-know>
<p class="title"><i class="fa fa-users"></i>%i18n:desktop.tags.mk-user.followers-you-know.title%</p> <p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
<div if={ !initializing && users.length > 0 }> <div if={ !initializing && users.length > 0 }>
<virtual each={ user in users }> <virtual each={ user in users }>
<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a> <a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
@ -712,7 +712,7 @@
<mk-user-graphs> <mk-user-graphs>
<section> <section>
<div> <div>
<h1><i class="fa fa-pencil"></i>投稿</h1> <h1>%fa:pencil-alt%投稿</h1>
<mk-user-graphs-activity-chart user={ opts.user }/> <mk-user-graphs-activity-chart user={ opts.user }/>
</div> </div>
</section> </section>

4
src/web/app/desktop/tags/users-list.tag
View file

@ -15,7 +15,7 @@
<span if={ moreFetching }>読み込み中<mk-ellipsis/></span> <span if={ moreFetching }>読み込み中<mk-ellipsis/></span>
</button> </button>
<p class="no" if={ !fetching && users.length == 0 }>{ opts.noUsers }</p> <p class="no" if={ !fetching && users.length == 0 }>{ opts.noUsers }</p>
<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p> <p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%読み込んでいます<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -84,7 +84,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

10
src/web/app/desktop/tags/widgets/activity.tag
View file

@ -1,9 +1,9 @@
<mk-activity-widget data-melt={ design == 2 }> <mk-activity-widget data-melt={ design == 2 }>
<virtual if={ design == 0 }> <virtual if={ design == 0 }>
<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-widget.title%</p> <p class="title">%fa:chart-bar%%i18n:desktop.tags.mk-activity-widget.title%</p>
<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%"><i class="fa fa-sort"></i></button> <button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
</virtual> </virtual>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<mk-activity-widget-calender if={ !initializing && view == 0 } data={ [].concat(activity) }/> <mk-activity-widget-calender if={ !initializing && view == 0 } data={ [].concat(activity) }/>
<mk-activity-widget-chart if={ !initializing && view == 1 } data={ [].concat(activity) }/> <mk-activity-widget-chart if={ !initializing && view == 1 } data={ [].concat(activity) }/>
<style> <style>
@ -27,7 +27,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button
@ -53,7 +53,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

6
src/web/app/desktop/tags/widgets/calendar.tag
View file

@ -1,8 +1,8 @@
<mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }> <mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }>
<virtual if={ opts.design == 0 || opts.design == 1 }> <virtual if={ opts.design == 0 || opts.design == 1 }>
<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar-widget.prev%"><i class="fa fa-chevron-circle-left"></i></button> <button onclick={ prev } title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
<p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p> <p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
<button onclick={ next } title="%i18n:desktop.tags.mk-calendar-widget.next%"><i class="fa fa-chevron-circle-right"></i></button> <button onclick={ next } title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
</virtual> </virtual>
<div class="calendar"> <div class="calendar">
@ -41,7 +41,7 @@
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i > [data-fa]
margin-right 4px margin-right 4px
> button > button

6
src/web/app/desktop/tags/window.tag
View file

@ -5,8 +5,8 @@
<header ref="header" onmousedown={ onHeaderMousedown }> <header ref="header" onmousedown={ onHeaderMousedown }>
<h1 data-yield="header"><yield from="header"/></h1> <h1 data-yield="header"><yield from="header"/></h1>
<div> <div>
<button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト"><i class="fa fa-window-restore"></i></button> <button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト">%fa:R window-restore%</button>
<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる"><i class="fa fa-times"></i></button> <button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる">%fa:times%</button>
</div> </div>
</header> </header>
<div class="content" data-yield="content"><yield from="content"/></div> <div class="content" data-yield="content"><yield from="content"/></div>
@ -171,7 +171,7 @@
&:active &:active
color darken(#000, 30%) color darken(#000, 30%)
> i > [data-fa]
padding 0 padding 0
width $header-height width $header-height
line-height $header-height line-height $header-height

22
src/web/app/dev/tags/new-app-form.tag
View file

@ -10,13 +10,13 @@
<label> <label>
<p class="caption">Named ID</p> <p class="caption">Named ID</p>
<input ref="nid" type="text" pattern="^[a-zA-Z0-9-]{3,30}$" placeholder="ex) misskey-for-ios" autocomplete="off" required="required" onkeyup={ onChangeNid }/> <input ref="nid" type="text" pattern="^[a-zA-Z0-9-]{3,30}$" placeholder="ex) misskey-for-ios" autocomplete="off" required="required" onkeyup={ onChangeNid }/>
<p class="info" if={ nidState == 'wait' } style="color:#999"><i class="fa fa-fw fa-spinner fa-pulse"></i>確認しています...</p> <p class="info" if={ nidState == 'wait' } style="color:#999">%fa:spinner .pluse .fw%確認しています...</p>
<p class="info" if={ nidState == 'ok' } style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>利用できます</p> <p class="info" if={ nidState == 'ok' } style="color:#3CB7B5">%fa:fw check%利用できます</p>
<p class="info" if={ nidState == 'unavailable' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>既に利用されています</p> <p class="info" if={ nidState == 'unavailable' } style="color:#FF1161">%fa:fw exclamation-triangle%既に利用されています</p>
<p class="info" if={ nidState == 'error' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>通信エラー</p> <p class="info" if={ nidState == 'error' } style="color:#FF1161">%fa:fw exclamation-triangle%通信エラー</p>
<p class="info" if={ nidState == 'invalid-format' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>a~z、A~Z、0~9、-(ハイフン)が使えます</p> <p class="info" if={ nidState == 'invalid-format' } style="color:#FF1161">%fa:fw exclamation-triangle%a~z、A~Z、0~9、-(ハイフン)が使えます</p>
<p class="info" if={ nidState == 'min-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>3文字以上でお願いします！</p> <p class="info" if={ nidState == 'min-range' } style="color:#FF1161">%fa:fw exclamation-triangle%3文字以上でお願いします！</p>
<p class="info" if={ nidState == 'max-range' } style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>30文字以内でお願いします</p> <p class="info" if={ nidState == 'max-range' } style="color:#FF1161">%fa:fw exclamation-triangle%30文字以内でお願いします</p>
</label> </label>
</section> </section>
<section class="description"> <section class="description">
@ -71,7 +71,7 @@
<p>通知を操作する。</p> <p>通知を操作する。</p>
</label> </label>
</div> </div>
<p><i class="fa fa-exclamation-triangle"></i>アプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーキーはすべて無効になります。</p> <p>%fa:exclamation-triangle%アプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーキーはすべて無効になります。</p>
</section> </section>
<button onclick={ onsubmit }>アプリ作成</button> <button onclick={ onsubmit }>アプリ作成</button>
</form> </form>
@ -91,7 +91,7 @@
color #616161 color #616161
font-size 0.95em font-size 0.95em
> i > [data-fa]
margin-right 0.25em margin-right 0.25em
color #96adac color #96adac
@ -100,7 +100,7 @@
margin 4px 0 margin 4px 0
font-size 0.8em font-size 0.8em
> i > [data-fa]
margin-right 0.3em margin-right 0.3em
section.permission section.permission
@ -141,7 +141,7 @@
font-size 0.8em font-size 0.8em
color #999 color #999
> i > [data-fa]
margin-right 4px margin-right 4px
[type=text] [type=text]

4
src/web/app/mobile/tags/drive-folder-selector.tag
View file

@ -2,8 +2,8 @@
<div class="body"> <div class="body">
<header> <header>
<h1>%i18n:mobile.tags.mk-drive-folder-selector.select-folder%</h1> <h1>%i18n:mobile.tags.mk-drive-folder-selector.select-folder%</h1>
<button class="close" onclick={ cancel }><i class="fa fa-times"></i></button> <button class="close" onclick={ cancel }>%fa:times%</button>
<button class="ok" onclick={ ok }><i class="fa fa-check"></i></button> <button class="ok" onclick={ ok }>%fa:check%</button>
</header> </header>
<mk-drive ref="browser" select-folder={ true }/> <mk-drive ref="browser" select-folder={ true }/>
</div> </div>

4
src/web/app/mobile/tags/drive-selector.tag
View file

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

10
src/web/app/mobile/tags/drive.tag
View file

@ -1,16 +1,16 @@
<mk-drive> <mk-drive>
<nav ref="nav"> <nav ref="nav">
<p onclick={ goRoot }><i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-drive.drive%</p> <p onclick={ goRoot }>%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</p>
<virtual each={ folder in hierarchyFolders }> <virtual each={ folder in hierarchyFolders }>
<span><i class="fa fa-angle-right"></i></span> <span>%fa:angle-right%</span>
<p onclick={ move }>{ folder.name }</p> <p onclick={ move }>{ folder.name }</p>
</virtual> </virtual>
<virtual if={ folder != null }> <virtual if={ folder != null }>
<span><i class="fa fa-angle-right"></i></span> <span>%fa:angle-right%</span>
<p>{ folder.name }</p> <p>{ folder.name }</p>
</virtual> </virtual>
<virtual if={ file != null }> <virtual if={ file != null }>
<span><i class="fa fa-angle-right"></i></span> <span>%fa:angle-right%</span>
<p>{ file.name }</p> <p>{ file.name }</p>
</virtual> </virtual>
</nav> </nav>
@ -81,7 +81,7 @@
&:last-child &:last-child
font-weight bold font-weight bold
> i > [data-fa]
margin-right 4px margin-right 4px
> span > span

18
src/web/app/mobile/tags/drive/file-viewer.tag
View file

@ -1,7 +1,7 @@
<mk-drive-file-viewer> <mk-drive-file-viewer>
<div class="preview"> <div class="preview">
<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name }> <img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name }>
<i if={ kind != 'image' } class="fa fa-file"></i> <virtual if={ kind != 'image' }>%fa:file%</virtual>
<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }> <footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
<span class="size"> <span class="size">
<span class="width">{ file.properties.width }</span> <span class="width">{ file.properties.width }</span>
@ -23,26 +23,26 @@
<span class="separator"></span> <span class="separator"></span>
<span class="data-size">{ bytesToSize(file.datasize) }</span> <span class="data-size">{ bytesToSize(file.datasize) }</span>
<span class="separator"></span> <span class="separator"></span>
<span class="created-at" onclick={ showCreatedAt }><i class="fa fa-clock-o"></i><mk-time time={ file.created_at }/></span> <span class="created-at" onclick={ showCreatedAt }>%fa:R clock%<mk-time time={ file.created_at }/></span>
</div> </div>
</div> </div>
<div class="menu"> <div class="menu">
<div> <div>
<a href={ file.url + '?download' } download={ file.name }> <a href={ file.url + '?download' } download={ file.name }>
<i class="fa fa-download"></i>%i18n:mobile.tags.mk-drive-file-viewer.download% %fa:download%%i18n:mobile.tags.mk-drive-file-viewer.download%
</a> </a>
<button onclick={ rename }> <button onclick={ rename }>
<i class="fa fa-pencil"></i>%i18n:mobile.tags.mk-drive-file-viewer.rename% %fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
</button> </button>
<button onclick={ move }> <button onclick={ move }>
<i class="fa fa-folder-open"></i>%i18n:mobile.tags.mk-drive-file-viewer.move% %fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
</button> </button>
</div> </div>
</div> </div>
<div class="hash"> <div class="hash">
<div> <div>
<p> <p>
<i class="fa fa-hashtag"></i>%i18n:mobile.tags.mk-drive-file-viewer.hash% %fa:hashtag%%i18n:mobile.tags.mk-drive-file-viewer.hash%
</p> </p>
<code>{ file.md5 }</code> <code>{ file.md5 }</code>
</div> </div>
@ -114,7 +114,7 @@
> .created-at > .created-at
color #bdbdbd color #bdbdbd
> i > [data-fa]
margin-right 2px margin-right 2px
> .menu > .menu
@ -149,7 +149,7 @@
border-color #444 border-color #444
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2) box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
> i > [data-fa]
margin-right 4px margin-right 4px
> .hash > .hash
@ -167,7 +167,7 @@
color #555 color #555
font-size 0.9em font-size 0.9em
> i > [data-fa]
margin-right 4px margin-right 4px
> code > code

4
src/web/app/mobile/tags/drive/file.tag
View file

@ -15,7 +15,7 @@
<p class="data-size">{ bytesToSize(file.datasize) }</p> <p class="data-size">{ bytesToSize(file.datasize) }</p>
<p class="separator"></p> <p class="separator"></p>
<p class="created-at"> <p class="created-at">
<i class="fa fa-clock-o"></i><mk-time time={ file.created_at }/> %fa:R clock%<mk-time time={ file.created_at }/>
</p> </p>
</footer> </footer>
</div> </div>
@ -112,7 +112,7 @@
padding 0 padding 0
color #BDBDBD color #BDBDBD
> i > [data-fa]
margin-right 2px margin-right 2px
&[data-is-selected] &[data-is-selected]

6
src/web/app/mobile/tags/drive/folder.tag
View file

@ -1,6 +1,6 @@
<mk-drive-folder onclick={ onclick }> <mk-drive-folder onclick={ onclick }>
<div class="container"> <div class="container">
<p class="name"><i class="fa fa-folder"></i>{ folder.name }</p><i class="fa fa-angle-right"></i> <p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
</div> </div>
<style> <style>
:scope :scope
@ -23,10 +23,10 @@
margin 0 margin 0
padding 0 padding 0
> i > [data-fa]
margin-right 6px margin-right 6px
> i > [data-fa]
position absolute position absolute
top 0 top 0
bottom 0 bottom 0

10
src/web/app/mobile/tags/follow-button.tag
View file

@ -1,6 +1,10 @@
<mk-follow-button> <mk-follow-button>
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait }><i class="fa fa-minus" if={ !wait && user.is_following }></i><i class="fa fa-plus" if={ !wait && !user.is_following }></i><i class="fa fa-spinner fa-pulse fa-fw" if={ wait }></i>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' }</button> <button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait }>
<div class="init" if={ init }><i class="fa fa-spinner fa-pulse fa-fw"></i></div> <virtual if={ !wait && user.is_following }>%fa:minus%</virtual>
<virtual if={ !wait && !user.is_following }>%fa:plus%</virtual>
<virtual if={ wait }>%fa:spinner .pluse .fw%</virtual>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' }
</button>
<div class="init" if={ init }>%fa:spinner .pluse .fw%</div>
<style> <style>
:scope :scope
display block display block
@ -43,7 +47,7 @@
cursor wait !important cursor wait !important
opacity 0.7 opacity 0.7
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

8
src/web/app/mobile/tags/init-following.tag
View file

@ -6,9 +6,9 @@
</virtual> </virtual>
</div> </div>
<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p> <p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p> <p class="fetching" if={ fetching }>%fa:spinner .pluse .fw%読み込んでいます<mk-ellipsis/></p>
<a class="refresh" onclick={ refresh }>もっと見る</a> <a class="refresh" onclick={ refresh }>もっと見る</a>
<button class="close" onclick={ close } title="閉じる"><i class="fa fa-times"></i></button> <button class="close" onclick={ close } title="閉じる">%fa:times%</button>
<style> <style>
:scope :scope
display block display block
@ -46,7 +46,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
> .refresh > .refresh
@ -78,7 +78,7 @@
&:active &:active
color #222 color #222
> i > [data-fa]
padding 10px padding 10px
</style> </style>

27
src/web/app/mobile/tags/notification-preview.tag
View file

@ -3,48 +3,48 @@
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p> <p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p>
<p class="post-ref">{ getPostSummary(notification.post) }</p> <p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'repost' }> <virtual if={ notification.type == 'repost' }>
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p><i class="fa fa-retweet"></i>{ notification.post.user.name }</p> <p>%fa:retweet%{ notification.post.user.name }</p>
<p class="post-ref">{ getPostSummary(notification.post.repost) }</p> <p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%</p>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'quote' }> <virtual if={ notification.type == 'quote' }>
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p><i class="fa fa-quote-left"></i>{ notification.post.user.name }</p> <p>%fa:quote-left%{ notification.post.user.name }</p>
<p class="post-preview">{ getPostSummary(notification.post) }</p> <p class="post-preview">{ getPostSummary(notification.post) }</p>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'follow' }> <virtual if={ notification.type == 'follow' }>
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p><i class="fa fa-user-plus"></i>{ notification.user.name }</p> <p>%fa:user-plus%{ notification.user.name }</p>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'reply' }> <virtual if={ notification.type == 'reply' }>
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p><i class="fa fa-reply"></i>{ notification.post.user.name }</p> <p>%fa:reply%{ notification.post.user.name }</p>
<p class="post-preview">{ getPostSummary(notification.post) }</p> <p class="post-preview">{ getPostSummary(notification.post) }</p>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'mention' }> <virtual if={ notification.type == 'mention' }>
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p><i class="fa fa-at"></i>{ notification.post.user.name }</p> <p>%fa:at%{ notification.post.user.name }</p>
<p class="post-preview">{ getPostSummary(notification.post) }</p> <p class="post-preview">{ getPostSummary(notification.post) }</p>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'poll_vote' }> <virtual if={ notification.type == 'poll_vote' }>
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p><i class="fa fa-pie-chart"></i>{ notification.user.name }</p> <p>%fa:chart-pie%{ notification.user.name }</p>
<p class="post-ref">{ getPostSummary(notification.post) }</p> <p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
</div> </div>
</virtual> </virtual>
<style> <style>
@ -82,20 +82,13 @@
.post-ref .post-ref
&:before, &:after [data-fa]
font-family FontAwesome
font-size 1em font-size 1em
font-weight normal font-weight normal
font-style normal font-style normal
display inline-block display inline-block
margin-right 3px margin-right 3px
&:before
content "\f10d"
&:after
content "\f10e"
&.repost, &.quote &.repost, &.quote
.text p i .text p i
color #77B255 color #77B255

33
src/web/app/mobile/tags/notification.tag
View file

@ -9,7 +9,9 @@
<mk-reaction-icon reaction={ notification.reaction }/> <mk-reaction-icon reaction={ notification.reaction }/>
<a href={ '/' + notification.user.username }>{ notification.user.name }</a> <a href={ '/' + notification.user.username }>{ notification.user.name }</a>
</p> </p>
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
</a>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'repost' }> <virtual if={ notification.type == 'repost' }>
@ -18,10 +20,12 @@
</a> </a>
<div class="text"> <div class="text">
<p> <p>
<i class="fa fa-retweet"></i> %fa:retweet%
<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a> <a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
</p> </p>
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a> <a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
</a>
</div> </div>
</virtual> </virtual>
<virtual if={ notification.type == 'quote' }> <virtual if={ notification.type == 'quote' }>
@ -30,7 +34,7 @@
</a> </a>
<div class="text"> <div class="text">
<p> <p>
<i class="fa fa-quote-left"></i> %fa:quote-left%
<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a> <a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
</p> </p>
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
@ -42,7 +46,7 @@
</a> </a>
<div class="text"> <div class="text">
<p> <p>
<i class="fa fa-user-plus"></i> %fa:user-plus%
<a href={ '/' + notification.user.username }>{ notification.user.name }</a> <a href={ '/' + notification.user.username }>{ notification.user.name }</a>
</p> </p>
</div> </div>
@ -53,7 +57,7 @@
</a> </a>
<div class="text"> <div class="text">
<p> <p>
<i class="fa fa-reply"></i> %fa:reply%
<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a> <a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
</p> </p>
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
@ -65,7 +69,7 @@
</a> </a>
<div class="text"> <div class="text">
<p> <p>
<i class="fa fa-at"></i> %fa:at%
<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a> <a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
</p> </p>
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
@ -77,10 +81,12 @@
</a> </a>
<div class="text"> <div class="text">
<p> <p>
<i class="fa fa-pie-chart"></i> %fa:chart-pie%
<a href={ '/' + notification.user.username }>{ notification.user.name }</a> <a href={ '/' + notification.user.username }>{ notification.user.name }</a>
</p> </p>
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
</a>
</div> </div>
</virtual> </virtual>
<style> <style>
@ -132,20 +138,13 @@
.post-ref .post-ref
color rgba(0, 0, 0, 0.7) color rgba(0, 0, 0, 0.7)
&:before, &:after [data-fa]
font-family FontAwesome
font-size 1em font-size 1em
font-weight normal font-weight normal
font-style normal font-style normal
display inline-block display inline-block
margin-right 3px margin-right 3px
&:before
content "\f10d"
&:after
content "\f10e"
&.repost, &.quote &.repost, &.quote
.text p i .text p i
color #77B255 color #77B255

10
src/web/app/mobile/tags/notifications.tag
View file

@ -2,14 +2,14 @@
<div class="notifications" if={ notifications.length != 0 }> <div class="notifications" if={ notifications.length != 0 }>
<virtual each={ notification, i in notifications }> <virtual each={ notification, i in notifications }>
<mk-notification notification={ notification }/> <mk-notification notification={ notification }/>
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p> <p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span>%fa:angle-up%{ notification._datetext }</span><span>%fa:angle-down%{ notifications[i + 1]._datetext }</span></p>
</virtual> </virtual>
</div> </div>
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }> <button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' } <virtual if={ fetchingMoreNotifications }>%fa:spinner .pluse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
</button> </button>
<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p> <p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="loading" if={ loading }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<style> <style>
:scope :scope
display block display block
@ -58,7 +58,7 @@
color #555 color #555
border-top solid 1px rgba(0, 0, 0, 0.05) border-top solid 1px rgba(0, 0, 0, 0.05)
> i > [data-fa]
margin-right 4px margin-right 4px
> .empty > .empty
@ -73,7 +73,7 @@
text-align center text-align center
color #aaa color #aaa
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>

8
src/web/app/mobile/tags/page/drive.tag
View file

@ -12,11 +12,11 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey Drive'; document.title = 'Misskey Drive';
ui.trigger('title', '<i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-drive-page.drive%'); ui.trigger('title', '%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%');
ui.trigger('func', () => { ui.trigger('func', () => {
this.refs.ui.refs.browser.openContextMenu(); this.refs.ui.refs.browser.openContextMenu();
}, 'ellipsis-h'); }, '%fa:ellipsis-h%');
this.refs.ui.refs.browser.on('begin-fetch', () => { this.refs.ui.refs.browser.on('begin-fetch', () => {
Progress.start(); Progress.start();
@ -37,7 +37,7 @@
history.pushState(null, title, '/i/drive'); history.pushState(null, title, '/i/drive');
document.title = title; document.title = title;
ui.trigger('title', '<i class="fa fa-cloud"></i>%i18n:mobile.tags.mk-drive-page.drive%'); ui.trigger('title', '%fa:cloud%%i18n:mobile.tags.mk-drive-page.drive%');
}); });
this.refs.ui.refs.browser.on('open-folder', (folder, silent) => { this.refs.ui.refs.browser.on('open-folder', (folder, silent) => {
@ -50,7 +50,7 @@
document.title = title; document.title = title;
// TODO: escape html characters in folder.name // TODO: escape html characters in folder.name
ui.trigger('title', '<i class="fa fa-folder-open"></i>' + folder.name); ui.trigger('title', '%fa:R folder-open%' + folder.name);
}); });
this.refs.ui.refs.browser.on('open-file', (file, silent) => { this.refs.ui.refs.browser.on('open-file', (file, silent) => {

4
src/web/app/mobile/tags/page/entrance/signup.tag
View file

@ -1,6 +1,6 @@
<mk-entrance-signup> <mk-entrance-signup>
<mk-signup/> <mk-signup/>
<button class="cancel" type="button" onclick={ parent.signin } title="%i18n:mobile.tags.mk-entrance-signup.cancel%"><i class="fa fa-times"></i></button> <button class="cancel" type="button" onclick={ parent.signin } title="%i18n:mobile.tags.mk-entrance-signup.cancel%">%fa:times%</button>
<style> <style>
:scope :scope
display block display block
@ -31,7 +31,7 @@
&:active &:active
color #222 color #222
> i > [data-fa]
padding 14px padding 14px
</style> </style>

4
src/web/app/mobile/tags/page/home.tag
View file

@ -22,12 +22,12 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey' document.title = 'Misskey'
ui.trigger('title', '<i class="fa fa-home"></i>%i18n:mobile.tags.mk-home.home%'); ui.trigger('title', '%fa:home%%i18n:mobile.tags.mk-home.home%');
document.documentElement.style.background = '#313a42'; document.documentElement.style.background = '#313a42';
ui.trigger('func', () => { ui.trigger('func', () => {
openPostForm(); openPostForm();
}, 'pencil'); }, '%fa:pencil-alt%');
Progress.start(); Progress.start();

2
src/web/app/mobile/tags/page/messaging-room.tag
View file

@ -24,7 +24,7 @@
document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${user.name} | Misskey`; document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${user.name} | Misskey`;
// TODO: ユーザー名をエスケープ // TODO: ユーザー名をエスケープ
ui.trigger('title', '<i class="fa fa-comments-o"></i>' + user.name); ui.trigger('title', '%fa:R comments%' + user.name);
}); });
}); });
</script> </script>

2
src/web/app/mobile/tags/page/messaging.tag
View file

@ -13,7 +13,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey | %i18n:mobile.tags.mk-messaging-page.message%'; document.title = 'Misskey | %i18n:mobile.tags.mk-messaging-page.message%';
ui.trigger('title', '<i class="fa fa-comments-o"></i>%i18n:mobile.tags.mk-messaging-page.message%'); ui.trigger('title', '%fa:R comments%%i18n:mobile.tags.mk-messaging-page.message%');
this.refs.ui.refs.index.on('navigate-user', user => { this.refs.ui.refs.index.on('navigate-user', user => {
this.page('/i/messaging/' + user.username); this.page('/i/messaging/' + user.username);

4
src/web/app/mobile/tags/page/notifications.tag
View file

@ -14,12 +14,12 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey | %i18n:mobile.tags.mk-notifications-page.notifications%'; document.title = 'Misskey | %i18n:mobile.tags.mk-notifications-page.notifications%';
ui.trigger('title', '<i class="fa fa-bell-o"></i>%i18n:mobile.tags.mk-notifications-page.notifications%'); ui.trigger('title', '%fa:R bell%%i18n:mobile.tags.mk-notifications-page.notifications%');
document.documentElement.style.background = '#313a42'; document.documentElement.style.background = '#313a42';
ui.trigger('func', () => { ui.trigger('func', () => {
this.readAll(); this.readAll();
}, 'check'); }, '%fa:check%');
Progress.start(); Progress.start();

9
src/web/app/mobile/tags/page/post.tag
View file

@ -1,11 +1,11 @@
<mk-post-page> <mk-post-page>
<mk-ui ref="ui"> <mk-ui ref="ui">
<main if={ !parent.fetching }> <main if={ !parent.fetching }>
<a if={ parent.post.next } href={ parent.post.next }><i class="fa fa-angle-up"></i>%i18n:mobile.tags.mk-post-page.next%</a> <a if={ parent.post.next } href={ parent.post.next }>%fa:angle-up%%i18n:mobile.tags.mk-post-page.next%</a>
<div> <div>
<mk-post-detail ref="post" post={ parent.post }/> <mk-post-detail ref="post" post={ parent.post }/>
</div> </div>
<a if={ parent.post.prev } href={ parent.post.prev }><i class="fa fa-angle-down"></i>%i18n:mobile.tags.mk-post-page.prev%</a> <a if={ parent.post.prev } href={ parent.post.prev }>%fa:angle-down%%i18n:mobile.tags.mk-post-page.prev%</a>
</main> </main>
</mk-ui> </mk-ui>
<style> <style>
@ -40,8 +40,9 @@
@media (min-width 500px) @media (min-width 500px)
margin-bottom 16px margin-bottom 16px
> i > [data-fa]
margin-right 4px margin-right 4px
</style> </style>
<script> <script>
import ui from '../../scripts/ui-event'; import ui from '../../scripts/ui-event';
@ -54,7 +55,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey'; document.title = 'Misskey';
ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>%i18n:mobile.tags.mk-post-page.title%'); ui.trigger('title', '%fa:R sticky-note%%i18n:mobile.tags.mk-post-page.title%');
document.documentElement.style.background = '#313a42'; document.documentElement.style.background = '#313a42';
Progress.start(); Progress.start();

2
src/web/app/mobile/tags/page/search.tag
View file

@ -13,7 +13,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey` document.title = `%i18n:mobile.tags.mk-search-page.search%: ${this.opts.query} | Misskey`
// TODO: クエリをHTMLエスケープ // TODO: クエリをHTMLエスケープ
ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query); ui.trigger('title', '%fa:search%' + this.opts.query);
document.documentElement.style.background = '#313a42'; document.documentElement.style.background = '#313a42';
Progress.start(); Progress.start();

4
src/web/app/mobile/tags/page/selectdrive.tag
View file

@ -1,8 +1,8 @@
<mk-selectdrive-page> <mk-selectdrive-page>
<header> <header>
<h1>%i18n:mobile.tags.mk-selectdrive-page.select-file%<span class="count" if={ files.length > 0 }>({ files.length })</span></h1> <h1>%i18n:mobile.tags.mk-selectdrive-page.select-file%<span class="count" if={ files.length > 0 }>({ files.length })</span></h1>
<button class="upload" onclick={ upload }><i class="fa fa-upload"></i></button> <button class="upload" onclick={ upload }>%fa:upload%</button>
<button if={ multiple } class="ok" onclick={ ok }><i class="fa fa-check"></i></button> <button if={ multiple } class="ok" onclick={ ok }>%fa:check%</button>
</header> </header>
<mk-drive ref="browser" select-file={ true } multiple={ multiple } is-naked={ true } top={ 42 }/> <mk-drive ref="browser" select-file={ true } multiple={ multiple } is-naked={ true } top={ 42 }/>

18
src/web/app/mobile/tags/page/settings.tag
View file

@ -11,7 +11,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%'; document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
ui.trigger('title', '<i class="fa fa-cog"></i>%i18n:mobile.tags.mk-settings-page.settings%'); ui.trigger('title', '%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%');
document.documentElement.style.background = '#313a42'; document.documentElement.style.background = '#313a42';
}); });
</script> </script>
@ -20,14 +20,14 @@
<mk-settings> <mk-settings>
<p><mk-raw content={ '%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + I.name + '</b>') }/></p> <p><mk-raw content={ '%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + I.name + '</b>') }/></p>
<ul> <ul>
<li><a href="./settings/profile"><i class="fa fa-user"></i>%i18n:mobile.tags.mk-settings-page.profile%<i class="fa fa-angle-right"></i></a></li> <li><a href="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li>
<li><a href="./settings/authorized-apps"><i class="fa fa-puzzle-piece"></i>%i18n:mobile.tags.mk-settings-page.applications%<i class="fa fa-angle-right"></i></a></li> <li><a href="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</a></li>
<li><a href="./settings/twitter"><i class="fa fa-twitter"></i>%i18n:mobile.tags.mk-settings-page.twitter-integration%<i class="fa fa-angle-right"></i></a></li> <li><a href="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li>
<li><a href="./settings/signin-history"><i class="fa fa-sign-in"></i>%i18n:mobile.tags.mk-settings-page.signin-history%<i class="fa fa-angle-right"></i></a></li> <li><a href="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
<li><a href="./settings/api"><i class="fa fa-key"></i>%i18n:mobile.tags.mk-settings-page.api%<i class="fa fa-angle-right"></i></a></li> <li><a href="./settings/api">%fa:key%%i18n:mobile.tags.mk-settings-page.api%%fa:angle-right%</a></li>
</ul> </ul>
<ul> <ul>
<li><a onclick={ signout }><i class="fa fa-power-off"></i>%i18n:mobile.tags.mk-settings-page.signout%</a></li> <li><a onclick={ signout }>%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
</ul> </ul>
<p><small>ver { _VERSION_ } (葵 aoi)</small></p> <p><small>ver { _VERSION_ } (葵 aoi)</small></p>
<style> <style>
@ -78,10 +78,10 @@
line-height $height line-height $height
color #4d635e color #4d635e
> i:nth-of-type(1) > [data-fa]:nth-of-type(1)
margin-right 4px margin-right 4px
> i:nth-of-type(2) > [data-fa]:nth-of-type(2)
display block display block
position absolute position absolute
top 0 top 0

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