]> source.dussan.org Git - vaadin-framework.git/commitdiff
-Link not implements icon, description and errormessage. Fixes #1114.
authorJouni Koivuviita <jouni.koivuviita@itmill.com>
Wed, 21 Nov 2007 11:42:15 +0000 (11:42 +0000)
committerJouni Koivuviita <jouni.koivuviita@itmill.com>
Wed, 21 Nov 2007 11:42:15 +0000 (11:42 +0000)
-Small fixes to Panel and Tabsheet stylesheets.

svn changeset:2875/svn branch:trunk

src/com/itmill/toolkit/terminal/gwt/client/ui/ILink.java
src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css
src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css
src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css

index ed1c393710388bf9a15e6c687a02b29caaf6b304..620ff5e351c354aadeee56423826266b8de1444d 100644 (file)
@@ -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);
+        }
+    }
 
 }
index a3e8992ae85f0b87e5c1960605164fda834ae5da..98d50e1f8fe3889585581926bbfec8524ab1ec03 100644 (file)
@@ -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 {
        padding-right: 18px;
 }
 
-.i-link {
+.i-link span {
        text-decoration: underline;
        cursor:pointer;
 }
index 59feefad8009d34da7b9dd1e52bb50613b007ab8..a07c4670bac2a533295da4b03715cfe6a7611256 100644 (file)
@@ -61,7 +61,6 @@
        border-top: none;
        border-bottom: 1px solid #dee2e3;
        background-color: #fff;
-       overflow: auto;
 }
 
 .i-panel-deco {
        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;
index ac1d883e0e5fe15499143e6ed7fa9d56fa574cbb..3c6bf001a999f8936f1d38987cb96f3696a8e428 100644 (file)
-.i-tabsheet,\r
-.i-tabsheet-content,\r
-.i-tabsheet-deco {\r
-       outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */\r
-}\r
-\r
-\r
-.i-tabsheet-tabs {\r
-       empty-cells: hide;\r
-       border-collapse: collapse;\r
-       height: 48px;\r
+.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%;\r
-}\r
-\r
-.i-tabsheet-tabs .gwt-TabBarFirst {\r
-       display: none;\r
-}\r
-\r
-.i-tabsheet-tabs .gwt-TabBarRest {\r
-       border: 1px solid #b6bbbc;\r
-       background: #f8f9f9 url(img/tab-bg.png);\r
-       height: 37px;\r
-}\r
-\r
-.i-tabsheet-tabs .gwt-TabBarItem {\r
-       border: 1px solid #b6bbbc;\r
-       border-right: none;\r
-       height: 20px;\r
-       padding: 9px 15px 8px 15px;\r
-       margin-top: 9px;\r
-       color: #777f85;\r
-       font-size: 15px;\r
-       line-height: 15px;\r
-       background: #f8f9f9 url(img/tab-bg.png);\r
-       cursor: pointer;\r
-}\r
-\r
-.i-tabsheet-tabs .gwt-TabBarItem-selected {\r
-       border: none;\r
-       background: transparent url(../panel/img/top-left.png) no-repeat;\r
-       margin-top: -9px;\r
-       padding-left: 16px;\r
-       height: 30px;\r
-       cursor: default;\r
-       color: #ee5311;\r
-}\r
-\r
-.i-tabsheet-tabs .gwt-TabBarItem:hover {\r
-       color: #4b5257;\r
-}\r
-\r
-.i-tabsheet-tabs .gwt-TabBarItem-selected:hover {\r
-       color: #ee5311;\r
-}\r
-\r
-.i-tabsheet-tabs .gwt-TabBarItem-selected:before {\r
-       display: block;\r
-       height: 9px;\r
-       background: transparent url(../panel/img/top-right.png) repeat-x right top;\r
-       content: "";\r
-       margin: -9px -16px 9px -6px;\r
-}\r
-\r
-.i-tabsheet-content {\r
-       border: 1px solid #babfc0;\r
-       border-top: none;\r
-       border-bottom: none;\r
-       background-color: #fff;\r
-       overflow: auto;\r
-}\r
-\r
-.i-tabsheet-deco {\r
-       height: 9px;\r
-       background: transparent url(../panel/img/bottom-right.png) repeat-x right top;\r
-       margin-left: 9px;\r
-}\r
-\r
-.i-tabsheet-deco:before {\r
-       display: block;\r
-       content: "";\r
-       width: 9px;\r
-       height: 9px;\r
-       margin-left: -9px;\r
-       background: transparent url(../panel/img/bottom-left.png) no-repeat;\r
-}\r
-\r
-\r
-\r
-\r
-/* Fix Safari bug (one pixel table offset) by \r
-   adding one extra pixel in every browser */\r
-/* Actually, let Safari be a little different, it's a bug */\r
-/*\r
-.i-tabsheet-content {\r
-       margin-left: 1px;\r
-}\r
-.i-tabsheet-tabs .gwt-TabBarFirst {\r
-       display: block;\r
-       width: 1px;\r
-       height: 1px;\r
-       overflow: hidden;\r
-}\r
-.i-tabsheet {\r
-       margin-left: -1px;\r
-}\r
-*/\r
-\r
-\r
-/* Progress indication */\r
-\r
-.i-tabsheet-loading .i-tabsheet-tabs .gwt-TabBarItem-selected span{\r
-       background: transparent url(../common/img/ajax-loader.gif) no-repeat;\r
-       display: block;\r
-       margin-left: -10px;\r
-       padding-left: 10px;\r
-       margin-top: -12px;\r
-       padding-top: 12px;\r
-}\r
-\r
-.i-tabsheet-loading .i-tabsheet-content * {\r
-       visibility: hidden;\r
-       overflow: hidden;\r
-}
-
-
-\r
-\r
-/* IE specific styles */\r
-* html .i-tabsheet-content {\r
-       border-bottom: 1px solid #babfc0;\r
-}\r
-*+html .i-tabsheet-content {\r
-       border-bottom: 1px solid #babfc0;\r
-}\r
-\r
-* html .i-tabsheet-tabs {\r
-       height: 46px;\r
-}\r
-*+html .i-tabsheet-tabs {\r
-       height: 46px;\r
-}\r
-\r
-* html .i-tabsheet-tabs .gwt-TabBarItem-selected {\r
-       border: 1px solid #babfc0;\r
-       border-bottom: none;\r
-       background: #fff;\r
-       margin-top: 0;\r
-       height: 23px;\r
-       padding: 18px 14px 6px 15px;\r
-       cursor: default;\r
-       color: #ee5311;\r
-}\r
-*+html .i-tabsheet-tabs .gwt-TabBarItem-selected {\r
-       border: 1px solid #babfc0;\r
-       border-bottom: none;\r
-       background: #fff;\r
-       margin-top: 0;\r
-       height: 23px;\r
-       padding: 18px 14px 6px 15px;\r
-       cursor: default;\r
-       color: #ee5311;\r
-}\r
-\r
-* html .i-tabsheet-deco {\r
-       height: 0;\r
-       overflow: hidden;\r
-}\r
-*+html .i-tabsheet-deco {\r
-       height: 0;\r
-       overflow: hidden;\r
+       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