mirror/MisskeyIO
1
0
Fork 0
mirror of https://github.com/MisskeyIO/misskey synced 2024-11-24 15:16:21 +09:00
Code

[Client:Mobile] ✌️

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/web/app/mobile/tags/drive.tag
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,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 = () => {

4
src/web/app/mobile/tags/drive/file.tag
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>