[Client] 良い感じに

src/web/app/common/scripts/gcd.js

@@ -0,0 +1,2 @@
+const gcd = (a, b) => !b ? a : gcd(b, a % b);
+module.exports = gcd;

src/web/app/common/tags/file-type-icon.tag

@@ -1,11 +1,10 @@
-<mk-file-type-icon><i class="fa fa-file-image-o" if={ kind == 'image' }></i>
+<mk-file-type-icon>
+	<i class="fa fa-file-image-o" if={ kind == 'image' }></i>
 	<style type="stylus">
 		:scope
 			display inline
-
 	</style>
 	<script>
-		@file = @opts.file
+		@kind = @opts.type.split \/ .0
-		@kind = @file.type.split \/ .0
 	</script>
 </mk-file-type-icon>

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

@@ -5,8 +5,14 @@
 			<span><i class="fa fa-angle-right"></i></span>
 			<p onclick={ _move }>{ folder.name }</p>
 		</virtual>
-		<span if={ folder != null }><i class="fa fa-angle-right"></i></span>
+		<virtual if={ folder != null }>
-		<p if={ folder != null }>{ folder.name }</p>
+			<span><i class="fa fa-angle-right"></i></span>
+			<p>{ folder.name }</p>
+		</virtual>
+		<virtual if={ file != null }>
+			<span><i class="fa fa-angle-right"></i></span>
+			<p>{ file.name }</p>
+		</virtual>
 	</nav>
 	<div class="browser { loading: loading }" if={ file == null }>
 		<div class="folders" if={ folders.length > 0 }>
@@ -150,6 +156,8 @@
 			#if @opts.folder?
 			if @opts.folder? and @opts.folder != ''
 				@cd @opts.folder
+			else if @opts.file? and @opts.file != ''
+				@cf @opts.file
 			else
 				@load!
 
@@ -186,6 +194,8 @@
 			@cd target-folder, true
 
 		@cd = (target-folder, is-move) ~>
+			@file = null
+
 			if target-folder? and typeof target-folder == \object
 				target-folder = target-folder.id
 
@@ -263,7 +273,8 @@
 			@update!
 
 		@go-root = ~>
-			if @folder != null
+			if @folder != null or @file != null
+				@file = null
 				@folder = null
 				@hierarchy-folders = []
 				@update!
@@ -337,7 +348,30 @@
 				@update!
 				@trigger \change-selected @selected-files
 			else
+				@cf file
+
+		@cf = (file) ~>
+			if typeof file == \object
+				file = file.id
+
+			@loading = true
+			@update!
+
+			@api \drive/files/show do
+				file_id: file
+			.then (file) ~>
 				@file = file
+				@folder = null
+				@hierarchy-folders = []
+
+				x = (f) ~>
+					@hierarchy-folders.unshift f
+					if f.parent?
+						x f.parent
+
+				if file.folder?
+					x file.folder
+
 				@update!
 				@trigger \open-file @file
 	</script>

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

@@ -1,9 +1,189 @@
 <mk-drive-file-viewer>
-	<p class="name">{ file.name }</p>
+	<div class="preview">
+		<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name }>
+		<i if={ kind != 'image' } class="fa fa-file"></i>
+		<footer if={ kind == 'image' }>
+			<span class="size">
+				<span class="width">{ file.properties.width }</span>
+				<span class="time">×</span>
+				<span class="height">{ file.properties.height }</span>
+				<span class="px">px</span>
+			</span>
+			<span class="separator"></span>
+			<span class="aspect-ratio">
+				<span class="width">{ file.properties.width / getGcd(file.properties.width, file.properties.height) }</span>
+				<span class="colon">:</span>
+				<span class="height">{ file.properties.height / getGcd(file.properties.width, file.properties.height) }</span>
+			</span>
+		</footer>
+	</div>
+	<div class="info">
+		<div>
+			<span class="type"><mk-file-type-icon type={ file.type }></mk-file-type-icon>{ file.type }</span>
+			<span class="separator"></span>
+			<span class="data-size">{ bytesToSize(file.datasize) }</span>
+			<span class="separator"></span>
+			<span class="created-at"><mk-time time={ file.created_at }></mk-time></span>
+		</div>
+	</div>
+	<div class="menu">
+		<div>
+			<a href={ file.url + '?download' } download={ file.name }>
+				<i class="fa fa-download"></i>ダウンロード
+			</a>
+			<button onclick={ rename }>
+				<i class="fa fa-pencil"></i>名前を変更
+			</button>
+		</div>
+	</div>
+	<div class="hash">
+		<div>
+			<p>
+				<i class="fa fa-hashtag"></i>ファイルのハッシュ値
+			</p>
+			<code>{ file.hash }</code>
+		</div>
+	</div>
 	<style type="stylus">
 		:scope
 			display block
 
+			> .preview
+				padding 8px
+				background #f0f0f0
+
+				> img
+					display block
+					max-width 100%
+					max-height 300px
+					margin 0 auto
+					box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2)
+
+				> footer
+					padding 8px 8px 0 8px
+					font-size 0.8em
+					color #888
+					text-align center
+
+					> .separator
+						display inline
+						padding 0 4px
+
+					> .size
+						display inline
+
+						.time
+							margin 0 2px
+
+						.px
+							margin-left 4px
+
+					> .aspect-ratio
+						display inline
+						opacity 0.7
+
+						&:before
+							content "("
+
+						&:after
+							content ")"
+
+			> .info
+				padding 14px
+				font-size 0.8em
+				border-top solid 1px #dfdfdf
+
+				> div
+					max-width 500px
+					margin 0 auto
+
+					> .separator
+						padding 0 4px
+						color #cdcdcd
+
+					> .type
+					> .data-size
+						color #9d9d9d
+
+						> mk-file-type-icon
+							margin-right 4px
+
+					> .created-at
+						color #bdbdbd
+
+						> i
+							margin-right 2px
+
+			> .menu
+				padding 14px
+				border-top solid 1px #dfdfdf
+
+				> div
+					max-width 500px
+					margin 0 auto
+
+					> *
+						display block
+						width 100%
+						padding 10px 16px
+						margin 0 0 12px 0
+						color #333
+						font-size 0.9em
+						text-align center
+						text-decoration none
+						text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
+						background-image linear-gradient(#fafafa, #eaeaea)
+						border 1px solid #ddd
+						border-bottom-color #cecece
+						border-radius 3px
+
+						&:last-child
+							margin-bottom 0
+
+						&:active
+							background-color #767676
+							background-image none
+							border-color #444
+							box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
+
+						> i
+							margin-right 4px
+
+			> .hash
+				padding 14px
+				border-top solid 1px #dfdfdf
+
+				> div
+					max-width 500px
+					margin 0 auto
+
+					> p
+						display block
+						margin 0
+						padding 0
+						color #555
+						font-size 0.9em
+
+						> i
+							margin-right 4px
+
+					> code
+						display block
+						width 100%
+						margin 6px 0 0 0
+						padding 8px
+						overflow auto
+						font-size 0.8em
+						border solid 1px #dfdfdf
+						border-radius 2px
+						background #f5f5f5
+
 	</style>
-	<script>@file = @opts.file</script>
+	<script>
+		@bytes-to-size = require '../../../common/scripts/bytes-to-size.js'
+		@get-gcd = require '../../../common/scripts/gcd.js'
+
+		@file = @opts.file
+		@kind = @file.type.split \/ .0
+	</script>
 </mk-drive-file-viewer>

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

@@ -11,7 +11,7 @@
 			-->
 			<footer>
 				<p class="type">
-					<mk-file-type-icon file={ file }></mk-file-type-icon>{ file.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>
@@ -122,7 +122,7 @@
 
 	</style>
 	<script>
-		@mixin \bytes-to-size
+		@bytes-to-size = require '../../../common/scripts/bytes-to-size.js'
 
 		@browser = @parent
 		@file = @opts.file

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

@@ -41,11 +41,10 @@
 			@refs.ui.refs.browser.on \open-file (file) ~>
 				# TODO: escape html characters in file.name
 				@ui.trigger \title '<mk-file-type-icon class="icon"></mk-file-type-icon>' + file.name
+				riot.mount \mk-file-type-icon do
+					type: file.type
 
 				# Rewrite URL
 				history.push-state null null '/i/drive/file/' + file.id
-
-				riot.mount \mk-file-type-icon do
-					file: file
 	</script>
 </mk-drive-page>

src/web/app/mobile/tags/ui-header.tag

@@ -50,6 +50,7 @@
 						text-overflow ellipsis
 
 						> i
+						> .icon
 							margin-right 8px
 
 						> img
@@ -93,7 +94,7 @@
 		@on \mount ~>
 			@opts.ready!
 
-		@ui.one \title (title) ~>
+		@ui.on \title (title) ~>
 			if @refs.title?
 				@refs.title.innerHTML = title