From 727d2d8737751b8455fd65489859a81f6468e321 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Wed, 14 Feb 2018 18:01:15 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/contextmenu.tag | 138 ----------------- .../desktop/-tags/drive/base-contextmenu.tag | 44 ------ .../desktop/views/components/contextmenu.vue | 142 ++++++++++++++++++ .../views/components/drive-contextmenu.vue | 46 ++++++ 4 files changed, 188 insertions(+), 182 deletions(-) delete mode 100644 src/web/app/desktop/-tags/contextmenu.tag delete mode 100644 src/web/app/desktop/-tags/drive/base-contextmenu.tag create mode 100644 src/web/app/desktop/views/components/contextmenu.vue create mode 100644 src/web/app/desktop/views/components/drive-contextmenu.vue diff --git a/src/web/app/desktop/-tags/contextmenu.tag b/src/web/app/desktop/-tags/contextmenu.tag deleted file mode 100644 index cb9db4f982..0000000000 --- a/src/web/app/desktop/-tags/contextmenu.tag +++ /dev/null @@ -1,138 +0,0 @@ -<mk-contextmenu> - <yield /> - <style lang="stylus" scoped> - :scope - $width = 240px - $item-height = 38px - $padding = 10px - - display none - position fixed - top 0 - left 0 - z-index 4096 - width $width - font-size 0.8em - background #fff - border-radius 0 4px 4px 4px - box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) - opacity 0 - - ul - display block - margin 0 - padding $padding 0 - list-style none - - li - display block - - &.separator - margin-top $padding - padding-top $padding - border-top solid 1px #eee - - &.has-child - > p - cursor default - - > [data-fa]:last-child - position absolute - top 0 - right 8px - line-height $item-height - - &:hover > ul - visibility visible - - &:active - > p, a - background $theme-color - - > p, a - display block - z-index 1 - margin 0 - padding 0 32px 0 38px - line-height $item-height - color #868C8C - text-decoration none - cursor pointer - - &:hover - text-decoration none - - * - pointer-events none - - > i - width 28px - margin-left -28px - text-align center - - &:hover - > p, a - text-decoration none - background $theme-color - color $theme-color-foreground - - &:active - > p, a - text-decoration none - background darken($theme-color, 10%) - color $theme-color-foreground - - li > ul - visibility hidden - position absolute - top 0 - left $width - margin-top -($padding) - width $width - background #fff - border-radius 0 4px 4px 4px - box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) - transition visibility 0s linear 0.2s - - </style> - <script lang="typescript"> - import * as anime from 'animejs'; - import contains from '../../common/scripts/contains'; - - this.root.addEventListener('contextmenu', e => { - e.preventDefault(); - }); - - this.mousedown = e => { - e.preventDefault(); - if (!contains(this.root, e.target) && (this.root != e.target)) this.close(); - return false; - }; - - this.open = pos => { - document.querySelectorAll('body *').forEach(el => { - el.addEventListener('mousedown', this.mousedown); - }); - - this.root.style.display = 'block'; - this.root.style.left = pos.x + 'px'; - this.root.style.top = pos.y + 'px'; - - anime({ - targets: this.root, - opacity: [0, 1], - duration: 100, - easing: 'linear' - }); - }; - - this.close = () => { - document.querySelectorAll('body *').forEach(el => { - el.removeEventListener('mousedown', this.mousedown); - }); - - this.$emit('closed'); - this.$destroy(); - }; - </script> -</mk-contextmenu> diff --git a/src/web/app/desktop/-tags/drive/base-contextmenu.tag b/src/web/app/desktop/-tags/drive/base-contextmenu.tag deleted file mode 100644 index c93d630263..0000000000 --- a/src/web/app/desktop/-tags/drive/base-contextmenu.tag +++ /dev/null @@ -1,44 +0,0 @@ -<mk-drive-browser-base-contextmenu> - <mk-contextmenu ref="ctx"> - <ul> - <li @click="parent.createFolder"> - <p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p> - </li> - <li @click="parent.upload"> - <p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p> - </li> - <li @click="parent.urlUpload"> - <p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p> - </li> - </ul> - </mk-contextmenu> - <script lang="typescript"> - this.browser = this.opts.browser; - - this.on('mount', () => { - this.$refs.ctx.on('closed', () => { - this.$emit('closed'); - this.$destroy(); - }); - }); - - this.open = pos => { - this.$refs.ctx.open(pos); - }; - - this.createFolder = () => { - this.browser.createFolder(); - this.$refs.ctx.close(); - }; - - this.upload = () => { - this.browser.selectLocalFile(); - this.$refs.ctx.close(); - }; - - this.urlUpload = () => { - this.browser.urlUpload(); - this.$refs.ctx.close(); - }; - </script> -</mk-drive-browser-base-contextmenu> diff --git a/src/web/app/desktop/views/components/contextmenu.vue b/src/web/app/desktop/views/components/contextmenu.vue new file mode 100644 index 0000000000..c6fccc22c0 --- /dev/null +++ b/src/web/app/desktop/views/components/contextmenu.vue @@ -0,0 +1,142 @@ +<template> +<div class="mk-contextmenu" @contextmenu.prevent="() => {}"> + <slot></slot> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import * as anime from 'animejs'; +import contains from '../../../common/scripts/contains'; + +export default Vue.extend({ + props: ['x', 'y'], + mounted() { + document.querySelectorAll('body *').forEach(el => { + el.addEventListener('mousedown', this.onMousedown); + }); + + this.$el.style.display = 'block'; + this.$el.style.left = this.x + 'px'; + this.$el.style.top = this.y + 'px'; + + anime({ + targets: this.$el, + opacity: [0, 1], + duration: 100, + easing: 'linear' + }); + }, + methods: { + onMousedown(e) { + e.preventDefault(); + if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close(); + return false; + }, + close() { + Array.from(document.querySelectorAll('body *')).forEach(el => { + el.removeEventListener('mousedown', this.onMousedown); + }); + + this.$emit('closed'); + this.$destroy(); + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-contextmenu + $width = 240px + $item-height = 38px + $padding = 10px + + display none + position fixed + top 0 + left 0 + z-index 4096 + width $width + font-size 0.8em + background #fff + border-radius 0 4px 4px 4px + box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) + opacity 0 + + ul + display block + margin 0 + padding $padding 0 + list-style none + + li + display block + + &.separator + margin-top $padding + padding-top $padding + border-top solid 1px #eee + + &.has-child + > p + cursor default + + > [data-fa]:last-child + position absolute + top 0 + right 8px + line-height $item-height + + &:hover > ul + visibility visible + + &:active + > p, a + background $theme-color + + > p, a + display block + z-index 1 + margin 0 + padding 0 32px 0 38px + line-height $item-height + color #868C8C + text-decoration none + cursor pointer + + &:hover + text-decoration none + + * + pointer-events none + + > i + width 28px + margin-left -28px + text-align center + + &:hover + > p, a + text-decoration none + background $theme-color + color $theme-color-foreground + + &:active + > p, a + text-decoration none + background darken($theme-color, 10%) + color $theme-color-foreground + + li > ul + visibility hidden + position absolute + top 0 + left $width + margin-top -($padding) + width $width + background #fff + border-radius 0 4px 4px 4px + box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) + transition visibility 0s linear 0.2s + +</style> diff --git a/src/web/app/desktop/views/components/drive-contextmenu.vue b/src/web/app/desktop/views/components/drive-contextmenu.vue new file mode 100644 index 0000000000..bdb3bd00dc --- /dev/null +++ b/src/web/app/desktop/views/components/drive-contextmenu.vue @@ -0,0 +1,46 @@ +<template> +<mk-contextmenu ref="menu" @closed="onClosed"> + <ul> + <li @click="createFolder"> + <p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p> + </li> + <li @click="upload"> + <p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p> + </li> + <li @click="urlUpload"> + <p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p> + </li> + </ul> +</mk-contextmenu> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['browser'], + mounted() { + + }, + methods: { + close() { + (this.$refs.menu as any).close(); + }, + onClosed() { + this.$emit('closed'); + this.$destroy(); + }, + createFolder() { + this.browser.createFolder(); + this.close(); + }, + upload() { + this.browser.selectLocalFile(); + this.close(); + }, + urlUpload() { + this.browser.urlUpload(); + this.close(); + } + } +}); +</script>