moris/misskey
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests Activity

[Client] 良い感じに

Browse Source
This commit is contained in:
syuilo 2017-02-16 17:20:45 +09:00
parent d7a16d7ab1
commit 35bc0c024f
7 changed files with 230 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/web/app/common/scripts/gcd.js Normal file
View File

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

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

@ -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>

40
src/web/app/mobile/tags/drive.tag
View File

@ -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>

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

@ -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>

4
src/web/app/mobile/tags/drive/file.tag
View File

@ -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

5
src/web/app/mobile/tags/page/drive.tag
View 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>

3
src/web/app/mobile/tags/ui-header.tag
View File

@ -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