From 682321a1fa49da2642196e130e1337c435c9b1ed Mon Sep 17 00:00:00 2001 From: Marc Englund Date: Thu, 30 Nov 2006 15:23:27 +0000 Subject: itermediate commit; bare-bones impl table, tree etc - actions, sorting, ... svn changeset:125/svn branch:toolkit --- WebContent/themes/default/theme.css | 177 +++++++++++++++++++++++++++++++++++- WebContent/themes/default/theme.js | 74 ++++++++------- 2 files changed, 215 insertions(+), 36 deletions(-) diff --git a/WebContent/themes/default/theme.css b/WebContent/themes/default/theme.css index 69f78368bc..777c819730 100644 --- a/WebContent/themes/default/theme.css +++ b/WebContent/themes/default/theme.css @@ -22,15 +22,18 @@ * { background-color: ThreeDFace; font-family: sans-serif; - Xfont-size: 10pt; + /* font-size: 10pt; */ font-weight: normal; } +.abs { + position: absolute; +} .inline { display: inline; } -.hidden { +.hidden, .hide { display: none; } @@ -127,6 +130,9 @@ IMG.overlay { /* COMPONENTS */ /* Button */ +.button INPUT { + background-color: ThreeDFace; +} .button .border { height: 1.2em; overflow: hidden; @@ -172,11 +178,14 @@ IMG.overlay { padding: 0.2em 0.4em 0.2em 0.4em; } .panel .panelcaption { + border-bottom: 2px groove ThreeDHighlight; +} +.panel-strong .panelcaption { border-bottom: 2px groove ButtonShadow; color: CaptionText; background-color: ActiveCaption; } -.panel .border, .panel-light .border { +.panel .panelborder, .panel-strong .panelborder, .panel-light .panelborder { border: 2px groove ThreeDHighlight; } @@ -189,6 +198,107 @@ IMG.overlay { margin-top: 0.3em; } +/* Table */ + +.table .tablestatus { + position: absolute; + padding: 0.2em 0.4em 0.1em 0.4em; + border: 1px solid InfoText; + background-color: InfoBackground; +} + +.table .colsel { + margin: 0.25em ; + width: 0.4em; + height: 0.4em; + border: 1px solid ButtonText; + border-top: 2px solid ButtonText; + cursor: hand; + cursor: pointer; +} +.table .popup { + position: absolute; + +} +.table { + border: 1px solid; + border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; +} +.table .cout, .table .cin { + background-color: Window; +} +.table .tablecaption { + border: 1px solid; + border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; + padding: 0.0em 0.4em 0.1em 0.4em; +} + +.table .hout { + height: 1em; + overflow: hidden; + padding-bottom: 0.2em; + border-bottom: 1px solid ButtonShadow; +} +.table .hin .hah { + border-right: 1px solid ButtonShadow; + padding-left: 0.2em; +} +.table .hin .hah IMG, .table .hin .tableheader IMG { + height: 1em; + width: 2px; + cursor:w-resize; +} +.table .hin .tableheader IMG.sort { + Xposition: absolute; + Xmargin-top: 0.5em; + Xmargin-left: 2px; + width: 9px; + height: 5px; + background-repeat: no-repeat; +} +.table .hin .tableheader IMG.sortasc { + background-image: url('img/table/asc.gif'); +} +.table .hin .tableheader IMG.sortdesc { + background-image: url('img/table/desc.gif'); +} +.table .hin .tableheader { + border-left: 1px solid ButtonHighlight; + border-right: 1px solid ButtonShadow; + padding-left: 0.2em; +} +.table TABLE { + border-collapse: collapse; + empty-cells: show; +} +.table .cin .tableheader { + padding-left: 0.2em; +} +.table .cin .tablecell { + padding-left: 0.2em; +} + +.table .selected TD DIV { + background-color: Highlight; + color: HighlightText; +} +.table .selected TD { + background-color: Highlight; + color: HighlightText; + border-left: 1px solid Highlight; +} +.table .even TD DIV { + border-left: 1px solid Window; + background-color: Window; +} +.table .odd TD DIV { + border-left: 1px solid ButtonFace; + background-color: ButtonFace; +} + + + + /* TabSheet */ .tabsheet .tabs { margin-top: 0.5em; @@ -211,7 +321,6 @@ IMG.overlay { border-bottom: 1px solid ThreeDFace; } - /* TextField */ .textfield { margin-top: 0.05em; @@ -223,3 +332,63 @@ IMG.overlay { font-size: 1em; padding: 0.12em 0.4em 0.12em 0.4em; } + +/* Tree */ +.tree { + border: 1px solid; + border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; +} +.tree .caption { + border: 1px solid; + border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; + padding: 0.0em 0.4em 0.1em 0.4em; +} +.tree .content, .tree .content .node, .tree .content .nodes, .tree .content .node IMG { + background-color: Window; +} +.tree .node { + border: none; + padding: 0.1em 0.4em 0.2em 0em; +} + +.tree .nodes { + padding-left: 1em; +} +.tree .over { + text-decoration: underline; + color: Highlight; +} +.tree .content DIV.selected, .tree .content .selected IMG { + background-color: Highlight; + color: HighlightText; + font-weight: normal; +} + +/* ACTIONS */ + +.actions { + position: absolute; + border: 1px solid; + border-color: ButtonShadow ButtonText ButtonText ButtonShadow; +} +.actions .border { + background-color: ButtonFace; + border: 1px solid; + border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; + +} +.actions .item { + padding: 0.2em 1em 0.2em 1em; + color: ButtonText; + white-space: nowrap; +} +.actions .over { + border: none; + text-decoration: none; + color: HighlightText; + background-color: Highlight; +} +.table .actions .over { + background-color: Highlight; +} + diff --git a/WebContent/themes/default/theme.js b/WebContent/themes/default/theme.js index 7d1508f5b2..0b3be29169 100644 --- a/WebContent/themes/default/theme.js +++ b/WebContent/themes/default/theme.js @@ -659,7 +659,7 @@ DefaultTheme.prototype.renderActionPopup = function(renderer, uidl, to, actions, var len = ak.length; if (len < 1) return; - var popup = theme.createElementTo((to.nodeName=="TR"?to.firstChild:to),"div", "popup outset hide"); + var popup = theme.createElementTo((to.nodeName=="TR"?to.firstChild:to),"div", "actions outset hide"); theme.addHidePopupListener(theme,client,popup,"click"); theme.addStopListener(theme,client,popup,"click"); @@ -670,7 +670,6 @@ DefaultTheme.prototype.renderActionPopup = function(renderer, uidl, to, actions, var key = theme.getFirstTextNode(ak[k]).data; var item = theme.createElementTo(inner,"div", "item pad clickable"); theme.createTextNodeTo(item,actions[key]); - item.style.color = "black"; theme.addAddClassListener(theme,client,item,"mouseover","over"); theme.addRemoveClassListener(theme,client,item,"mouseout","over"); theme.addSetVarListener(theme,client,item,"click",actionVar,id+","+key,true); @@ -710,11 +709,11 @@ DefaultTheme.prototype.renderDescriptionPopup = function (renderer,uidl,target) icon.src = iconUrl; } td = this.createElementTo(tr,"td"); - var caption = this.createElementTo(td,"div","caption"); + var caption = this.createElementTo(td,"div","popupcaption"); this.createTextNodeTo(caption,captionText); if (desc) { - var description = this.createElementTo(td,"div","content"); + var description = this.createElementTo(td,"div","popupcontent"); description.innerHTML = renderer.client.getXMLtext(desc); description.style.whiteSpace ="normal"; } @@ -1339,7 +1338,7 @@ DefaultTheme.prototype.renderPanel = function(renderer,uidl,target,layoutInfo) { var style = uidl.getAttribute("style"); - var borderStyle = "border"; + var borderStyle = "panelborder"; // Create component element var outer = theme.createPaintableElement(renderer,uidl,target,layoutInfo); @@ -1510,7 +1509,7 @@ DefaultTheme.prototype.renderTreeNode = function(renderer,node,target,selectable } // Caption - var cap = theme.createElementTo(n,"div","caption inline"); + var cap = theme.createElementTo(n,"div","nodecaption inline"); theme.createTextNodeTo(n,node.getAttribute("caption")); // Hover effects @@ -1582,7 +1581,7 @@ DefaultTheme.prototype.renderTreeNode = function(renderer,node,target,selectable } } else { - img.src = theme.root + "img/tree/empty.gif"; + img.src = theme.root + "img/tree/empty.gif"; } } @@ -2665,6 +2664,8 @@ DefaultTheme.prototype.renderScrollTable = function(renderer,uidl,target,layoutI // Create default header var caption = theme.renderDefaultComponentHeader(renderer,uidl,div,layoutInfo); + theme.addCSSClass(caption,"tablecaption"); + // column collapsing // main div @@ -2692,11 +2693,11 @@ DefaultTheme.prototype.renderScrollTable = function(renderer,uidl,target,layoutI } delete alNode; - inner.innerHTML = "
"; + inner.innerHTML = "
"; //inner.style.width = wholeWidth+"px"; var vcols = inner.childNodes[1].firstChild.firstChild.childNodes[1]; if (visiblecols) { - vcols.innerHTML = ""; + vcols.innerHTML = "
"; var icon = vcols.firstChild; vcols.id = pid+"vcols"; var popup = theme.createElementTo(div,"div","border popup hide"); @@ -2729,17 +2730,18 @@ DefaultTheme.prototype.renderScrollTable = function(renderer,uidl,target,layoutI hout.style.paddingRight = "0px"; hout.id = pid+"hout"; hout.style.overflow = "hidden"; - var html = "
"; + theme.addCSSClass(hout,"hout"); + var html = "
"; if (rowheaders) { html += ""; + html += "overflow:hidden;height:100%;white-space:nowrap;\">"; } var chs = theme.getFirstElement(uidl, "cols").getElementsByTagName("ch"); var len = chs.length; @@ -2758,12 +2760,12 @@ DefaultTheme.prototype.renderScrollTable = function(renderer,uidl,target,layoutI html += ""; + } + html += "overflow:hidden;height:100%;white-space:nowrap;\">"; + html += (iconUrl?"":"")+cap+(sortkey==cid?"":"")+""; } html += "
" - html += "
"; - html += (iconUrl?"":"")+cap+"
"; hout.innerHTML = html; @@ -2795,13 +2797,14 @@ DefaultTheme.prototype.renderScrollTable = function(renderer,uidl,target,layoutI cout.style.width = wholeWidth+"px"; cout.style.height = (18*rows)+"px"; cout.id = pid+"cout"; + theme.addCSSClass(cout,"cout"); cout.style.overflow = "scroll"; - html = ""; + html = "
"; var trs = theme.getFirstElement(uidl, "rows").getElementsByTagName("tr"); len = trs.length; if (len==0) { html += ""; + html += "
"; } for (var i=0;i
"; + html += "
"; } var colNum = -1; @@ -2849,7 +2854,12 @@ DefaultTheme.prototype.renderScrollTable = function(renderer,uidl,target,layoutI html += ""; + html += ">"; } html += ""; } @@ -3101,6 +3107,7 @@ DefaultTheme.prototype.scrollTableRecalc = function(pid,target) { var cin = target.ownerDocument.getElementById(pid+"cin"); var h = hin.getElementsByTagName("td"); var c = cin.getElementsByTagName("td"); + var whole = 0; var col = -1; for (var i = 0;i1?colWidths[h[i].getAttribute("cid")]:hout.clientWidth-20); var w1 = h[i].firstChild.clientWidth + defPad; var w2 = (c[col]?c[col].firstChild.clientWidth + defPad:0); - - var w = parseInt((cw?cw:(w1>w2?w1:w2))); + + var w = parseInt((cw?cw:(w1>w2?w1:w2))); + h[i].width = w; h[i].style.width = w+"px"; h[i].firstChild.style.width = w+"px"; var rows = c.length/h.length; for (var j=0;j
"; - html += "