From eeb6eafb668d4e01de62e3d803523e8de3336b85 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Sat, 22 Mar 2014 22:19:39 -0400 Subject: [PATCH] Fix #873: Make ui- classes optional based on addUiClasses property --- CellSelection.js | 3 +- List.js | 30 ++++++++++----- Selection.js | 3 +- css/dgrid.css | 3 ++ css/dgrid_rtl.css | 4 +- css/skins/cactus.css | 10 ++--- css/skins/claro.css | 22 +++++------ css/skins/nihilo.css | 12 +++--- css/skins/sage.css | 11 +++--- css/skins/slate.css | 13 ++++--- css/skins/soria.css | 17 +++++---- css/skins/squid.css | 19 +++++----- css/skins/tundra.css | 16 ++++---- demos/dTuned/resources/dTuned.css | 24 ++++++------ test/JsonRest.html | 2 +- test/OnDemand.html | 2 +- test/Selection.html | 2 - test/complex_column.html | 2 +- test/editor_more_widgets.html | 2 +- test/editor_no_store.html | 2 +- test/editor_widgets.html | 2 +- test/extensions/ColumnReorder.html | 2 +- test/extensions/ColumnResizer_complex.html | 2 +- test/performance.html | 2 +- test/performance_slow_network.html | 2 +- test/simple_grid.html | 2 +- test/skin.html | 44 +++++++++++++++++----- test/tree.html | 5 +-- test/tundra_custom.html | 2 +- 29 files changed, 151 insertions(+), 111 deletions(-) diff --git a/CellSelection.js b/CellSelection.js index 48e8df0c5..5d0dfa5db 100644 --- a/CellSelection.js +++ b/CellSelection.js @@ -74,7 +74,8 @@ return declare(Selection, { if(element){ // add or remove classes as appropriate if(value){ - put(element, ".dgrid-selected.ui-state-active"); + put(element, ".dgrid-selected" + + (this.addUiClasses ? ".ui-state-active" : "")); }else{ put(element, "!dgrid-selected!ui-state-active"); } diff --git a/List.js b/List.js index 407fd5b9c..fca505cd9 100644 --- a/List.js +++ b/List.js @@ -125,6 +125,10 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put // incorporate logic from the TouchScroll module (at the expense of // normal desktop/mouse or native mobile scrolling functionality). useTouchScroll: !has("dom-scrollbar-width"), + + // addUiClasses: Boolean + // Whether to add jQuery UI classes to various elements in dgrid's DOM. + addUiClasses: true, // cleanEmptyObservers: Boolean // Whether to clean up observers for empty result sets. @@ -204,6 +208,7 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put }, buildRendering: function(){ var domNode = this.domNode, + addUiClasses = this.addUiClasses, self = this, headerNode, spacerNode, bodyNode, footerNode, isRTL; @@ -215,11 +220,13 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put // class / className setter), then apply standard classes/attributes domNode.className = ""; - put(domNode, "[role=grid].ui-widget.dgrid.dgrid-" + this.listType); + put(domNode, "[role=grid].dgrid.dgrid-" + this.listType + + (addUiClasses ? ".ui-widget" : "")); // Place header node (initially hidden if showHeader is false). headerNode = this.headerNode = put(domNode, - "div.dgrid-header.dgrid-header-row.ui-widget-header" + + "div.dgrid-header.dgrid-header-row" + + (addUiClasses ? ".ui-widget-header" : "") + (this.showHeader ? "" : ".dgrid-header-hidden")); if(has("quirks") || has("ie") < 8){ spacerNode = put(domNode, "div.dgrid-spacer"); @@ -233,7 +240,8 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put bodyNode.tabIndex = -1; } - this.headerScrollNode = put(domNode, "div.dgrid-header-scroll.dgrid-scrollbar-width.ui-widget-header"); + this.headerScrollNode = put(domNode, "div.dgrid-header.dgrid-header-scroll.dgrid-scrollbar-width" + + (addUiClasses ? ".ui-widget-header" : "")); // Place footer node (initially hidden if showFooter is false). footerNode = this.footerNode = put("div.dgrid-footer" + @@ -256,7 +264,8 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put this.configStructure(); this.renderHeader(); - this.contentNode = this.touchNode = put(this.bodyNode, "div.dgrid-content.ui-widget-content"); + this.contentNode = this.touchNode = put(this.bodyNode, + "div.dgrid-content" + (addUiClasses ? ".ui-widget-content" : "")); // add window resize handler, with reference for later removal if needed this._listeners.push(this._resizeHandle = listen(window, "resize", miscUtil.throttleDelayed(winResizeHandler, this))); @@ -329,9 +338,9 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put if(scrollbarWidth != 17 && !quirks){ // for modern browsers, we can perform a one-time operation which adds // a rule to account for scrollbar width in all grid headers. - miscUtil.addCssRule(".dgrid-header", "right: " + scrollbarWidth + "px"); + miscUtil.addCssRule(".dgrid-header-row", "right: " + scrollbarWidth + "px"); // add another for RTL grids - miscUtil.addCssRule(".dgrid-rtl-nonwebkit .dgrid-header", "left: " + scrollbarWidth + "px"); + miscUtil.addCssRule(".dgrid-rtl-nonwebkit .dgrid-header-row", "left: " + scrollbarWidth + "px"); } } @@ -428,9 +437,10 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put newRow: function(object, parentNode, beforeNode, i, options){ if(parentNode){ var row = this.insertRow(object, parentNode, beforeNode, i, options); - put(row, ".ui-state-highlight"); + put(row, ".dgrid-highlight" + + (this.addUiClasses ? ".ui-state-highlight" : "")); setTimeout(function(){ - put(row, "!ui-state-highlight"); + put(row, "!dgrid-highlight!ui-state-highlight"); }, this.highlightDuration); return row; } @@ -712,7 +722,9 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put this.removeRow(row); } row = this.renderRow(object, options); - row.className = (row.className || "") + " ui-state-default dgrid-row " + (i % 2 == 1 ? oddClass : evenClass); + row.className = (row.className || "") + " dgrid-row " + + (i % 2 == 1 ? oddClass : evenClass) + + (this.addUiClasses ? " ui-state-default" : ""); // get the row id for easy retrieval this._rowIdToObject[row.id = id] = object; parent.insertBefore(row, beforeNode || null); diff --git a/Selection.js b/Selection.js index 831400cf5..dde23d2b8 100644 --- a/Selection.js +++ b/Selection.js @@ -508,7 +508,8 @@ return declare(null, { if(element){ // add or remove classes as appropriate if(value){ - put(element, ".dgrid-selected.ui-state-active"); + put(element, ".dgrid-selected" + + (this.addUiClasses ? ".ui-state-active" : "")); }else{ put(element, "!dgrid-selected!ui-state-active"); } diff --git a/css/dgrid.css b/css/dgrid.css index 91db6cad4..76724d768 100644 --- a/css/dgrid.css +++ b/css/dgrid.css @@ -9,6 +9,9 @@ .dgrid-header { background-color: #eee; +} + +.dgrid-header-row { position: absolute; right: 17px; /* scrollbar width; revised in List.js if necessary */ left: 0; diff --git a/css/dgrid_rtl.css b/css/dgrid_rtl.css index c432ff20e..b6df98dcc 100644 --- a/css/dgrid_rtl.css +++ b/css/dgrid_rtl.css @@ -6,7 +6,7 @@ .dgrid-rtl-nonwebkit is also added to the domNode if the grid's isRTL is true AND the client isn't WebKit */ -.dgrid-rtl-nonwebkit .dgrid-header { +.dgrid-rtl-nonwebkit .dgrid-header-row { right: 0; left: 17px; } @@ -50,7 +50,7 @@ .dgrid-rtl.dgrid-autoheight .dgrid-header { left: 0; } -.has-ie-6 .dgrid-rtl .dgrid-header { +.has-ie-6 .dgrid-rtl .dgrid-header-row { left: auto; right: auto; } diff --git a/css/skins/cactus.css b/css/skins/cactus.css index bd377d591..35b77760a 100644 --- a/css/skins/cactus.css +++ b/css/skins/cactus.css @@ -1,4 +1,4 @@ -.cactus .ui-widget-content { +.cactus .dgrid-content { border: none; background: #faffef; color: #000; @@ -8,7 +8,7 @@ border-bottom: none; } -.cactus .ui-widget-header, +.cactus .dgrid-header, .cactus .dgrid-footer { color: #fff; background: #333; /* Old browsers */ @@ -21,7 +21,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 ); /* IE6-9 */ } -.cactus .ui-widget-header th { +.cactus .dgrid-header th { padding: 7px 3px; font-weight: bold; color: #fff; @@ -76,12 +76,12 @@ border-color: #333; } -.cactus .ui-state-active:hover { +.cactus .dgrid-selected:hover { background: #333; border-color: #333; } -.cactus .ui-state-highlight { +.cactus .dgrid-highlight { background: #d6e5a5; /* background-color doesn't override CSS3 gradient */ filter: none; /* override gradient in IE */ color: #000; diff --git a/css/skins/claro.css b/css/skins/claro.css index 5948fa85a..fabbf2049 100644 --- a/css/skins/claro.css +++ b/css/skins/claro.css @@ -4,10 +4,10 @@ color: #000; } -.claro .ui-widget-header { +.claro .dgrid-header { font-weight: bold; } -.claro .ui-widget-header, +.claro .dgrid-header, .claro .dgrid-footer { background: #ebf0f5; /* Old browsers */ background: -moz-linear-gradient(top, #ebf0f5 0%, #d5e0ea 100%); /* FF3.6+ */ @@ -18,7 +18,7 @@ background: linear-gradient(top, #ebf0f5 0%,#d5e0ea 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf0f5', endColorstr='#d5e0ea',GradientType=0 ); /* IE6-9 */ } -.claro .ui-widget-header .dgrid-cell:hover { +.claro .dgrid-header .dgrid-cell:hover { background: #ebf1f6; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #d2e0eb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d2e0eb)); /* Chrome,Safari4+ */ @@ -28,7 +28,7 @@ background: linear-gradient(top, #ffffff 0%,#d2e0eb 100%); /* W3C */ } -.claro .ui-state-default { +.claro .dgrid-row { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; @@ -39,22 +39,22 @@ transition-property: background-color, border-color; background: url("images/row_back.png") #fff repeat-x; } -.has-ie-6 .claro .ui-state-default { +.has-ie-6 .claro .dgrid-row { background-image: none; } -.claro .ui-state-default:hover { +.claro .dgrid-row:hover { background-color: #e9f2fe; } -.claro .ui-state-active { +.claro .dgrid-selected { background-color: #cee6fa; } -.claro .ui-state-active:hover { +.claro .dgrid-selected:hover { background-color: #9bc6f2; } -.claro .ui-state-highlight { +.claro .dgrid-highlight { background-color: #ff6; } @@ -62,6 +62,6 @@ border-color: #edc; } -.claro .ui-widget-header .dgrid-cell { +.claro .dgrid-header .dgrid-cell { border-color: #bbb; -} +} \ No newline at end of file diff --git a/css/skins/nihilo.css b/css/skins/nihilo.css index 5cee4fe6a..482160706 100644 --- a/css/skins/nihilo.css +++ b/css/skins/nihilo.css @@ -2,11 +2,11 @@ border-color: #bba; } -.nihilo .ui-widget-content { +.nihilo .dgrid-content { background: #fff; color: #000; } -.nihilo .ui-widget-header { +.nihilo .dgrid-header { background: #fff; border-bottom-color: #919191; } @@ -18,14 +18,14 @@ border-right-color: #acab99; } -.nihilo .ui-state-active { +.nihilo .dgrid-selected { background-color: #aec7e3; } -.nihilo .ui-state-default:hover { +.nihilo .dgrid-row:hover { background-color: #ffe284; } -.nihilo .ui-state-highlight { +.nihilo .dgrid-highlight { background-color: #ff6; } @@ -33,6 +33,6 @@ border-color: #ddc; } -.nihilo .ui-widget-header .dgrid-cell { +.nihilo .dgrid-header .dgrid-cell { border-color: #bba; } \ No newline at end of file diff --git a/css/skins/sage.css b/css/skins/sage.css index 139728273..a13ee085f 100644 --- a/css/skins/sage.css +++ b/css/skins/sage.css @@ -1,4 +1,4 @@ -.sage .ui-widget-content { +.sage .dgrid-content { border: none; background: #fff; color: #000; @@ -9,7 +9,8 @@ border-bottom: none; } -.sage .ui-widget-header, .sage .dgrid-footer { +.sage .dgrid-header, +.sage .dgrid-footer { color: #fff; background: #333; /* Old browsers */ background: -moz-linear-gradient(top, #4e4e4e 0%, #555555 12%, #636363 25%, #505050 39%, #303030 49%, #000000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%); /* FF3.6+ */ @@ -21,7 +22,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 ); /* IE6-9 */ } -.sage .ui-widget-header th { +.sage .dgrid-header th { padding: 7px 3px; font-weight: bold; color: #fff; @@ -47,7 +48,7 @@ text-shadow: 0 1px 0 rgba(255,255,255,.5); } -.sage .ui-state-default { +.sage .dgrid-row { -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; @@ -62,7 +63,7 @@ text-shadow: 0 1px 0 rgba(255,255,255,.6); } -.sage .ui-state-highlight { +.sage .dgrid-highlight { background-color: #d5e8bd; } diff --git a/css/skins/slate.css b/css/skins/slate.css index 176cc8fb8..4d9ab3f11 100644 --- a/css/skins/slate.css +++ b/css/skins/slate.css @@ -1,4 +1,4 @@ -.slate .ui-widget-content { +.slate .dgrid-content { background: #fff; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.9); @@ -8,7 +8,8 @@ border-bottom: none; } -.slate .ui-widget-header, .slate .dgrid-footer { +.slate .dgrid-header, +.slate .dgrid-footer { color: #fff; background: #333; /* Old browsers */ background: -moz-linear-gradient(top, #4e4e4e 0%, #555555 12%, #636363 25%, #505050 39%, #303030 49%, #000000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%); /* FF3.6+ */ @@ -20,7 +21,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 ); /* IE6-9 */ } -.slate .ui-widget-header th { +.slate .dgrid-header th { padding: 7px 3px; font-weight: bold; color: #FFF; @@ -37,14 +38,14 @@ background-color: #ddd; } -.slate .ui-state-active, -.slate .ui-state-active:hover { +.slate .dgrid-selected, +.slate .dgrid-selected:hover { background-color: #555; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); } -.slate .ui-state-highlight { +.slate .dgrid-highlight { background-color: #999; } diff --git a/css/skins/soria.css b/css/skins/soria.css index c520a942c..00cea11ac 100644 --- a/css/skins/soria.css +++ b/css/skins/soria.css @@ -2,11 +2,12 @@ border-color: #bba; } -.soria .ui-widget-content { +.soria .dgrid-content { background: #fff; color: #000; } -.soria .ui-widget-header, .soria .dgrid-footer { +.soria .dgrid-header, +.soria .dgrid-footer { background: #f2f4fe; /* Old browsers */ background: -moz-linear-gradient(top, #f2f4fe 0%, #d0dff5 50%, #c6d8f0 51%, #c2d5ef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f4fe), color-stop(50%,#d0dff5), color-stop(51%,#c6d8f0), color-stop(100%,#c2d5ef)); /* Chrome,Safari4+ */ @@ -16,7 +17,7 @@ background: linear-gradient(top, #f2f4fe 0%,#d0dff5 50%,#c6d8f0 51%,#c2d5ef 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f4fe', endColorstr='#c2d5ef',GradientType=0 ); /* IE6-9 */ } -.soria .ui-widget-header th:hover { +.soria .dgrid-header th:hover { background: #d4deec; /* Old browsers */ background: -moz-linear-gradient(top, #dae2ed 0%, #b2c7e8 49%, #a8c1eb 50%, #9ebaec 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dae2ed), color-stop(49%,#b2c7e8), color-stop(50%,#a8c1eb), color-stop(100%,#9ebaec)); /* Chrome,Safari4+ */ @@ -26,14 +27,14 @@ background: linear-gradient(top, #dae2ed 0%,#b2c7e8 49%,#a8c1eb 50%,#9ebaec 100%); /* W3C */ } -.soria .ui-state-active { +.soria .dgrid-selected { background-color: #aec7e3; } -.soria .ui-state-default:hover { +.soria .dgrid-row:hover { background-color: #60a1ea; } -.soria .ui-state-highlight { +.soria .dgrid-highlight { background-color: #ff6; } @@ -41,6 +42,6 @@ border-color: #ddc; } -.soria .ui-widget-header .dgrid-cell { +.soria .dgrid-header .dgrid-cell { border-color: #bba; -} +} \ No newline at end of file diff --git a/css/skins/squid.css b/css/skins/squid.css index a1bbd711a..b088bf15d 100644 --- a/css/skins/squid.css +++ b/css/skins/squid.css @@ -1,4 +1,4 @@ -.squid .ui-widget-content { +.squid .dgrid-content { border: 1px solid #555; background: #000; color: #fff; @@ -12,7 +12,8 @@ padding: 0 1px; /* add side padding to align with borders on content area */ } -.squid .ui-widget-header, .squid .dgrid-footer { +.squid .dgrid-header, +.squid .dgrid-footer { color: #fff; background: #2d1f14; /* Old browsers */ background: -moz-linear-gradient(top, #140e09 0%, #2d1f14 100%); /* FF3.6+ */ @@ -25,7 +26,7 @@ color: #fff; font-weight: bold; } -.squid .ui-widget-header:hover { +.squid .dgrid-header:hover { background: #000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #2d1f14 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#2d1f14)); /* Chrome,Safari4+ */ @@ -35,7 +36,7 @@ background: linear-gradient(top, #000000 0%,#2d1f14 100%); /* W3C */ } -.squid .ui-state-default { +.squid .dgrid-row { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; @@ -44,24 +45,24 @@ transition-property: background-color, border-color; background: url("images/row_back.png") #000 repeat-x; } -.squid .ui-state-default:hover { +.squid .dgrid-row:hover { background-color: #444; } -.has-ie-6 .squid .ui-state-default { +.has-ie-6 .squid .dgrid-row { background-image: none; } -.squid .ui-state-active { +.squid .dgrid-selected { background-color: #64390d; text-shadow: 0 -1px 0 rgba(0,0,0,.3); } -.squid .ui-state-active:hover { +.squid .dgrid-selected:hover { background-color: #8b6b4a; } -.squid .ui-state-highlight { +.squid .dgrid-highlight { background-color: #666; } diff --git a/css/skins/tundra.css b/css/skins/tundra.css index f67d59ec3..d62f410d7 100644 --- a/css/skins/tundra.css +++ b/css/skins/tundra.css @@ -2,12 +2,12 @@ border-color: #bba; } -.tundra .ui-widget-content { +.tundra .dgrid-content { background: #fff; color: #000; } -.tundra .ui-widget-header, .tundra .dgrid-footer { +.tundra .dgrid-header, .tundra .dgrid-footer { background: #e8e8e8; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */ @@ -18,7 +18,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */ font-weight: bold; } -.tundra .ui-widget-header th:hover { +.tundra .dgrid-header th:hover { background: #f6f6f6; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ @@ -28,14 +28,14 @@ background: linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* W3C */ } -.tundra .ui-state-active { +.tundra .dgrid-selected { background-color: #aec7e3; } -.tundra .ui-state-default:hover { +.tundra .dgrid-row:hover { background-color: #60a1ea; } -.tundra .ui-state-highlight { +.tundra .dgrid-highlight { background-color: #ff6; } @@ -43,6 +43,6 @@ border-color: #ddc; } -.tundra .ui-widget-header .dgrid-cell { +.tundra .dgrid-header .dgrid-cell { border-color: #bba; -} +} \ No newline at end of file diff --git a/demos/dTuned/resources/dTuned.css b/demos/dTuned/resources/dTuned.css index ad66a7508..1de6c56a5 100644 --- a/demos/dTuned/resources/dTuned.css +++ b/demos/dTuned/resources/dTuned.css @@ -1,20 +1,20 @@ -.dTuned .ui-widget { +.dTuned .dgrid { background: #fff; color: #000; } -.dTuned .ui-widget-header { +.dTuned .dgrid-header { background-image: url(images/grid-header-bg.png); background-repeat: repeat-x; font-weight: bold; } -.dTuned .ui-widget-header .dgrid-cell:hover, -.dTuned .ui-widget-header .dgrid-sort-up, -.dTuned .ui-widget-header .dgrid-sort-down{ +.dTuned .dgrid-header .dgrid-cell:hover, +.dTuned .dgrid-header .dgrid-sort-up, +.dTuned .dgrid-header .dgrid-sort-down{ background-image: url(images/grid-header-sorted.png); background-repeat: repeat-x; } -.dTuned .ui-state-default { +.dTuned .dgrid-row { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; @@ -25,22 +25,22 @@ transition-property: background-color, border-color; background: url("../../../css/skins/images/row_back.png") #fff repeat-x; } -.has-ie-6 .dTuned .ui-state-default { +.has-ie-6 .dTuned .dgrid-row { background-image: none; } -.dTuned .ui-state-default:hover { +.dTuned .dgrid-row:hover { background-color: #e9f2fe; } -.dTuned .ui-state-active { +.dTuned .dgrid-selected { background-color: #cee6fa; } -.dTuned .ui-state-active:hover { +.dTuned .dgrid-selected:hover { background-color: #9bc6f2; } -.dTuned .ui-state-highlight { +.dTuned .dgrid-highlight { background-color: #ff6; -} +} \ No newline at end of file diff --git a/test/JsonRest.html b/test/JsonRest.html index ce1324e9d..b32e556d9 100644 --- a/test/JsonRest.html +++ b/test/JsonRest.html @@ -14,7 +14,7 @@ font-weight: bold; padding-bottom: 0.25em; } - .ui-widget{ + .dgrid { margin: 10px; } diff --git a/test/OnDemand.html b/test/OnDemand.html index a7ab38116..5dbc029e4 100644 --- a/test/OnDemand.html +++ b/test/OnDemand.html @@ -9,7 +9,7 @@ @import "../../dijit/themes/claro/claro.css"; @import "../css/skins/claro.css"; - .ui-widget { + .dgrid { margin: 10px; } diff --git a/test/Selection.html b/test/Selection.html index 09a8d1411..fb8e45b40 100644 --- a/test/Selection.html +++ b/test/Selection.html @@ -13,8 +13,6 @@ } .dgrid { width: 70%; - } - .ui-widget { margin: 10px; } diff --git a/test/complex_column.html b/test/complex_column.html index 91dace61f..4831f7667 100644 --- a/test/complex_column.html +++ b/test/complex_column.html @@ -27,7 +27,7 @@ .grid .field-col4 { width: 500px; } - .ui-widget{ + .dgrid { margin: 10px; } .dgrid-sort-arrow { diff --git a/test/editor_more_widgets.html b/test/editor_more_widgets.html index d57d1d652..129aefa6e 100644 --- a/test/editor_more_widgets.html +++ b/test/editor_more_widgets.html @@ -21,7 +21,7 @@ #grid .field-bool { width: 6em; } - .ui-widget{ + .dgrid { margin: 10px; } diff --git a/test/editor_no_store.html b/test/editor_no_store.html index 3769e6b98..112be888c 100644 --- a/test/editor_no_store.html +++ b/test/editor_no_store.html @@ -21,7 +21,7 @@ #grid .field-bool { width: 6em; } - .ui-widget{ + .dgrid { margin: 10px; } diff --git a/test/editor_widgets.html b/test/editor_widgets.html index f4d981187..234e4171d 100644 --- a/test/editor_widgets.html +++ b/test/editor_widgets.html @@ -21,7 +21,7 @@ #grid .field-bool { width: 6em; } - .ui-widget{ + .dgrid { margin: 10px; } diff --git a/test/extensions/ColumnReorder.html b/test/extensions/ColumnReorder.html index 0c1e635e3..991e0ea46 100644 --- a/test/extensions/ColumnReorder.html +++ b/test/extensions/ColumnReorder.html @@ -12,7 +12,7 @@ font-weight: bold; padding-bottom: 0.25em; } - .ui-widget{ + .dgrid { margin: 10px; } diff --git a/test/extensions/ColumnResizer_complex.html b/test/extensions/ColumnResizer_complex.html index e7dda304f..0beb6378b 100644 --- a/test/extensions/ColumnResizer_complex.html +++ b/test/extensions/ColumnResizer_complex.html @@ -27,7 +27,7 @@ .grid .field-col4 { width: 500px; } - .ui-widget{ + .dgrid { margin: 10px; } diff --git a/test/performance.html b/test/performance.html index 6685c088b..9a6c12d6f 100644 --- a/test/performance.html +++ b/test/performance.html @@ -13,7 +13,7 @@ margin-left: 12px; padding-bottom: 0.25em; } - .ui-widget{ + .dgrid { margin: 10px; } /* this is not part of theme, but you can add odd-even coloring this way*/ diff --git a/test/performance_slow_network.html b/test/performance_slow_network.html index 11fbb9af7..efd59b826 100644 --- a/test/performance_slow_network.html +++ b/test/performance_slow_network.html @@ -13,7 +13,7 @@ margin-left: 12px; padding-bottom: 0.25em; } - .ui-widget{ + .dgrid { margin: 10px; } /* this is not part of theme, but you can add odd-even coloring this way*/ diff --git a/test/simple_grid.html b/test/simple_grid.html index 628389e92..ac22ddac8 100644 --- a/test/simple_grid.html +++ b/test/simple_grid.html @@ -11,7 +11,7 @@ font-weight: bold; padding-bottom: 0.25em; } - .ui-widget{ + .dgrid { margin: 10px; } diff --git a/test/skin.html b/test/skin.html index 388eceec7..e961733ab 100644 --- a/test/skin.html +++ b/test/skin.html @@ -25,15 +25,18 @@ -

A basic grid using the skin

-
+

A basic grid using the skin

(for testing highlight color)
+

Test more skins!

Loading dgrid.css before skin:

Loading dgrid.css after skin:

diff --git a/test/tree.html b/test/tree.html index 61033ecfc..c1025cb89 100644 --- a/test/tree.html +++ b/test/tree.html @@ -9,6 +9,7 @@ @import "../css/skins/claro.css"; .dgrid { width: 700px; + margin: 10px; } .field-bool { @@ -22,10 +23,6 @@ #treeSelector .selector { width: 2em; } - - .ui-widget{ - margin: 10px; - } diff --git a/test/tundra_custom.html b/test/tundra_custom.html index 2dcdf1bbd..cda65918d 100644 --- a/test/tundra_custom.html +++ b/test/tundra_custom.html @@ -14,7 +14,7 @@ font-weight: bold; padding-bottom: 0.25em; } - .ui-widget{ + .dgrid { margin: 10px; } /* this is not part of theme, but you can add odd-even coloring this way*/