Merge pull request #1949 from PenghaiZhang/feature/ebp-improvements

openequella · Jun 30, 2020 · 2569aee · 2569aee
1 parent 8bf4e81
commit 2569aee
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 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
@@ -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
@@ -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);
-	}
-};
+  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
@@ -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
@@ -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);
   }