natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

#297

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

57
src/web/app/mobile/tags/drive/folder.tag
View File

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