This commit is contained in:
syuilo 2017-12-08 02:44:50 +09:00
parent 822ba594ec
commit a7aa24e7a3
115 changed files with 559 additions and 456 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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