OO-1068 implement placeholder for text elements, fix setlabel bug, fix...

OO-1068 implement placeholder for text elements, fix setlabel bug, fix alignment in placeholder form layout

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

@@ -154,4 +154,33 @@ public interface TextElement extends FormItem{
 	 */
 	public void setCheckVisibleLength(boolean checkVisibleLength);
 	
+
+	/**
+	 * Set the placeholder to be displayed inline in the input field. Text is
+	 * displayed without translator
+	 * 
+	 * @param placeholderText placeholder text or NULL to reset placeholder
+	 */
+	public void setPlaceholderText(String placeholderText);	
+
+	/**
+	 * Set the placeholder to be displayed inline in the input field. Text is
+	 * translated with the current translator
+	 * @param i18nKey placeholder i18n key or NULL to reset placeholder
+	 * @param args the translator arguments
+	 */
+	public void setPlaceholderKey(String i18nKey, String[] args);
+
+	/**
+	 * @return The placehodler text, escaped and translated ready to use
+	 */
+	public String getPlaceholder();
+
+	/**
+	 * @return true: has a placeholder text ; false: has no placeholder
+	 */
+	public boolean hasPlaceholder();
+
+
+	
 }
\ No newline at end of file

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

@@ -235,10 +235,7 @@ public abstract class FormItemImpl implements FormItem, InlineElement {
 	}
 	
 	public void setLabel(String label, String[] params, boolean translate) {
-		if (label == null) {
-			hasLabel = false;
-		}
-		hasLabel = true;
+		hasLabel = (label != null);
 		translateLabel = translate;
 		labelKey = label;
 		labelParams = params;

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

@@ -23,7 +23,7 @@
 
 #foreach ($item in $formitemnames)
 	#if ($f.isVisible($item))
-	<div class="form-group $f.getElementCssClass($item) #if($f.hasError($item)) has-feedback has-error #end">
+	<div class="form-group $f.getElementCssClass($item) #if($f.hasError($item)) has-feedback has-error #end clearfix">
 		#if ($f.hasLabel($item))
 			$r.render("${item}_LABEL", "$f.getItemId($item)", "col-sm-3")
 		#end

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

-<div #if(!$!f.domReplacementWrapperRequired) id="$r.getCId()" #end class="input-group $f.getContainerCssClass()">
-#if($leftAddOn)
-	<span class="input-group-addon">$leftAddOn</span>
-#elseif ($formitemnames.size() > 1 && $formitemnames.get(1) == "leftAddOn")
-	<span class="input-group-addon">
-		$r.render("$formitemnames.get(1)")
-	</span>
-#end
+<div #if(!$!f.domReplacementWrapperRequired) id="$r.getCId()" #end class="form-group $f.getElementCssClass($formitemnames.get(0)) #if($f.hasError($formitemnames.get(0))) has-feedback has-error #end">
+	#if ($f.isVisible($formitemnames.get(0)))
+		<div class="input-group">
+		#if($leftAddOn)
+			<span class="input-group-addon">$leftAddOn</span>
+		#elseif ($formitemnames.size() > 1 && $formitemnames.get(1) == "leftAddOn")
+			<span class="input-group-addon">
+				$r.render("$formitemnames.get(1)")
+			</span>
+		#end
+		
+		## first item is form control
+		$r.render($formitemnames.get(0), "form")
 
-## first item is form control
-#if ($formitemnames.size() > 0)
-	$r.render("$formitemnames.get(0)")
-#end
+		#if($rightAddOn)
+			<span class="input-group-addon">$rightAddOn</span>
+		#elseif ($formitemnames.size() > 1 && $formitemnames.get(1) == "rightAddOn")
+			<span class="input-group-addon">
+				$r.render("$formitemnames.get(1)")
+			</span>
+		#end
 
-#if($rightAddOn)
-	<span class="input-group-addon">$rightAddOn</span>
-#elseif ($formitemnames.size() > 1 && $formitemnames.get(1) == "rightAddOn")
-	<span class="input-group-addon">
-		$r.render("$formitemnames.get(1)")
-	</span>
-#end
+		#if($f.hasError($formitemnames.get(0)))
+			<span class="o_icon o_icon_error form-control-feedback"></span>
+		#end
+		</div>
+	#if($f.hasExample($formitemnames.get(0)))
+		<div class="help-block">
+			$r.render("$formitemnames.get(0)_EXAMPLE")
+		</div>
+	#end
+	#if($f.hasError($formitemnames.get(0)))
+		<div>
+			$r.render("$formitemnames.get(0)_ERROR")
+		</div>
+	#end
+	#end
 </div>
\ No newline at end of file

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

@@ -14,7 +14,7 @@
 
 #foreach ($item in $formitemnames)
 	#if ($f.isVisible($item))
-	<div class="form-group $f.getElementCssClass($item) #if($f.hasError($item)) has-feedback has-error #end">
+	<div class="form-group $f.getElementCssClass($item) #if($f.hasError($item)) has-feedback has-error #end clearfix">
 		#if ($f.hasLabel($item))
 			$r.render("${item}_LABEL", "$f.getItemId($item)")
 		#end

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

@@ -29,6 +29,7 @@ import java.io.UnsupportedEncodingException;
 import java.util.List;
 import java.util.Locale;
 
+import org.apache.commons.lang.StringEscapeUtils;
 import org.olat.core.gui.components.Component;
 import org.olat.core.gui.components.form.ValidationError;
 import org.olat.core.gui.components.form.flexible.elements.TextElement;
@@ -82,6 +83,7 @@ public abstract class AbstractTextElement extends FormItemImpl implements TextEl
 	private String otherValueErrorKey;
 	private String checkRegexp;
 	private String checkRegexpErrorKey;
+	private String placeholder;
 	private ItemValidatorProvider itemValidatorProvider;
 	protected boolean originalInitialised=false;
 	
@@ -322,6 +324,36 @@ public abstract class AbstractTextElement extends FormItemImpl implements TextEl
 		return false;
 	}
 
+	@Override
+	public void setPlaceholderText(String placeholderText) {
+		if (StringHelper.containsNonWhitespace(placeholderText)) {
+			placeholder = StringEscapeUtils.escapeHtml(placeholderText);
+		} else {
+			placeholder = null;
+		}
+	}
+	
+	@Override
+	public void setPlaceholderKey(String i18nKey, String[] args) {
+		if (StringHelper.containsNonWhitespace(i18nKey) && translator != null) {
+			setPlaceholderText(translator.translate(i18nKey, args));
+		} else {
+			placeholder = null;
+		}
+	}
+
+	@Override
+	public String getPlaceholder() {
+		return placeholder;
+	}
+
+	@Override
+	public boolean hasPlaceholder() {
+		return (placeholder != null);
+	}
+	
+
+	
 	/**
 	 * @param regExp
 	 * @param errorKey

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

@@ -79,8 +79,8 @@ class TextElementRenderer extends DefaultComponentRenderer {
 			sb.append("\" value=\"").append(htmlVal).append("\" ")
 			  .append(FormJSHelper.getRawJSFor(te.getRootForm(), id, te.getAction()));
 			
-			if (te.hasExample()) {
-				sb.append(" placeholder=\"").append(StringEscapeUtils.escapeHtml(te.getExampleText())).append("\"");
+			if (te.hasPlaceholder()) {
+				sb.append(" placeholder=\"").append(te.getPlaceholder()).append("\"");
 			}
 			sb.append(" />");
 			

src/main/java/org/olat/login/auth/OLATAuthentcationForm.java

@@ -52,7 +52,7 @@ public class OLATAuthentcationForm extends FormBasicController {
 	 * @param name
 	 */
 	public OLATAuthentcationForm(UserRequest ureq, WindowControl wControl, String id, Translator translator) {
-		super(ureq, wControl, id, "form_vertical");
+		super(ureq, wControl, id, FormBasicController.LAYOUT_VERTICAL);
 		setTranslator(translator);
 		initForm(ureq);
 	}
@@ -106,11 +106,13 @@ public class OLATAuthentcationForm extends FormBasicController {
 		FormLayoutContainer loginWrapper = FormLayoutContainer.createInputGroupLayout("loginWrapper", getTranslator(), "<i class='o_icon o_icon-fw o_icon_user'> </i>", null);
 		formLayout.add(loginWrapper);
 		login = uifactory.addTextElement(mainForm.getFormId() + "_name", "lf_login", "lf.login", 128, "", loginWrapper);
-		login.setExampleKey("lf.login", null);
+		login.setLabel(null, null);
+		login.setPlaceholderKey("lf.login", null);
 		FormLayoutContainer passWrapper = FormLayoutContainer.createInputGroupLayout("passWrapper", getTranslator(), "<i class='o_icon o_icon-fw o_icon_password'> </i>", null);
 		formLayout.add(passWrapper);
 		pass  = uifactory.addPasswordElement(mainForm.getFormId() + "_pass", "lf_pass",  "lf.pass", 128, "", passWrapper);
-		pass.setExampleKey("lf.pass", null);
+		pass.setLabel(null, null);
+		pass.setPlaceholderKey("lf.pass", null);
 
 		login.setDisplaySize(20);
 		pass.setDisplaySize(20);

src/main/java/org/olat/search/ui/SearchInputController.java

@@ -184,7 +184,7 @@ public class SearchInputController extends FormBasicController {
 			formLayout.add(searchLayout);
 			searchInput = uifactory.addTextElement("search_input", "search.title", 255, "", searchLayout);
 			searchInput.setLabel(null, null);
-			searchInput.setExampleKey("search", null);
+			searchInput.setPlaceholderKey("search", null);
 		}
 		
 		if (displayOption.equals(DisplayOption.STANDARD) || displayOption.equals(DisplayOption.BUTTON)) {

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

@@ -77,4 +77,12 @@ body .progress {
 /* extend panel to contain multiple separated bodies */
 .panel-body:nth-child(n+2) {
 	border-top: 1px solid $panel-default-border;
-}
\ No newline at end of file
+}
+
+/* fix misplaced error icon */
+.form-control-feedback {
+  	top: 10px;
+}
+.form-horizontal .has-feedback .form-control-feedback {
+	top: 10px;
+}