Skip to content
Snippets Groups Projects
Commit 727d2d87 authored by syuilo's avatar syuilo
Browse files

wip

parent 92e9f02e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/web/app/desktop/-tags/contextmenu.tag deleted 100644 → 0
+ 0
− 138
View file @ 92e9f02e
<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>
src/web/app/desktop/-tags/drive/base-contextmenu.tag deleted 100644 → 0
+ 0
− 44
View file @ 92e9f02e
<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>
src/web/app/desktop/views/components/contextmenu.vue 0 → 100644
+ 142
− 0
View file @ 727d2d87
<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>
src/web/app/desktop/views/components/drive-contextmenu.vue 0 → 100644
+ 46
− 0
View file @ 727d2d87
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment