This commit is contained in:
syuilo 2017-12-09 01:51:05 +09:00
parent 1a80fdeaae
commit 03a35b3fd5
3 changed files with 139 additions and 123 deletions

View file

@ -1,9 +1,9 @@
<mk-drive>
<nav ref="nav">
<p onclick={ goRoot }>%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</p>
<a onclick={ goRoot } href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
<virtual each={ folder in hierarchyFolders }>
<span>%fa:angle-right%</span>
<p onclick={ move }>{ folder.name }</p>
<a onclick={ move } href="/i/drive/folder/{ folder.id }">{ folder.name }</a>
</virtual>
<virtual if={ folder != null }>
<span>%fa:angle-right%</span>
@ -74,9 +74,12 @@
border-bottom solid 1px rgba(0, 0, 0, 0.13)
> p
> a
display inline
margin 0
padding 0
text-decoration none !important
color inherit
&:last-child
font-weight bold
@ -246,6 +249,7 @@
this.move = ev => {
this.cd(ev.item.folder);
return false;
};
this.cd = (target, silent = false) => {
@ -339,6 +343,8 @@
this.trigger('move-root');
this.fetch();
}
return false;
};
this.fetch = () => {

View file

@ -1,119 +1,123 @@
<mk-drive-file onclick={ onclick } data-is-selected={ isSelected }>
<div class="container">
<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
<div class="body">
<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
<!--
if file.tags.length > 0
ul.tags
each tag in file.tags
li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
-->
<footer>
<p class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</p>
<p class="separator"></p>
<p class="data-size">{ bytesToSize(file.datasize) }</p>
<p class="separator"></p>
<p class="created-at">
%fa:R clock%<mk-time time={ file.created_at }/>
</p>
</footer>
<mk-drive-file data-is-selected={ isSelected }>
<a onclick={ onclick } href="/i/drive/file/{ file.id }">
<div class="container">
<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
<div class="body">
<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
<!--
if file.tags.length > 0
ul.tags
each tag in file.tags
li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
-->
<footer>
<p class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</p>
<p class="separator"></p>
<p class="data-size">{ bytesToSize(file.datasize) }</p>
<p class="separator"></p>
<p class="created-at">
%fa:R clock%<mk-time time={ file.created_at }/>
</p>
</footer>
</div>
</div>
</div>
</a>
<style>
:scope
display block
&, *
user-select none
> a
display block
text-decoration none !important
*
pointer-events none
*
user-select none
pointer-events none
> .container
max-width 500px
margin 0 auto
padding 16px
> .container
max-width 500px
margin 0 auto
padding 16px
&:after
content ""
display block
clear both
> .thumbnail
display block
float left
width 64px
height 64px
background-size cover
background-position center center
> .body
display block
float left
width calc(100% - 74px)
margin-left 10px
> .name
&:after
content ""
display block
margin 0
padding 0
font-size 0.9em
font-weight bold
color #555
text-overflow ellipsis
overflow-wrap break-word
clear both
> .ext
opacity 0.5
> .tags
> .thumbnail
display block
margin 4px 0 0 0
padding 0
list-style none
font-size 0.5em
float left
width 64px
height 64px
background-size cover
background-position center center
> .tag
display inline-block
margin 0 5px 0 0
padding 1px 5px
border-radius 2px
> footer
> .body
display block
margin 4px 0 0 0
font-size 0.7em
float left
width calc(100% - 74px)
margin-left 10px
> .separator
display inline
margin 0
padding 0 4px
color #CDCDCD
> .type
display inline
> .name
display block
margin 0
padding 0
color #9D9D9D
font-size 0.9em
font-weight bold
color #555
text-overflow ellipsis
overflow-wrap break-word
> mk-file-type-icon
margin-right 4px
> .ext
opacity 0.5
> .data-size
display inline
margin 0
> .tags
display block
margin 4px 0 0 0
padding 0
color #9D9D9D
list-style none
font-size 0.5em
> .created-at
display inline
margin 0
padding 0
color #BDBDBD
> .tag
display inline-block
margin 0 5px 0 0
padding 1px 5px
border-radius 2px
> [data-fa]
margin-right 2px
> footer
display block
margin 4px 0 0 0
font-size 0.7em
> .separator
display inline
margin 0
padding 0 4px
color #CDCDCD
> .type
display inline
margin 0
padding 0
color #9D9D9D
> mk-file-type-icon
margin-right 4px
> .data-size
display inline
margin 0
padding 0
color #9D9D9D
> .created-at
display inline
margin 0
padding 0
color #BDBDBD
> [data-fa]
margin-right 2px
&[data-is-selected]
background $theme-color
@ -136,6 +140,7 @@
this.onclick = () => {
this.browser.chooseFile(this.file);
return false;
};
</script>
</mk-drive-file>

View file

@ -1,39 +1,43 @@
<mk-drive-folder onclick={ onclick }>
<div class="container">
<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
</div>
<a onclick={ onclick } href="/i/drive/folder/{ folder.id }">
<div class="container">
<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
</div>
</a>
<style>
:scope
display block
color #777
&, *
user-select none
> a
display block
color #777
text-decoration none !important
*
pointer-events none
*
user-select none
pointer-events none
> .container
max-width 500px
margin 0 auto
padding 16px
> .container
max-width 500px
margin 0 auto
padding 16px
> .name
display block
margin 0
padding 0
> .name
display block
margin 0
padding 0
> [data-fa]
margin-right 6px
> [data-fa]
margin-right 6px
> [data-fa]
position absolute
top 0
bottom 0
right 8px
margin auto 0 auto 0
width 1em
height 1em
position absolute
top 0
bottom 0
right 8px
margin auto 0 auto 0
width 1em
height 1em
</style>
<script>
@ -42,6 +46,7 @@
this.onclick = () => {
this.browser.cd(this.folder);
return false;
};
</script>
</mk-drive-folder>