From 2569aee4f4ce122be03468f088a7faec4df52b42 Mon Sep 17 00:00:00 2001 From: PenghaiZhang <47203811+PenghaiZhang@users.noreply.github.com> Date: Fri, 26 Jun 2020 18:45:52 +1000 Subject: [PATCH] Merge pull request #1949 from PenghaiZhang/feature/ebp-improvements --- .../resources/web/sass/legacy.scss | 24 +++++- .../resources/web/scripts/wizardctrl.js | 75 +++++++++++++------ .../com/tle/web/wizard/WizardJSLibrary.java | 2 + .../web/wizard/section/WizardBodySection.java | 9 ++- 4 files changed, 80 insertions(+), 30 deletions(-) diff --git a/Source/Plugins/Core/com.equella.core/resources/web/sass/legacy.scss b/Source/Plugins/Core/com.equella.core/resources/web/sass/legacy.scss index c2c91be595..04db39303f 100644 --- a/Source/Plugins/Core/com.equella.core/resources/web/sass/legacy.scss +++ b/Source/Plugins/Core/com.equella.core/resources/web/sass/legacy.scss @@ -1922,13 +1922,23 @@ div.skinnysearch { overflow: hidden; } -.autocompleteControl .autocomplete-container { - float: left; - width: 513px; +@media only screen and (max-width: 1200px) { + .autocompleteControl .autocomplete-container { + float: left; + width: 85%; + } +} + +@media only screen and (min-width: 1201px) { + .autocompleteControl .autocomplete-container { + float: left; + width: 96%; + } } #wizard-controls .autocompleteControl input[type="text"] { height: 34px; + width: 98%; } .ac_odd { @@ -2672,9 +2682,15 @@ Contribution wizard styling width: 221px; } -.wizard-layout .rightNav { +.wizard-layout .contribution-rightNav { + position: fixed; + right: 30px; +} + +.wizard-layout .moderation-rightNav { position: fixed; right: 30px; + top: 70px; } .wizard-layout #col2 { diff --git a/Source/Plugins/Core/com.equella.core/resources/web/scripts/wizardctrl.js b/Source/Plugins/Core/com.equella.core/resources/web/scripts/wizardctrl.js index 246d57c0e0..998bf3a88e 100644 --- a/Source/Plugins/Core/com.equella.core/resources/web/scripts/wizardctrl.js +++ b/Source/Plugins/Core/com.equella.core/resources/web/scripts/wizardctrl.js @@ -1,24 +1,53 @@ +/* + * Licensed to The Apereo Foundation under one or more contributor license + * agreements. See the NOTICE file distributed with this work for additional + * information regarding copyright ownership. + * + * The Apereo Foundation licenses this file to you under the Apache License, + * Version 2.0, (the "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at: + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ var WizardCtrl = { - setMessage : function(ctrlid, message) - { - var $ctrl = $("#" + ctrlid); - var $content = $ctrl.children("div:first-child"); - var $msg = $content.children("p.ctrlinvalidmessage"); - if (!message) - { - $content.removeClass("ctrlinvalid"); - $msg.empty(); - } - else - { - $content.addClass("ctrlinvalid"); - $msg.html(message); - } - }, - affixDiv: function() { - var ad = $("#affix-div"); - ad.attr("data-spy", "affix"); - var offset = (ad.offset().top) - 55; - ad.attr("data-offset-top",offset); - } -}; \ No newline at end of file + setMessage: function (ctrlid, message) { + var $ctrl = $("#" + ctrlid); + var $content = $ctrl.children("div:first-child"); + var $msg = $content.children("p.ctrlinvalidmessage"); + if (!message) { + $content.removeClass("ctrlinvalid"); + $msg.empty(); + } else { + $content.addClass("ctrlinvalid"); + $msg.html(message); + } + }, + affixDiv: function () { + var ad = $("#affix-div"); + ad.attr("data-spy", "affix"); + var offset = ad.offset().top - 55; + ad.attr("data-offset-top", offset); + }, + affixDivNewUI: function () { + const moderationPanel = $("#moderate"); + const affixDiv = $("#affix-div"); + if (moderationPanel.length > 0) { + $(window).on("scroll", function () { + // Use outerHeight to include margin. + const moderationPanelHeight = moderationPanel.outerHeight(true); + const currentWindowYPos = $(window).scrollTop(); + currentWindowYPos >= moderationPanelHeight + ? affixDiv.addClass("moderation-rightNav") + : affixDiv.removeClass("moderation-rightNav"); + }); + } else { + affixDiv.addClass("contribution-rightNav"); + } + }, +}; diff --git a/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/WizardJSLibrary.java b/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/WizardJSLibrary.java index 0cb319ede0..8ea3143f84 100644 --- a/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/WizardJSLibrary.java +++ b/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/WizardJSLibrary.java @@ -37,6 +37,8 @@ public final class WizardJSLibrary { new ExternallyDefinedFunction("WizardCtrl", INCLUDE); public static final JSCallable AffixDiv = new ExternallyDefinedFunction(WIZARDCTRLCLASS, "affixDiv", 0); + public static final JSCallable AffixDivNewUI = + new ExternallyDefinedFunction(WIZARDCTRLCLASS, "affixDivNewUI", 0); private WizardJSLibrary() { throw new Error(); diff --git a/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/section/WizardBodySection.java b/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/section/WizardBodySection.java index ea8385e149..6d842c203c 100644 --- a/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/section/WizardBodySection.java +++ b/Source/Plugins/Core/com.equella.core/src/com/tle/web/wizard/section/WizardBodySection.java @@ -37,6 +37,7 @@ import com.tle.web.sections.events.js.JSHandler; import com.tle.web.sections.events.js.SubmitValuesFunction; import com.tle.web.sections.generic.CachedData.CacheFiller; +import com.tle.web.sections.js.JSCallable; import com.tle.web.sections.js.generic.OverrideHandler; import com.tle.web.sections.js.generic.statement.ReturnStatement; import com.tle.web.sections.js.validators.Confirm; @@ -280,12 +281,14 @@ public SectionResult renderHtml(RenderEventContext context) throws Exception { } // To make the Navigation bar stick to top of the page, Old UI uses Bootstrap affix - // whereas New UI adds a CSS style. + // whereas New UI dynamically adds a CSS style by JS. + JSCallable affixScript = null; if (!RenderNewTemplate.isNewLayout(context)) { - model.getFixedDiv().getTagState().addReadyStatements(WizardJSLibrary.AffixDiv); + affixScript = WizardJSLibrary.AffixDiv; } else { - model.getFixedDiv().addClasses("rightNav"); + affixScript = WizardJSLibrary.AffixDivNewUI; } + model.getFixedDiv().getTagState().addReadyStatements(affixScript); return viewFactory.createTemplateResult("wizard/body.ftl", context); }