This commit is contained in:
syuilo
parent
8b273e215f
commit
520299c2b4
323
gulpfile.ts
323
gulpfile.ts
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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 && !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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
||||
style.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 != '' && username-state != 'invalidFormat' && username-state != 'minRange' && 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>
|
||||
|
|
|
|||
|
|
@ -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 && d == 1 }">Happy New Year! </p>
|
||||
<p if="{ m == 12 && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 > 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 && 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 && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 > 0 }">
|
||||
<li each="{ users }" onclick="{ parent.onClick }" onkeydown="{ parent.onKeydown }" tabindex="-1"><img class="avatar" src="{ avatar_url + '?thumbnail&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>
|
||||
|
|
|
|||
|
|
@ -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 && user.is_following }"><i class="fa fa-minus"></i>フォロー解除</span><span if="{ !wait && !user.is_following }"><i class="fa fa-plus"></i>フォロー</span><i class="fa fa-spinner fa-pulse fa-fw" if="{ wait }"></i></button>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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.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.
|
||||
<div class="body"><img ref="img" src="{ parent.image.url + '?thumbnail&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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.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.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 })
|
||||
</yield>
|
||||
|
||||
style.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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!=' 検索')
|
||||
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=" 検索"/>
|
||||
</nav>
|
||||
<div class="main { uploading: uploads.length > 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 > 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 > 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 && folders.length == 0 && !loading }">
|
||||
<p if="{ draghover }">ドロップですか？いいですよ、ボクはカワイイですからね</p>
|
||||
<p if="{ !draghover && folder == null }"><strong>ドライブには何もありません。</strong><br/>右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。</p>
|
||||
<p if="{ !draghover && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 && user.is_following }"></i><i class="fa fa-plus" if="{ !wait && !user.is_following }"></i><i class="fa fa-spinner fa-pulse fa-fw" if="{ wait }"></i></button>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 && users.length > 0 }">
|
||||
<div class="user" each="{ users }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + username }"><img class="avatar" src="{ avatar_url + '?thumbnail&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 && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 && images.length > 0 }">
|
||||
<virtual each="{ image in images }">
|
||||
<div class="img" style="{ 'background-image: url(' + image.url + '?thumbnail&size=256)' }"></div>
|
||||
</virtual>
|
||||
</div>
|
||||
<p class="empty" if="{ !initializing && 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>
|
||||
|
|
|
|||
|
|
@ -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&size=256)' : '' }" onclick="{ setBanner }"></div><img class="avatar" src="{ I.avatar_url + '?thumbnail&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 && users.length != 0 }" each="{ _user in users }"><a class="avatar-anchor" href="{ CONFIG.url + '/' + _user.username }"><img class="avatar" src="{ _user.avatar_url + '?thumbnail&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 && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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.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.
|
||||
<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 && 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>
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 > 0 }">
|
||||
<li each="{ user in searchResult }"><a onclick="{ user._click }"><img class="avatar" src="{ user.avatar_url + '?thumbnail&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 > 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&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>
|
||||
|
|
|
|||
|
|
@ -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&size=64' }" alt=""/></a>
|
||||
<div class="content-container">
|
||||
<div class="balloon">
|
||||
<p class="read" if="{ message.is_me && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 })
|
||||
</yield>
|
||||
|
||||
style.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 && 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 && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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@index
|
||||
</yield>
|
||||
|
||||
style.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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&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&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&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&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&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&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 && 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 && !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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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&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&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>
|
||||
|
|
|
|||
|
|
@ -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 && p.reply_to.reply_to_id && 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&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&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&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 > 0 }">{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick="{ repost }" title="Repost"><i class="fa fa-retweet"></i>
|
||||
<p class="count" if="{ p.repost_count > 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 > 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 && reposts.length > 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&size=32' }" alt=""/></a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="likes" if="{ likes && likes.length > 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&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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.ref(if={ parent.opts.reply })
|
||||
mk-post-preview(post={ parent.opts.reply })
|
||||
div.body
|
||||
mk-post-form@form(reply={ parent.opts.reply })
|
||||
</yield>
|
||||
|
||||
style.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 + "?thumbnail&size=64" })" title="{ name }"></div><img class="remove" onclick="{ _remove }" src="/_/resources/desktop/remove.png" title="添付取り消し" alt=""/>
|
||||
</li>
|
||||
<li class="add" if="{ files.length < 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 > 300 }">のこり{ 300 - refs.text.value.length }文字</p>
|
||||
<button class="{ wait: wait }" ref="submit" disabled="{ wait || (refs.text.value.length == 0 && 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>
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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.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.
|
||||
<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) && parent.value < parent.max }" value="{ isNaN(parent.value) ? 0 : parent.value }" max="{ parent.max }"></progress>
|
||||
<div class="progress waiting" if="{ parent.value >= 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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@form(post={ parent.opts.post })
|
||||
</yield>
|
||||
|
||||
style.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 && parent.file.length > 0 }">({ parent.file.length }ファイル選択中)</span></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-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 && 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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
|
||||
</yield>
|
||||
|
||||
style.
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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&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>
|
||||
|
|
|
|||
|
|
@ -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&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&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 > 0 }">{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick="{ repost }" title="Repost"><i class="fa fa-retweet"></i>
|
||||
<p class="count" if="{ p.repost_count > 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 > 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>
|
||||
|
|
|
|||
|
|
@ -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 && 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>
|
||||
|
|
|
|||
|
|
@ -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&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>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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
mk-ui-header-search
|
||||
form.search(onsubmit={ onsubmit })
|
||||
input@q(type='search', placeholder!=' 検索')
|
||||
div.result
|
||||
|
||||
style.
|
||||
<mk-ui-header-search>
|
||||
<form class="search" onsubmit="{ onsubmit }">
|
||||
<input ref="q" type="search" placeholder=" 検索"/>
|
||||
<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
Loading…
Reference in New Issue