scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-29 11:45:18 +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 {
@include font-button;
min-width: 230px;
padding: 0;
li {
@ -83,6 +85,10 @@
&:hover {
background: $color-concrete;
}
.fas {
margin-right: .5em;
}
}
&.title {

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

@ -41,12 +41,12 @@
</span>
</div>
<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">
{{ i18n.t('protocols.steps.insert.button') }}
<span class="caret"></span>
</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">
{{ i18n.t('protocols.steps.insert.title') }}
</li>
@ -220,6 +220,7 @@
},
mounted() {
$(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar)
$(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', this.handleDropdownPosition);
},
computed: {
reorderableElements() {
@ -355,6 +356,19 @@
closeReorderModal() {
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) {
this.pasteImages = pasteImages;
this.showClipboardPasteModal = true;

2
config/locales/en.yml
View file

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