[Client:Mobile] ✌️
This commit is contained in:
syuilo
parent
3046d3e7c0
commit
89fd8b3940
2 changed files with 62 additions and 35 deletions
|
|
@ -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,11 +40,11 @@
|
||||||
<p if={ !folder == null }>ドライブには何もありません。</p>
|
<p if={ !folder == null }>ドライブには何もありません。</p>
|
||||||
<p if={ folder != null }>このフォルダーは空です</p>
|
<p if={ folder != null }>このフォルダーは空です</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="fetching" if={ fetching }>
|
</div>
|
||||||
<div class="spinner">
|
<div class="fetching" if={ fetching }>
|
||||||
<div class="dot1"></div>
|
<div class="spinner">
|
||||||
<div class="dot2"></div>
|
<div class="dot1"></div>
|
||||||
</div>
|
<div class="dot2"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input ref="file" type="file" multiple="multiple" onchange={ changeLocalFile }/>
|
<input ref="file" type="file" multiple="multiple" onchange={ changeLocalFile }/>
|
||||||
|
|
@ -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
|
||||||
|
|
@ -93,40 +115,40 @@
|
||||||
> p
|
> p
|
||||||
margin 0
|
margin 0
|
||||||
|
|
||||||
> .fetching
|
> .fetching
|
||||||
.spinner
|
.spinner
|
||||||
margin 100px auto
|
margin 100px auto
|
||||||
width 40px
|
width 40px
|
||||||
height 40px
|
height 40px
|
||||||
text-align center
|
text-align center
|
||||||
|
|
||||||
animation sk-rotate 2.0s infinite linear
|
animation sk-rotate 2.0s infinite linear
|
||||||
|
|
||||||
.dot1, .dot2
|
.dot1, .dot2
|
||||||
width 60%
|
width 60%
|
||||||
height 60%
|
height 60%
|
||||||
display inline-block
|
display inline-block
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
background-color rgba(0, 0, 0, 0.3)
|
background-color rgba(0, 0, 0, 0.3)
|
||||||
border-radius 100%
|
border-radius 100%
|
||||||
|
|
||||||
animation sk-bounce 2.0s infinite ease-in-out
|
animation sk-bounce 2.0s infinite ease-in-out
|
||||||
|
|
||||||
.dot2
|
.dot2
|
||||||
top auto
|
top auto
|
||||||
bottom 0
|
bottom 0
|
||||||
animation-delay -1.0s
|
animation-delay -1.0s
|
||||||
|
|
||||||
@keyframes sk-rotate { 100% { transform: rotate(360deg); }}
|
@keyframes sk-rotate { 100% { transform: rotate(360deg); }}
|
||||||
|
|
||||||
@keyframes sk-bounce {
|
@keyframes sk-bounce {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: scale(0.0);
|
transform: scale(0.0);
|
||||||
} 50% {
|
} 50% {
|
||||||
transform: scale(1.0);
|
transform: scale(1.0);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> [ref='file']
|
> [ref='file']
|
||||||
display none
|
display none
|
||||||
|
|
@ -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 = () => {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue