opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

add modal

Browse Source
This commit is contained in:
Laila Los
2022-10-27 15:20:59 +02:00
parent ca239917a7
commit 6701e89b45
4 changed files with 164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package.json
+1
View File
@@ -33,6 +33,7 @@
"@johmun/vue-tags-input": "^2.1.0",
"@popperjs/core": "^2.11.5",
"@sentry/browser": "^6.17.4",
"@vueuse/core": "^9.4.0",
"assert": "^2.0.0",
"axios": "^0.25.0",
"babel-runtime": "^6.26.0",
client/src/components/Upload/DragAndDropModal.vue
+128
View File
@@ -0,0 +1,128 @@
<script setup>
import { useEventListener } from "@vueuse/core";
import { ref, computed } from "vue";
/** prevents any internal drag-events from opening the modal */
const dragBlocked = ref(false);
const isDragOver = ref(false);
const modal = ref(null);
useEventListener(
document.body,
"dragstart",
(event) => {
dragBlocked.value = true;
},
true
);
useEventListener(
document.body,
"dragover",
(event) => {
if (!dragBlocked.value) {
// prevent the browser from opening the file
event.preventDefault();
}
},
true
);
useEventListener(document.body, "drop", (event) => {
if (!dragBlocked.value) {
// prevent the browser from opening the file
event.preventDefault();
modal.value.hide();
}
}),
true;
useEventListener(
document.body,
"dragend",
(event) => {
dragBlocked.value = false;
isDragOver.value = false;
modal.value.hide();
},
true
);
useEventListener(
document.body,
"dragenter",
(event) => {
if (!dragBlocked.value && !isAnyModalOpen()) {
isDragOver.value = false;
modal.value.show();
event.preventDefault();
}
},
true
);
function isAnyModalOpen() {
return document.querySelectorAll(".modal.show").length > 0;
}
const modalContentElement = ref(null);
const modalClass = computed(() => {
if (isDragOver.value) {
return "ui-drag-and-drop-modal drag-over";
} else {
return "ui-drag-and-drop-modal";
}
});
useEventListener(modalContentElement, "dragenter", () => {
isDragOver.value = true;
});
useEventListener(modalContentElement, "dragleave", () => {
isDragOver.value = false;
});
</script>
<template>
<b-modal ref="modal" :modal-class="modalClass" hide-header hide-footer centered>
<div ref="modalContentElement" class="inner-content h-xl">Drop Files here to Upload them</div>
</b-modal>
</template>
<style lang="scss">
@import "theme/blue.scss";
.ui-drag-and-drop-modal {
.modal-content {
background-color: transparent;
border-radius: 16px;
border: 6px dashed;
border-color: $brand-secondary;
min-height: 40vh;
.modal-body {
display: flex;
}
.inner-content {
flex: 1 1 auto;
display: grid;
place-items: center;
color: $brand-secondary;
font-weight: bold;
}
}
&.drag-over {
.modal-content {
border-color: $brand-success;
.inner-content {
color: $brand-success;
}
}
}
}
</style>
client/src/entry/analysis/modules/Analysis.vue
+3
View File
@@ -14,6 +14,7 @@
</div>
</div>
<SidePanel v-if="showPanels" side="right" :current-panel="getHistoryIndex()" :current-panel-properties="{}" />
<DragAndDropModal />
</div>
</template>
<script>
@@ -22,11 +23,13 @@ import HistoryIndex from "components/History/Index";
import ToolBox from "components/Panels/ProviderAwareToolBox";
import SidePanel from "components/Panels/SidePanel";
import CenterFrame from "./CenterFrame";
import DragAndDropModal from "components/Upload/DragAndDropModal";
export default {
components: {
CenterFrame,
SidePanel,
DragAndDropModal,
},
data() {
return {
client/yarn.lock
+32
View File
@@ -1930,6 +1930,11 @@
dependencies:
"@types/jest" "*"
"@types/web-bluetooth@^0.0.16":
version "0.0.16"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
"@types/ws@^8.5.1":
version "8.5.3"
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -2002,6 +2007,28 @@
source-map "0.5.6"
tsconfig "^7.0.0"
"@vueuse/core@^9.4.0":
version "9.4.0"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.4.0.tgz#afb30f9494b0954e51a489526566b14f1e2c5fb3"
integrity sha512-JzgenGj1ZF2BHOen5rsFiAyyI9sXAv7aKhNLlm9b7SwYQeKTcxTWdhudonURCSP3Egl9NQaRBzes2lv/1JUt/Q==
dependencies:
"@types/web-bluetooth" "^0.0.16"
"@vueuse/metadata" "9.4.0"
"@vueuse/shared" "9.4.0"
vue-demi "*"
"@vueuse/metadata@9.4.0":
version "9.4.0"
resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.4.0.tgz#5c8eb105a8ad9eb7b47f78a226ff993560d0bd7f"
integrity sha512-7GKMdGAsJyQJl35MYOz/RDpP0FxuiZBRDSN79QIPbdqYx4Sd0sVTnIC68KJ6Oln0t0SouvSUMvRHuno216Ud2Q==
"@vueuse/shared@9.4.0":
version "9.4.0"
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.4.0.tgz#634022fe42b3d5ece1d81d749724966f5071c8c3"
integrity sha512-fTuem51KwMCnqUKkI8B57qAIMcFovtGgsCtAeqxIzH3i6nE9VYge+gVfneNHAAy7lj8twbkNfqQSygOPJTm4tQ==
dependencies:
vue-demi "*"
"@webassemblyjs/ast@1.11.1":
version "1.11.1"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -9937,6 +9964,11 @@ void-elements@^2.0.0:
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==
vue-demi@*:
version "0.13.11"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
vue-eslint-parser@^9.0.1:
version "9.0.3"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz#0c17a89e0932cc94fa6a79f0726697e13bfe3c96"