From d85d3344990dec74c8d789e33b21f091d4544b84 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 14 Feb 2017 06:47:33 +0900
Subject: [PATCH] [Cliewnt] Display drive usagae in drive window

---
 .../app/desktop/tags/drive/browser-window.tag | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/web/app/desktop/tags/drive/browser-window.tag b/src/web/app/desktop/tags/drive/browser-window.tag
index 6d092aecb..4c9db8d77 100644
--- a/src/web/app/desktop/tags/drive/browser-window.tag
+++ b/src/web/app/desktop/tags/drive/browser-window.tag
@@ -1,12 +1,24 @@
 <mk-drive-browser-window>
-	<mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' }><yield to="header"><i class="fa fa-cloud"></i>ドライブ</yield>
-<yield to="content">
-		<mk-drive-browser multiple={ true } folder={ parent.folder }></mk-drive-browser></yield>
+	<mk-window ref="window" is-modal={ false } width={ '800px' } height={ '500px' }>
+		<yield to="header">
+			<p class="info" if={ parent.usage }><b>{ parent.usage.toFixed(1) }%</b>使用中</p>
+			<i class="fa fa-cloud"></i>ドライブ
+		</yield>
+		<yield to="content">
+			<mk-drive-browser multiple={ true } folder={ parent.folder }></mk-drive-browser>
+		</yield>
 	</mk-window>
 	<style type="stylus">
 		:scope
 			> mk-window
 				[data-yield='header']
+					> .info
+						position absolute
+						top 0
+						left 16px
+						margin 0
+						font-size 80%
+
 					> i
 						margin-right 4px
 
@@ -16,12 +28,18 @@
 
 	</style>
 	<script>
+		@mixin \api
+
 		@folder = if @opts.folder? then @opts.folder else null
 
 		@on \mount ~>
 			@refs.window.on \closed ~>
 				@unmount!
 
+			@api \drive .then (info) ~>
+				@update do
+					usage: info.usage / info.capacity * 100
+
 		@close = ~>
 			@refs.window.close!
 	</script>