From 03a35b3fd52343959e27d4a80245fd4052b6517d Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 9 Dec 2017 01:51:05 +0900 Subject: [PATCH] #297 --- src/web/app/mobile/tags/drive.tag | 10 +- src/web/app/mobile/tags/drive/file.tag | 195 ++++++++++++----------- src/web/app/mobile/tags/drive/folder.tag | 57 ++++--- 3 files changed, 139 insertions(+), 123 deletions(-) diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag index 8350ce07e1..a72c8d51c8 100644 --- a/src/web/app/mobile/tags/drive.tag +++ b/src/web/app/mobile/tags/drive.tag @@ -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 = () => { diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag index 93a8dba7e5..0b3506a430 100644 --- a/src/web/app/mobile/tags/drive/file.tag +++ b/src/web/app/mobile/tags/drive/file.tag @@ -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> diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag index 196e7e326b..785847a9ca 100644 --- a/src/web/app/mobile/tags/drive/folder.tag +++ b/src/web/app/mobile/tags/drive/folder.tag @@ -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>