wip
This commit is contained in:
syuilo
@@ -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>
|
||||
Reference in New Issue
Block a user