wip
This commit is contained in:
syuilo
parent
92e9f02e21
commit
727d2d8737
@ -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>
|
|
||||||
@ -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>
|
|
||||||
142
src/web/app/desktop/views/components/contextmenu.vue
Normal file
142
src/web/app/desktop/views/components/contextmenu.vue
Normal file
@ -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>
|
||||||
46
src/web/app/desktop/views/components/drive-contextmenu.vue
Normal file
46
src/web/app/desktop/views/components/drive-contextmenu.vue
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user