]> source.dussan.org Git - vaadin-framework.git/commitdiff
Tabsheet styled, panel styles tweaked for IE6.
authorJouni Koivuviita <jouni.koivuviita@itmill.com>
Mon, 18 Jun 2007 11:26:35 +0000 (11:26 +0000)
committerJouni Koivuviita <jouni.koivuviita@itmill.com>
Mon, 18 Jun 2007 11:26:35 +0000 (11:26 +0000)
svn changeset:1760/svn branch:trunk

15 files changed:
src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css
src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css
src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/css/panel.css
src/com/itmill/toolkit/terminal/gwt/public/component-themes/select/css/select.css
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png [new file with mode: 0644]
src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png [new file with mode: 0644]

index 5131d5411fc18a91f81df042585b2afbbef6ddf9..7a941a943d005430a95a97fbfb10bd2d72b82b35 100644 (file)
@@ -1,10 +1,10 @@
 package com.itmill.toolkit.terminal.gwt.client.ui;
 
 import java.util.ArrayList;
-import java.util.HashMap;
 import java.util.Iterator;
 
 import com.google.gwt.user.client.ui.DeckPanel;
+import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.SourcesTabEvents;
 import com.google.gwt.user.client.ui.TabBar;
@@ -16,6 +16,8 @@ import com.itmill.toolkit.terminal.gwt.client.Paintable;
 import com.itmill.toolkit.terminal.gwt.client.UIDL;
 
 public class ITabsheet extends TabPanel implements Paintable {
+       
+       private static final String CLASSNAME = "i-tabsheet";
 
        String id;
 
@@ -41,6 +43,8 @@ public class ITabsheet extends TabPanel implements Paintable {
        };
 
        public ITabsheet() {
+               setStyleName(CLASSNAME);
+               
                addTabListener(new TabListener() {
 
                        public void onTabSelected(SourcesTabEvents sender, int tabIndex) {
@@ -61,6 +65,12 @@ public class ITabsheet extends TabPanel implements Paintable {
        public void updateFromUIDL(UIDL uidl, Client client) {
                this.client = client;
                id = uidl.getId();
+               
+               DeckPanel dp = getDeckPanel();
+               dp.setStyleName(CLASSNAME+"-content");
+               
+               TabBar tb = getTabBar();
+               tb.setStyleName(CLASSNAME+"-tabs");
 
                UIDL tabs = uidl.getChildUIDL(0);
                boolean keepCurrentTabs = tabKeys.size() == tabs.getNumberOfChildren();
@@ -77,8 +87,7 @@ public class ITabsheet extends TabPanel implements Paintable {
                                        activeTabIndex = index;
                                        Widget content = client.getWidget(tab
                                                        .getChildUIDL(0));
-                                       getTabBar().selectTab(index);
-                                       DeckPanel dp = getDeckPanel();
+                                       tb.selectTab(index);
                                        dp.remove(index);
                                        dp.insert(content, index);
                                        ((Paintable)content).updateFromUIDL(tab
index 1a9687e4810e039b7c0d6d918d720a1207d14081..7268334ddcc2be4faf89846db6200de92004055b 100644 (file)
@@ -1,4 +1,5 @@
 @import "common/css/common.css";\r
 @import "textfield/css/textfield.css";\r
 @import "select/css/select.css";\r
-@import "panel/css/panel.css";
\ No newline at end of file
+@import "panel/css/panel.css";\r
+@import "tabsheet/css/tabsheet.css";
\ No newline at end of file
index f5bb1096ec714b8c97ac4122ed98fea96b7def7e..7cd3202b4d35002854d99250695e83662afde2f7 100644 (file)
@@ -1,13 +1,13 @@
 body {\r
        background: #fafafc url(../img/window-bg.png) repeat-x;\r
-       font-family: helvetica, verdana, tahoma, arial, sans-serif;\r
+       font-family: helvetica, arial, tahoma, verdana, sans-serif;\r
        color: #222;\r
        font-size: 68.75%;\r
        line-height: 1.4em;\r
 }\r
 \r
 input, select, textarea, button {\r
-       font-family: helvetica, verdana, tahoma, arial, sans-serif;\r
+       font-family: helvetica, arial, tahoma, verdana, sans-serif;\r
        font-size: 1em;\r
 }\r
 \r
index b42af09d321f950b01549de8546b1823e27fd4ab..33d59b70c83a93f344dc5fc01ef1f5e81ccc1c06 100644 (file)
 \r
 \r
 \r
-/* IE specific rules (different selectors for IE6 and IE7 */\r
-* html .i-panel,\r
+/* IE specific rules (different selectors for IE6 and IE7.\r
+ * These selectors must be separate because IE6 won't \r
+ * apply them if they are grouped together.\r
+ */\r
\r
+* html .i-panel {\r
+       background-position: 0 1px;\r
+}\r
 *+html .i-panel {\r
        background-position: 0 1px;\r
 }\r
 \r
-* html .i-panel .i-panel-caption,\r
+* html .i-panel .i-panel-caption {\r
+       margin-top: 3px;\r
+}\r
 *+html .i-panel .i-panel-caption {\r
        margin-top: 3px;\r
 }\r
 \r
-* html .i-panel-strong .i-panel-caption,\r
+\r
+* html .i-panel-strong .i-panel-caption {\r
+       margin: 1px 0 10px 0;\r
+}\r
 *+html .i-panel-strong .i-panel-caption {\r
        margin: 1px 0 10px 0;\r
 }\r
 \r
-* html .i-panel-light .i-panel-caption,\r
-*+html .i-panel-light .i-panel-caption {\r
+* html .i-panel-light .i-panel-caption {\r
        margin-top: -23px;\r
        margin-bottom: 0;\r
        padding-bottom: 23px; /* Must specify enough space because of wierd clipping bug */\r
+}\r
+*+html .i-panel-light .i-panel-caption {\r
+       margin-top: -23px;\r
+       margin-bottom: 0;\r
+       padding-bottom: 23px;\r
 }
\ No newline at end of file
index c53569dcf2615a551cf23c0e611f42444b537057..6d8dac8f34a5afc7d5c2400da1b129bb12827aeb 100644 (file)
 }\r
 \r
 .i-select-select {\r
+       /*\r
        border: 1px solid #b6b6b6;\r
-       border-top-color: #9d9d9d;\r
-       border-bottom-color: #d6d6d6;\r
-       border-right-color: #d6d6d6;\r
+       border-bottom-color: #9d9d9d;\r
+       border-top-color: #d6d6d6;\r
+       border-left-color: #d6d6d6;\r
+       */\r
        display: block;\r
 }\r
 \r
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css
new file mode 100644 (file)
index 0000000..582039d
--- /dev/null
@@ -0,0 +1,92 @@
+.i-tabsheet {\r
+       margin: 5px;\r
+}\r
+\r
+.i-tabsheet-tabs {\r
+       empty-cells: hide;\r
+       border-collapse: collapse;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarFirst {\r
+       display: none;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarRest {\r
+       border-bottom: solid 1px #29528a;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarItem {\r
+       border: solid 1px #6082b0;\r
+       border-bottom-color: #29528a;\r
+       height: 17px;\r
+       padding: 4px 8px;\r
+       color: #1c3e6e;\r
+       background: #e6ebf0 url(../img/tab-bg.png) repeat-x;\r
+       margin-right: 1px;\r
+       cursor: pointer;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarItem-selected {\r
+       border-color: #29528a;\r
+       border-bottom-color: #fff;\r
+       background: #fff url(../img/tab-selected-bg.png) repeat-x;\r
+       padding-top: 7px;\r
+       padding-bottom: 5px;\r
+       margin-bottom: -1px;\r
+       font-weight: bold;\r
+       cursor: default;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarItem:hover {\r
+       border-color: #29528a;\r
+       background: #3a639b url(../img/tab-hover-bg.png) repeat-x;\r
+       color: #fff;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarItem-selected:hover {\r
+       background: #fff url(../img/tab-selected-bg.png) repeat-x;\r
+       color: #1c3e6e;\r
+}\r
+\r
+/* Rounded corners effects */\r
+.i-tabsheet-tabs .gwt-TabBarItem:before {\r
+       display: block;\r
+       height: 2px;\r
+       overflow: hidden;\r
+       background: transparent url(../img/tab-right.png) no-repeat right top;\r
+       content: url(../img/tab-left.png);\r
+       margin: -5px -9px 3px -9px;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarItem-selected:before {\r
+       height: 7px;\r
+       background-image: url(../img/tab-selected-right.png);\r
+       content: url(../img/tab-selected-left.png);\r
+       margin: -8px -9px 0 -9px;\r
+}\r
+\r
+.i-tabsheet-tabs .gwt-TabBarItem:hover:before {\r
+       background-image: url(../img/tab-hover-right.png);\r
+       content: url(../img/tab-hover-left.png);\r
+}\r
+\r
+.i-tabsheet-content:after {\r
+       display: block;\r
+       height: 2px;\r
+       overflow: hidden;\r
+       background: transparent url(../../panel/img/bottom-right.png) no-repeat right top;\r
+       content: url(../../panel/img/bottom-left.png);\r
+       margin: 5px -6px -6px -6px;\r
+}\r
+\r
+\r
+\r
+\r
+\r
+\r
+.i-tabsheet-content {\r
+       background-color: #fff;\r
+       border: solid 1px #29528a;\r
+       border-top: none;\r
+       padding: 5px;\r
+}
\ No newline at end of file
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png
new file mode 100644 (file)
index 0000000..dc89d41
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png
new file mode 100644 (file)
index 0000000..a192e32
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png
new file mode 100644 (file)
index 0000000..0ee9612
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png
new file mode 100644 (file)
index 0000000..e05b830
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png
new file mode 100644 (file)
index 0000000..b0ceef0
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png
new file mode 100644 (file)
index 0000000..1461c8f
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png
new file mode 100644 (file)
index 0000000..bdfca27
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png
new file mode 100644 (file)
index 0000000..1146556
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png differ
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png
new file mode 100644 (file)
index 0000000..9f47da4
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png differ