[Client:Mobile] ✌️

This commit is contained in:
syuilo 2017-03-19 00:02:45 +09:00
parent 3046d3e7c0
commit 89fd8b3940
2 changed files with 62 additions and 35 deletions

View file

@ -16,6 +16,14 @@
</nav> </nav>
<mk-uploader ref="uploader"></mk-uploader> <mk-uploader ref="uploader"></mk-uploader>
<div class="browser { fetching: fetching }" if={ file == null }> <div class="browser { fetching: fetching }" if={ file == null }>
<div class="info" if={ info }>
<p if={ folder == null }>{ (info.usage / info.capacity * 100).toFixed(1) }%使用中</p>
<p if={ folder != null && (folder.folders_count > 0 || folder.files_count > 0) }>
<virtual if={ folder.folders_count > 0 }>{ folder.folders_count }フォルダ</virtual>
<virtual if={ folder.folders_count > 0 && folder.files_count > 0 }>、</virtual>
<virtual if={ folder.files_count > 0 }>{ folder.files_count }ファイル</virtual>
</p>
</div>
<div class="folders" if={ folders.length > 0 }> <div class="folders" if={ folders.length > 0 }>
<virtual each={ folder in folders }> <virtual each={ folder in folders }>
<mk-drive-folder folder={ folder }></mk-drive-folder> <mk-drive-folder folder={ folder }></mk-drive-folder>
@ -32,13 +40,13 @@
<p if={ !folder == null }>ドライブには何もありません。</p> <p if={ !folder == null }>ドライブには何もありません。</p>
<p if={ folder != null }>このフォルダーは空です</p> <p if={ folder != null }>このフォルダーは空です</p>
</div> </div>
</div>
<div class="fetching" if={ fetching }> <div class="fetching" if={ fetching }>
<div class="spinner"> <div class="spinner">
<div class="dot1"></div> <div class="dot1"></div>
<div class="dot2"></div> <div class="dot2"></div>
</div> </div>
</div> </div>
</div>
<input ref="file" type="file" multiple="multiple" onchange={ changeLocalFile }/> <input ref="file" type="file" multiple="multiple" onchange={ changeLocalFile }/>
<mk-drive-file-viewer if={ file != null } file={ file }></mk-drive-file-viewer> <mk-drive-file-viewer if={ file != null } file={ file }></mk-drive-file-viewer>
<style> <style>
@ -76,6 +84,20 @@
&.fetching &.fetching
opacity 0.5 opacity 0.5
> .info
border-bottom solid 1px #eee
&:empty
display none
> p
display block
max-width 500px
margin 0 auto
padding 4px 16px
font-size 10px
color #777
> .folders > .folders
> mk-drive-folder > mk-drive-folder
border-bottom solid 1px #eee border-bottom solid 1px #eee
@ -361,6 +383,13 @@
this.trigger('fetch-mid'); this.trigger('fetch-mid');
} }
}; };
if (this.folder == null) {
// Fetch addtional drive info
this.api('drive').then(info => {
this.update({ info });
});
}
}; };
this.fetchMoreFiles = () => { this.fetchMoreFiles = () => {

View file

@ -10,9 +10,7 @@
li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
--> -->
<footer> <footer>
<p class="type"> <p class="type"><mk-file-type-icon type={ file.type }></mk-file-type-icon>{ file.type }</p>
<mk-file-type-icon type={ file.type }></mk-file-type-icon>{ file.type }
</p>
<p class="separator"></p> <p class="separator"></p>
<p class="data-size">{ bytesToSize(file.datasize) }</p> <p class="data-size">{ bytesToSize(file.datasize) }</p>
<p class="separator"></p> <p class="separator"></p>