IScrollTable CSS classname conventions changed.

Initial table theme.

svn changeset:1861/svn branch:trunk

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IScrollTable.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IScrollTable.java
index 7a5b0a26e820aba1b990e8ea6b2d8a2a4cbdf4e0..f5ac77a1da30f4678496d40b6fbfcbdbded94e99 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IScrollTable.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IScrollTable.java
@@ -13,11 +13,11 @@ import com.google.gwt.user.client.Element;
 import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.Panel;
 import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.ScrollListener;
 import com.google.gwt.user.client.ui.ScrollPanel;
-import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.itmill.toolkit.terminal.gwt.client.Client;
 import com.itmill.toolkit.terminal.gwt.client.Paintable;
@@ -26,6 +26,7 @@ import com.itmill.toolkit.terminal.gwt.client.ui.IScrollTable.IScrollTableBody.I
 
 public class IScrollTable extends Composite implements Paintable, ITable, ScrollListener {
        
+       public static final String CLASSNAME = "i-table";
        /**
         *  multiple of pagelenght which component will 
         *  cache when requesting more rows 
@@ -92,7 +93,10 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                
                bodyContainer.addScrollListener(this);
                
-               VerticalPanel panel = new VerticalPanel();
+               bodyContainer.setStyleName(CLASSNAME+"-body");
+               
+               FlowPanel panel = new FlowPanel();
+               panel.setStyleName(CLASSNAME);
                
                panel.add(tHead);
                panel.add(bodyContainer);
@@ -598,26 +602,16 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                
                public HeaderCell(String colId, String headerText) {
                        this.cid = colId;
-
-                       DOM.setStyleAttribute(colResizeWidget,"display", "block");
+                       
+                       DOM.setAttribute(colResizeWidget, "className", CLASSNAME+"-resizer");
                        DOM.setStyleAttribute(colResizeWidget, "width",  DRAG_WIDGET_WIDTH +"px");
-                       DOM.setStyleAttribute(colResizeWidget,"height", "20px");
-                       DOM.setStyleAttribute(colResizeWidget,"cssFloat", "right");
-                       DOM.setStyleAttribute(colResizeWidget, "styleFloat", "right");
-                       DOM.setStyleAttribute(colResizeWidget,"background", "brown");
-                       DOM.setStyleAttribute(colResizeWidget,"cursor", "e-resize");
-                       DOM.sinkEvents(colResizeWidget,Event.MOUSEEVENTS);
+                       DOM.sinkEvents(colResizeWidget, Event.MOUSEEVENTS);
                        
                        setText(headerText);
                        
                        DOM.appendChild(td, colResizeWidget);
-
                        
-                       DOM.setStyleAttribute(captionContainer, "cssFloat", "right");
-                       DOM.setStyleAttribute(captionContainer, "styleFloat", "right");
-                       DOM.setStyleAttribute(captionContainer, "overflow", "hidden");
-                       DOM.setStyleAttribute(captionContainer, "white-space", "nowrap");
-                       DOM.setStyleAttribute(captionContainer, "display", "inline");
+                       DOM.setAttribute(captionContainer, "className", CLASSNAME+"-caption-container");
                        DOM.sinkEvents(captionContainer, Event.MOUSEEVENTS);
 
                        DOM.appendChild(td, captionContainer);
@@ -647,11 +641,11 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                private void setSorted(boolean sorted) {
                        if(sorted) {
                                if(sortAscending)
-                                       this.setStyleName("headerCellAsc");
+                                       this.setStyleName("header-cell-asc");
                                else
-                                       this.setStyleName("headerCellDesc");
+                                       this.setStyleName("header-cell-desc");
                        } else {
-                               this.setStyleName("headerCell");
+                               this.setStyleName("header-cell");
                        }
                }
 
@@ -674,11 +668,7 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                        floatingCopyOfHeaderCell = DOM.getChild(floatingCopyOfHeaderCell, 1);
                        // TODO isolate non-standard css attribute (filter)
                        // TODO move styles to css file
-                       DOM.setStyleAttribute(floatingCopyOfHeaderCell, "position", "absolute");
-                       DOM.setStyleAttribute(floatingCopyOfHeaderCell, "background", "#000000");
-                       DOM.setStyleAttribute(floatingCopyOfHeaderCell, "color", "#ffffff");
-                       DOM.setStyleAttribute(floatingCopyOfHeaderCell, "opacity", "0.5");
-                       DOM.setStyleAttribute(floatingCopyOfHeaderCell, "filter", "alpha(opacity=100)");
+                       DOM.setAttribute(floatingCopyOfHeaderCell, "className", CLASSNAME+"-header-drag");
                        updateFloatingCopysPosition(DOM.getAbsoluteLeft(td), DOM.getAbsoluteTop(td));
                        DOM.appendChild(RootPanel.get().getElement(), floatingCopyOfHeaderCell);
                }
@@ -867,6 +857,9 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
        
        public class TableHead extends Panel implements IActionOwner {
                
+               /**
+                * Apply these in CSS also.
+                */
                private static final int COLUMN_SELECTOR_WIDTH = 10;
                private static final int COLUMN_SELECTOR_HEIGHT = 10;
 
@@ -891,14 +884,12 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                
                public TableHead() {
                        DOM.setStyleAttribute(hTableWrapper, "overflow", "hidden");
-                       DOM.setAttribute(hTableWrapper, "className", "iscrolltable-header");
+                       DOM.setAttribute(hTableWrapper, "className", CLASSNAME+"-header");
 
                        // TODO move styles to CSS
+                       DOM.setAttribute(columnSelector, "className", CLASSNAME+"-column-selector");
                        DOM.setStyleAttribute(columnSelector, "width", COLUMN_SELECTOR_WIDTH +"px");
-                       DOM.setStyleAttribute(columnSelector, "cssFloat", "right");
-                       DOM.setStyleAttribute(columnSelector, "styleFloat", "right");
                        DOM.setStyleAttribute(columnSelector, "height", COLUMN_SELECTOR_HEIGHT + "px");
-                       DOM.setStyleAttribute(columnSelector, "background", "brown");
                        DOM.setStyleAttribute(columnSelector, "display", "none");
                        
                        DOM.appendChild(table, headerTableBody);
@@ -909,6 +900,8 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                        DOM.appendChild(div, hTableWrapper);
                        setElement(div);
                        
+                       setStyleName(CLASSNAME+"-header-wrap");
+                       
                        DOM.sinkEvents(columnSelector, Event.ONCLICK);
                        
                        availableCells.put("0", new RowHeadersHeaderCell());
@@ -1045,13 +1038,13 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                private void focusSlot(int index) {
                        removeSlotFocus();
                        if(index > 0)
-                               DOM.setStyleAttribute(
+                               DOM.setAttribute(
                                                DOM.getFirstChild(DOM.getChild(tr, index - 1)), 
-                                               "borderRight", "2px solid black");
+                                               "className", CLASSNAME+"-resizer "+CLASSNAME+"-focus-slot-right");
                        else
-                               DOM.setStyleAttribute(
+                               DOM.setAttribute(
                                                DOM.getFirstChild(DOM.getChild(tr, index)), 
-                                               "borderLeft", "2px solid black");
+                                               "className", CLASSNAME+"-resizer "+CLASSNAME+"-focus-slot-left");
                        focusedSlot = index;
                }
 
@@ -1059,13 +1052,13 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                        if(focusedSlot < 0)
                                return;
                        if(focusedSlot == 0)
-                               DOM.setStyleAttribute(
+                               DOM.setAttribute(
                                                DOM.getFirstChild(DOM.getChild(tr, focusedSlot)), 
-                                               "borderLeft", "none");
+                                               "className", CLASSNAME+"-resizer");
                        else if( focusedSlot > 0)
-                               DOM.setStyleAttribute(
+                               DOM.setAttribute(
                                                DOM.getFirstChild(DOM.getChild(tr, focusedSlot - 1)), 
-                                               "borderRight", "none");
+                                               "className", CLASSNAME+"-resizer");
                        focusedSlot = -1;
                }
                
@@ -1116,7 +1109,7 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                        public String getHTML() {
                                StringBuffer buf = new StringBuffer();
                                if(collapsed)
-                                       buf.append("<span class=\"off\">");
+                                       buf.append("<span class=\"i-off\">");
                                buf.append(super.getHTML());
                                if(collapsed)
                                        buf.append("</span>");
@@ -1217,9 +1210,9 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                }
                
                private void constructDOM() {
-                       DOM.setAttribute(table, "className", "iscrolltable-table");
-                       DOM.setAttribute(preSpacer, "className", "iscrolltable-rowspacer");
-                       DOM.setAttribute(postSpacer, "className", "iscrolltable-rowspacer");
+                       DOM.setAttribute(table, "className", CLASSNAME+"-table");
+                       DOM.setAttribute(preSpacer, "className", CLASSNAME+"-row-spacer");
+                       DOM.setAttribute(postSpacer, "className", CLASSNAME+"-row-spacer");
 
                        DOM.appendChild(table, tBody);
                        DOM.appendChild(container, preSpacer);
@@ -1266,7 +1259,7 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                                }
 //                     } else if (firstIndex > lastRendered || firstIndex + rows < firstRendered) {
                        } else if (true) {
-                               // complitely new set of rows
+                               // completely new set of rows
                                // create one row before truncating row
                                IScrollTableRow row = createRow((UIDL) it.next());
                                while(lastRendered + 1 > firstRendered)
@@ -1309,12 +1302,22 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                }
 
                private void addRowBeforeFirstRendered(IScrollTableRow row) {
+                       IScrollTableRow first = null;
+                       if(renderedRows.size()>0)
+                               first = (IScrollTableRow) renderedRows.get(0);
+                       if(first != null && first.getStyleName().indexOf("i-odd") == -1)
+                               row.addStyleName("i-odd");
                        DOM.insertChild(tBody, row.getElement(), 0);
                        adopt(row, null);
                        renderedRows.add(0, row);
                }
                
                private void addRow(IScrollTableRow row) {
+                       IScrollTableRow last = null;
+                       if(renderedRows.size()>0)
+                               last = (IScrollTableRow) renderedRows.get(renderedRows.size()-1);
+                       if(last != null && last.getStyleName().indexOf("i-odd") == -1)
+                               row.addStyleName("i-odd");
                        DOM.appendChild(tBody, row.getElement());
                        adopt(row, null);
                        renderedRows.add(row);
@@ -1426,7 +1429,7 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                                setElement(DOM.createElement("tr"));
                                DOM.sinkEvents(getElement(), Event.ONCLICK);
                                attachContextMenuEvent(getElement());
-                               setStyleName("iscrolltable-row");
+                               setStyleName(CLASSNAME+"-row");
                        }
                        
                        private native void attachContextMenuEvent(Element el) /*-{
@@ -1475,7 +1478,7 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                                // String only content is optimized by not using Label widget
                                Element td = DOM.createTD();
                                Element container = DOM.createDiv();
-                               DOM.setAttribute(container, "className", "iscrolltable-cellContent");
+                               DOM.setAttribute(container, "className", CLASSNAME+"-cell-content");
                                DOM.setInnerHTML(container, text);
                                if(align != ALIGN_LEFT) {
                                        switch (align) {
@@ -1495,7 +1498,7 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                        public void addCell(Widget w, char align) {
                                Element td = DOM.createTD();
                                Element container = DOM.createDiv();
-                               DOM.setAttribute(container, "className", "iscrolltable-cellContent");
+                               DOM.setAttribute(container, "className", CLASSNAME+"-cell-content");
                                // TODO make widget cells respect align. text-align:center for IE, margin: auto for others
                                DOM.appendChild(td, container);
                                DOM.appendChild(getElement(), td);
@@ -1519,7 +1522,7 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                                String s = DOM.getAttribute(DOM.eventGetTarget(event), "className");
                                switch (DOM.eventGetType(event)) {
                                case Event.ONCLICK:
-                                       if("iscrolltable-cellContent".equals(s)) {
+                                       if((CLASSNAME+"-cell-content").equals(s)) {
                                                client.console.log("Row click");
                                                if(selectMode > ITable.SELECT_MODE_NONE) {
                                                        toggleSelection();
@@ -1553,11 +1556,10 @@ public class IScrollTable extends Composite implements Paintable, ITable, Scroll
                                        if(selectMode == ITable.SELECT_MODE_SINGLE)
                                                IScrollTable.this.deselectAll();
                                        selectedRowKeys.add(String.valueOf(rowKey));
-                                       
-                                       setStyleName("iscrolltable-selRow");
+                                       addStyleName("i-selected");
                                } else {
                                        selectedRowKeys.remove(String.valueOf(rowKey));
-                                       setStyleName("iscrolltable-row");
+                                       removeStyleName("i-selected");
                                }
                        }
 

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css
index 98f8c2507db66247baf79a8f22f260c14f37f6fc..cad477b824824986259ce93b149995360aeb0cef 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css
+++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css
@@ -3,4 +3,5 @@
 @import "select/css/select.css";\r
 @import "panel/css/panel.css";\r
 @import "tabsheet/css/tabsheet.css";\r
-@import "datefield/css/datefield.css";
\ No newline at end of file
+@import "datefield/css/datefield.css";\r
+@import "table/css/table.css";
\ No newline at end of file

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css
index 0da1ecb283e69a3e269d0aa8a57f706048e6e1ba..2674cf61341b6d627c168e0f525e90c62e32ea90 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css
+++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css
@@ -24,73 +24,4 @@ select {
 .i-contextmenu {
        background: #fff;       
        border: #000;
-}
-
-/* TODO move table styles to separate file */
-.iscrolltable-header {
-       
-}
-
-/* disabled row in column selector */
-.off {
-       font-style: italic;
-}
-
-.iscrolltable-header table {
-       border-collapse:collapse;
-       margin:0;
-       padding:0;
-       border:0;
-}
-
-.iscrolltable-header table td {
-       margin:0;
-       padding:0;
-       border:0;
-       background:yellow;
-}
-
-.iscrolltable-header .headerCell {
-}
-.iscrolltable-header .headerCellAsc {
-       background: blue;
-}
-.iscrolltable-header .headerCellDesc {
-       background: cyan;
-}
-
-
-.iscrolltable-table {
-       border-collapse:collapse;
-       margin:0;
-       padding:0;
-       border:0;
-}
-
-.iscrolltable-table td {
-       border:0;
-       margin:0;
-       padding:0;
-}
-
-.iscrolltable-selRow,
-.iscrolltable-row {
-       border:0;
-       margin:0;
-       padding:0;
-}
-
-.iscrolltable-selRow {
-       background: yellow;
-}
-
-.iscrolltable-rowspacer {
-       height: 10px;
-       background: brown;
-       overflow:hidden; /* IE hack to allow < one line height divs */
-}
-
-.iscrolltable-table .iscrolltable-cellContent {
-       white-space: nowrap;
-       overflow: hidden;
 }
\ No newline at end of file

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-small.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-small.png
new file mode 100644 (file)
index 0000000..64c0c5c
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-small.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-small.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-small.png
new file mode 100644 (file)
index 0000000..8ba960b
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-small.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/css/table.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/css/table.css
new file mode 100644 (file)
index 0000000..0e8dde9
--- /dev/null
+++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/css/table.css
@@ -0,0 +1,144 @@
+.i-table {\r
+       border: 1px solid #29528a;\r
+       background: #fff;\r
+}\r
+.i-table:before {\r
+       display: block;\r
+       height: 2px;\r
+       overflow: hidden;\r
+       background: transparent url(../../panel/img/top-right-small.png) no-repeat right top;\r
+       content: url(../../panel/img/top-left-small.png);\r
+       margin: -1px -1px 0 -1px;\r
+}\r
+.i-table: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: 0 -1px -1px -1px;\r
+}\r
+\r
+.i-table-header-wrap {\r
+       height: 26px;\r
+       background: #e7edf3 url(../img/header-bg.png) repeat-x;\r
+       border-bottom: 1px solid #6082b0;\r
+       margin-top: -1px;\r
+}\r
+\r
+.i-table-header {\r
+}\r
+\r
+.i-table-header table,\r
+.i-table-table {\r
+       border-collapse: collapse;\r
+       margin: 0;\r
+       padding: 0;\r
+       border: 0;\r
+}\r
+\r
+.i-table-header table td,\r
+.i-table-table td {\r
+       margin:0;\r
+       padding:0;\r
+       border:0;\r
+}\r
+\r
+.i-table-resizer {\r
+       display: block;\r
+       height: 26px;\r
+       float: right;\r
+       background: #aabdda url(../img/resizer-bg.png);\r
+       cursor: e-resize;\r
+}\r
+\r
+.i-table-caption-container {\r
+       float: right;\r
+       overflow: hidden;\r
+       white-space: nowrap;\r
+       font-weight: bold;\r
+       color: #1c3e6e;\r
+       padding-top: 5px;\r
+}\r
+\r
+/* disabled row in column selector */\r
+.i-off {\r
+       font-style: italic;\r
+}\r
+\r
+\r
+\r
+.i-table-header-cell {\r
+}\r
+.i-table-header-cell-asc {\r
+       background: blue;\r
+}\r
+.i-table-header-cell-desc {\r
+       background: cyan;\r
+}\r
+\r
+.i-table-body {\r
+       /*margin: 0 1px;*/\r
+}\r
+\r
+.i-table-row {\r
+       border: 0;\r
+       margin: 0;\r
+       padding: 0;\r
+}\r
+.i-table .i-odd {\r
+       background-color: #f1f5f9;\r
+}\r
+.i-table .i-selected {\r
+       background: #466fa7;\r
+       color: #fff;\r
+}\r
+\r
+.i-table-row-spacer {\r
+       height: 10px;\r
+       overflow: hidden; /* IE hack to allow < one line height divs */\r
+}\r
+\r
+.i-table-cell-content {\r
+       white-space: nowrap;\r
+       overflow: hidden;\r
+       /*border-right: 1px solid #e4e8ef;\r
+       padding-left: 2px;\r
+       width: 98%;*/\r
+}\r
+\r
+\r
+\r
+.i-table-column-selector {\r
+       float: right;\r
+       background: transparent url(../img/colsel.png) no-repeat;\r
+       margin: 4px 0 0 0;\r
+}\r
+\r
+.i-table-focus-slot-left {\r
+       border-left: 2px solid blue;\r
+       margin-right: -2px;\r
+}\r
+.i-table-focus-slot-right {\r
+       border-right: 2px solid blue;\r
+       margin-left: -2px;\r
+}\r
+\r
+.i-table-header-drag {\r
+       position: absolute;\r
+       background: #000;\r
+       color: #fff;\r
+       opacity: 0.5;\r
+       filter: alpha(opacity=50);\r
+}\r
+\r
+\r
+\r
+\r
+/* IE specific styles */\r
+* html .i-table-header-wrap {\r
+       margin-top: 0;\r
+}\r
+*+html .i-table-header-wrap {\r
+       margin-top: 1px;\r
+}
\ No newline at end of file

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/colsel.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/colsel.png
new file mode 100644 (file)
index 0000000..1e66978
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/colsel.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/header-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/header-bg.png
new file mode 100644 (file)
index 0000000..471a2c2
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/header-bg.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/resizer-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/resizer-bg.png
new file mode 100644 (file)
index 0000000..f33f827
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/table/img/resizer-bg.png differ