[Client] 良い感じに
This commit is contained in:
syuilo
parent
d7a16d7ab1
commit
35bc0c024f
7 changed files with 230 additions and 15 deletions
2
src/web/app/common/scripts/gcd.js
Normal file
2
src/web/app/common/scripts/gcd.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
const gcd = (a, b) => !b ? a : gcd(b, a % b);
|
||||
module.exports = gcd;
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue