OO-1658 support for links to manual in form item help, improve CSS

src/main/java/org/olat/core/_i18n/LocalStrings_de.properties

@@ -28,6 +28,7 @@ form.legende.wikiMarkup=<i>Dieses Feld erlaubt mit Wiki-Syntax formatierte Einga
 form.mandatory.hover=Dieses Feld muss ausgef\u00FCllt werden.
 form.uncheckall=Auswahl l\u00F6schen
 form.wiki.hover=Mit Wiki-Syntax formatierbar
+form.fhelp.link=Für mehr Informationen klicken Sie auf {0}
 help=Hilfe
 help.manual=Handbuch
 info.header=Information

src/main/java/org/olat/core/_i18n/LocalStrings_en.properties

@@ -29,6 +29,7 @@ form.legende.wikiMarkup=<i>This field allows formatted entries using the Wiki Ma
 form.mandatory.hover=This field is mandatory.
 form.uncheckall=Delete selection
 form.wiki.hover=Can be formatted if using the Wiki syntax
+form.fhelp.link=For more information click on {0}
 help=Help
 help.manual=Manual
 info.header=Information

src/main/java/org/olat/core/gui/components/form/flexible/FormItem.java

@@ -32,6 +32,7 @@ import org.olat.core.gui.components.Component;
 import org.olat.core.gui.components.Container;
 import org.olat.core.gui.components.form.flexible.elements.FormLink;
 import org.olat.core.gui.components.form.flexible.impl.Form;
+import org.olat.core.gui.components.form.flexible.impl.FormDecorator;
 import org.olat.core.gui.components.form.flexible.impl.FormItemImpl;
 import org.olat.core.gui.translator.Translator;
 import org.olat.core.util.ValidationStatus;
@@ -358,6 +359,28 @@ public interface FormItem extends FormBaseComponentIdProvider {
 	 * @return The help text or NULL if no help text is available
 	 */
 	public String getHelpText();
+
+	/**
+	 * Set an optional context help URL to link to external help resources
+	 * @param helpUrl An absolute URL with protocol handler etc. 
+	 */
+	public void setHelpUrl(String helpUrl);
+
+	/**
+	 * Set an optional context reference from the official manual. This
+	 * generates a link to the confluence server. The HelpLinkSPI is used to
+	 * generate the actual help URL from this alias name.
+	 * 
+	 * @param manualAliasName
+	 *            The help page alias.
+	 */
+	public void setHelpUrlForManualPage(String manualAliasName);
+	
+	/**
+	 * @return The link to an external help for this form item or NULL if no
+	 *         help link is available.
+	 */
+	public String getHelpUrl();
 	
 	/**
 	 * 

src/main/java/org/olat/core/gui/components/form/flexible/impl/FormItemImpl.java

@@ -26,7 +26,10 @@
 package org.olat.core.gui.components.form.flexible.impl;
 
 import java.util.List;
+import java.util.Locale;
 
+import org.olat.core.CoreSpringFactory;
+import org.olat.core.commons.services.help.HelpModule;
 import org.olat.core.gui.UserRequest;
 import org.olat.core.gui.components.Component;
 import org.olat.core.gui.components.form.flexible.FormBaseComponentIdProvider;
@@ -61,6 +64,7 @@ public abstract class FormItemImpl implements FormItem, InlineElement {
 	private String[] helpParams;
 	private String helpKey;
 	private String helpText;
+	private String helpUrl;
 	private Component exampleC;
 	private Panel examplePanel;
 	private String[] labelParams;
@@ -301,6 +305,13 @@ public abstract class FormItemImpl implements FormItem, InlineElement {
 		// always translated
 		return helpText;		
 	}
+	
+	/**
+	 * @see org.olat.core.gui.components.form.flexible.FormComponent#getHelpUrl()
+	 */
+	public String getHelpUrl() {
+		return helpUrl;
+	}
 
 	/**
 	 * @see org.olat.core.gui.components.form.flexible.FormComponent#setExampleKey(java.lang.String,
@@ -340,6 +351,21 @@ public abstract class FormItemImpl implements FormItem, InlineElement {
 		this.helpText = helpText;
 	}
 
+	/**
+	 * @see org.olat.core.gui.components.form.flexible.FormComponent#setHelpUrl(java.lang.String)
+	 */
+	public void setHelpUrl(String helpUrl) {
+		this.helpUrl = helpUrl;
+	}
+	
+	/**
+	 * @see org.olat.core.gui.components.form.flexible.FormComponent#setHelpUrlForManualPage(java.lang.String)
+	 */
+	public void setHelpUrlForManualPage(String manualAliasName) {
+		HelpModule helpModule = CoreSpringFactory.getImpl(HelpModule.class);
+		Locale locale = getTranslator().getLocale();
+		this.helpUrl = helpModule.getHelpProvider().getURL(locale, manualAliasName);
+	}
 
 	/**
 	 * @see org.olat.core.gui.components.form.flexible.FormComponent#setErrorKey(java.lang.String,

src/main/java/org/olat/core/gui/components/form/flexible/impl/_content/form_default.html

@@ -47,7 +47,7 @@
 			#end
 		</div>
 		#if($f.hasExample($item))
-			<div class="help-block col-sm-offset-3 col-sm-9">
+			<div class="o_form_example help-block col-sm-offset-3 col-sm-9">
 				$r.render("${item}_EXAMPLE")
 			</div>
 		#end

src/main/java/org/olat/core/gui/components/form/flexible/impl/_content/form_default_6_6.html

@@ -46,7 +46,7 @@
 			#end
 		</div>
 		#if($f.hasExample($item))
-			<div class="help-block col-sm-offset-6 col-sm-6">
+			<div class="o_form_example help-block col-sm-offset-6 col-sm-6">
 				$r.render("${item}_EXAMPLE")
 			</div>
 		#end

src/main/java/org/olat/core/gui/components/form/flexible/impl/_content/form_default_9_3.html

@@ -46,7 +46,7 @@
 			#end
 		</div>
 		#if($f.hasExample($item))
-			<div class="help-block col-sm-offset-9 col-sm-3">
+			<div class="o_form_example help-block col-sm-offset-9 col-sm-3">
 				$r.render("${item}_EXAMPLE")
 			</div>
 		#end

src/main/java/org/olat/core/gui/components/form/flexible/impl/_content/form_horizontal.html

@@ -28,7 +28,7 @@
 				<span class="o_icon o_icon_error form-control-feedback"></span>
 			#end
 		#if($f.hasExample($item))
-			<div class="help-block">
+			<div class="o_form_example help-block">
 				$r.render("${item}_EXAMPLE")
 			</div>
 		#end

src/main/java/org/olat/core/gui/components/form/flexible/impl/_content/form_inputgroup.html

@@ -25,7 +25,7 @@
 		#end
 		</div>
 	#if($f.hasExample($formitemnames.get(0)))
-		<div class="help-block">
+		<div class="o_form_example help-block">
 			$r.render("$formitemnames.get(0)_EXAMPLE")
 		</div>
 	#end

src/main/java/org/olat/core/gui/components/form/flexible/impl/_content/form_panel.html

@@ -37,7 +37,7 @@
 			#end
 		</div>
 		#if($f.hasExample($item))
-			<div class="help-block">
+			<div class="o_form_example help-block">
 				$r.render("${item}_EXAMPLE")
 			</div>
 		#end

src/main/java/org/olat/core/gui/components/form/flexible/impl/_content/form_vertical.html

@@ -39,7 +39,7 @@
 				<span class="o_icon o_icon_error form-control-feedback"></span>
 			#end
 		#if($f.hasExample($item))
-			<div class="help-block">
+			<div class="o_form_example help-block">
 				$r.render("${item}_EXAMPLE")
 			</div>
 		#end

src/main/java/org/olat/core/gui/components/form/flexible/impl/components/SimpleLabelText.java

@@ -39,11 +39,13 @@ import org.olat.core.util.StringHelper;
 
 /**
  * Description:<br>
- * TODO: patrickb Class Description for SimpleLabelTextComponent
+ * The label form component displays a label for the given form item. For DOM
+ * reasons the label does also include information about mandatory items and
+ * includes the item help text or links if available.
  * <P>
  * Initial Date: 06.12.2006 <br>
  * 
- * @author patrickb
+ * @author patrickb, gnaegi
  */
 public class SimpleLabelText extends FormBaseComponentImpl {
 	private static final ComponentRenderer RENDERER = new LabelComponentRenderer();
@@ -72,6 +74,13 @@ public class SimpleLabelText extends FormBaseComponentImpl {
 	public String getComponentHelpText() {
 		return item.getHelpText();
 	}
+	
+	/**
+	 * return the context help url for this component or NULL if not available
+	 */
+	public String getComponentHelpUrl() {
+		return item.getHelpUrl();
+	}
 
 	
 	
@@ -113,10 +122,34 @@ public class SimpleLabelText extends FormBaseComponentImpl {
 			if (StringHelper.containsNonWhitespace(stc.text)) {
 				sb.append(stc.text);
 			}
-			if (stc.getComponentHelpText() != null) {
-				sb.append("<i class='o_form_chelp o_icon o_icon-fw o_icon_help help-block' id='o_ch").append(source.getDispatchID()).append("'></i>");
-				String escaped = StringHelper.escapeJavaScript(stc.getComponentHelpText());
-				sb.append("<script>jQuery(function () {jQuery('#o_ch").append(source.getDispatchID()).append("').tooltip({placement:\"top\",container: \"body\",html:true,title:\"").append(escaped).append("\"});})</script>");		
+			// component help is optional, can be text or link or both
+			if (stc.getComponentHelpText() != null || stc.getComponentHelpUrl() != null) {
+				String helpIconId = "o_fh" + source.getDispatchID();
+				// Wrap tooltip with link to external url if available
+				String helpUrl = stc.getComponentHelpUrl();
+				if (helpUrl != null) {
+					sb.append("<a href=\"").append(helpUrl).append("\" target='_blank'>"); 
+				}
+				// tooltip is bound to this icon
+				sb.append("<i class='o_form_chelp o_icon o_icon-fw o_icon_help help-block' id='").append(helpIconId).append("'></i>");
+				if (helpUrl != null) {
+					sb.append("</a>");
+				}			
+				// Attach bootstrap tooltip handler to help icon
+				sb.append("<script>jQuery(function () {jQuery('#").append(helpIconId).append("').tooltip({placement:\"top\",container: \"body\",html:true,title:\"");
+				String text = stc.getComponentHelpText();
+				if (text != null) {
+					sb.append(StringHelper.escapeJavaScript(text));
+				}
+				String url = stc.getComponentHelpUrl();
+				if (url != null) {
+					if (text != null) {
+						// append spacer between custom and generic link text
+						sb.append("<br />");
+					}
+					sb.append(translator.translate("form.fhelp.link", new String[]{"<i class='o_icon o_icon-fw o_icon_help'></i>"}));					
+				}
+				sb.append("\"});})</script>");		
 			}
 			sb.append("</label>");
 		}

src/main/java/org/olat/core/gui/components/form/flexible/impl/elements/FileElementRenderer.java

@@ -124,7 +124,7 @@ public class FileElementRenderer extends DefaultComponentRenderer {
 			// Add Max upload size
 			if (fileElem.getMaxUploadSizeKB() != FileElement.UPLOAD_UNLIMITED) {
 				String maxUpload = Formatter.formatBytes(fileElem.getMaxUploadSizeKB() * 1024);
-				sb.append("<div class='help-block o_maxsize'>(")
+				sb.append("<div class='o_form_example help-block o_maxsize'>(")
 				.append(trans.translate("file.element.select.maxsize", new String[]{maxUpload}))
 				.append(")</div>");	
 			}

src/main/java/org/olat/gui/demo/guidemo/GuiDemoFlexiForm.java

@@ -142,12 +142,14 @@ public class GuiDemoFlexiForm extends FormBasicController {
 		firstName.setEnabled(inputMode);
 		firstName.setPlaceholderText("Hans");
 		firstName.setHelpText("If you have a middle name, add it to the first name input field");
+		firstName.setHelpUrlForManualPage("Personal menu");
 
 		lastName = uifactory.addTextElement("lastname", "guidemo.flexi.form.lastname", 256, personData.getLastName(), formLayout);
 		lastName.setDisplaySize(defaultDisplaySize);
 		lastName.setNotEmptyCheck("guidemo.flexi.form.mustbefilled");
 		lastName.setEnabled(inputMode);
 		lastName.setPlaceholderText("Muster");
+		lastName.setHelpUrl("https://en.wikipedia.org/wiki/Family_name");
 
 		fileElement = uifactory.addFileElement("file", formLayout);
 		fileElement.setLabel("guidemo.flexi.form.file", null);

src/main/webapp/static/themes/light/modules/_form.scss

@@ -11,27 +11,18 @@
 
 	/* as of 10.4 the mandatory icon is left from the label to make place for the help o_form_chelp */
 	.o_icon_mandatory {
-		position: relative;
-		right: 0;
-		line-height: inherit;
 		margin-right: 0.25em;
 	}
 
-	/* example, positioned below the input field */	
-	.help-block {
-		font-size: 90%;
-	}
-
 	/* context help for input element, right from label */
 	.o_form_chelp {
-		position: relative;
-		right: 0;
-		line-height: inherit;
 		padding-left: 0.25em;
 		margin-right: -1.25em;	
-		&.help-block {
-			font-size: 100%;
-		}
+	}
+	
+	/* example, positioned below the input field */	
+	.o_form_example {
+		font-size: 90%;	
 	}
 		
 	.o_error {