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

Merge pull request #4586 from aignatov-bio/ai-sci-7387-fix-options-dropdown-position-on-step

Browse source 
Fix options dropdown position on step [SCI-7387]
This commit is contained in:
aignatov-bio 2022-11-10 11:12:28 +01:00 committed by GitHub
commit a72795ec98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,12 +57,12 @@
</button> </button>
</div> </div>
<div class="step-actions-container"> <div class="step-actions-container">
<div ref="actionsDropdownButton" v-if="urls.update_url" class="dropdown"> <div ref="elementsDropdownButton" v-if="urls.update_url" class="dropdown">
<button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{ i18n.t('protocols.steps.insert.button') }} {{ i18n.t('protocols.steps.insert.button') }}
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul ref="actionsDropdown" class="dropdown-menu insert-element-dropdown dropdown-menu-right" :aria-labelledby="'stepInserMenu_' + step.id"> <ul ref="elementsDropdown" class="dropdown-menu insert-element-dropdown dropdown-menu-right" :aria-labelledby="'stepInserMenu_' + step.id">
<li class="title"> <li class="title">
{{ i18n.t('protocols.steps.insert.title') }} {{ i18n.t('protocols.steps.insert.title') }}
</li> </li>
@ -101,11 +101,11 @@
</span> </span>
</a> </a>
<div v-if="urls.update_url" class="step-actions-container"> <div v-if="urls.update_url" class="step-actions-container">
<div class="dropdown"> <div ref="actionsDropdownButton" class="dropdown">
<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"> <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> <i class="fas fa-ellipsis-h"></i>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'stepOptionsMenu_' + step.id"> <ul ref="actionsDropdown" class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'stepOptionsMenu_' + step.id">
<li class="title"> <li class="title">
{{ i18n.t('protocols.steps.options_dropdown.title') }} {{ i18n.t('protocols.steps.options_dropdown.title') }}
</li> </li>
@ -249,7 +249,12 @@
mounted() { mounted() {
$(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar); $(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar);
$(this.$refs.comments).data('openCallback', this.closeCommentsSidebar); $(this.$refs.comments).data('openCallback', this.closeCommentsSidebar);
$(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', this.handleDropdownPosition); $(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', () => {
this.handleDropdownPosition(this.$refs.actionsDropdownButton, this.$refs.actionsDropdown)
});
$(this.$refs.elementsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', () => {
this.handleDropdownPosition(this.$refs.elementsDropdownButton, this.$refs.elementsDropdown)
});
}, },
computed: { computed: {
reorderableElements() { reorderableElements() {
@ -438,8 +443,8 @@
closeReorderModal() { closeReorderModal() {
this.reordering = false; this.reordering = false;
}, },
handleDropdownPosition() { handleDropdownPosition(refButton, refDropdown) {
this.$refs.actionsDropdownButton.classList.toggle("dropup", !this.isInViewport(this.$refs.actionsDropdown)); refButton.classList.toggle("dropup", !this.isInViewport(refDropdown));
}, },
isInViewport(el) { isInViewport(el) {
let rect = el.getBoundingClientRect(); let rect = el.getBoundingClientRect();