This commit is contained in:
syuilo
parent
1a80fdeaae
commit
03a35b3fd5
3 changed files with 139 additions and 123 deletions
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue