From 24febeb1d0904c934a07faf19ae96459b3dea905 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Wed, 21 Nov 2007 11:42:15 +0000 Subject: [PATCH] -Link not implements icon, description and errormessage. Fixes #1114. -Small fixes to Panel and Tabsheet stylesheets. svn changeset:2875/svn branch:trunk --- .../toolkit/terminal/gwt/client/ui/ILink.java | 86 ++++- .../gwt/public/default/common/common.css | 5 +- .../gwt/public/default/panel/panel.css | 8 +- .../gwt/public/default/tabsheet/tabsheet.css | 317 ++++++++---------- 4 files changed, 239 insertions(+), 177 deletions(-) diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ILink.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ILink.java index ed1c393710..620ff5e351 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ILink.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ILink.java @@ -1,11 +1,14 @@ package com.itmill.toolkit.terminal.gwt.client.ui; 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.Window; import com.google.gwt.user.client.ui.ClickListener; 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.ErrorMessage; import com.itmill.toolkit.terminal.gwt.client.Paintable; import com.itmill.toolkit.terminal.gwt.client.UIDL; @@ -31,14 +34,25 @@ public class ILink extends HTML implements Paintable, ClickListener { private int height; + private Element errorIndicatorElement; + + private Element captionElement = DOM.createSpan(); + + private ErrorMessage errorMessage; + + private Icon icon; + public ILink() { super(); + DOM.appendChild(getElement(), captionElement); addClickListener(this); setStyleName(CLASSNAME); } public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { + // Ensure correct implementation, + // but don't let container manage caption etc. if (client.updateComponent(this, uidl, false)) { return; } @@ -50,7 +64,7 @@ public class ILink extends HTML implements Paintable, ClickListener { target = uidl.getStringAttribute(target); } if (uidl.hasAttribute("src")) { - // TODO theme soure + // TODO theme source src = client.translateToolkitUri(uidl.getStringAttribute("src")); } @@ -68,8 +82,42 @@ public class ILink extends HTML implements Paintable, ClickListener { : -1; width = uidl.hasAttribute("width") ? uidl.getIntAttribute("width") : -1; - DOM.setInnerHTML(getElement(), uidl.getStringAttribute("caption")); - + // Set link caption + DOM.setInnerText(captionElement, uidl.getStringAttribute("caption")); + + // handle error + if (uidl.hasAttribute("error")) { + UIDL errorUidl = uidl.getErrors(); + if (errorIndicatorElement == null) { + errorIndicatorElement = DOM.createDiv(); + DOM.setElementProperty(errorIndicatorElement, "className", + "i-errorindicator"); + DOM.sinkEvents(errorIndicatorElement, Event.MOUSEEVENTS); + sinkEvents(Event.MOUSEEVENTS); + } + DOM.insertChild(getElement(), errorIndicatorElement, 0); + if (errorMessage == null) { + errorMessage = new ErrorMessage(); + } + errorMessage.updateFromUIDL(errorUidl); + + } else if (errorIndicatorElement != null) { + DOM.setStyleAttribute(errorIndicatorElement, "display", "none"); + } + + if (uidl.hasAttribute("icon")) { + if (icon == null) { + icon = new Icon(client); + DOM.insertChild(getElement(), icon.getElement(), 0); + } + icon.setUri(uidl.getStringAttribute("icon")); + } + + // handle description + if (uidl.hasAttribute("description")) { + setTitle(uidl.getStringAttribute("description")); + } + } public void onClick(Widget sender) { @@ -103,5 +151,37 @@ public class ILink extends HTML implements Paintable, ClickListener { Window.open(src, target, features); } } + + public void onBrowserEvent(Event event) { + 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())); + return; + default: + break; + } + } + super.onBrowserEvent(event); + } + + private void hideErrorMessage() { + errorMessage.hide(); + } + + private void showErrorMessage() { + if (errorMessage != null) { + errorMessage.showAt(errorIndicatorElement); + } + } } diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css b/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css index a3e8992ae8..98d50e1f8f 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css @@ -66,7 +66,7 @@ } .i-contextmenu .gwt-MenuItem { - padding: 1px 0; + padding: 2px 0; cursor: pointer; vertical-align: middle; } @@ -77,7 +77,6 @@ cursor: pointer; vertical-align: middle; white-space: nowrap; - margin: 1px 0; } .i-contextmenu .gwt-MenuItem-selected div { @@ -119,7 +118,7 @@ padding-right: 18px; } -.i-link { +.i-link span { text-decoration: underline; cursor:pointer; } diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css index 59feefad80..a07c4670ba 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css @@ -61,7 +61,6 @@ border-top: none; border-bottom: 1px solid #dee2e3; background-color: #fff; - overflow: auto; } .i-panel-deco { @@ -159,6 +158,13 @@ border-bottom: 1px solid #babfc0; } +* html .i-panel-content-light { + border-bottom: none; +} +*+html .i-panel-content-light { + border-bottom: none; +} + * html .i-panel-deco { height: 0; overflow: hidden; diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css b/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css index ac1d883e0e..3c6bf001a9 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css @@ -1,172 +1,149 @@ -.i-tabsheet, -.i-tabsheet-content, -.i-tabsheet-deco { - outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ -} - - -.i-tabsheet-tabs { - empty-cells: hide; - border-collapse: collapse; - height: 48px; +.i-tabsheet, +.i-tabsheet-content, +.i-tabsheet-deco { + outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ +} + + +.i-tabsheet-tabs { + empty-cells: hide; + border-collapse: collapse; + height: 48px; background: transparent url(img/tabs-bg.png) repeat-x bottom left; - width: 100%; -} - -.i-tabsheet-tabs .gwt-TabBarFirst { - display: none; -} - -.i-tabsheet-tabs .gwt-TabBarRest { - border: 1px solid #b6bbbc; - background: #f8f9f9 url(img/tab-bg.png); - height: 37px; -} - -.i-tabsheet-tabs .gwt-TabBarItem { - border: 1px solid #b6bbbc; - border-right: none; - height: 20px; - padding: 9px 15px 8px 15px; - margin-top: 9px; - color: #777f85; - font-size: 15px; - line-height: 15px; - background: #f8f9f9 url(img/tab-bg.png); - cursor: pointer; -} - -.i-tabsheet-tabs .gwt-TabBarItem-selected { - border: none; - background: transparent url(../panel/img/top-left.png) no-repeat; - margin-top: -9px; - padding-left: 16px; - height: 30px; - cursor: default; - color: #ee5311; -} - -.i-tabsheet-tabs .gwt-TabBarItem:hover { - color: #4b5257; -} - -.i-tabsheet-tabs .gwt-TabBarItem-selected:hover { - color: #ee5311; -} - -.i-tabsheet-tabs .gwt-TabBarItem-selected:before { - display: block; - height: 9px; - background: transparent url(../panel/img/top-right.png) repeat-x right top; - content: ""; - margin: -9px -16px 9px -6px; -} - -.i-tabsheet-content { - border: 1px solid #babfc0; - border-top: none; - border-bottom: none; - background-color: #fff; - overflow: auto; -} - -.i-tabsheet-deco { - height: 9px; - background: transparent url(../panel/img/bottom-right.png) repeat-x right top; - margin-left: 9px; -} - -.i-tabsheet-deco:before { - display: block; - content: ""; - width: 9px; - height: 9px; - margin-left: -9px; - background: transparent url(../panel/img/bottom-left.png) no-repeat; -} - - - - -/* Fix Safari bug (one pixel table offset) by - adding one extra pixel in every browser */ -/* Actually, let Safari be a little different, it's a bug */ -/* -.i-tabsheet-content { - margin-left: 1px; -} -.i-tabsheet-tabs .gwt-TabBarFirst { - display: block; - width: 1px; - height: 1px; - overflow: hidden; -} -.i-tabsheet { - margin-left: -1px; -} -*/ - - -/* Progress indication */ - -.i-tabsheet-loading .i-tabsheet-tabs .gwt-TabBarItem-selected span{ - background: transparent url(../common/img/ajax-loader.gif) no-repeat; - display: block; - margin-left: -10px; - padding-left: 10px; - margin-top: -12px; - padding-top: 12px; -} - -.i-tabsheet-loading .i-tabsheet-content * { - visibility: hidden; - overflow: hidden; -} - - - - -/* IE specific styles */ -* html .i-tabsheet-content { - border-bottom: 1px solid #babfc0; -} -*+html .i-tabsheet-content { - border-bottom: 1px solid #babfc0; -} - -* html .i-tabsheet-tabs { - height: 46px; -} -*+html .i-tabsheet-tabs { - height: 46px; -} - -* html .i-tabsheet-tabs .gwt-TabBarItem-selected { - border: 1px solid #babfc0; - border-bottom: none; - background: #fff; - margin-top: 0; - height: 23px; - padding: 18px 14px 6px 15px; - cursor: default; - color: #ee5311; -} -*+html .i-tabsheet-tabs .gwt-TabBarItem-selected { - border: 1px solid #babfc0; - border-bottom: none; - background: #fff; - margin-top: 0; - height: 23px; - padding: 18px 14px 6px 15px; - cursor: default; - color: #ee5311; -} - -* html .i-tabsheet-deco { - height: 0; - overflow: hidden; -} -*+html .i-tabsheet-deco { - height: 0; - overflow: hidden; + width: 100%; +} + +.i-tabsheet-tabs .gwt-TabBarFirst { + display: none; +} + +.i-tabsheet-tabs .gwt-TabBarRest { + border: 1px solid #b6bbbc; + background: #f8f9f9 url(img/tab-bg.png); + height: 37px; +} + +.i-tabsheet-tabs .gwt-TabBarItem { + border: 1px solid #b6bbbc; + border-right: none; + height: 20px; + padding: 9px 15px 8px 15px; + margin-top: 9px; + color: #777f85; + font-size: 15px; + line-height: 15px; + background: #f8f9f9 url(img/tab-bg.png); + cursor: pointer; +} + +.i-tabsheet-tabs .gwt-TabBarItem-selected { + border: none; + background: transparent url(../panel/img/top-left.png) no-repeat; + margin-top: -9px; + padding-left: 16px; + height: 30px; + cursor: default; + color: #ee5311; +} + +.i-tabsheet-tabs .gwt-TabBarItem:hover { + color: #4b5257; +} + +.i-tabsheet-tabs .gwt-TabBarItem-selected:hover { + color: #ee5311; +} + +.i-tabsheet-tabs .gwt-TabBarItem-selected:before { + display: block; + height: 9px; + background: transparent url(../panel/img/top-right.png) repeat-x right top; + content: ""; + margin: -9px -16px 9px -6px; +} + +.i-tabsheet-content { + border: 1px solid #babfc0; + border-top: none; + border-bottom: none; + background-color: #fff; +} + +.i-tabsheet-deco { + height: 9px; + background: transparent url(../panel/img/bottom-right.png) repeat-x right top; + margin-left: 9px; +} + +.i-tabsheet-deco:before { + display: block; + content: ""; + width: 9px; + height: 9px; + margin-left: -9px; + background: transparent url(../panel/img/bottom-left.png) no-repeat; +} + + + +/* Progress indication */ + +.i-tabsheet-loading .i-tabsheet-tabs .gwt-TabBarItem-selected span{ + background: transparent url(../common/img/ajax-loader.gif) no-repeat; + display: block; + margin-left: -10px; + padding-left: 10px; + margin-top: -12px; + padding-top: 12px; +} + +.i-tabsheet-loading .i-tabsheet-content * { + visibility: hidden; + overflow: hidden; +} + + + + +/* IE specific styles */ + +* html .i-tabsheet-tabs { + height: 46px; +} +*+html .i-tabsheet-tabs { + height: 46px; +} + +* html .i-tabsheet-tabs .gwt-TabBarItem-selected { + border: 1px solid #babfc0; + border-bottom: none; + background: #fff; + margin-top: 0; + height: 23px; + padding: 18px 14px 6px 15px; + cursor: default; + color: #ee5311; +} +*+html .i-tabsheet-tabs .gwt-TabBarItem-selected { + border: 1px solid #babfc0; + border-bottom: none; + background: #fff; + margin-top: 0; + height: 23px; + padding: 18px 14px 6px 15px; + cursor: default; + color: #ee5311; +} + +* html .i-tabsheet-deco { + height: 1px; + background: #babfc0; + overflow: hidden; + margin: 0; +} +*+html .i-tabsheet-deco { + height: 1px; + background: #babfc0; + overflow: hidden; + margin: 0; } \ No newline at end of file -- 2.39.5