scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-19 11:24:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4360 from aignatov-bio/ai-sci-7107-fix-attachmets-actions-dropdown-position

Browse source 
Fix attachments actions dropdown position [SCI-7107]
This commit is contained in:
aignatov-bio 2022-08-18 12:47:01 +02:00 • committed by GitHub
commit 1e6e0f5038
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/javascript/vue/protocol/attachments.vue
View file

@ -5,12 +5,12 @@
<h3>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h3>
</div>
<div class="actions" v-if="step.attributes.attachments_manageble">
<div class="dropdown sci-dropdown">
<div ref="actionsDropdownButton" class="dropdown sci-dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownAttachmentsOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span>{{ i18n.t("protocols.steps.attachments.manage") }}</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-attachment-options"
<ul ref="actionsDropdown" class="dropdown-menu dropdown-menu-right dropdown-attachment-options"
aria-labelledby="dropdownAttachmentsOptions"
:data-step-id="step.id"
>
@ -151,6 +151,7 @@
},
mounted() {
this.initMarvinJS();
$(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', this.handleDropdownPosition);
},
methods: {
changeAttachmentsOrder(order) {
@ -186,7 +187,20 @@
HelperModule.flashAlertMsg(this.i18n.t('errors.general'), 'danger');
}
});
}
},
handleDropdownPosition() {
this.$refs.actionsDropdownButton.classList.toggle("dropup", !this.isInViewport(this.$refs.actionsDropdown));
},
isInViewport(el) {
let rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || $(window).height()) &&
rect.right <= (window.innerWidth || $(window).width())
);
},
}
}
</script>

4
app/javascript/vue/protocol/step.vue
View file

@ -102,10 +102,10 @@
</a>
<div v-if="urls.update_url" class="step-actions-container">
<div class="dropdown">
<button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="true">
<button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepOptionsMenu_' + step.id" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="true">
<i class="fas fa-ellipsis-h"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'stepInserMenu_' + step.id">
<ul class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'stepOptionsMenu_' + step.id">
<li class="title">
{{ i18n.t('protocols.steps.options_dropdown.title') }}
</li>