nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 17:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

contextmenu refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-22 13:23:57 +01:00
parent 26bf65af88
commit fc74682e62
5 changed files with 140 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
resources/js/components/FilesView/ContextMenu.vue
View File

@@ -3,19 +3,19 @@
v-show="isVisible"
:style="{top: positionY + 'px', left: positionX + 'px'}"
@click="closeAndResetContextMenu"
class="contextmenu"
class="absolute w-60 shadow-lg rounded-xl z-20 bg-white overflow-hidden"
ref="contextmenu"
>
<div id="menu-list" class="menu-options">
<div id="menu-list" class="w-full">
<!--Show empty select contextmenu-->
<slot name="empty-select" v-if="! item"></slot>
<slot name="empty-select" v-if="! item" />
<!--Show single select contextmenu-->
<slot name="single-select" v-if="isMultiSelectContextMenu"></slot>
<slot name="single-select" v-if="isMultiSelectContextMenu" />
<!--Show multiple select contextmenu-->
<slot name="multiple-select" v-if="! isMultiSelectContextMenu"></slot>
<slot name="multiple-select" v-if="! isMultiSelectContextMenu" />
</div>
</div>
</template>
@@ -114,67 +114,3 @@ export default {
}
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.no-options {
/deep/ .text-label {
color: $text-muted !important;
}
/deep/ &:hover {
background: transparent;
}
/deep/ path,
/deep/ line,
/deep/ circle {
stroke: $text-muted !important;
}
}
.contextmenu {
min-width: 250px;
position: absolute;
z-index: 99;
box-shadow: $shadow;
background: white;
border-radius: 8px;
overflow: hidden;
&.showed {
display: block;
}
}
.menu-options {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
}
.dark {
.contextmenu {
background: $dark_mode_foreground;
}
.no-options {
/deep/ .text-label {
color: $dark_mode_text_secondary !important;
}
/deep/ &:hover {
background: transparent;
}
/deep/ path,
/deep/ line,
/deep/ circle {
stroke: $dark_mode_text_secondary !important;
}
}
}
</style>