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

Merge pull request #6136 from aignatov-bio/ai-sci-9195-fix-tinymce-sticky-header

Browse source 
Fix tinymce header [SCI-9195]
This commit is contained in:
aignatov-bio 2023-09-05 14:31:20 +02:00 • committed by GitHub
commit c3a5bf2e37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/packs/tiny_mce.js vendored
View file

@ -195,12 +195,11 @@ window.TinyMCE = (() => {
document.location.hash = `${textAreaObject.data('objectType')}_${textAreaObject.data('objectId')}`;
}
let topMenuHeight = $('.sci--navigation--top-menu-container') ? $('.sci--navigation--top-menu-container').height() : 0;
let breadcrumbsHeight = $('.sci--layout-navigation-breadcrumbs') ? $('.sci--layout-navigation-breadcrumbs').height() : 0;
let secondaryNavHeight = $('.content-header.sticky-header') ? $('.content-header.sticky-header').height() : 0;
editorToolbaroffset = topMenuHeight + breadcrumbsHeight + secondaryNavHeight;
editorToolbaroffset = 0;
$.each($('.sticky-header-element'), (_index, element) => {
editorToolbaroffset += $(element).outerHeight();
});
return tinyMCE.init({
cache_suffix: '?v=6.5.1-19', // This suffix should be changed any time library is updated

13
app/javascript/vue/protocol/container.vue
View file

@ -399,6 +399,12 @@
let secondaryNavigationHeight = secondaryNavigation.offsetHeight;
let secondaryNavigationTop = secondaryNavigation.getBoundingClientRect().top;
// TinyMCE offset calculation
let stickyNavigationHeight = secondaryNavigationHeight;
if ($('.tox-editor-header').length > 0 && $('.tox-editor-header')[0].getBoundingClientRect().top > protocolHeaderTop) {
stickyNavigationHeight += protocolHeaderHeight;
}
// Add shadow to secondary navigation when it starts fly
if (secondaryNavigation.getBoundingClientRect().top == 0 && !this.headerSticked) {
secondaryNavigation.style.boxShadow = '0px 5px 8px 0px rgba(0, 0, 0, 0.10)';
@ -406,7 +412,7 @@
secondaryNavigation.style.boxShadow = 'none';
}
if (protocolHeaderTop < protocolHeaderHeight) { // When secondary navigation touch protocol header
if (protocolHeaderTop - 5 < protocolHeaderHeight) { // When secondary navigation touch protocol header
secondaryNavigation.style.top = protocolHeaderTop - protocolHeaderHeight + 'px'; // Secondary navigation starts slowly disappear
protocolHeader.style.boxShadow = '0px 5px 8px 0px rgba(0, 0, 0, 0.10)'; // Flying shadow
this.headerSticked = true;
@ -434,6 +440,11 @@
this.headerSticked = false;
}
// Apply TinyMCE offset
$('.tox-editor-header').css('top',
stickyNavigationHeight + parseInt($(secondaryNavigation).css('top'), 10)
);
this.lastScrollTop = window.scrollY; // Save last scroll position to when user scroll up/down
}
}

2
app/views/my_modules/_header_actions.html.erb
View file

@ -1,4 +1,4 @@
<div id="taskSecondaryMenu" class="bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky z-[251]">
<div id="taskSecondaryMenu" class="sticky-header-element bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky z-[251]">
<div class="flex items-center gap-4">
<% if can_read_experiment?(@my_module.experiment) %>
<a class="p-3 border-b-4 border-transparent hover:no-underline uppercase text-bold capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"