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

View file

@ -189,231 +189,6 @@ gulp.task('build:client:scripts', done => {
.transform(ls)
.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) => {
if (file.substr(-4) !== '.tag') return source;
@ -423,6 +198,8 @@ gulp.task('build:client:scripts', done => {
.transform(transformify((source, file) => {
return source
.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\.themeColor/g, `'${config.themeColor}'`)
.replace(/CONFIG\.api\.url/g, `'${config.scheme}://api.${config.host}'`)
@ -435,7 +212,6 @@ gulp.task('build:client:scripts', done => {
}))
.transform(riotify, {
template: 'pug',
type: 'livescript',
expr: false,
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()
.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/'));
});
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;
}
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,11 +1,11 @@
mk-forkit
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)
path(d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z')
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')
style.
<mk-forkit><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">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<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 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>
</svg></a>
<style type="stylus">
:scope
display block
position absolute
top 0
@ -35,3 +35,10 @@ style.
transform rotate(-25deg)
40%, 80%
transform rotate(10deg)
</style>
</mk-forkit>

View file

@ -1,12 +1,12 @@
mk-introduction
article
h1 Misskeyとは
<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>無料で誰でも利用でき、広告は一切掲載していません。</p>
<p><a href={ CONFIG.urls.about } target="_blank">もっと知りたい方はこちら</a></p>
style.
<mk-introduction>
<article>
<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>Twitter, Facebook, LINE, Google+ などを<del>パクって</del><i>参考にして</i>います。</p>
<p>無料で誰でも利用でき、広告は一切掲載していません。</p>
<p><a href="{ CONFIG.urls.about }" target="_blank">もっと知りたい方はこちら</a></p>
</article>
<style type="stylus">
:scope
display block
h1
@ -20,3 +20,10 @@ style.
&:last-child
margin 0
text-align center
</style>
</mk-introduction>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

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

View file

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

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 })
p.name
i.fa.fa-fw(class={ fa-folder-o: !hover, fa-folder-open-o: hover })
| { folder.name }
style.
<mk-drive-browser-folder data-is-contextmenu-showing="{ isContextmenuShowing.toString() }" data-draghover="{ draghover.toString() }" onclick="{ onclick }" onmouseover="{ onmouseover }" onmouseout="{ onmouseout }" ondragover="{ ondragover }" ondragenter="{ ondragenter }" ondragleave="{ ondragleave }" ondrop="{ ondrop }" oncontextmenu="{ oncontextmenu }" draggable="true" ondragstart="{ ondragstart }" ondragend="{ ondragend }" title="{ title }">
<p class="name"><i class="fa fa-fw { fa-folder-o: !hover, fa-folder-open-o: hover }"></i>{ folder.name }</p>
<style type="stylus">
:scope
display block
margin 4px
padding 8px
@ -50,7 +48,8 @@ style.
margin-left 2px
text-align left
script.
</style>
<script>
@mixin \api
@mixin \dialog
@ -181,3 +180,5 @@ script.
@update!
return false
</script>
</mk-drive-browser-folder>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,16 +1,17 @@
mk-broadcast-home-widget
div.icon
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.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.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.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.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')
h1 開発者募集中!
p: a(href='https://github.com/syuilo/misskey', target='_blank') Misskeyはオープンソースで開発されています。リポジトリはこちら。
style.
<mk-broadcast-home-widget>
<div class="icon">
<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
<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 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 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 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 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>
</div>
<h1>開発者募集中!</h1>
<p><a href="https://github.com/syuilo/misskey" target="_blank">Misskeyはオープンソースで開発されています。リポジトリはこちら。</a></p>
<style type="stylus">
:scope
display block
padding 10px 10px 10px 50px
background transparent
@ -73,3 +74,10 @@ style.
a
color #555
</style>
</mk-broadcast-home-widget>

View file

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

View file

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

View file

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

View file

@ -1,15 +1,6 @@
mk-nav-home-widget
a(href={ CONFIG.urls.about }) Misskeyについて
i ・
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.
<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>
<style type="stylus">
:scope
display block
padding 16px
font-size 12px
@ -21,3 +12,10 @@ style.
i
color #ccc
</style>
</mk-nav-home-widget>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,14 +1,10 @@
mk-settings-window
mk-window@window(is-modal={ true }, width={ '700px' }, height={ '550px' })
<yield to="header">
i.fa.fa-cog
| 設定
</yield>
<yield to="content">
mk-settings
</yield>
style.
<mk-settings-window>
<mk-window ref="window" is-modal="{ true }" width="{ '700px' }" height="{ '550px' }"><yield to="header"><i class="fa fa-cog"></i>設定</yield>
<yield to="content">
<mk-settings></mk-settings></yield>
</mk-window>
<style type="stylus">
:scope
> mk-window
[data-yield='header']
> i
@ -17,10 +13,13 @@ style.
[data-yield='content']
overflow auto
script.
</style>
<script>
@on \mount ~>
@refs.window.on \closed ~>
@unmount!
@close = ~>
@refs.window.close!
</script>
</mk-settings-window>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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