eris/calckey
1
0
Fork 0
Code Pull requests Projects Releases Packages Wiki Activity

#16

Browse source
This commit is contained in:
syuilo 2017-01-12 05:55:38 +09:00
parent 8b273e215f
commit 520299c2b4
169 changed files with 14582 additions and 14865 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

323
gulpfile.ts
View file

@ -189,231 +189,6 @@ gulp.task('build:client:scripts', done => {
.transform(ls) .transform(ls)
.transform(aliasify, aliasifyConfig) .transform(aliasify, aliasifyConfig)
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
gutil.log('Build Tag: ' + file);
return source;
}))
// tagの{}の''を不要にする (その代わりスタイルの記法は使えなくなるけど)
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
const html = tag.sections.filter(s => s.name == 'html')[0];
html.lines = html.lines.map(line => {
if (line.replace(/\t/g, '')[0] === '|') {
return line;
} else {
return line.replace(/([+=])\s?\{(.+?)\}/g, '$1"{$2}"');
}
});
const styles = tag.sections.filter(s => s.name == 'style');
if (styles.length == 0) {
return tag.compile();
}
styles.forEach(style => {
let head = style.lines.shift();
head = head.replace(/([+=])\s?\{(.+?)\}/g, '$1"{$2}"');
style.lines.unshift(head);
});
return tag.compile();
}))
// tagの@hogeをref='hoge'にする
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
const html = tag.sections.filter(s => s.name == 'html')[0];
html.lines = html.lines.map(line => {
if (line.indexOf('@') === -1) {
return line;
} else if (line.replace(/\t/g, '')[0] === '|') {
return line;
} else {
while (line.match(/[^\s']@[a-z-]+/) !== null) {
const match = line.match(/@[a-z-]+/);
let name = match[0];
if (line[line.indexOf(name) + name.length] === '(') {
line = line.replace(name + '(', '(ref=\'' + camelCase(name.substr(1)) + '\',');
} else {
line = line.replace(name, '(ref=\'' + camelCase(name.substr(1)) + '\')');
}
}
return line;
}
});
return tag.compile();
function camelCase(str): string {
return str.replace(/-([^\s])/g, (match, group1) => {
return group1.toUpperCase();
});
}
}))
// tagのchain-caseをcamelCaseにする
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
const html = tag.sections.filter(s => s.name == 'html')[0];
html.lines = html.lines.map(line => {
(line.match(/\{.+?\}/g) || []).forEach(x => {
line = line.replace(x, camelCase(x));
});
return line;
});
return tag.compile();
function camelCase(str): string {
str = str.replace(/([a-z\-]+):/g, (match, group1) => {
return group1.replace(/\-/g, '###') + ':';
});
str = str.replace(/'(.+?)'/g, (match, group1) => {
return "'" + group1.replace(/\-/g, '###') + "'";
});
str = str.replace(/-([^\s0-9])/g, (match, group1) => {
return group1.toUpperCase();
});
str = str.replace(/###/g, '-');
return str;
}
}))
// tagのstyleの属性
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
const styles = tag.sections.filter(s => s.name == 'style');
if (styles.length == 0) {
return tag.compile();
}
styles.forEach(style => {
let head = style.lines.shift();
if (style.attr) {
style.attr = style.attr + ', type=\'stylus\', scoped';
} else {
style.attr = 'type=\'stylus\', scoped';
}
style.lines.unshift(head);
});
return tag.compile();
}))
// tagのstyleの定数
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
const styles = tag.sections.filter(s => s.name == 'style');
if (styles.length == 0) {
return tag.compile();
}
styles.forEach(style => {
const head = style.lines.shift();
style.lines.unshift('$theme-color = ' + config.themeColor);
style.lines.unshift('$theme-color-foreground = #fff');
style.lines.unshift(head);
});
return tag.compile();
}))
// tagのstyleを暗黙的に:scopeにする
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
const styles = tag.sections.filter(s => s.name == 'style');
if (styles.length == 0) {
return tag.compile();
}
styles.forEach((style, i) => {
if (i != 0) {
return;
}
const head = style.lines.shift();
style.lines = style.lines.map(line => {
return '\t' + line;
});
style.lines.unshift(':scope');
style.lines.unshift(head);
});
return tag.compile();
}))
// tagのtheme styleのパース
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
const styles = tag.sections.filter(s => s.name == 'style');
if (styles.length == 0) {
return tag.compile();
}
styles.forEach((style, i) => {
if (i == 0) {
return;
} else if (style.attr.substr(0, 6) != 'theme=') {
return;
}
const head = style.lines.shift();
style.lines = style.lines.map(line => {
return '\t' + line;
});
style.lines.unshift(':scope');
style.lines = style.lines.map(line => {
return '\t' + line;
});
style.lines.unshift('html[data-' + style.attr.match(/theme='(.+?)'/)[0] + ']');
style.lines.unshift(head);
});
return tag.compile();
}))
// tagのstyleおよびscriptのインデントを不要にする
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
const tag = new Tag(source);
tag.sections = tag.sections.map(section => {
if (section.name != 'html') {
section.indent++;
}
return section;
});
return tag.compile();
}))
// スペースでインデントされてないとエラーが出る // スペースでインデントされてないとエラーが出る
.transform(transformify((source, file) => { .transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source; if (file.substr(-4) !== '.tag') return source;
@ -423,6 +198,8 @@ gulp.task('build:client:scripts', done => {
.transform(transformify((source, file) => { .transform(transformify((source, file) => {
return source return source
.replace(/VERSION/g, `'${commit ? commit.hash : 'null'}'`) .replace(/VERSION/g, `'${commit ? commit.hash : 'null'}'`)
.replace(/\$theme\-color\-foreground/g, '#fff')
.replace(/\$theme\-color/g, config.themeColor)
.replace(/CONFIG\.theme-color/g, `'${config.themeColor}'`) .replace(/CONFIG\.theme-color/g, `'${config.themeColor}'`)
.replace(/CONFIG\.themeColor/g, `'${config.themeColor}'`) .replace(/CONFIG\.themeColor/g, `'${config.themeColor}'`)
.replace(/CONFIG\.api\.url/g, `'${config.scheme}://api.${config.host}'`) .replace(/CONFIG\.api\.url/g, `'${config.scheme}://api.${config.host}'`)
@ -435,7 +212,6 @@ gulp.task('build:client:scripts', done => {
})) }))
.transform(riotify, { .transform(riotify, {
template: 'pug',
type: 'livescript', type: 'livescript',
expr: false, expr: false,
compact: true, compact: true,
@ -446,17 +222,6 @@ gulp.task('build:client:scripts', done => {
} }
} }
}) })
// Riotが謎の空白を挿入する
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
return source.replace(/\s<mk\-ellipsis>/g, '<mk-ellipsis>');
}))
/*
// LiveScruptがHTMLクラスのショートカットを変な風に生成するのでそれを修正
.transform(transformify((source, file) => {
if (file.substr(-4) !== '.tag') return source;
return source.replace(/class="\{\(\{(.+?)\}\)\}"/g, 'class="{$1}"');
}))*/
.bundle() .bundle()
.pipe(source(entry.replace('./src/web/app/', './').replace('.ls', '.js'))); .pipe(source(entry.replace('./src/web/app/', './').replace('.ls', '.js')));
@ -531,87 +296,3 @@ gulp.task('build:client:pug', [
})) }))
.pipe(gulp.dest('./built/web/app/')); .pipe(gulp.dest('./built/web/app/'));
}); });
class Tag {
sections: {
name: string;
attr?: string;
indent: number;
lines: string[];
}[];
constructor(source) {
this.sections = [];
source = source
.replace(/\r\n/g, '\n')
.replace(/\n(\t+?)\n/g, '\n')
.replace(/\n+/g, '\n');
const html = {
name: 'html',
indent: 0,
lines: []
};
let flag = false;
source.split('\n').forEach((line, i) => {
const indent = line.lastIndexOf('\t') + 1;
if (i != 0 && indent == 0) {
flag = true;
}
if (!flag) {
source = source.replace(/^.*?\n/, '');
html.lines.push(i == 0 ? line : line.substr(1));
}
});
this.sections.push(html);
while (source != '') {
const line = source.substr(0, source.indexOf('\n'));
const root = line.match(/^\t*([a-z]+)(\.|\()?/)[1];
const beginIndent = line.lastIndexOf('\t') + 1;
flag = false;
const section = {
name: root,
attr: (line.match(/\((.+?)\)/) || [null, null])[1],
indent: beginIndent,
lines: []
};
source.split('\n').forEach((line, i) => {
const currentIndent = line.lastIndexOf('\t') + 1;
if (i != 0 && (currentIndent == beginIndent || currentIndent == 0)) {
flag = true;
}
if (!flag) {
if (i == 0 && line[line.length - 1] == '.') {
line = line.substr(0, line.length - 1);
}
if (i == 0 && line.indexOf('(') != -1) {
line = line.substr(0, line.indexOf('('));
}
source = source.replace(/^.*?\n/, '');
section.lines.push(i == 0 ? line.substr(beginIndent) : line.substr(beginIndent + 1));
}
});
this.sections.push(section);
}
}
compile(): string {
let dist = '';
this.sections.forEach((section, j) => {
dist += section.lines.map((line, i) => {
if (i == 0) {
const attr = section.attr != null ? '(' + section.attr + ')' : '';
const tail = j != 0 ? '.' : '';
return '\t'.repeat(section.indent) + line + attr + tail;
} else {
return '\t'.repeat(section.indent + 1) + line;
}
}).join('\n') + '\n';
});
return dist;
}
}

74
src/web/app/auth/tags/form.tag
View file

@ -1,39 +1,36 @@
mk-form <mk-form>
header <header>
h1 <h1><i>{ app.name }</i>があなたの<b>アカウント</b>に<b>アクセス</b>することを<b>許可</b>しますか？</h1><img src="{ app.icon_url + '?thumbnail&amp;size=64' }"/>
i { app.name } </header>
| があなたの <div class="app">
b アカウント <section>
| に <h2>{ app.name }</h2>
b アクセス <p class="nid">{ app.name_id }</p>
| することを <p class="description">{ app.description }</p>
b 許可 </section>
| しますか？ <section>
img(src={ app.icon_url + '?thumbnail&size=64' }) <h2>このアプリは次の権限を要求しています:</h2>
div.app <ul>
section <virtual each="{ p in app.permission }">
h2 { app.name } <li if="{ p == 'account-read' }">アカウントの情報を見る。</li>
p.nid { app.name_id } <li if="{ p == 'account-write' }">アカウントの情報を操作する。</li>
p.description { app.description } <li if="{ p == 'post-write' }">投稿する。</li>
section <li if="{ p == 'like-write' }">いいねしたりいいね解除する。</li>
h2 このアプリは次の権限を要求しています: <li if="{ p == 'following-write' }">フォローしたりフォロー解除する。</li>
ul <li if="{ p == 'drive-read' }">ドライブを見る。</li>
virtual(each={ p in app.permission }) <li if="{ p == 'drive-write' }">ドライブを操作する。</li>
li(if={ p == 'account-read' }) アカウントの情報を見る。 <li if="{ p == 'notification-read' }">通知を見る。</li>
li(if={ p == 'account-write' }) アカウントの情報を操作する。 <li if="{ p == 'notification-write' }">通知を操作する。</li>
li(if={ p == 'post-write' }) 投稿する。 </virtual>
li(if={ p == 'like-write' }) いいねしたりいいね解除する。 </ul>
li(if={ p == 'following-write' }) フォローしたりフォロー解除する。 </section>
li(if={ p == 'drive-read' }) ドライブを見る。 </div>
li(if={ p == 'drive-write' }) ドライブを操作する。 <div class="action">
li(if={ p == 'notification-read' }) 通知を見る。 <button onclick="{ cancel }">キャンセル</button>
li(if={ p == 'notification-write' }) 通知を操作する。 <button onclick="{ accept }">アクセスを許可</button>
</div>
div.action <style type="stylus">
button(onclick={ cancel }) キャンセル :scope
button(onclick={ accept }) アクセスを許可
style.
display block display block
> header > header
@ -107,7 +104,8 @@ style.
> h1 > h1
font-size 16px font-size 16px
script. </style>
<script>
@mixin \api @mixin \api
@session = @opts.session @session = @opts.session
@ -124,3 +122,5 @@ script.
token: @session.token token: @session.token
.then ~> .then ~>
@trigger \accepted @trigger \accepted
</script>
</mk-form>

57
src/web/app/auth/tags/index.tag
View file

@ -1,27 +1,31 @@
mk-index <mk-index>
main(if={ SIGNIN }) <main if="{ SIGNIN }">
p.fetching(if={ fetching }) <p class="fetching" if="{ fetching }">読み込み中
| 読み込み中 <mk-ellipsis></mk-ellipsis>
mk-ellipsis </p>
mk-form@form(if={ state == null && !fetching }, session={ session }) <mk-form ref="form" if="{ state == null &amp;&amp; !fetching }" session="{ session }"></mk-form>
div.denied(if={ state == 'denied' }) <div class="denied" if="{ state == 'denied' }">
h1 アプリケーションの連携をキャンセルしました。 <h1>アプリケーションの連携をキャンセルしました。</h1>
p このアプリがあなたのアカウントにアクセスすることはありません。 <p>このアプリがあなたのアカウントにアクセスすることはありません。</p>
div.accepted(if={ state == 'accepted' }) </div>
h1 { session.app.is_authorized ? 'このアプリは既に連携済みです' : 'アプリケーションの連携を許可しました'} <div class="accepted" if="{ state == 'accepted' }">
p(if={ session.app.callback_url }) <h1>{ session.app.is_authorized ? 'このアプリは既に連携済みです' : 'アプリケーションの連携を許可しました'}</h1>
| アプリケーションに戻っています <p if="{ session.app.callback_url }">アプリケーションに戻っています
mk-ellipsis <mk-ellipsis></mk-ellipsis>
p(if={ !session.app.callback_url }) アプリケーションに戻って、やっていってください。 </p>
div.error(if={ state == 'fetch-session-error' }) <p if="{ !session.app.callback_url }">アプリケーションに戻って、やっていってください。</p>
p セッションが存在しません。 </div>
main.signin(if={ !SIGNIN }) <div class="error" if="{ state == 'fetch-session-error' }">
h1 サインインしてください <p>セッションが存在しません。</p>
mk-signin </div>
footer </main>
img(src='/_/resources/auth/logo.svg', alt='Misskey') <main class="signin" if="{ !SIGNIN }">
<h1>サインインしてください</h1>
style. <mk-signin></mk-signin>
</main>
<footer><img src="/_/resources/auth/logo.svg" alt="Misskey"/></footer>
<style type="stylus">
:scope
display block display block
> main > main
@ -82,7 +86,8 @@ style.
height 64px height 64px
margin 0 auto margin 0 auto
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@ -127,3 +132,5 @@ script.
if @session.app.callback_url if @session.app.callback_url
location.href = @session.app.callback_url + '?token=' + @session.token location.href = @session.app.callback_url + '?token=' + @session.token
</script>
</mk-index>

14
src/web/app/common/tags/copyright.tag
View file

@ -1,5 +1,11 @@
mk-copyright <mk-copyright><span>(c) syuilo 2014-2017</span>
span (c) syuilo 2014-2017 <style type="stylus">
:scope
style.
display block display block
</style>
</mk-copyright>

25
src/web/app/common/tags/core-error.tag
View file

@ -1,14 +1,12 @@
mk-core-error <mk-core-error>
//i: i.fa.fa-times-circle <!--i: i.fa.fa-times-circle--><img src="/_/resources/error.jpg" alt=""/>
img(src='/_/resources/error.jpg', alt='') <h1>
h1: mk-ripple-string サーバーに接続できません <mk-ripple-string>サーバーに接続できません</mk-ripple-string>
p.text </h1>
| インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから <p class="text">インターネット回線に問題があるか、サーバーがダウンまたはメンテナンスしている可能性があります。しばらくしてから<a onclick="{ retry }">再度お試し</a>ください。</p>
a(onclick={ retry }) 再度お試し <p class="thanks">いつもMisskeyをご利用いただきありがとうございます。</p>
| ください。 <style type="stylus">
p.thanks いつもMisskeyをご利用いただきありがとうございます。 :scope
style.
position fixed position fixed
z-index 16385 z-index 16385
top 0 top 0
@ -57,7 +55,10 @@ style.
color #aaa color #aaa
border-top solid 1px #eee border-top solid 1px #eee
script. </style>
<script>
@retry = ~> @retry = ~>
@unmount! @unmount!
@opts.retry! @opts.retry!
</script>
</mk-core-error>

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

@ -1,9 +1,6 @@
mk-ellipsis <mk-ellipsis><span>.</span><span>.</span><span>.</span>
span . <style type="stylus">
span . :scope
span .
style.
display inline display inline
> span > span
@ -23,3 +20,10 @@ style.
opacity 1 opacity 1
40% 40%
opacity 0 opacity 0
</style>
</mk-ellipsis>

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

@ -1,9 +1,11 @@
mk-file-type-icon <mk-file-type-icon><i class="fa fa-file-image-o" if="{ kind == 'image' }"></i>
i.fa.fa-file-image-o(if={ kind == 'image' }) <style type="stylus">
:scope
style.
display inline display inline
script. </style>
<script>
@file = @opts.file @file = @opts.file
@kind = @file.type.split \/ .0 @kind = @file.type.split \/ .0
</script>
</mk-file-type-icon>

23
src/web/app/common/tags/forkit.tag
View file

@ -1,11 +1,11 @@
mk-forkit <mk-forkit><a href="https://github.com/syuilo/misskey" target="_blank" title="View source on Github" aria-label="View source on Github">
a(href='https://github.com/syuilo/misskey', target='_blank', title='View source on Github', aria-label='View source on Github') <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="aria-hidden">
svg(width='80', height='80', viewBox='0 0 250 250', aria-hidden) <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
path(d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z') <path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>
path.octo-arm(d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2', fill='currentColor') <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
path(d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z', fill='currentColor') </svg></a>
<style type="stylus">
style. :scope
display block display block
position absolute position absolute
top 0 top 0
@ -35,3 +35,10 @@ style.
transform rotate(-25deg) transform rotate(-25deg)
40%, 80% 40%, 80%
transform rotate(10deg) transform rotate(10deg)
</style>
</mk-forkit>

25
src/web/app/common/tags/introduction.tag
View file

@ -1,12 +1,12 @@
mk-introduction <mk-introduction>
article <article>
h1 Misskeyとは？ <h1>Misskeyとは？</h1><p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p> <p>Twitter, Facebook, LINE, Google+ などを<del>パクって</del><i>参考にして</i>います。</p>
<p>Twitter, Facebook, LINE, Google+ などを<del>パクって</del><i>参考にして</i>います。</p> <p>無料で誰でも利用でき、広告は一切掲載していません。</p>
<p>無料で誰でも利用でき、広告は一切掲載していません。</p> <p><a href="{ CONFIG.urls.about }" target="_blank">もっと知りたい方はこちら</a></p>
<p><a href={ CONFIG.urls.about } target="_blank">もっと知りたい方はこちら</a></p> </article>
<style type="stylus">
style. :scope
display block display block
h1 h1
@ -20,3 +20,10 @@ style.
&:last-child &:last-child
margin 0 margin 0
text-align center text-align center
</style>
</mk-introduction>

11
src/web/app/common/tags/number.tag
View file

@ -1,9 +1,10 @@
mk-number <mk-number>
<style type="stylus">
style. :scope
display inline display inline
script. </style>
<script>
@on \mount ~> @on \mount ~>
# バグ？ https://github.com/riot/riot/issues/2103 # バグ？ https://github.com/riot/riot/issues/2103
#value = @opts.value #value = @opts.value
@ -13,3 +14,5 @@ script.
if max? then if value > max then value = max if max? then if value > max then value = max
@root.innerHTML = value.to-locale-string! @root.innerHTML = value.to-locale-string!
</script>
</mk-number>

11
src/web/app/common/tags/raw.tag
View file

@ -1,7 +1,8 @@
mk-raw <mk-raw>
<style type="stylus">
style. :scope
display inline display inline
script. </style>
@root.innerHTML = @opts.content <script>@root.innerHTML = @opts.content</script>
</mk-raw>

12
src/web/app/common/tags/ripple-string.tag
View file

@ -1,7 +1,6 @@
mk-ripple-string <mk-ripple-string><yield/>
<yield/> <style type="stylus">
:scope
style.
display inline display inline
> span > span
@ -13,7 +12,8 @@ style.
25% 25%
opacity 0.5 opacity 0.5
script. </style>
<script>
@on \mount ~> @on \mount ~>
text = @root.innerHTML text = @root.innerHTML
@root.innerHTML = '' @root.innerHTML = ''
@ -22,3 +22,5 @@ script.
ce.innerHTML = c ce.innerHTML = c
ce.style.animation-delay = (i / 10) + 's' ce.style.animation-delay = (i / 10) + 's'
@root.append-child ce @root.append-child ce
</script>
</mk-ripple-string>

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

@ -1,23 +1,15 @@
mk-signin <mk-signin>
form(onsubmit={ onsubmit }, class={ signing: signing }) <form class="{ signing: signing }" onsubmit="{ onsubmit }">
label.user-name <label class="user-name">
input@username( <input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="ユーザー名" autofocus="autofocus" required="required" oninput="{ oninput }"/><i class="fa fa-at"></i>
type='text' </label>
pattern='^[a-zA-Z0-9\-]+$' <label class="password">
placeholder='ユーザー名' <input ref="password" type="password" placeholder="パスワード" required="required"/><i class="fa fa-lock"></i>
autofocus </label>
required <button type="submit" disabled="{ signing }">{ signing ? 'やっています...' : 'サインイン' }</button>
oninput={ oninput }) </form>
i.fa.fa-at <style type="stylus">
label.password :scope
input@password(
type='password'
placeholder='パスワード'
required)
i.fa.fa-lock
button(type='submit', disabled={ signing }) { signing ? 'やっています...' : 'サインイン' }
style.
display block display block
> form > form
@ -103,7 +95,8 @@ style.
&:disabled &:disabled
opacity 0.7 opacity 0.7
script. </style>
<script>
@mixin \api @mixin \api
@user = null @user = null
@ -134,3 +127,5 @@ script.
@update! @update!
false false
</script>
</mk-signin>

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

@ -1,107 +1,45 @@
mk-signup <mk-signup>
form(onsubmit={ onsubmit }, autocomplete='off') <form onsubmit="{ onsubmit }" autocomplete="off">
label.username <label class="username">
p.caption <p class="caption"><i class="fa fa-at"></i>ユーザー名</p>
i.fa.fa-at <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 != '' &amp;&amp; username-state != 'invalidFormat' &amp;&amp; username-state != 'minRange' &amp;&amp; username-state != 'maxRange' }">{ CONFIG.url + '/' + refs.username.value }</p>
input@username( <p class="info" if="{ usernameState == 'wait' }" style="color:#999"><i class="fa fa-fw fa-spinner fa-pulse"></i>確認しています...</p>
type='text' <p class="info" if="{ usernameState == 'ok' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>利用できます</p>
pattern='^[a-zA-Z0-9\-]{3,20}$' <p class="info" if="{ usernameState == 'unavailable' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>既に利用されています</p>
placeholder='a~z、A~Z、0~9、-' <p class="info" if="{ usernameState == 'error' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>通信エラー</p>
autocomplete='off' <p class="info" if="{ usernameState == 'invalid-format' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>a~z、A~Z、0~9、-(ハイフン)が使えます</p>
required <p class="info" if="{ usernameState == 'min-range' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>3文字以上でお願いします！</p>
onkeyup={ on-change-username }) <p class="info" if="{ usernameState == 'max-range' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>20文字以内でお願いします</p>
</label>
p.profile-page-url-preview(if={ refs.username.value != '' && username-state != 'invalid-format' && username-state != 'min-range' && username-state != 'max-range' }) { CONFIG.url + '/' + refs.username.value } <label class="password">
<p class="caption"><i class="fa fa-lock"></i>パスワード</p>
p.info(if={ username-state == 'wait' }, style='color:#999') <input ref="password" type="password" placeholder="8文字以上を推奨します" autocomplete="off" required="required" onkeyup="{ onChangePassword }"/>
i.fa.fa-fw.fa-spinner.fa-pulse <div class="meter" if="{ passwordStrength != '' }" data-strength="{ passwordStrength }">
| 確認しています... <div class="value" ref="passwordMetar"></div>
p.info(if={ username-state == 'ok' }, style='color:#3CB7B5') </div>
i.fa.fa-fw.fa-check <p class="info" if="{ passwordStrength == 'low' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>弱いパスワード</p>
| 利用できます <p class="info" if="{ passwordStrength == 'medium' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>まあまあのパスワード</p>
p.info(if={ username-state == 'unavailable' }, style='color:#FF1161') <p class="info" if="{ passwordStrength == 'high' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>強いパスワード</p>
i.fa.fa-fw.fa-exclamation-triangle </label>
| 既に利用されています <label class="retype-password">
p.info(if={ username-state == 'error' }, style='color:#FF1161') <p class="caption"><i class="fa fa-lock"></i>パスワード(再入力)</p>
i.fa.fa-fw.fa-exclamation-triangle <input ref="passwordRetype" type="password" placeholder="確認のため再入力してください" autocomplete="off" required="required" onkeyup="{ onChangePasswordRetype }"/>
| 通信エラー <p class="info" if="{ passwordRetypeState == 'match' }" style="color:#3CB7B5"><i class="fa fa-fw fa-check"></i>確認されました</p>
p.info(if={ username-state == 'invalid-format' }, style='color:#FF1161') <p class="info" if="{ passwordRetypeState == 'not-match' }" style="color:#FF1161"><i class="fa fa-fw fa-exclamation-triangle"></i>一致していません</p>
i.fa.fa-fw.fa-exclamation-triangle </label>
| a~z、A~Z、0~9、-(ハイフン)が使えます <label class="recaptcha">
p.info(if={ username-state == 'min-range' }, style='color:#FF1161') <p class="caption"><i class="fa fa-toggle-on" if="{ recaptchaed }"></i><i class="fa fa-toggle-off" if="{ !recaptchaed }"></i>認証</p>
i.fa.fa-fw.fa-exclamation-triangle <div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey="{ CONFIG.recaptcha.siteKey }"></div>
| 3文字以上でお願いします！ </label>
p.info(if={ username-state == 'max-range' }, style='color:#FF1161') <label class="agree-tou">
i.fa.fa-fw.fa-exclamation-triangle <input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
| 20文字以内でお願いします <p><a href="{ CONFIG.urls.about + '/tou' }" target="_blank">利用規約</a>に同意する</p>
</label>
label.password <button onclick="{ onsubmit }">アカウント作成</button>
p.caption </form>
i.fa.fa-lock <style type="stylus">
| パスワード :scope
input@password(
type='password'
placeholder='8文字以上を推奨します'
autocomplete='off'
required
onkeyup={ on-change-password })
div.meter(if={ password-strength != '' }, data-strength={ password-strength })
div.value@password-metar
p.info(if={ password-strength == 'low' }, style='color:#FF1161')
i.fa.fa-fw.fa-exclamation-triangle
| 弱いパスワード
p.info(if={ password-strength == 'medium' }, style='color:#3CB7B5')
i.fa.fa-fw.fa-check
| まあまあのパスワード
p.info(if={ password-strength == 'high' }, style='color:#3CB7B5')
i.fa.fa-fw.fa-check
| 強いパスワード
label.retype-password
p.caption
i.fa.fa-lock
| パスワード(再入力)
input@password-retype(
type='password'
placeholder='確認のため再入力してください'
autocomplete='off'
required
onkeyup={ on-change-password-retype })
p.info(if={ password-retype-state == 'match' }, style='color:#3CB7B5')
i.fa.fa-fw.fa-check
| 確認されました
p.info(if={ password-retype-state == 'not-match' }, style='color:#FF1161')
i.fa.fa-fw.fa-exclamation-triangle
| 一致していません
label.recaptcha
p.caption
i.fa.fa-toggle-on(if={ recaptchaed })
i.fa.fa-toggle-off(if={ !recaptchaed })
| 認証
div.g-recaptcha(
data-callback='onRecaptchaed'
data-expired-callback='onRecaptchaExpired'
data-sitekey={ CONFIG.recaptcha.site-key })
label.agree-tou
input(
name='agree-tou',
type='checkbox',
autocomplete='off',
required)
p
a(href={ CONFIG.urls.about + '/tou' }, target='_blank') 利用規約
| に同意する
button(onclick={ onsubmit })
| アカウント作成
style.
display block display block
min-width 302px min-width 302px
overflow hidden overflow hidden
@ -234,7 +172,8 @@ style.
&:active &:active
background darken($theme-color, 5%) background darken($theme-color, 5%)
script. </style>
<script>
@mixin \api @mixin \api
@mixin \get-password-strength @mixin \get-password-strength
@ -350,3 +289,5 @@ script.
locker.parent-node.remove-child locker locker.parent-node.remove-child locker
false false
</script>
</mk-signup>

15
src/web/app/common/tags/special-message.tag
View file

@ -1,8 +1,8 @@
mk-special-message <mk-special-message>
p(if={ m == 1 && d == 1 }) Happy New Year! <p if="{ m == 1 &amp;&amp; d == 1 }">Happy New Year! </p>
p(if={ m == 12 && d == 25 }) Merry Christmas! <p if="{ m == 12 &amp;&amp; d == 25 }">Merry Christmas!</p>
<style type="stylus">
style. :scope
display block display block
&:empty &:empty
@ -18,7 +18,10 @@ style.
color #fff color #fff
background #ff1036 background #ff1036
script. </style>
<script>
now = new Date! now = new Date!
@d = now.get-date! @d = now.get-date!
@m = now.get-month! + 1 @m = now.get-month! + 1
</script>
</mk-special-message>

12
src/web/app/common/tags/time.tag
View file

@ -1,10 +1,6 @@
mk-time <mk-time>
time(datetime={ opts.time }) <time datetime="{ opts.time }"><span if="{ mode == 'relative' }">{ relative }</span><span if="{ mode == 'absolute' }">{ absolute }</span><span if="{ mode == 'detail' }">{ absolute } ({ relative })</span></time>
span(if={ mode == 'relative' }) { relative } <script>
span(if={ mode == 'absolute' }) { absolute }
span(if={ mode == 'detail' }) { absolute } ({ relative })
script.
@time = new Date @opts.time @time = new Date @opts.time
@mode = @opts.mode || \relative @mode = @opts.mode || \relative
@tickid = null @tickid = null
@ -41,3 +37,5 @@ script.
| ago < 0s => '未来' | ago < 0s => '未来'
| _ => 'なぞのじかん' | _ => 'なぞのじかん'
@update! @update!
</script>
</mk-time>

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

@ -1,26 +1,17 @@
mk-uploader <mk-uploader>
ol(if={ uploads.length > 0 }) <ol if="{ uploads.length &gt; 0 }">
li(each={ uploads }) <li each="{ uploads }">
div.img(style='background-image: url({ img })') <div class="img" style="background-image: url({ img })"></div>
p.name <p class="name"><i class="fa fa-spinner fa-pulse"></i>{ name }</p>
i.fa.fa-spinner.fa-pulse <p class="status"><span class="initing" if="{ progress == undefined }">待機中
| { name } <mk-ellipsis></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.status <progress if="{ progress != undefined &amp;&amp; progress.value != progress.max }" value="{ progress.value }" max="{ progress.max }"></progress>
span.initing(if={ progress == undefined }) <div class="progress initing" if="{ progress == undefined }"></div>
| 待機中 <div class="progress waiting" if="{ progress != undefined &amp;&amp; progress.value == progress.max }"></div>
mk-ellipsis </li>
span.kb(if={ progress != undefined }) </ol>
| { String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') } <style type="stylus">
i KB :scope
= ' / '
| { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }
i KB
span.percentage(if={ progress != undefined }) { Math.floor((progress.value / progress.max) * 100) }
progress(if={ progress != undefined && progress.value != progress.max }, value={ progress.value }, max={ progress.max })
div.progress.initing(if={ progress == undefined })
div.progress.waiting(if={ progress != undefined && progress.value == progress.max })
style.
display block display block
overflow auto overflow auto
@ -147,7 +138,8 @@ style.
from {background-position: 0 0;} from {background-position: 0 0;}
to {background-position: -64px 32px;} to {background-position: -64px 32px;}
script. </style>
<script>
@mixin \i @mixin \i
@uploads = [] @uploads = []
@ -199,3 +191,5 @@ script.
@update! @update!
xhr.send data xhr.send data
</script>
</mk-uploader>

29
src/web/app/common/tags/url-preview.tag
View file

@ -1,14 +1,16 @@
mk-url-preview <mk-url-preview><a href="{ url }" target="_blank" title="{ url }" if="{ !loading }">
a(href={ url }, target='_blank', title={ url }, if={ !loading }) <div class="thumbnail" if="{ thumbnail }" style="{ 'background-image: url(' + thumbnail + ')' }"></div>
div.thumbnail(if={ thumbnail }, style={ 'background-image: url(' + thumbnail + ')' }) <article>
article <header>
header: h1 { title } <h1>{ title }</h1>
p { description } </header>
footer <p>{ description }</p>
img.icon(if={ icon }, src={ icon }) <footer><img class="icon" if="{ icon }" src="{ icon }"/>
p { sitename } <p>{ sitename }</p>
</footer>
style. </article></a>
<style type="stylus">
:scope
display block display block
font-size 16px font-size 16px
@ -85,7 +87,8 @@ style.
> article > article
padding 8px padding 8px
script. </style>
<script>
@mixin \api @mixin \api
@url = @opts.url @url = @opts.url
@ -103,3 +106,5 @@ script.
@loading = false @loading = false
@update! @update!
</script>
</mk-url-preview>

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

@ -1,13 +1,6 @@
mk-url <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>
a(href={ url }, target={ opts.target }) <style type="stylus">
span.schema { schema }// :scope
span.hostname { hostname }
span.port(if={ port != '' }) :{ port }
span.pathname(if={ pathname != '' }) { pathname }
span.query { query }
span.hash { hash }
style.
> a > a
&:after &:after
content "\f14c" content "\f14c"
@ -33,7 +26,8 @@ style.
> .hash > .hash
font-style italic font-style italic
script. </style>
<script>
@url = @opts.href @url = @opts.href
@on \before-mount ~> @on \before-mount ~>
@ -48,3 +42,5 @@ script.
@hash = parser.hash @hash = parser.hash
@update! @update!
</script>
</mk-url>

13
src/web/app/desktop/tags/analog-clock.tag
View file

@ -1,13 +1,14 @@
mk-analog-clock <mk-analog-clock>
canvas@canvas(width='256', height='256') <canvas ref="canvas" width="256" height="256"></canvas>
<style type="stylus">
style. :scope
> canvas > canvas
display block display block
width 256px width 256px
height 256px height 256px
script. </style>
<script>
@on \mount ~> @on \mount ~>
@draw! @draw!
@clock = set-interval @draw, 1000ms @clock = set-interval @draw, 1000ms
@ -100,3 +101,5 @@ script.
(canv-w / 2) + uv.x * length (canv-w / 2) + uv.x * length
(canv-h / 2) + uv.y * length (canv-h / 2) + uv.y * length
ctx.stroke! ctx.stroke!
</script>
</mk-analog-clock>

19
src/web/app/desktop/tags/autocomplete-suggestion.tag
View file

@ -1,11 +1,9 @@
mk-autocomplete-suggestion <mk-autocomplete-suggestion>
ol.users@users(if={ users.length > 0 }) <ol class="users" ref="users" if="{ users.length &gt; 0 }">
li(each={ users }, onclick={ parent.on-click }, onkeydown={ parent.on-keydown }, tabindex='-1') <li each="{ users }" onclick="{ parent.onClick }" onkeydown="{ parent.onKeydown }" tabindex="-1"><img class="avatar" src="{ avatar_url + '?thumbnail&amp;size=32' }" alt=""/><span class="name">{ name }</span><span class="username">@{ username }</span></li>
img.avatar(src={ avatar_url + '?thumbnail&size=32' }, alt='') </ol>
span.name { name } <style type="stylus">
span.username @{ username } :scope
style.
display block display block
position absolute position absolute
z-index 65535 z-index 65535
@ -76,7 +74,8 @@ style.
font-weight normal font-weight normal
color rgba(0, 0, 0, 0.3) color rgba(0, 0, 0, 0.3)
script. </style>
<script>
@mixin \api @mixin \api
@q = @opts.q @q = @opts.q
@ -180,3 +179,5 @@ script.
return true return true
node = node.parent-node node = node.parent-node
return false return false
</script>
</mk-autocomplete-suggestion>

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

@ -1,18 +1,8 @@
mk-big-follow-button <mk-big-follow-button>
button(if={ !init }, class={ wait: wait, follow: !user.is_following, unfollow: user.is_following }, <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 &amp;&amp; user.is_following }"><i class="fa fa-minus"></i>フォロー解除</span><span if="{ !wait &amp;&amp; !user.is_following }"><i class="fa fa-plus"></i>フォロー</span><i class="fa fa-spinner fa-pulse fa-fw" if="{ wait }"></i></button>
onclick={ onclick }, <div class="init" if="{ init }"><i class="fa fa-spinner fa-pulse fa-fw"></i></div>
disabled={ wait }, <style type="stylus">
title={ user.is_following ? 'フォロー解除' : 'フォローする' }) :scope
span(if={ !wait && user.is_following })
i.fa.fa-minus
| フォロー解除
span(if={ !wait && !user.is_following })
i.fa.fa-plus
| フォロー
i.fa.fa-spinner.fa-pulse.fa-fw(if={ wait })
div.init(if={ init }): i.fa.fa-spinner.fa-pulse.fa-fw
style.
display block display block
> button > button
@ -78,7 +68,8 @@ style.
cursor wait !important cursor wait !important
opacity 0.7 opacity 0.7
script. </style>
<script>
@mixin \api @mixin \api
@mixin \is-promise @mixin \is-promise
@mixin \stream @mixin \stream
@ -132,3 +123,5 @@ script.
.then ~> .then ~>
@wait = false @wait = false
@update! @update!
</script>
</mk-big-follow-button>

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

@ -1,7 +1,6 @@
mk-contextmenu <mk-contextmenu><yield />
| <yield /> <style type="stylus">
:scope
style.
$width = 240px $width = 240px
$item-height = 38px $item-height = 38px
$padding = 10px $padding = 10px
@ -93,8 +92,8 @@ style.
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
transition visibility 0s linear 0.2s transition visibility 0s linear 0.2s
script. </style>
<script>
@root.add-event-listener \contextmenu (e) ~> @root.add-event-listener \contextmenu (e) ~>
e.prevent-default! e.prevent-default!
@ -136,3 +135,5 @@ script.
return true return true
node = node.parent-node node = node.parent-node
return false return false
</script>
</mk-contextmenu>

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

@ -1,19 +1,15 @@
mk-crop-window <mk-crop-window>
mk-window@window(is-modal={ true }, width={ '800px' }) <mk-window ref="window" is-modal="{ true }" width="{ '800px' }"><yield to="header"><i class="fa fa-crop"></i>{ parent.title }</yield>
<yield to="header"> <yield to="content">
i.fa.fa-crop <div class="body"><img ref="img" src="{ parent.image.url + '?thumbnail&amp;quality=80' }" alt=""/></div>
| { parent.title } <div class="action">
</yield> <button class="skip" onclick="{ parent.skip }">クロップをスキップ</button>
<yield to="content"> <button class="cancel" onclick="{ parent.cancel }">キャンセル</button>
div.body <button class="ok" onclick="{ parent.ok }">決定</button>
img@img(src={ parent.image.url + '?thumbnail&quality=80' }, alt='') </div></yield>
div.action </mk-window>
button.skip(onclick={ parent.skip }) クロップをスキップ <style type="stylus">
button.cancel(onclick={ parent.cancel }) キャンセル :scope
button.ok(onclick={ parent.ok }) 決定
</yield>
style.
display block display block
> mk-window > mk-window
@ -160,7 +156,8 @@ style.
left 16px left 16px
width 150px width 150px
script. </style>
<script>
@mixin \cropper @mixin \cropper
@image = @opts.file @image = @opts.file
@ -187,3 +184,5 @@ script.
@cancel = ~> @cancel = ~>
@trigger \canceled @trigger \canceled
@refs.window.close! @refs.window.close!
</script>
</mk-crop-window>

51
src/web/app/desktop/tags/debugger.tag
View file

@ -1,26 +1,26 @@
mk-debugger <mk-debugger>
mk-window@window(is-modal={ false }, width={ '700px' }, height={ '550px' }) <mk-window ref="window" is-modal="{ false }" width="{ '700px' }" height="{ '550px' }"><yield to="header"><i class="fa fa-wrench"></i>Debugger</yield>
<yield to="header"> <yield to="content">
i.fa.fa-wrench <section class="progress-dialog">
| Debugger <h1>progress-dialog</h1>
</yield> <button class="style-normal" onclick="{ parent.progressDialog }"><i class="fa fa-play"></i></button>
<yield to="content"> <button class="style-normal" onclick="{ parent.progressDialogDestroy }"><i class="fa fa-stop"></i></button>
section.progress-dialog <label>
h1 progress-dialog <p>TITLE:</p>
button.style-normal(onclick={ parent.progress-dialog }): i.fa.fa-play <input ref="progressTitle" value="Title"/>
button.style-normal(onclick={ parent.progress-dialog-destroy }): i.fa.fa-stop </label>
label <label>
p TITLE: <p>VAL:</p>
input@progress-title(value='Title') <input ref="progressValue" type="number" oninput="{ parent.progressChange }" value="0"/>
label </label>
p VAL: <label>
input@progress-value(type='number', oninput={ parent.progress-change }, value=0) <p>MAX:</p>
label <input ref="progressMax" type="number" oninput="{ parent.progressChange }" value="100"/>
p MAX: </label>
input@progress-max(type='number', oninput={ parent.progress-change }, value=100) </section></yield>
</yield> </mk-window>
<style type="stylus">
style. :scope
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > i
@ -55,7 +55,8 @@ style.
display inline-block display inline-block
margin 8px margin 8px
script. </style>
<script>
@mixin \open-window @mixin \open-window
@on \mount ~> @on \mount ~>
@ -85,3 +86,5 @@ script.
@progress-dialog-destroy = ~> @progress-dialog-destroy = ~>
@progress-controller.trigger \close @progress-controller.trigger \close
</script>
</mk-debugger>

16
src/web/app/desktop/tags/detect-slow-internet-connection-notice.tag
View file

@ -1,8 +1,9 @@
mk-detect-slow-internet-connection-notice <mk-detect-slow-internet-connection-notice><i><i class="fa fa-exclamation"></i></i>
i: i.fa.fa-exclamation <div>
div: p インターネット回線が遅いようです。 <p>インターネット回線が遅いようです。</p>
</div>
style. <style type="stylus">
:scope
display block display block
pointer-events none pointer-events none
position fixed position fixed
@ -42,7 +43,8 @@ style.
margin 0 margin 0
padding 8px padding 8px
script. </style>
<script>
@mixin \net @mixin \net
@net.on \detected-slow-network ~> @net.on \detected-slow-network ~>
@ -54,3 +56,5 @@ script.
opacity: 0 opacity: 0
} 200ms \linear } 200ms \linear
, 10000ms , 10000ms
</script>
</mk-detect-slow-internet-connection-notice>

28
src/web/app/desktop/tags/dialog.tag
View file

@ -1,13 +1,16 @@
mk-dialog <mk-dialog>
div.bg@bg(onclick={ bg-click }) <div class="bg" ref="bg" onclick="{ bgClick }"></div>
div.main@main <div class="main" ref="main">
header@header <header ref="header"></header>
div.body@body <div class="body" ref="body"></div>
div.buttons <div class="buttons">
virtual(each={ opts.buttons }) <virtual each="{ opts.buttons }">
button(onclick={ _onclick }) { text } <button onclick="{ _onclick }">{ text }</button>
</virtual>
style. </div>
</div>
<style type="stylus">
:scope
display block display block
> .bg > .bg
@ -74,7 +77,8 @@ style.
color darken($theme-color, 10%) color darken($theme-color, 10%)
transition color 0s ease transition color 0s ease
script. </style>
<script>
@can-through = if opts.can-through? then opts.can-through else true @can-through = if opts.can-through? then opts.can-through else true
@opts.buttons.for-each (button) ~> @opts.buttons.for-each (button) ~>
button._onclick = ~> button._onclick = ~>
@ -139,3 +143,5 @@ script.
if @opts.on-through? if @opts.on-through?
@opts.on-through! @opts.on-through!
@close! @close!
</script>
</mk-dialog>

51
src/web/app/desktop/tags/donation.tag
View file

@ -1,25 +1,27 @@
mk-donation <mk-donation>
button.close(onclick={ close }) 閉じる x <button class="close" onclick="{ close }">閉じる x</button>
div.message <div class="message">
p 利用者の皆さま、 <p>利用者の皆さま、</p>
p <p>
| 今日は、日本の皆さまにお知らせがあります。 今日は、日本の皆さまにお知らせがあります。
| Misskeyの援助をお願いいたします。 Misskeyの援助をお願いいたします。
| 私は独立性を守るため、一切の広告を掲載いたしません。 私は独立性を守るため、一切の広告を掲載いたしません。
| 平均で約¥1,500の寄付をいただき、運営しております。 平均で約¥1,500の寄付をいただき、運営しております。
| 援助をしてくださる利用者はほんの少数です。 援助をしてくださる利用者はほんの少数です。
| お願いいたします。 お願いいたします。
| 今日、利用者の皆さまが¥300ご援助くだされば、募金活動を一時間で終了することができます。 今日、利用者の皆さまが¥300ご援助くだされば、募金活動を一時間で終了することができます。
| コーヒー1杯ほどの金額です。 コーヒー1杯ほどの金額です。
| Misskeyを活用しておられるのでしたら、広告を掲載せずにもう1年活動できるよう、どうか1分だけお時間をください。 Misskeyを活用しておられるのでしたら、広告を掲載せずにもう1年活動できるよう、どうか1分だけお時間をください。
| 私は小さな非営利個人ですが、サーバー、プログラム、人件費など、世界でトップクラスのウェブサイト同等のコストがかかります。 私は小さな非営利個人ですが、サーバー、プログラム、人件費など、世界でトップクラスのウェブサイト同等のコストがかかります。
| 利用者は何億人といますが、他の大きなサイトに比べてほんの少額の費用で運営しているのです。 利用者は何億人といますが、他の大きなサイトに比べてほんの少額の費用で運営しているのです。
| 人間の可能性、自由、そして機会。知識こそ、これらの基盤を成すものです。 人間の可能性、自由、そして機会。知識こそ、これらの基盤を成すものです。
| 私は、誰もが無料かつ制限なく知識に触れられるべきだと信じています。 私は、誰もが無料かつ制限なく知識に触れられるべきだと信じています。
| 募金活動を終了し、Misskeyの改善に戻れるようご援助ください。 募金活動を終了し、Misskeyの改善に戻れるようご援助ください。
| よろしくお願いいたします。 よろしくお願いいたします。
</p>
style. </div>
<style type="stylus">
:scope
display block display block
color #fff color #fff
background #03072C background #03072C
@ -43,7 +45,8 @@ style.
> p:first-child > p:first-child
margin-bottom 16px margin-bottom 16px
script. </style>
<script>
@mixin \api @mixin \api
@mixin \i @mixin \i
@ -61,3 +64,5 @@ script.
@unmount! @unmount!
@parent.parent.set-root-layout! @parent.parent.set-root-layout!
</script>
</mk-donation>

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

@ -1,14 +1,15 @@
mk-drive-browser-base-contextmenu <mk-drive-browser-base-contextmenu>
mk-contextmenu@ctx <mk-contextmenu ref="ctx">
ul <ul>
li(onclick={ parent.create-folder }): p <li onclick="{ parent.createFolder }">
i.fa.fa-folder-o <p><i class="fa fa-folder-o"></i>フォルダーを作成</p>
| フォルダーを作成 </li>
li(onclick={ parent.upload }): p <li onclick="{ parent.upload }">
i.fa.fa-upload <p><i class="fa fa-upload"></i>ファイルをアップロード</p>
| ファイルをアップロード </li>
</ul>
script. </mk-contextmenu>
<script>
@browser = @opts.browser @browser = @opts.browser
@on \mount ~> @on \mount ~>
@ -26,3 +27,5 @@ script.
@upload = ~> @upload = ~>
@browser.select-local-file! @browser.select-local-file!
@refs.ctx.close! @refs.ctx.close!
</script>
</mk-drive-browser-base-contextmenu>

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

@ -1,14 +1,10 @@
mk-drive-browser-window <mk-drive-browser-window>
mk-window@window(is-modal={ false }, width={ '800px' }, height={ '500px' }) <mk-window ref="window" is-modal="{ false }" width="{ '800px' }" height="{ '500px' }"><yield to="header"><i class="fa fa-cloud"></i>ドライブ</yield>
<yield to="header"> <yield to="content">
i.fa.fa-cloud <mk-drive-browser multiple="{ true }" folder="{ parent.folder }"></mk-drive-browser></yield>
| ドライブ </mk-window>
</yield> <style type="stylus">
<yield to="content"> :scope
mk-drive-browser(multiple={ true }, folder={ parent.folder })
</yield>
style.
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > i
@ -18,7 +14,8 @@ style.
> mk-drive-browser > mk-drive-browser
height 100% height 100%
script. </style>
<script>
@folder = if @opts.folder? then @opts.folder else null @folder = if @opts.folder? then @opts.folder else null
@on \mount ~> @on \mount ~>
@ -27,3 +24,5 @@ script.
@close = ~> @close = ~>
@refs.window.close! @refs.window.close!
</script>
</mk-drive-browser-window>

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

@ -1,46 +1,46 @@
mk-drive-browser <mk-drive-browser>
nav <nav>
div.path(oncontextmenu={ path-oncontextmenu }) <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 }"></mk-drive-browser-nav-folder>
virtual(each={ folder in hierarchy-folders }) <virtual each="{ folder in hierarchyFolders }"><span class="separator"><i class="fa fa-angle-right"></i></span>
span.separator: i.fa.fa-angle-right <mk-drive-browser-nav-folder folder="{ folder }"></mk-drive-browser-nav-folder>
mk-drive-browser-nav-folder(folder={ folder }) </virtual><span class="separator" if="{ folder != null }"><i class="fa fa-angle-right"></i></span><span class="folder current" if="{ folder != null }">{ folder.name }</span>
span.separator(if={ folder != null }): i.fa.fa-angle-right </div>
span.folder.current(if={ folder != null }) <input class="search" type="search" placeholder="&#xf002; 検索"/>
| { folder.name } </nav>
input.search(type='search', placeholder!='&#xf002; 検索') <div class="main { uploading: uploads.length &gt; 0, loading: loading }" ref="main" onmousedown="{ onmousedown }" ondragover="{ ondragover }" ondragenter="{ ondragenter }" ondragleave="{ ondragleave }" ondrop="{ ondrop }" oncontextmenu="{ oncontextmenu }">
div.main@main(class={ uploading: uploads.length > 0, loading: loading }, onmousedown={ onmousedown }, ondragover={ ondragover }, ondragenter={ ondragenter }, ondragleave={ ondragleave }, ondrop={ ondrop }, oncontextmenu={ oncontextmenu }) <div class="selection" ref="selection"></div>
div.selection@selection <div class="contents" ref="contents">
div.contents@contents <div class="folders" ref="foldersContainer" if="{ folders.length &gt; 0 }">
div.folders@folders-container(if={ folders.length > 0 }) <virtual each="{ folder in folders }">
virtual(each={ folder in folders }) <mk-drive-browser-folder class="folder" folder="{ folder }"></mk-drive-browser-folder>
mk-drive-browser-folder.folder(folder={ folder }) </virtual>
button(if={ more-folders }) <button if="{ moreFolders }">もっと読み込む</button>
| もっと読み込む </div>
div.files@files-container(if={ files.length > 0 }) <div class="files" ref="filesContainer" if="{ files.length &gt; 0 }">
virtual(each={ file in files }) <virtual each="{ file in files }">
mk-drive-browser-file.file(file={ file }) <mk-drive-browser-file class="file" file="{ file }"></mk-drive-browser-file>
button(if={ more-files }) </virtual>
| もっと読み込む <button if="{ moreFiles }">もっと読み込む</button>
div.empty(if={ files.length == 0 && folders.length == 0 && !loading }) </div>
p(if={ draghover }) <div class="empty" if="{ files.length == 0 &amp;&amp; folders.length == 0 &amp;&amp; !loading }">
| ドロップですか？いいですよ、ボクはカワイイですからね <p if="{ draghover }">ドロップですか？いいですよ、ボクはカワイイですからね</p>
p(if={ !draghover && folder == null }) <p if="{ !draghover &amp;&amp; folder == null }"><strong>ドライブには何もありません。</strong><br/>右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。</p>
strong ドライブには何もありません。 <p if="{ !draghover &amp;&amp; folder != null }">このフォルダーは空です</p>
br </div>
| 右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。 </div>
p(if={ !draghover && folder != null }) <div class="loading" if="{ loading }">
| このフォルダーは空です
div.loading(if={ loading }).
<div class="spinner"> <div class="spinner">
<div class="dot1"></div> <div class="dot1"></div>
<div class="dot2"></div> <div class="dot2"></div>
</div> </div>
div.dropzone(if={ draghover }) </div>
mk-uploader@uploader </div>
input@file-input(type='file', accept='*/*', multiple, tabindex='-1', onchange={ change-file-input }) <div class="dropzone" if="{ draghover }"></div>
<mk-uploader ref="uploader"></mk-uploader>
style. <input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" onchange="{ changeFileInput }"/>
<style type="stylus">
:scope
display block display block
> nav > nav
@ -236,7 +236,8 @@ style.
> input > input
display none display none
script. </style>
<script>
@mixin \api @mixin \api
@mixin \dialog @mixin \dialog
@mixin \input-dialog @mixin \input-dialog
@ -632,3 +633,5 @@ script.
return true return true
node = node.parent-node node = node.parent-node
return false return false
</script>
</mk-drive-browser>

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

@ -1,39 +1,43 @@
mk-drive-browser-file-contextmenu <mk-drive-browser-file-contextmenu>
mk-contextmenu@ctx: ul <mk-contextmenu ref="ctx">
li(onclick={ parent.rename }): p <ul>
i.fa.fa-i-cursor <li onclick="{ parent.rename }">
| 名前を変更 <p><i class="fa fa-i-cursor"></i>名前を変更</p>
li(onclick={ parent.copy-url }): p </li>
i.fa.fa-link <li onclick="{ parent.copyUrl }">
| URLをコピー <p><i class="fa fa-link"></i>URLをコピー</p>
li: a(href={ parent.file.url + '?download' }, download={ parent.file.name }, onclick={ parent.download }) </li>
i.fa.fa-download <li><a href="{ parent.file.url + '?download' }" download="{ parent.file.name }" onclick="{ parent.download }"><i class="fa fa-download"></i>ダウンロード</a></li>
| ダウンロード <li class="separator"></li>
li.separator <li onclick="{ parent.delete }">
li(onclick={ parent.delete }): p <p><i class="fa fa-trash-o"></i>削除</p>
i.fa.fa-trash-o </li>
| 削除 <li class="separator"></li>
li.separator <li class="has-child">
li.has-child <p>その他...<i class="fa fa-caret-right"></i></p>
p <ul>
| その他... <li onclick="{ parent.setAvatar }">
i.fa.fa-caret-right <p>アバターに設定</p>
ul </li>
li(onclick={ parent.set-avatar }): p <li onclick="{ parent.setBanner }">
| アバターに設定 <p>バナーに設定</p>
li(onclick={ parent.set-banner }): p </li>
| バナーに設定 <li onclick="{ parent.setWallpaper }">
li(onclick={ parent.set-wallpaper }): p <p>壁紙に設定</p>
| 壁紙に設定 </li>
li.has-child </ul>
p </li>
| アプリで開く... <li class="has-child">
i.fa.fa-caret-right <p>アプリで開く...<i class="fa fa-caret-right"></i></p>
ul <ul>
li(onclick={ parent.add-app }): p <li onclick="{ parent.addApp }">
| アプリを追加... <p>アプリを追加...</p>
</li>
script. </ul>
</li>
</ul>
</mk-contextmenu>
<script>
@mixin \api @mixin \api
@mixin \i @mixin \i
@mixin \update-avatar @mixin \update-avatar
@ -95,3 +99,5 @@ script.
@add-app = ~> @add-app = ~>
@NotImplementedException! @NotImplementedException!
</script>
</mk-drive-browser-file-contextmenu>

35
src/web/app/desktop/tags/drive/file.tag
View file

@ -1,19 +1,17 @@
mk-drive-browser-file(data-is-selected={ (file._selected || false).toString() }, data-is-contextmenu-showing={ is-contextmenu-showing.toString() }, onclick={ onclick }, oncontextmenu={ oncontextmenu }, draggable='true', ondragstart={ ondragstart }, ondragend={ ondragend }, title={ title }) <mk-drive-browser-file data-is-selected="{ (file._selected || false).toString() }" data-is-contextmenu-showing="{ isContextmenuShowing.toString() }" onclick="{ onclick }" oncontextmenu="{ oncontextmenu }" draggable="true" ondragstart="{ ondragstart }" ondragend="{ ondragend }" title="{ title }">
div.label(if={ I.avatar_id == file.id }) <div class="label" if="{ I.avatar_id == file.id }"><img src="/_/resources/label.svg"/>
img(src='/_/resources/label.svg') <p>アバター</p>
p アバター </div>
div.label(if={ I.banner_id == file.id }) <div class="label" if="{ I.banner_id == file.id }"><img src="/_/resources/label.svg"/>
img(src='/_/resources/label.svg') <p>バナー</p>
p バナー </div>
div.label(if={ I.data.wallpaper == file.id }) <div class="label" if="{ I.data.wallpaper == file.id }"><img src="/_/resources/label.svg"/>
img(src='/_/resources/label.svg') <p>壁紙</p>
p 壁紙 </div>
div.thumbnail: img(src={ file.url + '?thumbnail&size=128' }, alt='') <div class="thumbnail"><img src="{ file.url + '?thumbnail&amp;size=128' }" alt=""/></div>
p.name <p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if="{ file.name.lastIndexOf('.') != -1 }">{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
span { file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name } <style type="stylus">
span.ext(if={ file.name.lastIndexOf('.') != -1 }) { file.name.substr(file.name.lastIndexOf('.')) } :scope
style.
display block display block
margin 4px margin 4px
padding 8px 0 0 0 padding 8px 0 0 0
@ -144,7 +142,8 @@ style.
> .ext > .ext
opacity 0.5 opacity 0.5
script. </style>
<script>
@mixin \i @mixin \i
@mixin \bytes-to-size @mixin \bytes-to-size
@ -205,3 +204,5 @@ script.
@ondragend = (e) ~> @ondragend = (e) ~>
@is-dragging = false @is-dragging = false
@browser.is-drag-source = false @browser.is-drag-source = false
</script>
</mk-drive-browser-file>

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

@ -1,21 +1,23 @@
mk-drive-browser-folder-contextmenu <mk-drive-browser-folder-contextmenu>
mk-contextmenu@ctx: ul <mk-contextmenu ref="ctx">
li(onclick={ parent.move }): p <ul>
i.fa.fa-arrow-right <li onclick="{ parent.move }">
| このフォルダへ移動 <p><i class="fa fa-arrow-right"></i>このフォルダへ移動</p>
li(onclick={ parent.new-window }): p </li>
i.fa.fa-share-square-o <li onclick="{ parent.newWindow }">
| 新しいウィンドウで表示 <p><i class="fa fa-share-square-o"></i>新しいウィンドウで表示</p>
li.separator </li>
li(onclick={ parent.rename }): p <li class="separator"></li>
i.fa.fa-i-cursor <li onclick="{ parent.rename }">
| 名前を変更 <p><i class="fa fa-i-cursor"></i>名前を変更</p>
li.separator </li>
li(onclick={ parent.delete }): p <li class="separator"></li>
i.fa.fa-trash-o <li onclick="{ parent.delete }">
| 削除 <p><i class="fa fa-trash-o"></i>削除</p>
</li>
script. </ul>
</mk-contextmenu>
<script>
@mixin \api @mixin \api
@mixin \input-dialog @mixin \input-dialog
@ -60,3 +62,5 @@ script.
# something # something
.catch (err) ~> .catch (err) ~>
console.error err console.error err
</script>
</mk-drive-browser-folder-contextmenu>

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

@ -1,9 +1,7 @@
mk-drive-browser-folder(data-is-contextmenu-showing={ is-contextmenu-showing.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.name <p class="name"><i class="fa fa-fw { fa-folder-o: !hover, fa-folder-open-o: hover }"></i>{ folder.name }</p>
i.fa.fa-fw(class={ fa-folder-o: !hover, fa-folder-open-o: hover }) <style type="stylus">
| { folder.name } :scope
style.
display block display block
margin 4px margin 4px
padding 8px padding 8px
@ -50,7 +48,8 @@ style.
margin-left 2px margin-left 2px
text-align left text-align left
script. </style>
<script>
@mixin \api @mixin \api
@mixin \dialog @mixin \dialog
@ -181,3 +180,5 @@ script.
@update! @update!
return false return false
</script>
</mk-drive-browser-folder>

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

@ -1,12 +1,11 @@
mk-drive-browser-nav-folder(data-draghover={ draghover }, onclick={ onclick }, ondragover={ ondragover }, ondragenter={ ondragenter }, ondragleave={ ondragleave }, ondrop={ ondrop }) <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 ? 'ドライブ' : folder.name }</span>
i.fa.fa-cloud(if={ folder == null }) <style type="stylus">
span { folder == null ? 'ドライブ' : folder.name } :scope
style.
&[data-draghover] &[data-draghover]
background #eee background #eee
script. </style>
<script>
@mixin \api @mixin \api
# Riotのバグでnullを渡しても""になる # Riotのバグでnullを渡しても""になる
@ -94,3 +93,5 @@ script.
console.error err console.error err
return false return false
</script>
</mk-drive-browser-nav-folder>

19
src/web/app/desktop/tags/ellipsis-icon.tag
View file

@ -1,9 +1,9 @@
mk-ellipsis-icon <mk-ellipsis-icon>
div <div></div>
div <div></div>
div <div></div>
<style type="stylus">
style. :scope
display block display block
width 70px width 70px
margin 0 auto margin 0 auto
@ -32,3 +32,10 @@ style.
transform scale(0) transform scale(0)
40% 40%
transform scale(1) transform scale(1)
</style>
</mk-ellipsis-icon>

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

@ -1,14 +1,8 @@
mk-follow-button <mk-follow-button>
button(if={ !init }, class={ wait: wait, follow: !user.is_following, unfollow: user.is_following }, <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 &amp;&amp; user.is_following }"></i><i class="fa fa-plus" if="{ !wait &amp;&amp; !user.is_following }"></i><i class="fa fa-spinner fa-pulse fa-fw" if="{ wait }"></i></button>
onclick={ onclick }, <div class="init" if="{ init }"><i class="fa fa-spinner fa-pulse fa-fw"></i></div>
disabled={ wait }, <style type="stylus">
title={ user.is_following ? 'フォロー解除' : 'フォローする' }) :scope
i.fa.fa-minus(if={ !wait && user.is_following })
i.fa.fa-plus(if={ !wait && !user.is_following })
i.fa.fa-spinner.fa-pulse.fa-fw(if={ wait })
div.init(if={ init }): i.fa.fa-spinner.fa-pulse.fa-fw
style.
display block display block
> button > button
@ -71,7 +65,8 @@ style.
cursor wait !important cursor wait !important
opacity 0.7 opacity 0.7
script. </style>
<script>
@mixin \api @mixin \api
@mixin \is-promise @mixin \is-promise
@mixin \stream @mixin \stream
@ -125,3 +120,5 @@ script.
.then ~> .then ~>
@wait = false @wait = false
@update! @update!
</script>
</mk-follow-button>

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

@ -1,23 +1,20 @@
mk-following-setuper <mk-following-setuper>
p.title 気になるユーザーをフォロー: <p class="title">気になるユーザーをフォロー:</p>
div.users(if={ !loading && users.length > 0 }) <div class="users" if="{ !loading &amp;&amp; users.length &gt; 0 }">
div.user(each={ users }) <div class="user" each="{ users }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + username }"><img class="avatar" src="{ avatar_url + '?thumbnail&amp;size=42' }" alt="" data-user-preview="{ id }"/></a>
a.avatar-anchor(href={ CONFIG.url + '/' + username }) <div class="body"><a class="name" href="{ CONFIG.url + '/' + username }" target="_blank" data-user-preview="{ id }">{ name }</a>
img.avatar(src={ avatar_url + '?thumbnail&size=42' }, alt='', data-user-preview={ id }) <p class="username">@{ username }</p>
div.body </div>
a.name(href={ CONFIG.url + '/' + username }, target='_blank', data-user-preview={ id }) { name } <mk-follow-button user="{ this }"></mk-follow-button>
p.username @{ username } </div>
mk-follow-button(user={ this }) </div>
p.empty(if={ !loading && users.length == 0 }) <p class="empty" if="{ !loading &amp;&amp; users.length == 0 }">おすすめのユーザーは見つかりませんでした。</p>
| おすすめのユーザーは見つかりませんでした。 <p class="loading" if="{ loading }"><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます
p.loading(if={ loading }) <mk-ellipsis></mk-ellipsis>
i.fa.fa-spinner.fa-pulse.fa-fw </p><a class="refresh" onclick="{ refresh }">もっと見る</a>
| 読み込んでいます <button class="close" onclick="{ close }" title="閉じる"><i class="fa fa-times"></i></button>
mk-ellipsis <style type="stylus">
a.refresh(onclick={ refresh }) もっと見る :scope
button.close(onclick={ close }, title='閉じる'): i.fa.fa-times
style.
display block display block
padding 24px padding 24px
background #fff background #fff
@ -124,7 +121,8 @@ style.
> i > i
padding 14px padding 14px
script. </style>
<script>
@mixin \api @mixin \api
@mixin \user-preview @mixin \user-preview
@ -161,3 +159,5 @@ script.
@close = ~> @close = ~>
@unmount! @unmount!
</script>
</mk-following-setuper>

11
src/web/app/desktop/tags/go-top.tag
View file

@ -1,9 +1,6 @@
mk-go-top <mk-go-top>
button.hidden(title='一番上へ') <button class="hidden" title="一番上へ"><i class="fa fa-angle-up"></i></button>
i.fa.fa-angle-up <script>
script.
window.add-event-listener \load @on-scroll window.add-event-listener \load @on-scroll
window.add-event-listener \scroll @on-scroll window.add-event-listener \scroll @on-scroll
window.add-event-listener \resize @on-scroll window.add-event-listener \resize @on-scroll
@ -13,3 +10,5 @@ script.
@remove-class \hidden @remove-class \hidden
else else
@add-class \hidden @add-class \hidden
</script>
</mk-go-top>

34
src/web/app/desktop/tags/home-widgets/broadcast.tag
View file

@ -1,16 +1,17 @@
mk-broadcast-home-widget <mk-broadcast-home-widget>
div.icon <div class="icon">
svg(height='32', version='1.1', viewBox='0 0 32 32', width='32') <svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
path.tower(d='M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z') <path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
path.wave.a(d='M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z') <path class="wave a" d="M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z"></path>
path.wave.b(d='M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z') <path class="wave b" d="M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z"></path>
path.wave.c(d='M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z') <path class="wave c" d="M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z"></path>
path.wave.d(d='M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z') <path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
</svg>
h1 開発者募集中！ </div>
p: a(href='https://github.com/syuilo/misskey', target='_blank') Misskeyはオープンソースで開発されています。リポジトリはこちら。 <h1>開発者募集中！</h1>
<p><a href="https://github.com/syuilo/misskey" target="_blank">Misskeyはオープンソースで開発されています。リポジトリはこちら。</a></p>
style. <style type="stylus">
:scope
display block display block
padding 10px 10px 10px 50px padding 10px 10px 10px 50px
background transparent background transparent
@ -73,3 +74,10 @@ style.
a a
color #555 color #555
</style>
</mk-broadcast-home-widget>

63
src/web/app/desktop/tags/home-widgets/calendar.tag
View file

@ -1,33 +1,31 @@
mk-calendar-home-widget(data-special={ special }) <mk-calendar-home-widget data-special="{ special }">
div.calendar(data-is-holiday={ is-holiday }) <div class="calendar" data-is-holiday="{ isHoliday }">
p.month-and-year <p class="month-and-year"><span class="year">{ year }年</span><span class="month">{ month }月</span></p>
span.year { year }年 <p class="day">{ day }日</p>
span.month { month }月 <p class="week-day">{ weekDay }曜日</p>
p.day { day }日 </div>
p.week-day { week-day }曜日 <div class="info">
div.info <div>
div <p>今日:<b>{ dayP.toFixed(1) }%</b></p>
p <div class="meter">
| 今日: <div class="val" style="{ 'width:' + dayP + '%' }"></div>
b { day-p.to-fixed(1) }% </div>
div.meter </div>
div.val(style={ 'width:' + day-p + '%' }) <div>
<p>今月:<b>{ monthP.toFixed(1) }%</b></p>
div <div class="meter">
p <div class="val" style="{ 'width:' + monthP + '%' }"></div>
| 今月: </div>
b { month-p.to-fixed(1) }% </div>
div.meter <div>
div.val(style={ 'width:' + month-p + '%' }) <p>今年:<b>{ yearP.toFixed(1) }%</b></p>
<div class="meter">
div <div class="val" style="{ 'width:' + yearP + '%' }"></div>
p </div>
| 今年: </div>
b { year-p.to-fixed(1) }% </div>
div.meter <style type="stylus">
div.val(style={ 'width:' + year-p + '%' }) :scope
style.
display block display block
padding 16px 0 padding 16px 0
color #777 color #777
@ -106,7 +104,8 @@ style.
> .meter > .val > .meter > .val
background #41ddde background #41ddde
script. </style>
<script>
@draw = ~> @draw = ~>
now = new Date! now = new Date!
nd = now.get-date! nd = now.get-date!
@ -145,3 +144,5 @@ script.
@on \unmount ~> @on \unmount ~>
clear-interval @clock clear-interval @clock
</script>
</mk-calendar-home-widget>

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

@ -1,16 +1,14 @@
mk-donation-home-widget <mk-donation-home-widget>
article <article>
h1 <h1><i class="fa fa-heart"></i>寄付のお願い</h1>
i.fa.fa-heart <p>
| 寄付のお願い Misskeyの運営にはドメイン、サーバー等のコストが掛かります。
p Misskeyは広告を掲載したりしないため、 収入を皆様からの寄付に頼っています。
| Misskeyの運営にはドメイン、サーバー等のコストが掛かります。 もしご興味があれば、<a href="/syuilo" data-user-preview="@syuilo">@syuilo</a>までご連絡ください。ご協力ありがとうございます。
| Misskeyは広告を掲載したりしないため、 収入を皆様からの寄付に頼っています。 </p>
| もしご興味があれば、 </article>
a(href='/syuilo', data-user-preview='@syuilo') @syuilo <style type="stylus">
| までご連絡ください。ご協力ありがとうございます。 :scope
style.
display block display block
background #fff background #fff
border-color #ead8bb !important border-color #ead8bb !important
@ -33,5 +31,6 @@ style.
font-size 0.8em font-size 0.8em
color #999 color #999
script. </style>
@mixin \user-preview <script>@mixin \user-preview</script>
</mk-donation-home-widget>

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

@ -1,20 +1,12 @@
mk-mentions-home-widget <mk-mentions-home-widget>
header <header><span data-is-active="{ mode == 'all' }" onclick="{ setMode.bind(this, 'all') }">すべて</span><span data-is-active="{ mode == 'following' }" onclick="{ setMode.bind(this, 'following') }">フォロー中</span></header>
span(data-is-active={ mode == 'all' }, onclick={ set-mode.bind(this, 'all') }) すべて <div class="loading" if="{ isLoading }">
span(data-is-active={ mode == 'following' }, onclick={ set-mode.bind(this, 'following') }) フォロー中 <mk-ellipsis-icon></mk-ellipsis-icon>
div.loading(if={ is-loading }) </div>
mk-ellipsis-icon <p class="empty" if="{ isEmpty }"><i class="fa fa-comments-o"></i><span if="{ mode == 'all' }">あなた宛ての投稿はありません。</span><span if="{ mode == 'following' }">あなたがフォローしているユーザーからの言及はありません。</span></p>
p.empty(if={ is-empty }) <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>
i.fa.fa-comments-o <style type="stylus">
span(if={ mode == 'all' }) あなた宛ての投稿はありません。 :scope
span(if={ mode == 'following' }) あなたがフォローしているユーザーからの言及はありません。
mk-timeline@timeline
<yield to="footer">
i.fa.fa-moon-o(if={ !parent.more-loading })
i.fa.fa-spinner.fa-pulse.fa-fw(if={ parent.more-loading })
</yield>
style.
display block display block
background #fff background #fff
@ -52,7 +44,8 @@ style.
font-size 3em font-size 3em
color #ccc color #ccc
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@ -115,3 +108,5 @@ script.
@update do @update do
mode: mode mode: mode
@fetch! @fetch!
</script>
</mk-mentions-home-widget>

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

@ -1,15 +1,6 @@
mk-nav-home-widget <mk-nav-home-widget><a href="{ CONFIG.urls.about }">Misskeyについて</a><i>・</i><a href="{ CONFIG.urls.about + '/status' }">ステータス</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href="{ CONFIG.urls.dev }">開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
a(href={ CONFIG.urls.about }) Misskeyについて <style type="stylus">
i ・ :scope
a(href={ CONFIG.urls.about + '/status' }) ステータス
i ・
a(href='https://github.com/syuilo/misskey') リポジトリ
i ・
a(href={ CONFIG.urls.dev }) 開発者
i ・
a(href='https://twitter.com/misskey_xyz', target='_blank') Follow us on <i class="fa fa-twitter"></i>
style.
display block display block
padding 16px padding 16px
font-size 12px font-size 12px
@ -21,3 +12,10 @@ style.
i i
color #ccc color #ccc
</style>
</mk-nav-home-widget>

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

@ -1,11 +1,9 @@
mk-notifications-home-widget <mk-notifications-home-widget>
p.title <p class="title"><i class="fa fa-bell-o"></i>通知</p>
i.fa.fa-bell-o <button onclick="{ settings }" title="通知の設定"><i class="fa fa-cog"></i></button>
| 通知 <mk-notifications></mk-notifications>
button(onclick={ settings }, title='通知の設定'): i.fa.fa-cog <style type="stylus">
mk-notifications :scope
style.
display block display block
background #fff background #fff
@ -43,7 +41,10 @@ style.
max-height 300px max-height 300px
overflow auto overflow auto
script. </style>
<script>
@settings = ~> @settings = ~>
w = riot.mount document.body.append-child document.create-element \mk-settings-window .0 w = riot.mount document.body.append-child document.create-element \mk-settings-window .0
w.switch \notification w.switch \notification
</script>
</mk-notifications-home-widget>

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

@ -1,18 +1,16 @@
mk-photo-stream-home-widget <mk-photo-stream-home-widget>
p.title <p class="title"><i class="fa fa-camera"></i>フォトストリーム</p>
i.fa.fa-camera <p class="initializing" if="{ initializing }"><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます
| フォトストリーム <mk-ellipsis></mk-ellipsis>
p.initializing(if={ initializing }) </p>
i.fa.fa-spinner.fa-pulse.fa-fw <div class="stream" if="{ !initializing &amp;&amp; images.length &gt; 0 }">
| 読み込んでいます <virtual each="{ image in images }">
mk-ellipsis <div class="img" style="{ 'background-image: url(' + image.url + '?thumbnail&amp;size=256)' }"></div>
div.stream(if={ !initializing && images.length > 0 }) </virtual>
virtual(each={ image in images }) </div>
div.img(style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }) <p class="empty" if="{ !initializing &amp;&amp; images.length == 0 }">写真はありません</p>
p.empty(if={ !initializing && images.length == 0 }) <style type="stylus">
| 写真はありません :scope
style.
display block display block
background #fff background #fff
@ -57,7 +55,8 @@ style.
> i > i
margin-right 4px margin-right 4px
script. </style>
<script>
@mixin \api @mixin \api
@mixin \stream @mixin \stream
@ -84,3 +83,5 @@ script.
if @images.length > 9 if @images.length > 9
@images.pop! @images.pop!
@update! @update!
</script>
</mk-photo-stream-home-widget>

17
src/web/app/desktop/tags/home-widgets/profile.tag
View file

@ -1,10 +1,8 @@
mk-profile-home-widget <mk-profile-home-widget>
div.banner(style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' }, onclick={ set-banner }) <div class="banner" style="{ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&amp;size=256)' : '' }" onclick="{ setBanner }"></div><img class="avatar" src="{ I.avatar_url + '?thumbnail&amp;size=64' }" onclick="{ setAvatar }" alt="avatar" data-user-preview="{ I.id }"/><a class="name" href="{ CONFIG.url + '/' + I.username }">{ I.name }</a>
img.avatar(src={ I.avatar_url + '?thumbnail&size=64' }, onclick={ set-avatar }, alt='avatar', data-user-preview={ I.id }) <p class="username">@{ I.username }</p>
a.name(href={ CONFIG.url + '/' + I.username }) { I.name } <style type="stylus">
p.username @{ I.username } :scope
style.
display block display block
background #fff background #fff
@ -40,7 +38,8 @@ style.
font-size 0.9em font-size 0.9em
color #999 color #999
script. </style>
<script>
@mixin \i @mixin \i
@mixin \user-preview @mixin \user-preview
@mixin \update-avatar @mixin \update-avatar
@ -53,3 +52,5 @@ script.
@set-banner = ~> @set-banner = ~>
@update-banner @I, (i) ~> @update-banner @I, (i) ~>
@update-i i @update-i i
</script>
</mk-profile-home-widget>

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

@ -1,17 +1,14 @@
mk-rss-reader-home-widget <mk-rss-reader-home-widget>
p.title <p class="title"><i class="fa fa-rss-square"></i>RSS</p>
i.fa.fa-rss-square <button onclick="{ settings }" title="設定"><i class="fa fa-cog"></i></button>
| RSS <div class="feed" if="{ !initializing }">
button(onclick={ settings }, title='設定'): i.fa.fa-cog <virtual each="{ item in items }"><a href="{ item.link }" target="_blank">{ item.title }</a></virtual>
div.feed(if={ !initializing }) </div>
virtual(each={ item in items }) <p class="initializing" if="{ initializing }"><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます
a(href={ item.link }, target='_blank') { item.title } <mk-ellipsis></mk-ellipsis>
p.initializing(if={ initializing }) </p>
i.fa.fa-spinner.fa-pulse.fa-fw <style type="stylus">
| 読み込んでいます :scope
mk-ellipsis
style.
display block display block
background #fff background #fff
@ -65,7 +62,8 @@ style.
> i > i
margin-right 4px margin-right 4px
script. </style>
<script>
@mixin \api @mixin \api
@mixin \NotImplementedException @mixin \NotImplementedException
@ -92,3 +90,5 @@ script.
@settings = ~> @settings = ~>
@NotImplementedException! @NotImplementedException!
</script>
</mk-rss-reader-home-widget>

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

@ -1,17 +1,12 @@
mk-timeline-home-widget <mk-timeline-home-widget>
mk-following-setuper(if={ no-following }) <mk-following-setuper if="{ noFollowing }"></mk-following-setuper>
div.loading(if={ is-loading }) <div class="loading" if="{ isLoading }">
mk-ellipsis-icon <mk-ellipsis-icon></mk-ellipsis-icon>
p.empty(if={ is-empty }) </div>
i.fa.fa-comments-o <p class="empty" if="{ isEmpty }"><i class="fa fa-comments-o"></i>自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</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>
mk-timeline@timeline <style type="stylus">
<yield to="footer"> :scope
i.fa.fa-moon-o(if={ !parent.more-loading })
i.fa.fa-spinner.fa-pulse.fa-fw(if={ parent.more-loading })
</yield>
style.
display block display block
background #fff background #fff
@ -35,7 +30,8 @@ style.
font-size 3em font-size 3em
color #ccc color #ccc
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@mixin \stream @mixin \stream
@ -111,3 +107,5 @@ script.
current = window.scroll-y + window.inner-height current = window.scroll-y + window.inner-height
if current > document.body.offset-height - 8 if current > document.body.offset-height - 8
@more! @more!
</script>
</mk-timeline-home-widget>

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

@ -1,9 +1,7 @@
mk-tips-home-widget <mk-tips-home-widget>
p@tip <p ref="tip"><i class="fa fa-lightbulb-o"></i><span ref="text"></span></p>
i.fa.fa-lightbulb-o <style type="stylus">
span@text :scope
style.
display block display block
background transparent !important background transparent !important
border none !important border none !important
@ -29,7 +27,8 @@ style.
border solid 1px #999 border solid 1px #999
border-radius 2px border-radius 2px
script. </style>
<script>
@tips = [ @tips = [
'<kbd>t</kbd>でタイムラインにフォーカスできます' '<kbd>t</kbd>でタイムラインにフォーカスできます'
'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます' '<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます'
@ -68,3 +67,5 @@ script.
duration: 500ms duration: 500ms
easing: \linear easing: \linear
} }
</script>
</mk-tips-home-widget>

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

@ -1,23 +1,18 @@
mk-user-recommendation-home-widget <mk-user-recommendation-home-widget>
p.title <p class="title"><i class="fa fa-users"></i>おすすめユーザー</p>
i.fa.fa-users <button onclick="{ refresh }" title="他を見る"><i class="fa fa-refresh"></i></button>
| おすすめユーザー <div class="user" if="{ !loading &amp;&amp; users.length != 0 }" each="{ _user in users }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + _user.username }"><img class="avatar" src="{ _user.avatar_url + '?thumbnail&amp;size=42' }" alt="" data-user-preview="{ _user.id }"/></a>
button(onclick={ refresh }, title='他を見る'): i.fa.fa-refresh <div class="body"><a class="name" href="{ CONFIG.url + '/' + _user.username }" data-user-preview="{ _user.id }">{ _user.name }</a>
div.user(if={ !loading && users.length != 0 }, each={ _user in users }) <p class="username">@{ _user.username }</p>
a.avatar-anchor(href={ CONFIG.url + '/' + _user.username }) </div>
img.avatar(src={ _user.avatar_url + '?thumbnail&size=42' }, alt='', data-user-preview={ _user.id }) <mk-follow-button user="{ _user }"></mk-follow-button>
div.body </div>
a.name(href={ CONFIG.url + '/' + _user.username }, data-user-preview={ _user.id }) { _user.name } <p class="empty" if="{ !loading &amp;&amp; users.length == 0 }">いません！</p>
p.username @{ _user.username } <p class="loading" if="{ loading }"><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます
mk-follow-button(user={ _user }) <mk-ellipsis></mk-ellipsis>
p.empty(if={ !loading && users.length == 0 }) </p>
| いません！ <style type="stylus">
p.loading(if={ loading }) :scope
i.fa.fa-spinner.fa-pulse.fa-fw
| 読み込んでいます
mk-ellipsis
style.
display block display block
background #fff background #fff
@ -112,7 +107,8 @@ style.
> i > i
margin-right 4px margin-right 4px
script. </style>
<script>
@mixin \api @mixin \api
@mixin \user-preview @mixin \user-preview
@ -152,3 +148,5 @@ script.
else else
@page++ @page++
@fetch! @fetch!
</script>
</mk-user-recommendation-home-widget>

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

@ -1,13 +1,15 @@
mk-home <mk-home>
div.main <div class="main">
div.left@left <div class="left" ref="left"></div>
main <main>
mk-timeline-home-widget@tl(if={ mode == 'timeline' }) <mk-timeline-home-widget ref="tl" if="{ mode == 'timeline' }"></mk-timeline-home-widget>
mk-mentions-home-widget@tl(if={ mode == 'mentions' }) <mk-mentions-home-widget ref="tl" if="{ mode == 'mentions' }"></mk-mentions-home-widget>
div.right@right </main>
mk-detect-slow-internet-connection-notice <div class="right" ref="right"></div>
</div>
style. <mk-detect-slow-internet-connection-notice></mk-detect-slow-internet-connection-notice>
<style type="stylus">
:scope
display block display block
> .main > .main
@ -55,7 +57,8 @@ style.
max-width 700px max-width 700px
margin 0 auto margin 0 auto
script. </style>
<script>
@mixin \i @mixin \i
@mode = @opts.mode || \timeline @mode = @opts.mode || \timeline
@ -84,3 +87,5 @@ script.
@on \unmount ~> @on \unmount ~>
@home.for-each (widget) ~> @home.for-each (widget) ~>
widget.unmount! widget.unmount!
</script>
</mk-home>

14
src/web/app/desktop/tags/image-dialog.tag
View file

@ -1,8 +1,7 @@
mk-image-dialog <mk-image-dialog>
div.bg@bg(onclick={ close }) <div class="bg" ref="bg" onclick="{ close }"></div><img ref="img" src="{ image.url }" alt="{ image.name }" title="{ image.name }" onclick="{ close }"/>
img@img(src={ image.url }, alt={ image.name }, title={ image.name }, onclick={ close }) <style type="stylus">
:scope
style.
display block display block
position fixed position fixed
z-index 2048 z-index 2048
@ -34,7 +33,8 @@ style.
margin auto margin auto
cursor zoom-out cursor zoom-out
script. </style>
<script>
@image = @opts.image @image = @opts.image
@on \mount ~> @on \mount ~>
@ -71,3 +71,5 @@ script.
# complete: ~> # complete: ~>
# @unmount! # @unmount!
#} #}
</script>
</mk-image-dialog>

14
src/web/app/desktop/tags/images-viewer.tag
View file

@ -1,8 +1,7 @@
mk-images-viewer <mk-images-viewer>
div.image@view(onmousemove={ mousemove }, style={ 'background-image: url(' + image.url + '?thumbnail' }, onclick={ click }) <div class="image" ref="view" onmousemove="{ mousemove }" style="{ 'background-image: url(' + image.url + '?thumbnail' }" onclick="{ click }"><img src="{ image.url + '?thumbnail&amp;size=512' }" alt="{ image.name }" title="{ image.name }"/></div>
img(src={ image.url + '?thumbnail&size=512' }, alt={ image.name }, title={ image.name }) <style type="stylus">
:scope
style.
display block display block
padding 8px padding 8px
overflow hidden overflow hidden
@ -25,7 +24,8 @@ style.
&:not(:hover) &:not(:hover)
background-image none !important background-image none !important
script. </style>
<script>
@images = @opts.images @images = @opts.images
@image = @images.0 @image = @images.0
@ -41,3 +41,5 @@ script.
dialog = document.body.append-child document.create-element \mk-image-dialog dialog = document.body.append-child document.create-element \mk-image-dialog
riot.mount dialog, do riot.mount dialog, do
image: @image image: @image
</script>
</mk-images-viewer>

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

@ -1,18 +1,16 @@
mk-input-dialog <mk-input-dialog>
mk-window@window(is-modal={ true }, width={ '500px' }) <mk-window ref="window" is-modal="{ true }" width="{ '500px' }"><yield to="header"><i class="fa fa-i-cursor"></i>{ parent.title }</yield>
<yield to="header"> <yield to="content">
i.fa.fa-i-cursor <div class="body">
| { parent.title } <input ref="text" oninput="{ parent.update }" onkeydown="{ parent.onKeydown }" placeholder="{ parent.placeholder }"/>
</yield> </div>
<yield to="content"> <div class="action">
div.body <button class="cancel" onclick="{ parent.cancel }">キャンセル</button>
input@text(oninput={ parent.update }, onkeydown={ parent.on-keydown }, placeholder={ parent.placeholder }) <button class="ok" disabled="{ !parent.allowEmpty &amp;&amp; refs.text.value.length == 0 }" onclick="{ parent.ok }">決定</button>
div.action </div></yield>
button.cancel(onclick={ parent.cancel }) キャンセル </mk-window>
button.ok(disabled={ !parent.allow-empty && refs.text.value.length == 0 }, onclick={ parent.ok }) 決定 <style type="stylus">
</yield> :scope
style.
display block display block
> mk-window > mk-window
@ -116,7 +114,8 @@ style.
background #ececec background #ececec
border-color #dcdcdc border-color #dcdcdc
script. </style>
<script>
@done = false @done = false
@title = @opts.title @title = @opts.title
@ -154,3 +153,5 @@ script.
e.prevent-default! e.prevent-default!
e.stop-propagation! e.stop-propagation!
@ok! @ok!
</script>
</mk-input-dialog>

34
src/web/app/desktop/tags/list-user.tag
View file

@ -1,19 +1,16 @@
mk-list-user <mk-list-user><a class="avatar-anchor" href="{ CONFIG.url + '/' + user.username }"><img class="avatar" src="{ user.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar"/></a>
a.avatar-anchor(href={ CONFIG.url + '/' + user.username }) <div class="main">
img.avatar(src={ user.avatar_url + '?thumbnail&size=64' }, alt='avatar') <header>
div.main <div class="left"><a class="name" href="{ CONFIG.url + '/' + user.username }">{ user.name }</a><span class="username">@{ user.username }</span></div>
header </header>
div.left <div class="body">
a.name(href={ CONFIG.url + '/' + user.username }) <p class="followed" if="{ user.is_followed }">フォローされています</p>
| { user.name } <div class="bio">{ user.bio }</div>
span.username </div>
| @{ user.username } </div>
div.body <mk-follow-button user="{ user }"></mk-follow-button>
p.followed(if={ user.is_followed }) フォローされています <style type="stylus">
div.bio { user.bio } :scope
mk-follow-button(user={ user })
style.
display block display block
margin 0 margin 0
padding 16px padding 16px
@ -96,5 +93,6 @@ style.
top 16px top 16px
right 16px right 16px
script. </style>
@user = @opts.user <script>@user = @opts.user</script>
</mk-list-user>

29
src/web/app/desktop/tags/messaging/form.tag
View file

@ -1,17 +1,13 @@
mk-messaging-form <mk-messaging-form>
textarea@text(onkeypress={ onkeypress }, onpaste={ onpaste }, placeholder='ここにメッセージを入力') <textarea ref="text" onkeypress="{ onkeypress }" onpaste="{ onpaste }" placeholder="ここにメッセージを入力"></textarea>
div.files <div class="files"></div>
mk-uploader@uploader <mk-uploader ref="uploader"></mk-uploader>
button.send(onclick={ send }, disabled={ sending }, title='メッセージを送信') <button class="send" onclick="{ send }" disabled="{ sending }" title="メッセージを送信"><i class="fa fa-paper-plane" if="{ !sending }"></i><i class="fa fa-spinner fa-spin" if="{ sending }"></i></button>
i.fa.fa-paper-plane(if={ !sending }) <button class="attach-from-local" type="button" title="PCから画像を添付する"><i class="fa fa-upload"></i></button>
i.fa.fa-spinner.fa-spin(if={ sending }) <button class="attach-from-drive" type="button" title="アルバムから画像を添付する"><i class="fa fa-folder-open"></i></button>
button.attach-from-local(type='button', title='PCから画像を添付する') <input name="file" type="file" accept="image/*"/>
i.fa.fa-upload <style type="stylus">
button.attach-from-drive(type='button', title='アルバムから画像を添付する') :scope
i.fa.fa-folder-open
input(name='file', type='file', accept='image/*')
style.
display block display block
> textarea > textarea
@ -113,7 +109,8 @@ style.
input[type=file] input[type=file]
display none display none
script. </style>
<script>
@mixin \api @mixin \api
@user = @opts.user @user = @opts.user
@ -160,3 +157,5 @@ script.
@refs.text.value = '' @refs.text.value = ''
@files = [] @files = []
@update! @update!
</script>
</mk-messaging-form>

65
src/web/app/desktop/tags/messaging/index.tag
View file

@ -1,35 +1,31 @@
mk-messaging <mk-messaging>
div.search <div class="search">
div.form <div class="form">
label(for='search-input') <label for="search-input"><i class="fa fa-search"></i></label>
i.fa.fa-search <input ref="searchInput" type="search" oninput="{ search }" placeholder="ユーザーを探す"/>
input@search-input(type='search', oninput={ search }, placeholder='ユーザーを探す') </div>
div.result <div class="result">
ol.users(if={ search-result.length > 0 }) <ol class="users" if="{ searchResult.length &gt; 0 }">
li(each={ user in search-result }) <li each="{ user in searchResult }"><a onclick="{ user._click }"><img class="avatar" src="{ user.avatar_url + '?thumbnail&amp;size=32' }" alt=""/><span class="name">{ user.name }</span><span class="username">@{ user.username }</span></a></li>
a(onclick={ user._click }) </ol>
img.avatar(src={ user.avatar_url + '?thumbnail&size=32' }, alt='') </div>
span.name { user.name } </div>
span.username @{ user.username } <div class="main">
div.main <div class="history" if="{ history.length &gt; 0 }">
div.history(if={ history.length > 0 }) <virtual each="{ history }"><a class="user" data-is-me="{ is_me }" data-is-read="{ is_read }" onclick="{ _click }">
virtual(each={ history }) <div><img class="avatar" src="{ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&amp;size=64' }" alt=""/>
a.user(data-is-me={ is_me }, data-is-read={ is_read }, onclick={ _click }): div <header><span class="name">{ is_me ? recipient.name : user.name }</span><span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
img.avatar(src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' }, alt='') <mk-time time="{ created_at }"></mk-time>
header </header>
span.name { is_me ? recipient.name : user.name } <div class="body">
span.username { '@' + (is_me ? recipient.username : user.username ) } <p class="text"><span class="me" if="{ is_me }">あなた:</span>{ text }</p>
mk-time(time={ created_at }) </div>
div.body </div></a></virtual>
p.text </div>
span.me(if={ is_me }) あなた: <p class="no-history" if="{ history.length == 0 }">履歴はありません。<br/>ユーザーを検索して、いつでもメッセージを送受信できます。</p>
| { text } </div>
p.no-history(if={ history.length == 0 }) <style type="stylus">
| 履歴はありません。 :scope
br
| ユーザーを検索して、いつでもメッセージを送受信できます。
style.
display block display block
> .search > .search
@ -262,7 +258,8 @@ style.
color #999 color #999
font-weight 500 font-weight 500
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@ -300,3 +297,5 @@ script.
@update! @update!
.catch (err) ~> .catch (err) ~>
console.error err console.error err
</script>
</mk-messaging>

43
src/web/app/desktop/tags/messaging/message.tag
View file

@ -1,22 +1,22 @@
mk-messaging-message(data-is-me={ message.is_me }) <mk-messaging-message data-is-me="{ message.is_me }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + message.user.username }" title="{ message.user.username }" target="_blank"><img class="avatar" src="{ message.user.avatar_url + '?thumbnail&amp;size=64' }" alt=""/></a>
a.avatar-anchor(href={ CONFIG.url + '/' + message.user.username }, title={ message.user.username }, target='_blank') <div class="content-container">
img.avatar(src={ message.user.avatar_url + '?thumbnail&size=64' }, alt='') <div class="balloon">
div.content-container <p class="read" if="{ message.is_me &amp;&amp; message.is_read }">既読</p>
div.balloon <button class="delete-button" if="{ message.is_me }" title="メッセージを削除"><img src="/_/resources/desktop/messaging/delete.png" alt="Delete"/></button>
p.read(if={ message.is_me && message.is_read }) 既読 <div class="content" if="{ !message.is_deleted }">
button.delete-button(if={ message.is_me }, title='メッセージを削除') <div ref="text"></div>
img(src='/_/resources/desktop/messaging/delete.png', alt='Delete') <div class="image" if="{ message.file }"><img src="{ message.file.url }" alt="image" title="{ message.file.name }"/></div>
div.content(if={ !message.is_deleted }) </div>
div@text <div class="content" if="{ message.is_deleted }">
div.image(if={ message.file }) <p class="is-deleted">このメッセージは削除されました</p>
img(src={ message.file.url }, alt='image', title={ message.file.name }) </div>
div.content(if={ message.is_deleted }) </div>
p.is-deleted このメッセージは削除されました <footer>
footer <mk-time time="{ message.created_at }"></mk-time><i class="fa fa-pencil is-edited" if="{ message.is_edited }"></i>
mk-time(time={ message.created_at }) </footer>
i.fa.fa-pencil.is-edited(if={ message.is_edited }) </div>
<style type="stylus">
style. :scope
$me-balloon-color = #23A7B6 $me-balloon-color = #23A7B6
display block display block
@ -201,7 +201,8 @@ style.
> .content-container > .content-container
opacity 0.5 opacity 0.5
script. </style>
<script>
@mixin \i @mixin \i
@mixin \text @mixin \text
@ -225,3 +226,5 @@ script.
@preview = @refs.text.append-child document.create-element \mk-url-preview @preview = @refs.text.append-child document.create-element \mk-url-preview
riot.mount @preview, do riot.mount @preview, do
url: t.content url: t.content
</script>
</mk-messaging-message>

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

@ -1,14 +1,10 @@
mk-messaging-room-window <mk-messaging-room-window>
mk-window@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>メッセージ: { parent.user.name }</yield>
<yield to="header"> <yield to="content">
i.fa.fa-comments <mk-messaging-room user="{ parent.user }"></mk-messaging-room></yield>
| メッセージ: { parent.user.name } </mk-window>
</yield> <style type="stylus">
<yield to="content"> :scope
mk-messaging-room(user={ parent.user })
</yield>
style.
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > i
@ -18,9 +14,12 @@ style.
> mk-messaging-room > mk-messaging-room
height 100% height 100%
script. </style>
<script>
@user = @opts.user @user = @opts.user
@on \mount ~> @on \mount ~>
@refs.window.on \closed ~> @refs.window.on \closed ~>
@unmount! @unmount!
</script>
</mk-messaging-room-window>

42
src/web/app/desktop/tags/messaging/room.tag
View file

@ -1,23 +1,20 @@
mk-messaging-room <mk-messaging-room>
div.stream@stream <div class="stream" ref="stream">
p.initializing(if={ init }) <p class="initializing" if="{ init }"><i class="fa fa-spinner fa-spin"></i>読み込み中</p>
i.fa.fa-spinner.fa-spin <p class="empty" if="{ !init &amp;&amp; messages.length == 0 }"><i class="fa fa-info-circle"></i>このユーザーとまだ会話したことがありません</p>
| 読み込み中 <virtual each="{ message, i in messages }">
p.empty(if={ !init && messages.length == 0 }) <mk-messaging-message message="{ message }"></mk-messaging-message>
i.fa.fa-info-circle <p class="date" if="{ i != messages.length - 1 &amp;&amp; message._date != messages[i + 1]._date }"><span>{ messages[i + 1]._datetext }</span></p>
| このユーザーとまだ会話したことがありません </virtual>
virtual(each={ message, i in messages }) </div>
mk-messaging-message(message={ message }) <div class="typings"></div>
p.date(if={ i != messages.length - 1 && message._date != messages[i + 1]._date }) <footer>
span { messages[i + 1]._datetext } <div ref="notifications"></div>
<div class="grippie" title="ドラッグしてフォームの広さを調整"></div>
div.typings <mk-messaging-form user="{ user }"></mk-messaging-form>
footer </footer>
div@notifications <style type="stylus">
div.grippie(title='ドラッグしてフォームの広さを調整') :scope
mk-messaging-form(user={ user })
style.
display block display block
> .stream > .stream
@ -128,7 +125,8 @@ style.
&:active &:active
//background rgba(0, 0, 0, 0.2) //background rgba(0, 0, 0, 0.2)
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@mixin \messaging-stream @mixin \messaging-stream
@ -225,3 +223,5 @@ script.
@connection.socket.send JSON.stringify do @connection.socket.send JSON.stringify do
type: \read type: \read
id: message.id id: message.id
</script>
</mk-messaging-room>

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

@ -1,14 +1,10 @@
mk-messaging-window <mk-messaging-window>
mk-window@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"> <yield to="content">
i.fa.fa-comments <mk-messaging ref="index"></mk-messaging></yield>
| メッセージ </mk-window>
</yield> <style type="stylus">
<yield to="content"> :scope
mk-messaging@index
</yield>
style.
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > i
@ -18,7 +14,8 @@ style.
> mk-messaging > mk-messaging
height 100% height 100%
script. </style>
<script>
@on \mount ~> @on \mount ~>
@refs.window.on \closed ~> @refs.window.on \closed ~>
@unmount! @unmount!
@ -27,3 +24,5 @@ script.
w = document.body.append-child document.create-element \mk-messaging-room-window w = document.body.append-child document.create-element \mk-messaging-room-window
riot.mount w, do riot.mount w, do
user: user user: user
</script>
</mk-messaging-window>

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

@ -1,78 +1,48 @@
mk-notifications <mk-notifications>
div.notifications(if={ notifications.length != 0 }) <div class="notifications" if="{ notifications.length != 0 }">
virtual(each={ notification, i in notifications }) <virtual each="{ notification, i in notifications }">
div.notification(class={ notification.type }) <div class="notification { notification.type }">
mk-time(time={ notification.created_at }) <mk-time time="{ notification.created_at }"></mk-time>
<div class="main" if="{ notification.type == 'like' }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + notification.user.username }" data-user-preview="{ notification.user.id }"><img class="avatar" src="{ notification.user.avatar_url + '?thumbnail&amp;size=48' }" alt="avatar"/></a>
div.main(if={ notification.type == 'like' }) <div class="text">
a.avatar-anchor(href={ CONFIG.url + '/' + notification.user.username }, data-user-preview={ notification.user.id }) <p><i class="fa fa-thumbs-o-up"></i><a href="{ CONFIG.url + '/' + notification.user.username }" data-user-preview="{ notification.user.id }">{ notification.user.name }</a></p><a class="post-ref" href="{ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }">{ getPostSummary(notification.post) }</a>
img.avatar(src={ notification.user.avatar_url + '?thumbnail&size=48' }, alt='avatar') </div>
div.text </div>
p <div class="main" if="{ notification.type == 'repost' }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }"><img class="avatar" src="{ notification.post.user.avatar_url + '?thumbnail&amp;size=48' }" alt="avatar"/></a>
i.fa.fa-thumbs-o-up <div class="text">
a(href={ CONFIG.url + '/' + notification.user.username }, data-user-preview={ notification.user.id }) { notification.user.name } <p><i class="fa fa-retweet"></i><a href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }">{ notification.post.user.name }</a></p><a class="post-ref" href="{ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }">{ getPostSummary(notification.post.repost) }</a>
a.post-ref(href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }) { get-post-summary(notification.post) } </div>
</div>
div.main(if={ notification.type == 'repost' }) <div class="main" if="{ notification.type == 'quote' }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }"><img class="avatar" src="{ notification.post.user.avatar_url + '?thumbnail&amp;size=48' }" alt="avatar"/></a>
a.avatar-anchor(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id }) <div class="text">
img.avatar(src={ notification.post.user.avatar_url + '?thumbnail&size=48' }, alt='avatar') <p><i class="fa fa-quote-left"></i><a href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }">{ notification.post.user.name }</a></p><a class="post-preview" href="{ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }">{ getPostSummary(notification.post) }</a>
div.text </div>
p </div>
i.fa.fa-retweet <div class="main" if="{ notification.type == 'follow' }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + notification.user.username }" data-user-preview="{ notification.user.id }"><img class="avatar" src="{ notification.user.avatar_url + '?thumbnail&amp;size=48' }" alt="avatar"/></a>
a(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id }) { notification.post.user.name } <div class="text">
a.post-ref(href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }) { get-post-summary(notification.post.repost) } <p><i class="fa fa-user-plus"></i><a href="{ CONFIG.url + '/' + notification.user.username }" data-user-preview="{ notification.user.id }">{ notification.user.name }</a></p>
</div>
div.main(if={ notification.type == 'quote' }) </div>
a.avatar-anchor(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id }) <div class="main" if="{ notification.type == 'reply' }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }"><img class="avatar" src="{ notification.post.user.avatar_url + '?thumbnail&amp;size=48' }" alt="avatar"/></a>
img.avatar(src={ notification.post.user.avatar_url + '?thumbnail&size=48' }, alt='avatar') <div class="text">
div.text <p><i class="fa fa-reply"></i><a href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }">{ notification.post.user.name }</a></p><a class="post-preview" href="{ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }">{ getPostSummary(notification.post) }</a>
p </div>
i.fa.fa-quote-left </div>
a(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id }) { notification.post.user.name } <div class="main" if="{ notification.type == 'mention' }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }"><img class="avatar" src="{ notification.post.user.avatar_url + '?thumbnail&amp;size=48' }" alt="avatar"/></a>
a.post-preview(href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }) { get-post-summary(notification.post) } <div class="text">
<p><i class="fa fa-at"></i><a href="{ CONFIG.url + '/' + notification.post.user.username }" data-user-preview="{ notification.post.user_id }">{ notification.post.user.name }</a></p><a class="post-preview" href="{ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }">{ getPostSummary(notification.post) }</a>
div.main(if={ notification.type == 'follow' }) </div>
a.avatar-anchor(href={ CONFIG.url + '/' + notification.user.username }, data-user-preview={ notification.user.id }) </div>
img.avatar(src={ notification.user.avatar_url + '?thumbnail&size=48' }, alt='avatar') </div>
div.text <p class="date" if="{ i != notifications.length - 1 &amp;&amp; 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 </virtual>
i.fa.fa-user-plus </div>
a(href={ CONFIG.url + '/' + notification.user.username }, data-user-preview={ notification.user.id }) { notification.user.name } <p class="empty" if="{ notifications.length == 0 &amp;&amp; !loading }">ありません！</p>
<p class="loading" if="{ loading }"><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます
div.main(if={ notification.type == 'reply' }) <mk-ellipsis></mk-ellipsis>
a.avatar-anchor(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id }) </p>
img.avatar(src={ notification.post.user.avatar_url + '?thumbnail&size=48' }, alt='avatar') <style type="stylus">
div.text :scope
p
i.fa.fa-reply
a(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id }) { notification.post.user.name }
a.post-preview(href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }) { get-post-summary(notification.post) }
div.main(if={ notification.type == 'mention' })
a.avatar-anchor(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id })
img.avatar(src={ notification.post.user.avatar_url + '?thumbnail&size=48' }, alt='avatar')
div.text
p
i.fa.fa-at
a(href={ CONFIG.url + '/' + notification.post.user.username }, data-user-preview={ notification.post.user_id }) { notification.post.user.name }
a.post-preview(href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }) { get-post-summary(notification.post) }
p.date(if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date })
span
i.fa.fa-angle-up
| { notification._datetext }
span
i.fa.fa-angle-down
| { notifications[i + 1]._datetext }
p.empty(if={ notifications.length == 0 && !loading })
| ありません！
p.loading(if={ loading })
i.fa.fa-spinner.fa-pulse.fa-fw
| 読み込んでいます
mk-ellipsis
style.
display block display block
> .notifications > .notifications
@ -191,7 +161,8 @@ style.
> i > i
margin-right 4px margin-right 4px
script. </style>
<script>
@mixin \api @mixin \api
@mixin \stream @mixin \stream
@mixin \user-preview @mixin \user-preview
@ -224,3 +195,5 @@ script.
month = (new Date notification.created_at).get-month! + 1 month = (new Date notification.created_at).get-month! + 1
notification._date = date notification._date = date
notification._datetext = month + '月 ' + date + '日' notification._datetext = month + '月 ' + date + '日'
</script>
</mk-notifications>

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

@ -1,26 +1,26 @@
mk-entrance <mk-entrance>
main <main><img src="/_/resources/title.svg" alt="Misskey"/>
img(src='/_/resources/title.svg', alt='Misskey') <mk-entrance-signin if="{ mode == 'signin' }"></mk-entrance-signin>
<mk-entrance-signup if="{ mode == 'signup' }"></mk-entrance-signup>
mk-entrance-signin(if={ mode == 'signin' }) <div class="introduction" if="{ mode == 'introduction' }">
mk-entrance-signup(if={ mode == 'signup' }) <mk-introduction></mk-introduction>
div.introduction(if={ mode == 'introduction' }) <button onclick="{ signin }">わかった</button>
mk-introduction </div>
button(onclick={ signin }) わかった </main>
<mk-forkit></mk-forkit>
mk-forkit <footer>
<mk-copyright></mk-copyright>
footer </footer>
mk-copyright <!-- ↓ https://github.com/riot/riot/issues/2134 (将来的)-->
<style data-disable-scope="data-disable-scope">
// ↓ https://github.com/riot/riot/issues/2134 (将来的)
style(data-disable-scope).
#wait { #wait {
right: auto; right: auto;
left: 15px; left: 15px;
} }
style. </style>
<style type="stylus">
:scope
display block display block
height 100% height 100%
@ -61,7 +61,8 @@ style.
font-size 10px font-size 10px
color rgba(#000, 0.5) color rgba(#000, 0.5)
script. </style>
<script>
@mode = \signin @mode = \signin
@signup = ~> @signup = ~>
@ -75,3 +76,5 @@ script.
@introduction = ~> @introduction = ~>
@mode = \introduction @mode = \introduction
@update! @update!
</script>
</mk-entrance>

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

@ -1,15 +1,14 @@
mk-entrance-signin <mk-entrance-signin><a class="help" href="{ CONFIG.urls.about + '/help' }" title="お困りですか？"><i class="fa fa-question"></i></a>
a.help(href={ CONFIG.urls.about + '/help' }, title='お困りですか？'): i.fa.fa-question <div class="form">
div.form <h1><img if="{ user }" src="{ user.avatar_url + '?thumbnail&amp;size=32' }"/>
h1 <p>{ user ? user.name : 'アカウント' }</p>
img(if={ user }, src={ user.avatar_url + '?thumbnail&size=32' }) </h1>
p { user ? user.name : 'アカウント' } <mk-signin ref="signin"></mk-signin>
mk-signin@signin </div>
div.divider: span or <div class="divider"><span>or</span></div>
button.signup(onclick={ parent.signup }) 新規登録 <button class="signup" onclick="{ parent.signup }">新規登録</button><a class="introduction" onclick="{ introduction }">Misskeyについて</a>
a.introduction(onclick={ introduction }) Misskeyについて <style type="stylus">
:scope
style.
display block display block
width 290px width 290px
margin 0 auto margin 0 auto
@ -118,7 +117,8 @@ style.
font-size 12px font-size 12px
color #666 color #666
script. </style>
<script>
@on \mount ~> @on \mount ~>
@refs.signin.on \user (user) ~> @refs.signin.on \user (user) ~>
@update do @update do
@ -126,3 +126,5 @@ script.
@introduction = ~> @introduction = ~>
@parent.introduction! @parent.introduction!
</script>
</mk-entrance-signin>

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

@ -1,8 +1,8 @@
mk-entrance-signup <mk-entrance-signup>
mk-signup <mk-signup></mk-signup>
button.cancel(type='button', onclick={ parent.signin }, title='キャンセル'): i.fa.fa-times <button class="cancel" type="button" onclick="{ parent.signin }" title="キャンセル"><i class="fa fa-times"></i></button>
<style type="stylus">
style. :scope
display block display block
width 368px width 368px
margin 0 auto margin 0 auto
@ -42,3 +42,10 @@ style.
> i > i
padding 14px padding 14px
</style>
</mk-entrance-signup>

15
src/web/app/desktop/tags/pages/home.tag
View file

@ -1,14 +1,17 @@
mk-home-page <mk-home-page>
mk-ui@ui(page={ page }): mk-home@home(mode={ parent.opts.mode }) <mk-ui ref="ui" page="{ page }">
<mk-home ref="home" mode="{ parent.opts.mode }"></mk-home>
style. </mk-ui>
<style type="stylus">
:scope
display block display block
background-position center center background-position center center
background-attachment fixed background-attachment fixed
background-size cover background-size cover
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@mixin \ui-progress @mixin \ui-progress
@ -49,3 +52,5 @@ script.
if !document.hidden if !document.hidden
@unread-count = 0 @unread-count = 0
document.title = 'Misskey' document.title = 'Misskey'
</script>
</mk-home-page>

24
src/web/app/desktop/tags/pages/not-found.tag
View file

@ -1,11 +1,12 @@
mk-not-found <mk-not-found>
mk-ui <mk-ui>
main <main>
h1 Not Found <h1>Not Found</h1><img src="/_/resources/rogge.jpg" alt=""/>
img(src='/_/resources/rogge.jpg', alt='') <div class="mask"></div>
div.mask </main>
</mk-ui>
style. <style type="stylus">
:scope
display block display block
main main
@ -44,3 +45,10 @@ style.
transform rotate(-12deg) transform rotate(-12deg)
background #D6D5DA background #D6D5DA
border-radius 2px 6px 7px 6px border-radius 2px 6px 7px 6px
</style>
</mk-not-found>

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

@ -1,7 +1,11 @@
mk-post-page <mk-post-page>
mk-ui@ui: main: mk-post-detail@detail(post={ parent.post }) <mk-ui ref="ui">
<main>
style. <mk-post-detail ref="detail" post="{ parent.post }"></mk-post-detail>
</main>
</mk-ui>
<style type="stylus">
:scope
display block display block
main main
@ -10,7 +14,8 @@ style.
> mk-post-detail > mk-post-detail
margin 0 auto margin 0 auto
script. </style>
<script>
@mixin \ui-progress @mixin \ui-progress
@post = @opts.post @post = @opts.post
@ -23,3 +28,5 @@ script.
@refs.ui.refs.detail.on \loaded ~> @refs.ui.refs.detail.on \loaded ~>
@Progress.done! @Progress.done!
</script>
</mk-post-page>

15
src/web/app/desktop/tags/pages/search.tag
View file

@ -1,10 +1,13 @@
mk-search-page <mk-search-page>
mk-ui@ui: mk-search@search(query={ parent.opts.query }) <mk-ui ref="ui">
<mk-search ref="search" query="{ parent.opts.query }"></mk-search>
style. </mk-ui>
<style type="stylus">
:scope
display block display block
script. </style>
<script>
@mixin \ui-progress @mixin \ui-progress
@on \mount ~> @on \mount ~>
@ -12,3 +15,5 @@ script.
@refs.ui.refs.search.on \loaded ~> @refs.ui.refs.search.on \loaded ~>
@Progress.done! @Progress.done!
</script>
</mk-search-page>

15
src/web/app/desktop/tags/pages/user.tag
View file

@ -1,10 +1,13 @@
mk-user-page <mk-user-page>
mk-ui@ui: mk-user@user(user={ parent.user }, page={ parent.opts.page }) <mk-ui ref="ui">
<mk-user ref="user" user="{ parent.user }" page="{ parent.opts.page }"></mk-user>
style. </mk-ui>
<style type="stylus">
:scope
display block display block
script. </style>
<script>
@mixin \ui-progress @mixin \ui-progress
@user = @opts.user @user = @opts.user
@ -18,3 +21,5 @@ script.
@refs.ui.refs.user.on \loaded ~> @refs.ui.refs.user.on \loaded ~>
@Progress.done! @Progress.done!
</script>
</mk-user-page>

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

@ -1,23 +1,19 @@
mk-post-detail-sub(title={ title }) <mk-post-detail-sub title="{ title }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + post.user.username }"><img class="avatar" src="{ post.user.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar" data-user-preview="{ post.user_id }"/></a>
a.avatar-anchor(href={ CONFIG.url + '/' + post.user.username }) <div class="main">
img.avatar(src={ post.user.avatar_url + '?thumbnail&size=64' }, alt='avatar', data-user-preview={ post.user_id }) <header>
div.main <div class="left"><a class="name" href="{ CONFIG.url + '/' + post.user.username }" data-user-preview="{ post.user_id }">{ post.user.name }</a><span class="username">@{ post.user.username }</span></div>
header <div class="right"><a class="time" href="{ url }">
div.left <mk-time time="{ post.created_at }"></mk-time></a></div>
a.name(href={ CONFIG.url + '/' + post.user.username }, data-user-preview={ post.user_id }) </header>
| { post.user.name } <div class="body">
span.username <div class="text" ref="text"></div>
| @{ post.user.username } <div class="media" if="{ post.media }">
div.right <virtual each="{ file in post.media }"><img src="{ file.url + '?thumbnail&amp;size=512' }" alt="{ file.name }" title="{ file.name }"/></virtual>
a.time(href={ url }) </div>
mk-time(time={ post.created_at }) </div>
div.body </div>
div.text@text <style type="stylus">
div.media(if={ post.media }) :scope
virtual(each={ file in post.media })
img(src={ file.url + '?thumbnail&size=512' }, alt={ file.name }, title={ file.name })
style.
display block display block
margin 0 margin 0
padding 20px 32px padding 20px 32px
@ -105,7 +101,8 @@ style.
display block display block
max-width 100% max-width 100%
script. </style>
<script>
@mixin \api @mixin \api
@mixin \text @mixin \text
@mixin \date-stringify @mixin \date-stringify
@ -139,3 +136,5 @@ script.
.then ~> .then ~>
@post.is_liked = true @post.is_liked = true
@update! @update!
</script>
</mk-post-detail-sub>

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

@ -1,77 +1,68 @@
mk-post-detail(title={ title }) <mk-post-detail title="{ title }">
<div class="fetching" if="{ fetching }">
div.fetching(if={ fetching }) <mk-ellipsis-icon></mk-ellipsis-icon>
mk-ellipsis-icon </div>
<div class="main" if="{ !fetching }">
div.main(if={ !fetching }) <button class="read-more" if="{ p.reply_to &amp;&amp; p.reply_to.reply_to_id &amp;&amp; context == null }" title="会話をもっと読み込む" onclick="{ loadContext }" disabled="{ loadingContext }"><i class="fa fa-ellipsis-v" if="{ !loadingContext }"></i><i class="fa fa-spinner fa-pulse" if="{ loadingContext }"></i></button>
<div class="context">
button.read-more(if={ p.reply_to && p.reply_to.reply_to_id && context == null }, title='会話をもっと読み込む', onclick={ load-context }, disabled={ loading-context }) <virtual each="{ post in context }">
i.fa.fa-ellipsis-v(if={ !loading-context }) <mk-post-detail-sub post="{ post }"></mk-post-detail-sub>
i.fa.fa-spinner.fa-pulse(if={ loading-context }) </virtual>
</div>
div.context <div class="reply-to" if="{ p.reply_to }">
virtual(each={ post in context }) <mk-post-detail-sub post="{ p.reply_to }"></mk-post-detail-sub>
mk-post-detail-sub(post={ post }) </div>
<div class="repost" if="{ isRepost }">
div.reply-to(if={ p.reply_to }) <p><a class="avatar-anchor" href="{ CONFIG.url + '/' + post.user.username }" data-user-preview="{ post.user_id }"><img class="avatar" src="{ post.user.avatar_url + '?thumbnail&amp;size=32' }" alt="avatar"/></a><i class="fa fa-retweet"></i><a class="name" href="{ CONFIG.url + '/' + post.user.username }">{ post.user.name }</a>がRepost</p>
mk-post-detail-sub(post={ p.reply_to }) </div>
<article><a class="avatar-anchor" href="{ CONFIG.url + '/' + p.user.username }"><img class="avatar" src="{ p.user.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar" data-user-preview="{ p.user.id }"/></a>
div.repost(if={ is-repost }) <header><a class="name" href="{ CONFIG.url + '/' + p.user.username }" data-user-preview="{ p.user.id }">{ p.user.name }</a><span class="username">@{ p.user.username }</span><a class="time" href="{ url }">
p <mk-time time="{ p.created_at }"></mk-time></a></header>
a.avatar-anchor(href={ CONFIG.url + '/' + post.user.username }, data-user-preview={ post.user_id }): img.avatar(src={ post.user.avatar_url + '?thumbnail&size=32' }, alt='avatar') <div class="body">
i.fa.fa-retweet <div class="text" ref="text"></div>
a.name(href={ CONFIG.url + '/' + post.user.username }) { post.user.name } <div class="media" if="{ p.media }">
| がRepost <virtual each="{ file in p.media }"><img src="{ file.url + '?thumbnail&amp;size=512' }" alt="{ file.name }" title="{ file.name }"/></virtual>
</div>
article </div>
a.avatar-anchor(href={ CONFIG.url + '/' + p.user.username }) <footer>
img.avatar(src={ p.user.avatar_url + '?thumbnail&size=64' }, alt='avatar', data-user-preview={ p.user.id }) <button onclick="{ reply }" title="返信"><i class="fa fa-reply"></i>
header <p class="count" if="{ p.replies_count &gt; 0 }">{ p.replies_count }</p>
a.name(href={ CONFIG.url + '/' + p.user.username }, data-user-preview={ p.user.id }) </button>
| { p.user.name } <button onclick="{ repost }" title="Repost"><i class="fa fa-retweet"></i>
span.username <p class="count" if="{ p.repost_count &gt; 0 }">{ p.repost_count }</p>
| @{ p.user.username } </button>
a.time(href={ url }) <button class="{ liked: p.is_liked }" onclick="{ like }" title="善哉"><i class="fa fa-thumbs-o-up"></i>
mk-time(time={ p.created_at }) <p class="count" if="{ p.likes_count &gt; 0 }">{ p.likes_count }</p>
div.body </button>
div.text@text <button onclick="{ NotImplementedException }"><i class="fa fa-ellipsis-h"></i></button>
div.media(if={ p.media }) </footer>
virtual(each={ file in p.media }) <div class="reposts-and-likes">
img(src={ file.url + '?thumbnail&size=512' }, alt={ file.name }, title={ file.name }) <div class="reposts" if="{ reposts &amp;&amp; reposts.length &gt; 0 }">
footer <header><a>{ p.repost_count }</a>
button(onclick={ reply }, title='返信') <p>Repost</p>
i.fa.fa-reply </header>
p.count(if={ p.replies_count > 0 }) { p.replies_count } <ol class="users">
button(onclick={ repost }, title='Repost') <li class="user" each="{ reposts }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + user.username }" title="{ user.name }" data-user-preview="{ user.id }"><img class="avatar" src="{ user.avatar_url + '?thumbnail&amp;size=32' }" alt=""/></a></li>
i.fa.fa-retweet </ol>
p.count(if={ p.repost_count > 0 }) { p.repost_count } </div>
button(class={ liked: p.is_liked }, onclick={ like }, title='善哉') <div class="likes" if="{ likes &amp;&amp; likes.length &gt; 0 }">
i.fa.fa-thumbs-o-up <header><a>{ p.likes_count }</a>
p.count(if={ p.likes_count > 0 }) { p.likes_count } <p>いいね</p>
button(onclick={ NotImplementedException }): i.fa.fa-ellipsis-h </header>
div.reposts-and-likes <ol class="users">
div.reposts(if={ reposts && reposts.length > 0 }) <li class="user" each="{ likes }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + username }" title="{ name }" data-user-preview="{ id }"><img class="avatar" src="{ avatar_url + '?thumbnail&amp;size=32' }" alt=""/></a></li>
header </ol>
a { p.repost_count } </div>
p Repost </div>
ol.users </article>
li.user(each={ reposts }) <div class="replies">
a.avatar-anchor(href={ CONFIG.url + '/' + user.username }, title={ user.name }, data-user-preview={ user.id }) <virtual each="{ post in replies }">
img.avatar(src={ user.avatar_url + '?thumbnail&size=32' }, alt='') <mk-post-detail-sub post="{ post }"></mk-post-detail-sub>
div.likes(if={ likes && likes.length > 0 }) </virtual>
header </div>
a { p.likes_count } </div>
p いいね <style type="stylus">
ol.users :scope
li.user(each={ likes })
a.avatar-anchor(href={ CONFIG.url + '/' + username }, title={ name }, data-user-preview={ id })
img.avatar(src={ avatar_url + '?thumbnail&size=32' }, alt='')
div.replies
virtual(each={ post in replies })
mk-post-detail-sub(post={ post })
style.
display block display block
margin 0 margin 0
padding 0 padding 0
@ -309,7 +300,8 @@ style.
> * > *
border-top 1px solid #eef0f2 border-top 1px solid #eef0f2
script. </style>
<script>
@mixin \api @mixin \api
@mixin \text @mixin \text
@mixin \user-preview @mixin \user-preview
@ -413,3 +405,5 @@ script.
@context = context.reverse! @context = context.reverse!
@loading-context = false @loading-context = false
@update! @update!
</script>
</mk-post-detail>

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

@ -1,24 +1,16 @@
mk-post-form-window <mk-post-form-window>
<mk-window ref="window" is-modal="{ true }" colored="{ true }"><yield to="header"><span if="{ !parent.opts.reply }">新規投稿</span><span if="{ parent.opts.reply }">返信</span><span class="files" if="{ parent.files.length != 0 }">添付: { parent.files.length }ファイル</span><span class="uploading-files" if="{ parent.uploadingFiles.length != 0 }">{ parent.uploadingFiles.length }個のファイルをアップロード中
mk-window@window(is-modal={ true }, colored={ true }) <mk-ellipsis></mk-ellipsis></span></yield>
<yield to="content">
<yield to="header"> <div class="ref" if="{ parent.opts.reply }">
span(if={ !parent.opts.reply }) 新規投稿 <mk-post-preview post="{ parent.opts.reply }"></mk-post-preview>
span(if={ parent.opts.reply }) 返信 </div>
span.files(if={ parent.files.length != 0 }) 添付: { parent.files.length }ファイル <div class="body">
span.uploading-files(if={ parent.uploading-files.length != 0 }) <mk-post-form ref="form" reply="{ parent.opts.reply }"></mk-post-form>
| { parent.uploading-files.length }個のファイルをアップロード中 </div></yield>
mk-ellipsis </mk-window>
</yield> <style type="stylus">
:scope
<yield to="content">
div.ref(if={ parent.opts.reply })
mk-post-preview(post={ parent.opts.reply })
div.body
mk-post-form@form(reply={ parent.opts.reply })
</yield>
style.
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
@ -38,7 +30,8 @@ style.
> mk-post-preview > mk-post-preview
margin 16px 22px margin 16px 22px
script. </style>
<script>
@uploading-files = [] @uploading-files = []
@files = [] @files = []
@ -58,3 +51,5 @@ script.
@refs.window.refs.form.on \change-files (files) ~> @refs.window.refs.form.on \change-files (files) ~>
@files = files @files = files
@update! @update!
</script>
</mk-post-form-window>

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

@ -1,24 +1,25 @@
mk-post-form(ondragover={ ondragover }, ondragenter={ ondragenter }, ondragleave={ ondragleave }, ondrop={ ondrop }) <mk-post-form ondragover="{ ondragover }" ondragenter="{ ondragenter }" ondragleave="{ ondragleave }" ondrop="{ ondrop }">
textarea@text(disabled={ wait }, class={ withfiles: files.length != 0 }, oninput={ update }, onkeydown={ onkeydown }, onpaste={ onpaste }, placeholder={ opts.reply ? 'この投稿への返信...' : 'いまどうしてる？' }) <textarea class="{ withfiles: files.length != 0 }" ref="text" disabled="{ wait }" oninput="{ update }" onkeydown="{ onkeydown }" onpaste="{ onpaste }" placeholder="{ opts.reply ? 'この投稿への返信...' : 'いまどうしてる？' }"></textarea>
div.attaches(if={ files.length != 0 }) <div class="attaches" if="{ files.length != 0 }">
ul.files@attaches <ul class="files" ref="attaches">
li.file(each={ files }) <li class="file" each="{ files }">
div.img(style='background-image: url({ url + "?thumbnail&size=64" })', title={ name }) <div class="img" style="background-image: url({ url + &quot;?thumbnail&amp;size=64&quot; })" title="{ name }"></div><img class="remove" onclick="{ _remove }" src="/_/resources/desktop/remove.png" title="添付取り消し" alt=""/>
img.remove(onclick={ _remove }, src='/_/resources/desktop/remove.png', title='添付取り消し', alt='') </li>
li.add(if={ files.length < 4 }, title='PCからファイルを添付', onclick={ select-file }): i.fa.fa-plus <li class="add" if="{ files.length &lt; 4 }" title="PCからファイルを添付" onclick="{ selectFile }"><i class="fa fa-plus"></i></li>
p.remain </ul>
| 残り{ 4 - files.length } <p class="remain">残り{ 4 - files.length }</p>
mk-uploader@uploader </div>
button@upload(title='PCからファイルを添付', onclick={ select-file }): i.fa.fa-upload <mk-uploader ref="uploader"></mk-uploader>
button@drive(title='ドライブからファイルを添付', onclick={ select-file-from-drive }): i.fa.fa-cloud <button ref="upload" title="PCからファイルを添付" onclick="{ selectFile }"><i class="fa fa-upload"></i></button>
p.text-count(class={ over: refs.text.value.length > 300 }) のこり{ 300 - refs.text.value.length }文字 <button ref="drive" title="ドライブからファイルを添付" onclick="{ selectFileFromDrive }"><i class="fa fa-cloud"></i></button>
button@submit(class={ wait: wait }, disabled={ wait || (refs.text.value.length == 0 && files.length == 0) }, onclick={ post }) <p class="text-count { over: refs.text.value.length &gt; 300 }">のこり{ 300 - refs.text.value.length }文字</p>
| { wait ? '投稿中' : opts.reply ? '返信' : '投稿' } <button class="{ wait: wait }" ref="submit" disabled="{ wait || (refs.text.value.length == 0 &amp;&amp; files.length == 0) }" onclick="{ post }">{ wait ? '投稿中' : opts.reply ? '返信' : '投稿' }
mk-ellipsis(if={ wait }) <mk-ellipsis if="{ wait }"></mk-ellipsis>
input@file(type='file', accept='image/*', multiple, tabindex='-1', onchange={ change-file }) </button>
div.dropzone(if={ draghover }) <input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" onchange="{ changeFile }"/>
<div class="dropzone" if="{ draghover }"></div>
style. <style type="stylus">
:scope
display block display block
padding 16px padding 16px
background lighten($theme-color, 95%) background lighten($theme-color, 95%)
@ -280,7 +281,8 @@ style.
border dashed 2px rgba($theme-color, 0.5) border dashed 2px rgba($theme-color, 0.5)
pointer-events none pointer-events none
script. </style>
<script>
@mixin \api @mixin \api
@mixin \notify @mixin \notify
@mixin \autocomplete @mixin \autocomplete
@ -428,3 +430,5 @@ script.
.then ~> .then ~>
@wait = false @wait = false
@update! @update!
</script>
</mk-post-form>

33
src/web/app/desktop/tags/post-preview.tag
View file

@ -1,19 +1,15 @@
mk-post-preview(title={ title }) <mk-post-preview title="{ title }">
article <article><a class="avatar-anchor" href="{ CONFIG.url + '/' + post.user.username }"><img class="avatar" src="{ post.user.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar" data-user-preview="{ post.user_id }"/></a>
a.avatar-anchor(href={ CONFIG.url + '/' + post.user.username }) <div class="main">
img.avatar(src={ post.user.avatar_url + '?thumbnail&size=64' }, alt='avatar', data-user-preview={ post.user_id }) <header><a class="name" href="{ CONFIG.url + '/' + post.user.username }" data-user-preview="{ post.user_id }">{ post.user.name }</a><span class="username">@{ post.user.username }</span><a class="time" href="{ CONFIG.url + '/' + post.user.username + '/' + post.id }">
div.main <mk-time time="{ post.created_at }"></mk-time></a></header>
header <div class="body">
a.name(href={ CONFIG.url + '/' + post.user.username }, data-user-preview={ post.user_id }) <mk-sub-post-content class="text" post="{ post }"></mk-sub-post-content>
| { post.user.name } </div>
span.username </div>
| @{ post.user.username } </article>
a.time(href={ CONFIG.url + '/' + post.user.username + '/' + post.id }) <style type="stylus">
mk-time(time={ post.created_at }) :scope
div.body
mk-sub-post-content.text(post={ post })
style.
display block display block
margin 0 margin 0
padding 0 padding 0
@ -85,10 +81,13 @@ style.
font-size 1.1em font-size 1.1em
color #717171 color #717171
script. </style>
<script>
@mixin \date-stringify @mixin \date-stringify
@mixin \user-preview @mixin \user-preview
@post = @opts.post @post = @opts.post
@title = @date-stringify @post.created_at @title = @date-stringify @post.created_at
</script>
</mk-post-preview>

13
src/web/app/desktop/tags/post-status-graph.tag
View file

@ -1,13 +1,14 @@
mk-post-status-graph <mk-post-status-graph>
canvas@canv(width={ opts.width }, height={ opts.height }) <canvas ref="canv" width="{ opts.width }" height="{ opts.height }"></canvas>
<style type="stylus">
style. :scope
display block display block
> canvas > canvas
margin 0 auto margin 0 auto
script. </style>
<script>
@mixin \api @mixin \api
@mixin \is-promise @mixin \is-promise
@ -70,3 +71,5 @@ script.
] ]
options: options:
responsive: false responsive: false
</script>
</mk-post-status-graph>

38
src/web/app/desktop/tags/progress-dialog.tag
View file

@ -1,20 +1,19 @@
mk-progress-dialog <mk-progress-dialog>
mk-window@window(is-modal={ false }, can-close={ false }, width={ '500px' }) <mk-window ref="window" is-modal="{ false }" can-close="{ false }" width="{ '500px' }">
<yield to="header"> <yield to="header">{ parent.title }
| { parent.title } <mk-ellipsis></mk-ellipsis></yield>
mk-ellipsis <yield to="content">
</yield> <div class="body">
<yield to="content"> <p class="init" if="{ isNaN(parent.value) }">待機中
div.body <mk-ellipsis></mk-ellipsis>
p.init(if={ isNaN(parent.value) }) </p>
| 待機中 <p class="percentage" if="{ !isNaN(parent.value) }">{ Math.floor((parent.value / parent.max) * 100) }</p>
mk-ellipsis <progress if="{ !isNaN(parent.value) &amp;&amp; parent.value &lt; parent.max }" value="{ isNaN(parent.value) ? 0 : parent.value }" max="{ parent.max }"></progress>
p.percentage(if={ !isNaN(parent.value) }) { Math.floor((parent.value / parent.max) * 100) } <div class="progress waiting" if="{ parent.value &gt;= parent.max }"></div>
progress(if={ !isNaN(parent.value) && parent.value < parent.max }, value={ isNaN(parent.value) ? 0 : parent.value }, max={ parent.max }) </div></yield>
div.progress.waiting(if={ parent.value >= parent.max }) </mk-window>
</yield> <style type="stylus">
:scope
style.
display block display block
> mk-window > mk-window
@ -74,7 +73,8 @@ style.
from {background-position: 0 0;} from {background-position: 0 0;}
to {background-position: -64px 32px;} to {background-position: -64px 32px;}
script. </style>
<script>
@title = @opts.title @title = @opts.title
@value = parse-int @opts.value, 10 @value = parse-int @opts.value, 10
@max = parse-int @opts.max, 10 @max = parse-int @opts.max, 10
@ -90,3 +90,5 @@ script.
@close = ~> @close = ~>
@refs.window.close! @refs.window.close!
</script>
</mk-progress-dialog>

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

@ -1,21 +1,17 @@
mk-repost-form-window <mk-repost-form-window>
mk-window@window(is-modal={ true }, colored={ true }) <mk-window ref="window" is-modal="{ true }" colored="{ true }"><yield to="header"><i class="fa fa-retweet"></i>この投稿をRepostしますか？</yield>
<yield to="header"> <yield to="content">
i.fa.fa-retweet <mk-repost-form ref="form" post="{ parent.opts.post }"></mk-repost-form></yield>
| この投稿をRepostしますか？ </mk-window>
</yield> <style type="stylus">
<yield to="content"> :scope
mk-repost-form@form(post={ parent.opts.post })
</yield>
style.
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > i
margin-right 4px margin-right 4px
script. </style>
<script>
@on-document-keydown = (e) ~> @on-document-keydown = (e) ~>
tag = e.target.tag-name.to-lower-case! tag = e.target.tag-name.to-lower-case!
if tag != \input and tag != \textarea if tag != \input and tag != \textarea
@ -36,3 +32,5 @@ script.
@on \unmount ~> @on \unmount ~>
document.remove-event-listener \keydown @on-document-keydown document.remove-event-listener \keydown @on-document-keydown
</script>
</mk-repost-form-window>

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

@ -1,13 +1,14 @@
mk-repost-form <mk-repost-form>
mk-post-preview(post={ opts.post }) <mk-post-preview post="{ opts.post }"></mk-post-preview>
div.form(if={ quote }) <div class="form" if="{ quote }">
textarea@text(disabled={ wait }, placeholder='この投稿を引用...') <textarea ref="text" disabled="{ wait }" placeholder="この投稿を引用..."></textarea>
footer </div>
a.quote(if={ !quote }, onclick={ onquote }) 引用する... <footer><a class="quote" if="{ !quote }" onclick="{ onquote }">引用する...</a>
button.cancel(onclick={ cancel }) キャンセル <button class="cancel" onclick="{ cancel }">キャンセル</button>
button.ok(onclick={ ok }) Repost <button class="ok" onclick="{ ok }">Repost</button>
</footer>
style. <style type="stylus">
:scope
> mk-post-preview > mk-post-preview
margin 16px 22px margin 16px 22px
@ -111,7 +112,8 @@ style.
background $theme-color background $theme-color
border-color $theme-color border-color $theme-color
script. </style>
<script>
@mixin \api @mixin \api
@mixin \notify @mixin \notify
@ -138,3 +140,5 @@ script.
@onquote = ~> @onquote = ~>
@quote = true @quote = true
</script>
</mk-repost-form>

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

@ -1,16 +1,11 @@
mk-search-posts <mk-search-posts>
div.loading(if={ is-loading }) <div class="loading" if="{ isLoading }">
mk-ellipsis-icon <mk-ellipsis-icon></mk-ellipsis-icon>
p.empty(if={ is-empty }) </div>
i.fa.fa-search <p class="empty" if="{ isEmpty }"><i class="fa fa-search"></i>「{ query }」に関する投稿は見つかりませんでした。</p>
| 「{ query }」に関する投稿は見つかりませんでした。 <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>
mk-timeline@timeline <style type="stylus">
<yield to="footer"> :scope
i.fa.fa-moon-o(if={ !parent.more-loading })
i.fa.fa-spinner.fa-pulse.fa-fw(if={ parent.more-loading })
</yield>
style.
display block display block
background #fff background #fff
@ -31,7 +26,8 @@ style.
font-size 3em font-size 3em
color #ccc color #ccc
script. </style>
<script>
@mixin \api @mixin \api
@mixin \get-post-summary @mixin \get-post-summary
@ -86,3 +82,5 @@ script.
current = window.scroll-y + window.inner-height current = window.scroll-y + window.inner-height
if current > document.body.offset-height - 16 # 遊び if current > document.body.offset-height - 16 # 遊び
@more! @more!
</script>
</mk-search-posts>

18
src/web/app/desktop/tags/search.tag
View file

@ -1,9 +1,10 @@
mk-search <mk-search>
header <header>
h1 { query } <h1>{ query }</h1>
mk-search-posts@posts(query={ query }) </header>
<mk-search-posts ref="posts" query="{ query }"></mk-search-posts>
style. <style type="stylus">
:scope
display block display block
padding-bottom 32px padding-bottom 32px
@ -20,9 +21,12 @@ style.
border-radius 6px border-radius 6px
overflow hidden overflow hidden
script. </style>
<script>
@query = @opts.query @query = @opts.query
@on \mount ~> @on \mount ~>
@refs.posts.on \loaded ~> @refs.posts.on \loaded ~>
@trigger \loaded @trigger \loaded
</script>
</mk-search>

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

@ -1,18 +1,16 @@
mk-select-file-from-drive-window <mk-select-file-from-drive-window>
mk-window@window(is-modal={ true }, width={ '800px' }, height={ '500px' }) <mk-window ref="window" is-modal="{ true }" width="{ '800px' }" height="{ '500px' }"><yield to="header">
<yield to="header"> <mk-raw content="{ parent.title }"></mk-raw><span class="count" if="{ parent.multiple &amp;&amp; parent.file.length &gt; 0 }">({ parent.file.length }ファイル選択中)</span></yield>
mk-raw(content={ parent.title }) <yield to="content">
span.count(if={ parent.multiple && parent.file.length > 0 }) ({ parent.file.length }ファイル選択中) <mk-drive-browser ref="browser" multiple="{ parent.multiple }"></mk-drive-browser>
</yield> <div>
<yield to="content"> <button class="upload" title="PCからドライブにファイルをアップロード" onclick="{ parent.upload }"><i class="fa fa-upload"></i></button>
mk-drive-browser@browser(multiple={ parent.multiple }) <button class="cancel" onclick="{ parent.close }">キャンセル</button>
div <button class="ok" disabled="{ parent.multiple &amp;&amp; parent.file.length == 0 }" onclick="{ parent.ok }">決定</button>
button.upload(title='PCからドライブにファイルをアップロード', onclick={ parent.upload }): i.fa.fa-upload </div></yield>
button.cancel(onclick={ parent.close }) キャンセル </mk-window>
button.ok(disabled={ parent.multiple && parent.file.length == 0 }, onclick={ parent.ok }) 決定 <style type="stylus">
</yield> :scope
style.
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> mk-raw > mk-raw
@ -131,7 +129,8 @@ style.
background #ececec background #ececec
border-color #dcdcdc border-color #dcdcdc
script. </style>
<script>
@file = [] @file = []
@multiple = if @opts.multiple? then @opts.multiple else false @multiple = if @opts.multiple? then @opts.multiple else false
@ -158,3 +157,5 @@ script.
@ok = ~> @ok = ~>
@trigger \selected @file @trigger \selected @file
@refs.window.close! @refs.window.close!
</script>
</mk-select-file-from-drive-window>

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

@ -1,10 +1,9 @@
mk-set-avatar-suggestion(onclick={ set }) <mk-set-avatar-suggestion onclick="{ set }">
p <p><b>アバターを設定</b>してみませんか？
b アバターを設定 <button onclick="{ close }"><i class="fa fa-times"></i></button>
| してみませんか？ </p>
button(onclick={ close }): i.fa.fa-times <style type="stylus">
:scope
style.
display block display block
cursor pointer cursor pointer
color #fff color #fff
@ -30,7 +29,8 @@ style.
padding 8px padding 8px
color #fff color #fff
script. </style>
<script>
@mixin \i @mixin \i
@mixin \update-avatar @mixin \update-avatar
@ -42,3 +42,5 @@ script.
e.prevent-default! e.prevent-default!
e.stop-propagation! e.stop-propagation!
@unmount! @unmount!
</script>
</mk-set-avatar-suggestion>

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

@ -1,10 +1,9 @@
mk-set-banner-suggestion(onclick={ set }) <mk-set-banner-suggestion onclick="{ set }">
p <p><b>バナーを設定</b>してみませんか？
b バナーを設定 <button onclick="{ close }"><i class="fa fa-times"></i></button>
| してみませんか？ </p>
button(onclick={ close }): i.fa.fa-times <style type="stylus">
:scope
style.
display block display block
cursor pointer cursor pointer
color #fff color #fff
@ -30,7 +29,8 @@ style.
padding 8px padding 8px
color #fff color #fff
script. </style>
<script>
@mixin \i @mixin \i
@mixin \update-banner @mixin \update-banner
@ -42,3 +42,5 @@ script.
e.prevent-default! e.prevent-default!
e.stop-propagation! e.stop-propagation!
@unmount! @unmount!
</script>
</mk-set-banner-suggestion>

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

@ -1,14 +1,10 @@
mk-settings-window <mk-settings-window>
mk-window@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"> <yield to="content">
i.fa.fa-cog <mk-settings></mk-settings></yield>
| 設定 </mk-window>
</yield> <style type="stylus">
<yield to="content"> :scope
mk-settings
</yield>
style.
> mk-window > mk-window
[data-yield='header'] [data-yield='header']
> i > i
@ -17,10 +13,13 @@ style.
[data-yield='content'] [data-yield='content']
overflow auto overflow auto
script. </style>
<script>
@on \mount ~> @on \mount ~>
@refs.window.on \closed ~> @refs.window.on \closed ~>
@unmount! @unmount!
@close = ~> @close = ~>
@refs.window.close! @refs.window.close!
</script>
</mk-settings-window>

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

@ -1,88 +1,80 @@
mk-settings <mk-settings>
div.nav <div class="nav">
p(class={ active: page == 'account' }, onmousedown={ set-page.bind(null, 'account') }) <p class="{ active: page == 'account' }" onmousedown="{ setPage.bind(null, 'account') }"><i class="fa fa-fw fa-user"></i>アカウント</p>
i.fa.fa-fw.fa-user <p class="{ active: page == 'web' }" onmousedown="{ setPage.bind(null, 'web') }"><i class="fa fa-fw fa-desktop"></i>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 == 'web' }, onmousedown={ set-page.bind(null, 'web') }) <p class="{ active: page == 'drive' }" onmousedown="{ setPage.bind(null, 'drive') }"><i class="fa fa-fw fa-cloud"></i>ドライブ</p>
i.fa.fa-fw.fa-desktop <p class="{ active: page == 'apps' }" onmousedown="{ setPage.bind(null, 'apps') }"><i class="fa fa-fw fa-puzzle-piece"></i>アプリ</p>
| Web <p class="{ active: page == 'signin' }" onmousedown="{ setPage.bind(null, 'signin') }"><i class="fa fa-fw fa-sign-in"></i>ログイン履歴</p>
p(class={ active: page == 'notification' }, onmousedown={ set-page.bind(null, 'notification') }) <p class="{ active: page == 'password' }" onmousedown="{ setPage.bind(null, 'password') }"><i class="fa fa-fw fa-unlock-alt"></i>パスワード</p>
i.fa.fa-fw.fa-bell-o <p class="{ active: page == 'api' }" onmousedown="{ setPage.bind(null, 'api') }"><i class="fa fa-fw fa-key"></i>API</p>
| 通知 </div>
p(class={ active: page == 'drive' }, onmousedown={ set-page.bind(null, 'drive') }) <div class="pages">
i.fa.fa-fw.fa-cloud <section class="account" show="{ page == 'account' }">
| ドライブ <h1>アカウント</h1>
p(class={ active: page == 'apps' }, onmousedown={ set-page.bind(null, 'apps') }) <label class="avatar">
i.fa.fa-fw.fa-puzzle-piece <p>アバター</p><img class="avatar" src="{ I.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar"/>
| アプリ <button class="style-normal" onclick="{ avatar }">画像を選択</button>
p(class={ active: page == 'signin' }, onmousedown={ set-page.bind(null, 'signin') }) </label>
i.fa.fa-fw.fa-sign-in <label>
| ログイン履歴 <p>名前</p>
p(class={ active: page == 'password' }, onmousedown={ set-page.bind(null, 'password') }) <input ref="accountName" type="text" value="{ I.name }"/>
i.fa.fa-fw.fa-unlock-alt </label>
| パスワード <label>
p(class={ active: page == 'api' }, onmousedown={ set-page.bind(null, 'api') }) <p>場所</p>
i.fa.fa-fw.fa-key <input ref="accountLocation" type="text" value="{ I.location }"/>
| API </label>
<label>
div.pages <p>自己紹介</p>
section.account(show={ page == 'account' }) <textarea ref="accountBio">{ I.bio }</textarea>
h1 アカウント </label>
label.avatar <label>
p アバター <p>誕生日</p>
img.avatar(src={ I.avatar_url + '?thumbnail&size=64' }, alt='avatar') <input ref="accountBirthday" type="date" value="{ I.birthday }"/>
button.style-normal(onclick={ avatar }) 画像を選択 </label>
label <button class="style-primary" onclick="{ updateAccount }">保存</button>
p 名前 </section>
input@account-name(type='text', value={ I.name }) <section class="web" show="{ page == 'web' }">
label <h1>デザイン</h1>
p 場所 <label>
input@account-location(type='text', value={ I.location }) <p>壁紙</p>
label <button class="style-normal" onclick="{ wallpaper }">画像を選択</button>
p 自己紹介 </label>
textarea@account-bio { I.bio } </section>
label <section class="web" show="{ page == 'web' }">
p 誕生日 <h1>その他</h1>
input@account-birthday(type='date', value={ I.birthday }) <label class="checkbox">
button.style-primary(onclick={ update-account }) 保存 <input type="checkbox" checked="{ I.data.cache }" onclick="{ updateCache }"/>
<p>読み込みを高速化する</p>
section.web(show={ page == 'web' }) <p>API通信時に新鮮なユーザー情報をキャッシュすることでフェッチのオーバーヘッドを無くします。(実験的)</p>
h1 デザイン </label>
label <label class="checkbox">
p 壁紙 <input type="checkbox" checked="{ I.data.debug }" onclick="{ updateDebug }"/>
button.style-normal(onclick={ wallpaper }) 画像を選択 <p>開発者モード</p>
section.web(show={ page == 'web' }) <p>デバッグ等の開発者モードを有効にします。</p>
h1 その他 </label>
label.checkbox <label class="checkbox">
input(type='checkbox', checked={ I.data.cache }, onclick={ update-cache }) <input type="checkbox" checked="{ I.data.nya }" onclick="{ updateNya }"/>
p 読み込みを高速化する <p><i>な</i>を<i>にゃ</i>に変換する</p>
p API通信時に新鮮なユーザー情報をキャッシュすることでフェッチのオーバーヘッドを無くします。(実験的) <p>攻撃的な投稿が多少和らぐ可能性があります。</p>
label.checkbox </label>
input(type='checkbox', checked={ I.data.debug }, onclick={ update-debug }) </section>
p 開発者モード <section class="signin" show="{ page == 'signin' }">
p デバッグ等の開発者モードを有効にします。 <h1>ログイン履歴</h1>
label.checkbox <mk-signin-history></mk-signin-history>
input(type='checkbox', checked={ I.data.nya }, onclick={ update-nya }) </section>
p <i>な</i>を<i>にゃ</i>に変換する <section class="api" show="{ page == 'api' }">
p 攻撃的な投稿が多少和らぐ可能性があります。 <h1>API</h1>
<p>Token:<code>{ I.token }</code></p>
section.signin(show={ page == 'signin' }) <p>APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。</p>
h1 ログイン履歴 <p>アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。</p>
mk-signin-history <p>万が一このトークンが漏れたりその可能性がある場合は
<button class="regenerate" onclick="{ regenerateToken }">トークンを再生成</button>できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)
section.api(show={ page == 'api' }) </p>
h1 API </section>
p </div>
| Token: <style type="stylus">
code { I.token } :scope
p APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。
p アカウントを乗っ取られてしまう可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。
p
| 万が一このトークンが漏れたりその可能性がある場合は
button.regenerate(onclick={ regenerate-token }) トークンを再生成
| できます。(副作用として、ログインしているすべてのデバイスでログアウトが発生します)
style.
display block display block
input:not([type]) input:not([type])
@ -214,7 +206,8 @@ style.
&:hover &:hover
text-decoration underline text-decoration underline
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@mixin \dialog @mixin \dialog
@ -269,3 +262,5 @@ script.
nya: @I.data.nya nya: @I.data.nya
.then ~> .then ~>
@update-i! @update-i!
</script>
</mk-settings>

26
src/web/app/desktop/tags/signin-history.tag
View file

@ -1,14 +1,13 @@
mk-signin-history <mk-signin-history>
div.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 }"></mk-time>
header <header><i class="fa fa-check" if="{ success }"></i><i class="fa fa-times" if="{ !success }"></i><span class="ip">{ ip }</span></header>
i.fa.fa-check(if={ success }) <pre><code>{ JSON.stringify(headers, null, ' ') }</code></pre>
i.fa.fa-times(if={ !success }) </div>
span.ip { ip } </div>
pre: code { JSON.stringify(headers, null, ' ') } <style type="stylus">
:scope
style.
display block display block
> .records > .records
@ -47,7 +46,8 @@ style.
word-break break-all word-break break-all
color #4a535a color #4a535a
script. </style>
<script>
@mixin \api @mixin \api
@mixin \stream @mixin \stream
@ -71,3 +71,5 @@ script.
@on-signin = (signin) ~> @on-signin = (signin) ~>
@history.unshift signin @history.unshift signin
@update! @update!
</script>
</mk-signin-history>

29
src/web/app/desktop/tags/stream-indicator.tag
View file

@ -1,19 +1,11 @@
mk-stream-indicator <mk-stream-indicator>
p(if={ state == 'initializing' }) <p if="{ state == 'initializing' }"><i class="fa fa-spinner fa-spin"></i><span>接続中
i.fa.fa-spinner.fa-spin <mk-ellipsis></mk-ellipsis></span></p>
span <p if="{ state == 'reconnecting' }"><i class="fa fa-spinner fa-spin"></i><span>切断されました 接続中
| 接続中 <mk-ellipsis></mk-ellipsis></span></p>
mk-ellipsis <p if="{ state == 'connected' }"><i class="fa fa-check"></i><span>接続完了</span></p>
p(if={ state == 'reconnecting' }) <style type="stylus">
i.fa.fa-spinner.fa-spin :scope
span
| 切断されました 接続中
mk-ellipsis
p(if={ state == 'connected' })
i.fa.fa-check
span 接続完了
style.
display block display block
pointer-events none pointer-events none
position fixed position fixed
@ -33,7 +25,8 @@ style.
> i > i
margin-right 0.25em margin-right 0.25em
script. </style>
<script>
@mixin \stream @mixin \stream
@on \before-mount ~> @on \before-mount ~>
@ -57,3 +50,5 @@ script.
Velocity @root, { Velocity @root, {
opacity: 1 opacity: 1
} 0ms } 0ms
</script>
</mk-stream-indicator>

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

@ -1,13 +1,11 @@
mk-sub-post-content <mk-sub-post-content>
div.body <div class="body"><a class="reply" if="{ post.reply_to_id }"><i class="fa fa-reply"></i></a><span ref="text"></span><a class="quote" if="{ post.repost_id }" href="{ '/post:' + post.repost_id }">RP: ...</a></div>
a.reply(if={ post.reply_to_id }): i.fa.fa-reply <details if="{ post.media }">
span@text <summary>({ post.media.length }枚の画像)</summary>
a.quote(if={ post.repost_id }, href={ '/post:' + post.repost_id }) RP: ... <mk-images-viewer images="{ post.media }"></mk-images-viewer>
details(if={ post.media }) </details>
summary ({ post.media.length }枚の画像) <style type="stylus">
mk-images-viewer(images={ post.media }) :scope
style.
display block display block
word-wrap break-word word-wrap break-word
@ -21,7 +19,8 @@ style.
font-style oblique font-style oblique
color #a0bf46 color #a0bf46
script. </style>
<script>
@mixin \text @mixin \text
@mixin \user-preview @mixin \user-preview
@ -35,3 +34,5 @@ script.
@refs.text.children.for-each (e) ~> @refs.text.children.for-each (e) ~>
if e.tag-name == \MK-URL if e.tag-name == \MK-URL
riot.mount e riot.mount e
</script>
</mk-sub-post-content>

38
src/web/app/desktop/tags/timeline-post-sub.tag
View file

@ -1,19 +1,14 @@
mk-timeline-post-sub(title={ title }) <mk-timeline-post-sub title="{ title }">
article <article><a class="avatar-anchor" href="{ CONFIG.url + '/' + post.user.username }"><img class="avatar" src="{ post.user.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar" data-user-preview="{ post.user_id }"/></a>
a.avatar-anchor(href={ CONFIG.url + '/' + post.user.username }) <div class="main">
img.avatar(src={ post.user.avatar_url + '?thumbnail&size=64' }, alt='avatar', data-user-preview={ post.user_id }) <header><a class="name" href="{ CONFIG.url + '/' + post.user.username }" data-user-preview="{ post.user_id }">{ post.user.name }</a><span class="username">@{ post.user.username }</span><a class="created-at" href="{ CONFIG.url + '/' + post.user.username + '/' + post.id }">
div.main <mk-time time="{ post.created_at }"></mk-time></a></header>
header <div class="body">
a.name(href={ CONFIG.url + '/' + post.user.username }, data-user-preview={ post.user_id }) <mk-sub-post-content class="text" post="{ post }"></mk-sub-post-content>
| { post.user.name } </div>
span.username </div>
| @{ post.user.username } </article>
a.created-at(href={ CONFIG.url + '/' + post.user.username + '/' + post.id }) <script>
mk-time(time={ post.created_at })
div.body
mk-sub-post-content.text(post={ post })
script.
@mixin \date-stringify @mixin \date-stringify
@mixin \user-preview @mixin \user-preview
@ -21,7 +16,9 @@ script.
@title = @date-stringify @post.created_at @title = @date-stringify @post.created_at
style. </script>
<style type="stylus">
:scope
display block display block
margin 0 margin 0
padding 0 padding 0
@ -93,3 +90,10 @@ style.
padding 0 padding 0
font-size 1.1em font-size 1.1em
color #717171 color #717171
</style>
</mk-timeline-post-sub>

134
src/web/app/desktop/tags/timeline-post.tag
View file

@ -1,55 +1,44 @@
mk-timeline-post(tabindex='-1', title={ title }, onkeydown={ on-key-down }) <mk-timeline-post tabindex="-1" title="{ title }" onkeydown="{ onKeyDown }">
<div class="reply-to" if="{ p.reply_to }">
div.reply-to(if={ p.reply_to }) <mk-timeline-post-sub post="{ p.reply_to }"></mk-timeline-post-sub>
mk-timeline-post-sub(post={ p.reply_to }) </div>
<div class="repost" if="{ isRepost }">
div.repost(if={ is-repost }) <p><a class="avatar-anchor" href="{ CONFIG.url + '/' + post.user.username }" data-user-preview="{ post.user_id }"><img class="avatar" src="{ post.user.avatar_url + '?thumbnail&amp;size=32' }" alt="avatar"/></a><i class="fa fa-retweet"></i><a class="name" href="{ CONFIG.url + '/' + post.user.username }" data-user-preview="{ post.user_id }">{ post.user.name }</a>がRepost</p>
p <mk-time time="{ post.created_at }"></mk-time>
a.avatar-anchor(href={ CONFIG.url + '/' + post.user.username }, data-user-preview={ post.user_id }): img.avatar(src={ post.user.avatar_url + '?thumbnail&size=32' }, alt='avatar') </div>
i.fa.fa-retweet <article><a class="avatar-anchor" href="{ CONFIG.url + '/' + p.user.username }"><img class="avatar" src="{ p.user.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar" data-user-preview="{ p.user.id }"/></a>
a.name(href={ CONFIG.url + '/' + post.user.username }, data-user-preview={ post.user_id }) { post.user.name } <div class="main">
| がRepost <header><a class="name" href="{ CONFIG.url + '/' + p.user.username }" data-user-preview="{ p.user.id }">{ p.user.name }</a><span class="username">@{ p.user.username }</span><a class="created-at" href="{ url }">
mk-time(time={ post.created_at }) <mk-time time="{ p.created_at }"></mk-time></a></header>
<div class="body">
article <div class="text"><a class="reply" if="{ p.reply_to }"><i class="fa fa-reply"></i></a><span ref="text"></span><a class="quote" if="{ p.repost != null }">RP:</a></div>
a.avatar-anchor(href={ CONFIG.url + '/' + p.user.username }) <div class="media" if="{ p.media }">
img.avatar(src={ p.user.avatar_url + '?thumbnail&size=64' }, alt='avatar', data-user-preview={ p.user.id }) <mk-images-viewer images="{ p.media }"></mk-images-viewer>
div.main </div>
header <div class="repost" if="{ p.repost }"><i class="fa fa-quote-right fa-flip-horizontal"></i>
a.name(href={ CONFIG.url + '/' + p.user.username }, data-user-preview={ p.user.id }) <mk-post-preview class="repost" post="{ p.repost }"></mk-post-preview>
| { p.user.name } </div>
span.username </div>
| @{ p.user.username } <footer>
a.created-at(href={ url }) <button onclick="{ reply }" title="返信"><i class="fa fa-reply"></i>
mk-time(time={ p.created_at }) <p class="count" if="{ p.replies_count &gt; 0 }">{ p.replies_count }</p>
div.body </button>
div.text <button onclick="{ repost }" title="Repost"><i class="fa fa-retweet"></i>
a.reply(if={ p.reply_to }): i.fa.fa-reply <p class="count" if="{ p.repost_count &gt; 0 }">{ p.repost_count }</p>
span@text </button>
a.quote(if={ p.repost != null }) RP: <button class="{ liked: p.is_liked }" onclick="{ like }" title="善哉"><i class="fa fa-thumbs-o-up"></i>
div.media(if={ p.media }) <p class="count" if="{ p.likes_count &gt; 0 }">{ p.likes_count }</p>
mk-images-viewer(images={ p.media }) </button>
div.repost(if={ p.repost }) <button onclick="{ NotImplementedException }"><i class="fa fa-ellipsis-h"></i></button>
i.fa.fa-quote-right.fa-flip-horizontal <button onclick="{ toggleDetail }" title="詳細"><i class="fa fa-caret-down" if="{ !isDetailOpened }"></i><i class="fa fa-caret-up" if="{ isDetailOpened }"></i></button>
mk-post-preview.repost(post={ p.repost }) </footer>
footer </div>
button(onclick={ reply }, title='返信') </article>
i.fa.fa-reply <div class="detail" if="{ isDetailOpened }">
p.count(if={ p.replies_count > 0 }) { p.replies_count } <mk-post-status-graph width="462" height="130" post="{ p }"></mk-post-status-graph>
button(onclick={ repost }, title='Repost') </div>
i.fa.fa-retweet <style type="stylus">
p.count(if={ p.repost_count > 0 }) { p.repost_count } :scope
button(class={ liked: p.is_liked }, onclick={ like }, title='善哉')
i.fa.fa-thumbs-o-up
p.count(if={ p.likes_count > 0 }) { p.likes_count }
button(onclick={ NotImplementedException }): i.fa.fa-ellipsis-h
button(onclick={ toggle-detail }, title='詳細')
i.fa.fa-caret-down(if={ !is-detail-opened })
i.fa.fa-caret-up(if={ is-detail-opened })
div.detail(if={ is-detail-opened })
mk-post-status-graph(width='462', height='130', post={ p })
style.
display block display block
margin 0 margin 0
padding 0 padding 0
@ -246,43 +235,8 @@ style.
padding-top 4px padding-top 4px
background rgba(0, 0, 0, 0.0125) background rgba(0, 0, 0, 0.0125)
style(theme='dark'). </style>
background #0D0D0D <script>
> article
&:hover
> .main > footer > button
color #eee
> .main
> header
> .left
> .name
color #9e9c98
> .username
color #41403f
> .right
> .time
color #4e4d4b
> .body
> .text
color #9e9c98
> footer
> button
color #9e9c98
&:hover
color #fff
> .count
color #eee
script.
@mixin \api @mixin \api
@mixin \text @mixin \text
@mixin \date-stringify @mixin \date-stringify
@ -374,3 +328,5 @@ script.
target.focus! target.focus!
else else
focus target, fn focus target, fn
</script>
</mk-timeline-post>

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

@ -1,17 +1,11 @@
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 }"></mk-timeline-post>
p.date(if={ i != posts.length - 1 && post._date != posts[i + 1]._date }) <p class="date" if="{ i != posts.length - 1 &amp;&amp; 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>
span </virtual>
i.fa.fa-angle-up <footer data-yield="footer"><yield from="footer"/></footer>
| { post._datetext } <style type="stylus">
span :scope
i.fa.fa-angle-down
| { posts[i + 1]._datetext }
footer(data-yield='footer')
| <yield from="footer"/>
style.
display block display block
> mk-timeline-post > mk-timeline-post
@ -48,11 +42,8 @@ style.
border-bottom-left-radius 4px border-bottom-left-radius 4px
border-bottom-right-radius 4px border-bottom-right-radius 4px
style(theme='dark'). </style>
> mk-timeline-post <script>
border-bottom-color #222221
script.
@posts = [] @posts = []
@set-posts = (posts) ~> @set-posts = (posts) ~>
@ -84,3 +75,5 @@ script.
@tail = ~> @tail = ~>
@posts[@posts.length - 1] @posts[@posts.length - 1]
</script>
</mk-timeline>

61
src/web/app/desktop/tags/ui-header-account.tag
View file

@ -1,36 +1,26 @@
mk-ui-header-account <mk-ui-header-account>
button.header(data-active={ is-open.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><img class="avatar" src="{ I.avatar_url + '?thumbnail&amp;size=64' }" alt="avatar"/></button>
span.username <div class="menu" if="{ isOpen }">
| { I.username } <ul>
i.fa.fa-angle-down(if={ !is-open }) <li><a href="{ '/' + I.username }"><i class="fa fa-user"></i>プロフィール<i class="fa fa-angle-right"></i></a></li>
i.fa.fa-angle-up(if={ is-open }) <li onclick="{ drive }">
img.avatar(src={ I.avatar_url + '?thumbnail&size=64' }, alt='avatar') <p><i class="fa fa-cloud"></i>ドライブ<i class="fa fa-angle-right"></i></p>
div.menu(if={ is-open }) </li>
ul <li><a href="/i&gt;mentions"><i class="fa fa-at"></i>あなた宛て<i class="fa fa-angle-right"></i></a></li>
li: a(href={ '/' + I.username }) </ul>
i.fa.fa-user <ul>
| プロフィール <li onclick="{ settings }">
i.fa.fa-angle-right <p><i class="fa fa-cog"></i>設定<i class="fa fa-angle-right"></i></p>
li(onclick={ drive }): p </li>
i.fa.fa-cloud </ul>
| ドライブ <ul>
i.fa.fa-angle-right <li onclick="{ signout }">
li: a(href='/i>mentions') <p><i class="fa fa-power-off"></i>サインアウト<i class="fa fa-angle-right"></i></p>
i.fa.fa-at </li>
| あなた宛て </ul>
i.fa.fa-angle-right </div>
ul <style type="stylus">
li(onclick={ settings }): p :scope
i.fa.fa-cog
| 設定
i.fa.fa-angle-right
ul
li(onclick={ signout }): p
i(class='fa fa-power-off')
| サインアウト
i.fa.fa-angle-right
style.
display block display block
float left float left
@ -167,7 +157,8 @@ style.
background $theme-color background $theme-color
color $theme-color-foreground color $theme-color-foreground
script. </style>
<script>
@mixin \i @mixin \i
@mixin \signout @mixin \signout
@ -217,3 +208,5 @@ script.
return true return true
node = node.parent-node node = node.parent-node
return false return false
</script>
</mk-ui-header-account>

21
src/web/app/desktop/tags/ui-header-clock.tag
View file

@ -1,10 +1,12 @@
mk-ui-header-clock <mk-ui-header-clock>
div.header <div class="header">
time@time <time ref="time"></time>
div.content </div>
mk-analog-clock <div class="content">
<mk-analog-clock></mk-analog-clock>
style. </div>
<style type="stylus">
:scope
display inline-block display inline-block
overflow visible overflow visible
@ -54,7 +56,8 @@ style.
width 256px width 256px
background #899492 background #899492
script. </style>
<script>
@draw = ~> @draw = ~>
now = new Date! now = new Date!
@ -80,3 +83,5 @@ script.
@on \unmount ~> @on \unmount ~>
clear-interval @clock clear-interval @clock
</script>
</mk-ui-header-clock>

34
src/web/app/desktop/tags/ui-header-nav.tag
View file

@ -1,19 +1,15 @@
mk-ui-header-nav: ul(if={ SIGNIN }) <mk-ui-header-nav>
li.home(class={ active: page == 'home' }): a(href={ CONFIG.url }) <ul if="{ SIGNIN }">
i.fa.fa-home <li class="home { active: page == 'home' }"><a href="{ CONFIG.url }"><i class="fa fa-home"></i>
p ホーム <p>ホーム</p></a></li>
li.messaging: a(onclick={ messaging }) <li class="messaging"><a onclick="{ messaging }"><i class="fa fa-comments"></i>
i.fa.fa-comments <p>メッセージ</p><i class="fa fa-circle" if="{ hasUnreadMessagingMessages }"></i></a></li>
p メッセージ <li class="info"><a href="https://twitter.com/misskey_xyz" target="_blank"><i class="fa fa-info"></i>
i.fa.fa-circle(if={ has-unread-messaging-messages }) <p>お知らせ</p></a></li>
li.info: a(href='https://twitter.com/misskey_xyz', target='_blank') <li class="tv"><a href="https://misskey.tk" target="_blank"><i class="fa fa-television"></i>
i.fa.fa-info <p>MisskeyTV™</p></a></li>
p お知らせ <style type="stylus">
li.tv: a(href='https://misskey.tk', target='_blank') :scope
i.fa.fa-television
p MisskeyTV™
style.
display inline-block display inline-block
margin 0 margin 0
padding 0 padding 0
@ -79,7 +75,8 @@ style.
@media (max-width 700px) @media (max-width 700px)
padding 0 12px padding 0 12px
script. </style>
<script>
@mixin \i @mixin \i
@mixin \api @mixin \api
@mixin \stream @mixin \stream
@ -111,3 +108,6 @@ script.
@messaging = ~> @messaging = ~>
riot.mount document.body.append-child document.create-element \mk-messaging-window riot.mount document.body.append-child document.create-element \mk-messaging-window
</script>
</ul>
</mk-ui-header-nav>

19
src/web/app/desktop/tags/ui-header-notifications.tag
View file

@ -1,10 +1,10 @@
mk-ui-header-notifications <mk-ui-header-notifications>
button.header(data-active={ is-open }, onclick={ toggle }) <button class="header" data-active="{ isOpen }" onclick="{ toggle }"><i class="fa fa-bell-o"></i></button>
i.fa.fa-bell-o <div class="notifications" if="{ isOpen }">
div.notifications(if={ is-open }) <mk-notifications></mk-notifications>
mk-notifications </div>
<style type="stylus">
style. :scope
display block display block
float left float left
@ -73,7 +73,8 @@ style.
font-size 1rem font-size 1rem
overflow auto overflow auto
script. </style>
<script>
@is-open = false @is-open = false
@toggle = ~> @toggle = ~>
@ -109,3 +110,5 @@ script.
return true return true
node = node.parent-node node = node.parent-node
return false return false
</script>
</mk-ui-header-notifications>

14
src/web/app/desktop/tags/ui-header-post-button.tag
View file

@ -1,8 +1,7 @@
mk-ui-header-post-button <mk-ui-header-post-button>
button(onclick={ post }, title='新規投稿') <button onclick="{ post }" title="新規投稿"><i class="fa fa-pencil-square-o"></i></button>
i.fa.fa-pencil-square-o <style type="stylus">
:scope
style.
display inline-block display inline-block
padding 8px padding 8px
height 100% height 100%
@ -34,6 +33,9 @@ style.
background darken($theme-color, 10%) !important background darken($theme-color, 10%) !important
transition background 0s ease transition background 0s ease
script. </style>
<script>
@post = (e) ~> @post = (e) ~>
@parent.parent.open-post-form! @parent.parent.open-post-form!
</script>
</mk-ui-header-post-button>

18
src/web/app/desktop/tags/ui-header-search.tag
View file

@ -1,9 +1,10 @@
mk-ui-header-search <mk-ui-header-search>
form.search(onsubmit={ onsubmit }) <form class="search" onsubmit="{ onsubmit }">
input@q(type='search', placeholder!='&#xf002; 検索') <input ref="q" type="search" placeholder="&#xf002; 検索"/>
div.result <div class="result"></div>
</form>
style. <style type="stylus">
:scope
> form > form
display block display block
@ -29,9 +30,12 @@ style.
&::-webkit-input-placeholder &::-webkit-input-placeholder
color #9eaba8 color #9eaba8
script. </style>
<script>
@mixin \page @mixin \page
@onsubmit = (e) ~> @onsubmit = (e) ~>
e.prevent-default! e.prevent-default!
@page '/search:' + @refs.q.value @page '/search:' + @refs.q.value
</script>
</mk-ui-header-search>

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