From 3996b73c35f8be95d8b3c2c03554da5cb6c624a8 Mon Sep 17 00:00:00 2001 From: Matti Tahvonen Date: Tue, 20 May 2008 09:52:32 +0000 Subject: [PATCH] fixes #1668, #1669 svn changeset:4561/svn branch:trunk --- .../ITMILL/themes/default/button/button.css | 5 + .../ITMILL/themes/default/common/common.css | 16 +- .../themes/default/datefield/datefield.css | 8 +- .../themes/default/formlayout/formlayout.css | 6 + .../ITMILL/themes/default/select/select.css | 16 ++ .../ITMILL/themes/default/slider/slider.css | 4 + WebContent/ITMILL/themes/default/styles.css | 62 +++++- .../themes/default/textfield/textfield.css | 9 +- .../gwt/client/ApplicationConnection.java | 9 +- .../toolkit/terminal/gwt/client/Caption.java | 2 + .../terminal/gwt/client/ui/IFormLayout.java | 206 +++++++++++++++++- .../terminal/gwt/client/ui/ITextualDate.java | 11 +- 12 files changed, 321 insertions(+), 33 deletions(-) create mode 100644 WebContent/ITMILL/themes/default/formlayout/formlayout.css diff --git a/WebContent/ITMILL/themes/default/button/button.css b/WebContent/ITMILL/themes/default/button/button.css index 2f8ffe0d28..30fdff6618 100644 --- a/WebContent/ITMILL/themes/default/button/button.css +++ b/WebContent/ITMILL/themes/default/button/button.css @@ -17,3 +17,8 @@ .i-button-link span { text-decoration: underline; } + +.i-checkbox-error { + background:transparent; + background-color: #FFE0E0; +} diff --git a/WebContent/ITMILL/themes/default/common/common.css b/WebContent/ITMILL/themes/default/common/common.css index 99e386b8ae..c68d18a625 100644 --- a/WebContent/ITMILL/themes/default/common/common.css +++ b/WebContent/ITMILL/themes/default/common/common.css @@ -72,16 +72,12 @@ input.i-modified, background-color: #FFFFE0; } -input.i-error, -.i-richtextarea.i-error iframe.gwt-RichTextArea, -.i-checkbox.i-error, -.i-error .i-select-option, -.i-error .i-textfield, -.i-error .i-datefield-calendarpanel, -.i-error .i-select-select, -.i-error .i-select-twincol-selections, -.i-error .i-select-twincol-options, -.i-error .i-slider-base { +.i-checkbox-error, +.i-select-error .i-select-option, +.i-select-error .i-select-select, +.i-select-error .i-select-twincol-selections, +.i-select-error .i-select-twincol-options, +.i-slider-error .i-slider-base { background:transparent; background-color: #FFE0E0; } diff --git a/WebContent/ITMILL/themes/default/datefield/datefield.css b/WebContent/ITMILL/themes/default/datefield/datefield.css index 7ddf948f5a..834945e7fc 100644 --- a/WebContent/ITMILL/themes/default/datefield/datefield.css +++ b/WebContent/ITMILL/themes/default/datefield/datefield.css @@ -172,6 +172,12 @@ margin: 0; } -.i-datefield-error .i-textfield { +.i-datefield-error .i-textfield, +.i-datefield-error .i-datefield-calendarpanel { + background:transparent; + background-color: #FFE0E0; +} + +.i-datefield-rendererror .i-textfield { background: #ff9999; } diff --git a/WebContent/ITMILL/themes/default/formlayout/formlayout.css b/WebContent/ITMILL/themes/default/formlayout/formlayout.css new file mode 100644 index 0000000000..a27cada8af --- /dev/null +++ b/WebContent/ITMILL/themes/default/formlayout/formlayout.css @@ -0,0 +1,6 @@ +.i-formlayout-cell .i-errorindicator { + width: 10px; + height: 16px; + display: block; + background: transparent url(../icons/16/error.png) no-repeat top right; +} \ No newline at end of file diff --git a/WebContent/ITMILL/themes/default/select/select.css b/WebContent/ITMILL/themes/default/select/select.css index 54064221bb..9d7eeaca52 100644 --- a/WebContent/ITMILL/themes/default/select/select.css +++ b/WebContent/ITMILL/themes/default/select/select.css @@ -182,6 +182,22 @@ border-top: 1px solid #b6bbbc; } +.i-filterselect-error { + background: transparent url(img/bg-left-filter-error.png) no-repeat; +} + +.i-filterselect-error .i-filterselect-button { + background: transparent url(img/bg-right-filter-error.png); +} + +.i-select-error .i-select-option, +.i-select-error .i-select-select, +.i-select-error .i-select-twincol-selections, +.i-select-error .i-select-twincol-options { + background:transparent; + background-color: #FFE0E0; +} + /* IE specific styles */ * html .i-filterselect { diff --git a/WebContent/ITMILL/themes/default/slider/slider.css b/WebContent/ITMILL/themes/default/slider/slider.css index 5b10e6a110..9249770017 100644 --- a/WebContent/ITMILL/themes/default/slider/slider.css +++ b/WebContent/ITMILL/themes/default/slider/slider.css @@ -85,6 +85,10 @@ } +.i-slider-error .i-slider-base { + background:transparent; + background-color: #FFE0E0; +} /* IE specific styles */ diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css index 79aed3f7ad..d48d9e80fc 100644 --- a/WebContent/ITMILL/themes/default/styles.css +++ b/WebContent/ITMILL/themes/default/styles.css @@ -48,6 +48,11 @@ .i-button-link span { text-decoration: underline; } + +.i-checkbox-error { + background:transparent; + background-color: #FFE0E0; +} /* Provide some extra whitespace for wrapped elements (these elements usually need the extra space, since they aren't even handling their own caption) */ @@ -158,16 +163,12 @@ input.i-modified, background-color: #FFFFE0; } -input.i-error, -.i-richtextarea.i-error iframe.gwt-RichTextArea, -.i-checkbox.i-error, -.i-error .i-select-option, -.i-error .i-textfield, -.i-error .i-datefield-calendarpanel, -.i-error .i-select-select, -.i-error .i-select-twincol-selections, -.i-error .i-select-twincol-options, -.i-error .i-slider-base { +.i-checkbox-error, +.i-select-error .i-select-option, +.i-select-error .i-select-select, +.i-select-error .i-select-twincol-selections, +.i-select-error .i-select-twincol-options, +.i-slider-error .i-slider-base { background:transparent; background-color: #FFE0E0; } @@ -425,7 +426,13 @@ input.i-error, margin: 0; } -.i-datefield-error .i-textfield { +.i-datefield-error .i-textfield, +.i-datefield-error .i-datefield-calendarpanel { + background:transparent; + background-color: #FFE0E0; +} + +.i-datefield-rendererror .i-textfield { background: #ff9999; } .i-expandlayout-lo-table { @@ -471,6 +478,12 @@ input.i-error, .i-expandlayout-hspacing { margin-left: 8px; } +.i-formlayout-cell .i-errorindicator { + width: 10px; + height: 16px; + display: block; + background: transparent url(icons/16/error.png) no-repeat top right; +} .i-Notification { font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; @@ -952,6 +965,22 @@ input.i-error, border-top: 1px solid #b6bbbc; } +.i-filterselect-error { + background: transparent url(select/img/bg-left-filter-error.png) no-repeat; +} + +.i-filterselect-error .i-filterselect-button { + background: transparent url(select/img/bg-right-filter-error.png); +} + +.i-select-error .i-select-option, +.i-select-error .i-select-select, +.i-select-error .i-select-twincol-selections, +.i-select-error .i-select-twincol-options { + background:transparent; + background-color: #FFE0E0; +} + /* IE specific styles */ * html .i-filterselect { @@ -1061,6 +1090,10 @@ input.i-error, } +.i-slider-error .i-slider-base { + background:transparent; + background-color: #FFE0E0; +} /* IE specific styles */ @@ -1540,6 +1573,13 @@ input.i-error, .i-richtextarea iframe { border: 0; } + +.i-textarea-error, +.i-textfield-error, +.i-richtextarea-error iframe.gwt-RichTextArea { + background:transparent; + background-color: #FFE0E0; +} .i-tree { text-align: left /* Force default alignment */ } diff --git a/WebContent/ITMILL/themes/default/textfield/textfield.css b/WebContent/ITMILL/themes/default/textfield/textfield.css index 9f3191dc75..da549b4c66 100644 --- a/WebContent/ITMILL/themes/default/textfield/textfield.css +++ b/WebContent/ITMILL/themes/default/textfield/textfield.css @@ -44,4 +44,11 @@ } .i-richtextarea iframe { border: 0; -} \ No newline at end of file +} + +.i-textarea-error, +.i-textfield-error, +.i-richtextarea-error iframe.gwt-RichTextArea { + background:transparent; + background-color: #FFE0E0; +} diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java b/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java index 0f9cbbeb28..bb7436a6aa 100755 --- a/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java @@ -41,8 +41,8 @@ import com.itmill.toolkit.terminal.gwt.client.ui.Notification.HideEvent; * Entry point classes define onModuleLoad(). */ public class ApplicationConnection { - public static final String MODIFIED_CLASSNAME = "i-modified"; - public static final String ERROR_CLASSNAME = "i-error"; + private static final String MODIFIED_CLASSNAME = "i-modified"; + private static final String ERROR_CLASSNAME_EXT = "-error"; public static final String VAR_RECORD_SEPARATOR = "\u001e"; @@ -754,7 +754,7 @@ public class ApplicationConnection { } StringBuffer styleBuf = new StringBuffer(); - String primaryName = component.getStylePrimaryName(); + final String primaryName = component.getStylePrimaryName(); styleBuf.append(primaryName); // first disabling and read-only status @@ -783,7 +783,8 @@ public class ApplicationConnection { // add error classname to components w/ error if (uidl.hasAttribute("error")) { styleBuf.append(" "); - styleBuf.append(ERROR_CLASSNAME); + styleBuf.append(primaryName); + styleBuf.append(ERROR_CLASSNAME_EXT); } // Styles + disabled & readonly diff --git a/src/com/itmill/toolkit/terminal/gwt/client/Caption.java b/src/com/itmill/toolkit/terminal/gwt/client/Caption.java index 4421d7050f..1d3be76a71 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/Caption.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/Caption.java @@ -110,8 +110,10 @@ public class Caption extends HTML { if (captionText != null) { DOM.setElementProperty(captionText, "title", uidl .getStringAttribute("description")); + addStyleDependentName("hasdescription"); } else { setTitle(uidl.getStringAttribute("description")); + removeStyleDependentName("hasdescription"); } } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IFormLayout.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IFormLayout.java index 79e5773fd9..fc1d6c3b80 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IFormLayout.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IFormLayout.java @@ -7,13 +7,18 @@ package com.itmill.toolkit.terminal.gwt.client.ui; import java.util.HashMap; import java.util.Iterator; +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.Element; +import com.google.gwt.user.client.Event; import com.google.gwt.user.client.ui.FlexTable; +import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.Widget; import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection; -import com.itmill.toolkit.terminal.gwt.client.Caption; import com.itmill.toolkit.terminal.gwt.client.Container; +import com.itmill.toolkit.terminal.gwt.client.ErrorMessage; import com.itmill.toolkit.terminal.gwt.client.Paintable; import com.itmill.toolkit.terminal.gwt.client.UIDL; +import com.itmill.toolkit.terminal.gwt.client.Util; /** * Two col Layout that places caption on left col and field on right col @@ -49,6 +54,15 @@ public class IFormLayout extends FlexTable implements Container { } setWidget(i, 0, c); p.updateFromUIDL(childUidl, client); + + prepareCell(i, 2); + getCellFormatter().setStyleName(i, 2, "i-formlayout-errorcell"); + ErrorFlag error = (ErrorFlag) getWidget(i, 2); + if (error == null) { + error = new ErrorFlag(); + setWidget(i, 2, error); + } + error.updateFromUIDL(childUidl); } while (getRowCount() > i) { @@ -83,4 +97,194 @@ public class IFormLayout extends FlexTable implements Container { c.updateCaption(uidl); } } + + public class Caption extends HTML { + + public static final String CLASSNAME = "i-caption"; + + private final Paintable owner; + + private Element requiredFieldIndicator; + + private Icon icon; + + private Element captionText; + + private final ApplicationConnection client; + + /** + * + * @param component + * optional owner of caption. If not set, getOwner will + * return null + * @param client + */ + public Caption(Paintable component, ApplicationConnection client) { + super(); + this.client = client; + owner = component; + setStyleName(CLASSNAME); + } + + public void updateCaption(UIDL uidl) { + setVisible(!uidl.getBooleanAttribute("invisible")); + + setStyleName(getElement(), "i-disabled", uidl + .hasAttribute("disabled")); + + boolean isEmpty = true; + + if (uidl.hasAttribute("icon")) { + if (icon == null) { + icon = new Icon(client); + + DOM.insertChild(getElement(), icon.getElement(), 0); + } + icon.setUri(uidl.getStringAttribute("icon")); + isEmpty = false; + } else { + if (icon != null) { + DOM.removeChild(getElement(), icon.getElement()); + icon = null; + } + + } + + if (uidl.hasAttribute("caption")) { + if (captionText == null) { + captionText = DOM.createSpan(); + DOM.insertChild(getElement(), captionText, icon == null ? 0 + : 1); + } + String c = uidl.getStringAttribute("caption"); + if (c == null) { + c = ""; + } else { + isEmpty = false; + } + DOM.setInnerText(captionText, c); + } else { + // TODO should span also be removed + } + + if (uidl.hasAttribute("description")) { + if (captionText != null) { + DOM.setElementProperty(captionText, "title", uidl + .getStringAttribute("description")); + addStyleDependentName("hasdescription"); + } else { + setTitle(uidl.getStringAttribute("description")); + removeStyleDependentName("hasdescription"); + } + } + + if (uidl.getBooleanAttribute("required")) { + if (requiredFieldIndicator == null) { + requiredFieldIndicator = DOM.createSpan(); + DOM.setInnerText(requiredFieldIndicator, "*"); + DOM.setElementProperty(requiredFieldIndicator, "className", + "i-required-field-indicator"); + DOM.appendChild(getElement(), requiredFieldIndicator); + } + } else { + if (requiredFieldIndicator != null) { + DOM.removeChild(getElement(), requiredFieldIndicator); + requiredFieldIndicator = null; + } + } + + // Workaround for IE weirdness, sometimes returns bad height in some + // circumstances when Caption is empty. See #1444 + // IE7 bugs more often. I wonder what happens when IE8 arrives... + if (Util.isIE()) { + if (isEmpty) { + setHeight("0px"); + DOM.setStyleAttribute(getElement(), "overflow", "hidden"); + } else { + setHeight(""); + DOM.setStyleAttribute(getElement(), "overflow", ""); + } + + } + + } + + /** + * Returns Paintable for which this Caption belongs to. + * + * @return owner Widget + */ + public Paintable getOwner() { + return owner; + } + } + + private class ErrorFlag extends HTML { + private static final String CLASSNAME = ".i-form-layout-error-indicator"; + Element errorIndicatorElement; + private ErrorMessage errorMessage; + + public ErrorFlag() { + setStyleName(CLASSNAME); + } + + public void updateFromUIDL(UIDL uidl) { + if (uidl.hasAttribute("error")) { + final UIDL errorUidl = uidl.getErrors(); + + if (errorIndicatorElement == null) { + errorIndicatorElement = DOM.createDiv(); + if (Util.isIE()) { + DOM.setInnerHTML(errorIndicatorElement, " "); + } + DOM.setElementProperty(errorIndicatorElement, "className", + "i-errorindicator"); + DOM.appendChild(getElement(), errorIndicatorElement); + } + if (errorMessage == null) { + errorMessage = new ErrorMessage(); + } + errorMessage.updateFromUIDL(errorUidl); + + } else if (errorIndicatorElement != null) { + DOM.removeChild(getElement(), errorIndicatorElement); + errorIndicatorElement = null; + } + } + + public void onBrowserEvent(Event event) { + final Element target = DOM.eventGetTarget(event); + if (errorIndicatorElement != null + && DOM.compare(target, errorIndicatorElement)) { + switch (DOM.eventGetType(event)) { + case Event.ONMOUSEOVER: + showErrorMessage(); + break; + case Event.ONMOUSEOUT: + hideErrorMessage(); + break; + case Event.ONCLICK: + ApplicationConnection.getConsole().log( + DOM.getInnerHTML(errorMessage.getElement())); + default: + break; + } + } else { + super.onBrowserEvent(event); + } + } + + private void hideErrorMessage() { + if (errorMessage != null) { + errorMessage.hide(); + } + } + + private void showErrorMessage() { + if (errorMessage != null) { + errorMessage.showAt(errorIndicatorElement); + } + } + + } } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITextualDate.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITextualDate.java index d4091e9cfb..5a841caebc 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITextualDate.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITextualDate.java @@ -19,7 +19,8 @@ import com.itmill.toolkit.terminal.gwt.client.Util; public class ITextualDate extends IDateField implements Paintable, Field, ChangeListener, ContainerResizedListener, Focusable { - private static final String ERROR_CLASSNAME = CLASSNAME + "-error"; + private static final String PARSE_ERROR_CLASSNAME = CLASSNAME + + "-parseerror"; private final ITextField text; @@ -97,7 +98,7 @@ public class ITextualDate extends IDateField implements Paintable, Field, * */ protected void buildDate() { - removeStyleName(ERROR_CLASSNAME); + removeStyleName(PARSE_ERROR_CLASSNAME); // Create the initial text for the textfield String dateText; if (date != null) { @@ -124,10 +125,10 @@ public class ITextualDate extends IDateField implements Paintable, Field, date = DateTimeFormat.getFormat(getFormatString()).parse( text.getText()); // remove possibly added invalid value indication - removeStyleName(ERROR_CLASSNAME); + removeStyleName(PARSE_ERROR_CLASSNAME); } catch (final Exception e) { ApplicationConnection.getConsole().log(e.getMessage()); - addStyleName(ERROR_CLASSNAME); + addStyleName(PARSE_ERROR_CLASSNAME); client.updateVariable(id, "lastInvalidDateString", text .getText(), false); date = null; @@ -135,7 +136,7 @@ public class ITextualDate extends IDateField implements Paintable, Field, } else { date = null; // remove possibly added invalid value indication - removeStyleName(ERROR_CLASSNAME); + removeStyleName(PARSE_ERROR_CLASSNAME); } // Update variables -- 2.39.5