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

Insert element dropdown fixes [SCI-6925] (#4184)

Browse source 
* Insert element dropdown fixes [SCI-6925]

* Dropdown bugfix, rounder CSS size [SCI-6925]
This commit is contained in:
artoscinote 2022-07-06 14:11:48 +02:00 committed by GitHub
parent 7921a7276f
commit c9e7e68369
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/steps/step.scss
View file

@ -72,6 +72,8 @@
.insert-element-dropdown { .insert-element-dropdown {
@include font-button; @include font-button;
min-width: 230px;
padding: 0; padding: 0;
li { li {
@ -83,6 +85,10 @@
&:hover { &:hover {
background: $color-concrete; background: $color-concrete;
} }
.fas {
margin-right: .5em;
}
} }
&.title { &.title {

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

@ -41,12 +41,12 @@
</span> </span>
</div> </div>
<div class="step-actions-container"> <div class="step-actions-container">
<div v-if="urls.update_url" class="dropdown"> <div ref="actionsDropdownButton" 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 class="dropdown-menu insert-element-dropdown" :aria-labelledby="'stepInserMenu_' + step.id"> <ul ref="actionsDropdown" class="dropdown-menu insert-element-dropdown" :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>
@ -220,6 +220,7 @@
}, },
mounted() { mounted() {
$(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar) $(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar)
$(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', this.handleDropdownPosition);
}, },
computed: { computed: {
reorderableElements() { reorderableElements() {
@ -355,6 +356,19 @@
closeReorderModal() { closeReorderModal() {
this.reordering = false; this.reordering = false;
}, },
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())
);
},
copyPasteImageModal(pasteImages) { copyPasteImageModal(pasteImages) {
this.pasteImages = pasteImages; this.pasteImages = pasteImages;
this.showClipboardPasteModal = true; this.showClipboardPasteModal = true;

2
config/locales/en.yml
View file

@ -2531,7 +2531,7 @@ en:
delete: 'Delete' delete: 'Delete'
insert: insert:
button: 'Insert' button: 'Insert'
title: 'insert content' title: 'Insert step content'
table: 'Add table' table: 'Add table'
text: 'Add text' text: 'Add text'
checklist: 'Add checklist' checklist: 'Add checklist'