[Client:Mobile] ✌️

src/web/app/mobile/tags/drive.tag

@@ -16,6 +16,14 @@
 	</nav>
 	<mk-uploader ref="uploader"></mk-uploader>
 	<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 }>
 			<virtual each={ folder in folders }>
 				<mk-drive-folder folder={ folder }></mk-drive-folder>
@@ -32,13 +40,13 @@
 			<p if={ !folder == null }>ドライブには何もありません。</p>
 			<p if={ folder != null }>このフォルダーは空です</p>
 		</div>
+	</div>
 	<div class="fetching" if={ fetching }>
 		<div class="spinner">
 			<div class="dot1"></div>
 			<div class="dot2"></div>
 		</div>
 	</div>
-	</div>
 	<input ref="file" type="file" multiple="multiple" onchange={ changeLocalFile }/>
 	<mk-drive-file-viewer if={ file != null } file={ file }></mk-drive-file-viewer>
 	<style>
@@ -76,6 +84,20 @@
 				&.fetching
 					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
 					> mk-drive-folder
 						border-bottom solid 1px #eee
@@ -361,6 +383,13 @@
 					this.trigger('fetch-mid');
 				}
 			};
+
+			if (this.folder == null) {
+				// Fetch addtional drive info
+				this.api('drive').then(info => {
+					this.update({ info });
+				});
+			}
 		};
 
 		this.fetchMoreFiles = () => {

src/web/app/mobile/tags/drive/file.tag

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