Merge pull request #6194 from artoscinote/ma_SCI_9279

Fix z-index issues with share modal [SCI-9279]
This commit is contained in:
Martin Artnik 2023-09-13 10:11:38 +02:00 committed by GitHub
commit 6a8f8cb419
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 11 deletions

View file

@ -95,6 +95,10 @@
name: "shareModalContainer", name: "shareModalContainer",
components: { deleteShareableLinkModal }, components: { deleteShareableLinkModal },
props: { props: {
open: {
type: Boolean,
required: true
},
shared: { shared: {
type: Boolean, type: Boolean,
default: false default: false
@ -123,11 +127,12 @@
watch: { watch: {
shared() { shared() {
this.sharedEnabled = this.shared; this.sharedEnabled = this.shared;
},
open() {
this.open ? this.showModal() : this.hideModal();
} }
}, },
mounted() { mounted() {
$(this.$refs.modal).modal('show');
$(this.$refs.modal).on('hidden.bs.modal', () => { $(this.$refs.modal).on('hidden.bs.modal', () => {
if (!this.confirmingDelete) { if (!this.confirmingDelete) {
this.$emit('close'); this.$emit('close');

View file

@ -12,14 +12,15 @@
{{ shareValue }} {{ shareValue }}
</span> </span>
</button> </button>
<div ref="modal">
<shareModalContainer v-if="visibleShareModal" <shareModalContainer :shared="share"
:shared="share" :open="visibleShareModal"
:shareableLinkUrl="shareableLinkUrl" :shareableLinkUrl="shareableLinkUrl"
:characterLimit="255" :characterLimit="255"
@enable="enableShare" @enable="enableShare"
@disable="disableShare" @disable="disableShare"
@close="closeModal"/> @close="closeModal"/>
</div>
</div> </div>
</template> </template>
@ -59,6 +60,10 @@
return this.i18n.t(this.share ? 'my_modules.shareable_links.shared' : 'my_modules.shareable_links.share'); return this.i18n.t(this.share ? 'my_modules.shareable_links.shared' : 'my_modules.shareable_links.share');
} }
}, },
mounted() {
// move modal to body to avoid z-index issues
$('body').append($(this.$refs.modal));
},
methods:{ methods:{
enableShare() { enableShare() {
this.share = true; this.share = true;
@ -72,7 +77,6 @@
closeModal() { closeModal() {
this.visibleShareModal = false; this.visibleShareModal = false;
} }
} }
}; };
</script> </script>