diff --git a/src/web/app/common/scripts/gcd.js b/src/web/app/common/scripts/gcd.js
new file mode 100644
index 0000000000..43bfbc57ae
--- /dev/null
+++ b/src/web/app/common/scripts/gcd.js
@@ -0,0 +1,2 @@
+const gcd = (a, b) => !b ? a : gcd(b, a % b);
+module.exports = gcd;
diff --git a/src/web/app/common/tags/file-type-icon.tag b/src/web/app/common/tags/file-type-icon.tag
index 054457bf03..b4b0c88d66 100644
--- a/src/web/app/common/tags/file-type-icon.tag
+++ b/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 = @file.type.split \/ .0
+ @kind = @opts.type.split \/ .0
</script>
</mk-file-type-icon>
diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 903a660173..c4e7c0e6d7 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/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>
- <p if={ folder != null }>{ folder.name }</p>
+ <virtual if={ folder != null }>
+ <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>
diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag
index ac426278b3..406f2f09fb 100644
--- a/src/web/app/mobile/tags/drive/file-viewer.tag
+++ b/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>
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index 1ce8297ea3..7a4d444693 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/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
diff --git a/src/web/app/mobile/tags/page/drive.tag b/src/web/app/mobile/tags/page/drive.tag
index ac1796ec43..e903ccfb0e 100644
--- a/src/web/app/mobile/tags/page/drive.tag
+++ b/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>
diff --git a/src/web/app/mobile/tags/ui-header.tag b/src/web/app/mobile/tags/ui-header.tag
index f63ca47239..6e23a4b9cc 100644
--- a/src/web/app/mobile/tags/ui-header.tag
+++ b/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