Author: Alex.Kolonitsky Date: 2010-09-03 04:21:44 -0400 (Fri, 03 Sep 2010) New Revision: 19106 Modified: trunk/examples/output-demo/src/main/webapp/resources/tests/richfaces-accordion-headers-qunit.js trunk/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/samples/simple-sample.xhtml trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractCollapsiblePanel.java trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractTogglePanelTitledItem.java trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionItemRenderer.java trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionRenderer.java trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/CollapsiblePanelRenderer.java trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/TogglePanelItemRenderer.java trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/AccordionItem.js trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/CollapsiblePanelItem.js trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanel.js trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanelItem.js trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/accordion.ecss trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/collapsiblePanel.ecss Log: RF-9299 css: accordion review and updates RF-9298 css: togglePanel review and updates Modified: trunk/examples/output-demo/src/main/webapp/resources/tests/richfaces-accordion-headers-qunit.js =================================================================== --- trunk/examples/output-demo/src/main/webapp/resources/tests/richfaces-accordion-headers-qunit.js 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/examples/output-demo/src/main/webapp/resources/tests/richfaces-accordion-headers-qunit.js 2010-09-03 08:21:44 UTC (rev 19106) @@ -25,6 +25,34 @@ var ACCORDION_ID = "f:panel"; + function testFirst(items) { + ok(items[0].__header("act").is(":visible"), "1 item: active visible"); + ok(!items[0].__header("inact").is(":visible"), "1 item: inactive unvisible"); + ok(!items[0].__header("dis").is(":visible"), "1 item: disabled unvisible"); + + ok(!items[1].__header("act").is(":visible"), "2 item: active visible"); + ok(!items[1].__header("inact").is(":visible"), "2 item: inactive unvisible"); + ok(items[1].__header("dis").is(":visible"), "2 item: disabled unvisible"); + + ok(!items[2].__header("act").is(":visible"), "3 item: active unvisible"); + ok(items[2].__header("inact").is(":visible"), "3 item: inactive visible"); + ok(!items[2].__header("dis").is(":visible"), "3 item: disabled unvisible"); + } + + function testLast(items) { + ok(!items[0].__header("act").is(":visible"), "1 item: active unvisible"); + ok(items[0].__header("inact").is(":visible"), "1 item: inactive visible"); + ok(!items[0].__header("dis").is(":visible"), "1 item: disabled unvisible"); + + ok(!items[1].__header("act").is(":visible"), "2 item: active visible"); + ok(!items[1].__header("inact").is(":visible"), "2 item: inactive unvisible"); + ok(items[1].__header("dis").is(":visible"), "2 item: disabled unvisible"); + + ok(items[2].__header("act").is(":visible"), "3 item: active visible"); + ok(!items[2].__header("inact").is(":visible"), "3 item: inactive unvisible"); + ok(!items[2].__header("dis").is(":visible"), "3 item: disabled unvisible"); + } + test("RichFaces.ui.Accordion change headers", function () { var c = RichFaces.$(ACCORDION_ID); @@ -34,31 +62,38 @@ equals(c.getItems().length, 3, "getItems().length"); var items = c.getItems(); - ok( items[0].__header("active" ).is(":visible"), "1 item: active visible"); - ok(!items[0].__header("inactive").is(":visible"), "1 item: inactive unvisible"); - ok(!items[0].__header("disable" ).is(":visible"), "1 item: disabled unvisible"); + testFirst(items); -// ok(!items[1].__header("active" ).is(":visible"), "2 item: active unvisible"); -// ok(!items[1].__header("inactive").is(":visible"), "2 item: inactive unvisible"); -// ok( items[1].__header("disable" ).is(":visible"), "2 item: disabled visible"); + c.switchToItem(items[2].getName()); + testLast(items); - ok(!items[2].__header("active" ).is(":visible"), "3 item: active unvisible"); - ok( items[2].__header("inactive").is(":visible"), "3 item: inactive visible"); - ok(!items[2].__header("disable" ).is(":visible"), "3 item: disabled unvisible"); + c.switchToItem("@first"); + testFirst(items); - c.switchToItem(items[2].getName()); - ok(!items[0].__header("active" ).is(":visible"), "1 item: active unvisible"); - ok( items[0].__header("inactive").is(":visible"), "1 item: inactive visible"); - ok(!items[0].__header("disable" ).is(":visible"), "1 item: disabled unvisible"); + c.switchToItem("@last"); + testLast(items); -// ok(!items[1].__header("active" ).is(":visible"), "2 item: active unvisible"); -// ok(!items[1].__header("inactive").is(":visible"), "2 item: inactive unvisible"); -// ok( items[1].__header("disable" ).is(":visible"), "2 item: disabled visible"); + c.switchToItem("@prev"); + testFirst(items); - ok( items[2].__header("active" ).is(":visible"), "3 item: active visible"); - ok(!items[2].__header("inactive").is(":visible"), "3 item: inactive unvisible"); - ok(!items[2].__header("disable" ).is(":visible"), "3 item: disabled unvisible"); + c.switchToItem("@next"); + testLast(items); + }); + test("RichFaces.ui.Accordion change disabled headers", function () { + var c = RichFaces.$(ACCORDION_ID); + + ok(c instanceof RichFaces.ui.Accordion, "inctance of RichFaces.ui.Accordion"); + equals(c.id, ACCORDION_ID, "id"); + + equals(c.getItems().length, 3, "getItems().length"); + + var items = c.getItems(); + c.switchToItem(items[0].getName()); + testFirst(items); + + c.switchToItem(items[1].getName()); + testFirst(items); }); }); Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/samples/simple-sample.xhtml =================================================================== --- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/samples/simple-sample.xhtml 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/samples/simple-sample.xhtml 2010-09-03 08:21:44 UTC (rev 19106) @@ -9,7 +9,7 @@ .rf-ac{ width: 500px; } -.rf-aci-c { +.rf-ac-itm-c { height: 220px; } </style> Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml =================================================================== --- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/samples/simple-sample.xhtml 2010-09-03 08:21:44 UTC (rev 19106) @@ -6,7 +6,7 @@ xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <style> -.rf-tgp-i { +.rf-tgp-itm { border: 1px solid #{richSkin.panelBorderColor}; padding:5px; } Modified: trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractCollapsiblePanel.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractCollapsiblePanel.java 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractCollapsiblePanel.java 2010-09-03 08:21:44 UTC (rev 19106) @@ -42,8 +42,18 @@ public static final String COMPONENT_FAMILY = "org.richfaces.CollapsiblePanel"; public enum States { - expanded, - collapsed + expanded("exp"), + collapsed("colps"); + + private final String abbreviation; + + States(String abbreviation) { + this.abbreviation = abbreviation; + } + + public String abbreviation() { + return abbreviation; + } } protected AbstractCollapsiblePanel() { Modified: trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractTogglePanelTitledItem.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractTogglePanelTitledItem.java 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractTogglePanelTitledItem.java 2010-09-03 08:21:44 UTC (rev 19106) @@ -39,9 +39,19 @@ public static final String COMPONENT_FAMILY = "org.richfaces.TogglePanelTitledItem"; public enum HeaderStates { - active, - inactive, - disable + active("act"), + inactive("inact"), + disable("dis"); + + private final String abbreviation; + + HeaderStates(String abbreviation) { + this.abbreviation = abbreviation; + } + + public String abbreviation() { + return abbreviation; + } } protected AbstractTogglePanelTitledItem() { Modified: trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionItemRenderer.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionItemRenderer.java 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionItemRenderer.java 2010-09-03 08:21:44 UTC (rev 19106) @@ -33,6 +33,7 @@ import javax.faces.context.FacesContext; import javax.faces.context.ResponseWriter; import java.io.IOException; +import java.util.Map; import static org.richfaces.component.AbstractTogglePanelTitledItem.HeaderStates; import static org.richfaces.component.html.HtmlAccordionItem.PropertyKeys; @@ -41,13 +42,13 @@ /** * - * <div id="clientId" class="rf-aci"> - * <div id="clientId:header" class="rf-aci-h"> - * <div class="rf-aci-h-inactive">Level 1</div> - * <div class="rf-aci-h-active" >Level 1</div> - * <div class="rf-aci-h-disabled">Level 1</div> + * <div id="clientId" class="rf-ac-itm"> + * <div id="clientId:header" class="rf-ac-itm-hdr"> + * <div class="rf-ac-itm-hdr-inact">Level 1</div> + * <div class="rf-ac-itm-hdr-act" >Level 1</div> + * <div class="rf-ac-itm-hdr-dis">Level 1</div> * </div> - * <div id="clientId:content" class="rf-aci-c"> + * <div id="clientId:content" class="rf-ac-itm-cnt"> * Content will be here. * </div> * </div> @@ -85,7 +86,7 @@ @Override protected String getStyleClass(UIComponent component) { - return concatClasses("rf-aci", attributeAsString(component, "styleClass")); + return concatClasses("rf-ac-itm", attributeAsString(component, "styleClass")); } @Override @@ -98,7 +99,7 @@ @Override protected void writeJavaScript(ResponseWriter writer, FacesContext context, UIComponent component) throws IOException { Object script = getScriptObject(context, component); - if (script == null || ((AbstractTogglePanelTitledItem) component).isDisabled()) { + if (script == null) { return; } @@ -110,7 +111,7 @@ private void encodeContentBegin(UIComponent component, ResponseWriter writer) throws IOException { writer.startElement("div", component); - writer.writeAttribute("class", concatClasses("rf-aci-c", attributeAsString(component, "contentClass")), null); + writer.writeAttribute("class", concatClasses("rf-ac-itm-cnt", attributeAsString(component, "contentClass")), null); writer.writeAttribute("id", component.getClientId() + ":content", null); AbstractTogglePanelTitledItem item = (AbstractTogglePanelTitledItem) component; @@ -126,7 +127,7 @@ private void encodeHeader(FacesContext context, UIComponent component, ResponseWriter writer) throws IOException { writer.startElement("div", component); - writer.writeAttribute("class", concatClasses("rf-aci-h", attributeAsString(component, PropertyKeys.headerClass)), null); + writer.writeAttribute("class", concatClasses("rf-ac-itm-hdr", attributeAsString(component, PropertyKeys.headerClass)), null); writer.writeAttribute("id", component.getClientId() + ":header", null); renderPassThroughAttributes(context, component, HEADER_ATTRIBUTES); @@ -150,7 +151,7 @@ } String name = "headerClass" + capitalize(state.toString()); - writer.writeAttribute("class", concatClasses("rf-aci-h-" + state, attributeAsString(component, name)), null); + writer.writeAttribute("class", concatClasses("rf-ac-itm-hdr-" + state.abbreviation(), attributeAsString(component, name)), null); UIComponent headerFacet = component.getHeaderFacet(state); if (headerFacet != null && headerFacet.isRendered()) { @@ -172,6 +173,14 @@ } @Override + protected Map<String, Object> getScriptObjectOptions(FacesContext context, UIComponent component) { + Map<String, Object> res = super.getScriptObjectOptions(context, component); + res.put("disabled", ((AbstractTogglePanelTitledItem) component).isDisabled()); + + return res; + } + + @Override protected Class<? extends UIComponent> getComponentClass() { return AbstractTogglePanelTitledItem.class; } Modified: trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionRenderer.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionRenderer.java 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/AccordionRenderer.java 2010-09-03 08:21:44 UTC (rev 19106) @@ -68,7 +68,7 @@ @Override protected String getStyleClass(UIComponent component) { - return "rf-ac " + attributeAsString(component, "styleClass"); + return HtmlUtil.concatClasses("rf-ac", attributeAsString(component, "styleClass")); } @Override Modified: trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/CollapsiblePanelRenderer.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/CollapsiblePanelRenderer.java 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/CollapsiblePanelRenderer.java 2010-09-03 08:21:44 UTC (rev 19106) @@ -121,7 +121,7 @@ private void encodeHeader(FacesContext context, UIComponent component, ResponseWriter writer) throws IOException { writer.startElement("div", component); writer.writeAttribute("id", component.getClientId(context) + ":header", null); - writer.writeAttribute("class", concatClasses("rf-cp-hr", attributeAsString(component, "headerClass")), null); + writer.writeAttribute("class", concatClasses("rf-cp-hdr", attributeAsString(component, "headerClass")), null); AbstractCollapsiblePanel panel = (AbstractCollapsiblePanel) component; encodeHeader(context, component, writer, expanded, panel.isExpanded()); @@ -132,7 +132,7 @@ private void encodeHeader(FacesContext context, UIComponent component, ResponseWriter responseWriter, AbstractCollapsiblePanel.States state, boolean isVisible) throws IOException { responseWriter.startElement("div", component); - responseWriter.writeAttribute("class", "rf-cp-hr-" + state, null); + responseWriter.writeAttribute("class", "rf-cp-hdr-" + state.abbreviation(), null); responseWriter.writeAttribute("style", concatStyles(styleElement("display", isVisible ? "" : "none"), attributeAsString(component, "headerClass")), null); UIComponent header = AbstractTogglePanelTitledItem.getHeaderFacet(component, state); Modified: trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/TogglePanelItemRenderer.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/TogglePanelItemRenderer.java 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/TogglePanelItemRenderer.java 2010-09-03 08:21:44 UTC (rev 19106) @@ -54,7 +54,7 @@ @Override protected String getStyleClass(UIComponent component) { - return HtmlUtil.concatClasses("rf-tgp-i", attributeAsString(component, "styleClass")); + return HtmlUtil.concatClasses("rf-tgp-itm", attributeAsString(component, "styleClass")); } @Override Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/AccordionItem.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/AccordionItem.js 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/AccordionItem.js 2010-09-03 08:21:44 UTC (rev 19106) @@ -41,7 +41,9 @@ this.index = options["index"]; this.getTogglePanel().getItems()[this.index] = this; - rf.Event.bindById(this.id + ":header", "click", this.__onHeaderClick, this); + if (!this.disabled) { + rf.Event.bindById(this.id + ":header", "click", this.__onHeaderClick, this); + } if (this.isSelected()) { var item = this; @@ -66,7 +68,7 @@ __header : function (state) { var res = $(rf.getDomElement(this.id + ":header")); if (state) { - return res.find(".rf-aci-h-" + state); + return res.find(".rf-ac-itm-hdr-" + state); } return res; @@ -95,8 +97,8 @@ } this.__content().show(); - this.__header("inactive").hide(); - this.__header("active").show(); + this.__header("inact").hide(); + this.__header("act").show(); return this.__fireEnter(); }, @@ -105,7 +107,7 @@ var h = parentPanel.getInnerHeight(); var items = parentPanel.getItems(); - for (var i = 0; i < items.length; i++) { + for (var i in items) { h -= items[i].__header().outerHeight(); } @@ -132,8 +134,8 @@ } this.__content().hide(); - this.__header("active").hide(); - this.__header("inactive").show(); + this.__header("act").hide(); + this.__header("inact").show(); return true; }, Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/CollapsiblePanelItem.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/CollapsiblePanelItem.js 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/CollapsiblePanelItem.js 2010-09-03 08:21:44 UTC (rev 19106) @@ -51,7 +51,7 @@ __header : function (state) { var res = $(rf.getDomElement(this.togglePanelId + ":header")); if (state) { - return res.find(".rf-cp-hr-" + state); + return res.find(".rf-cp-hdr-" + state); } return res; Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanel.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanel.js 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanel.js 2010-09-03 08:21:44 UTC (rev 19106) @@ -322,7 +322,7 @@ __ITEMS_META_NAMES : (function () { function goFrom (comp, ind, step) { var res = ind; - while (!comp.items[res] && res < comp.items.length && res > 0) { + while ((!comp.items[res] || comp.items[res].disabled) && res < comp.items.length && res > 0) { res += step; } return res; @@ -353,8 +353,8 @@ * */ __getItemIndex : function (itemName) { for (var i in this.items) { - if (this.items[i].getName() === itemName) { - return i; + if (!this.items[i].disabled && this.items[i].getName() === itemName) { + return parseInt(i); } } Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanelItem.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanelItem.js 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/TogglePanelItem.js 2010-09-03 08:21:44 UTC (rev 19106) @@ -38,6 +38,7 @@ this.name = this.options.name; this.togglePanelId = this.options.togglePanelId; this.switchMode = this.options.switchMode; + this.disabled = this.options.disabled || false; }, /***************************** Public Methods *****************************************************************/ Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/accordion.ecss =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/accordion.ecss 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/accordion.ecss 2010-09-03 08:21:44 UTC (rev 19106) @@ -1,5 +1,4 @@ .rf-ac { - /*width: 300px;*/ /*visible width*/ border-width: 1px; border-style: solid; border-color: '#{richSkin.panelBorderColor}'; @@ -7,7 +6,7 @@ background: '#{richSkin.generalBackgroundColor}'; } -.rf-aci-h { +.rf-ac-itm-hdr { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: '#{richSkin.panelBorderColor}'; @@ -24,13 +23,17 @@ cursor: pointer; } -.rf-aci-c { +.rf-ac-itm-hdr-act {} +.rf-ac-itm-hdr-inact {} +.rf-ac-itm-hdr-dis {} + +.rf-ac-itm-cnt { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: '#{richSkin.panelBorderColor}'; - /*height: 100px*/ /*visible modal panel height minus header height*/; position: relative; overflow: auto; overflow-x: hidden; padding: 10px; -} \ No newline at end of file +} + Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/collapsiblePanel.ecss =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/collapsiblePanel.ecss 2010-09-03 05:11:33 UTC (rev 19105) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/collapsiblePanel.ecss 2010-09-03 08:21:44 UTC (rev 19106) @@ -6,7 +6,7 @@ padding:1px; } -.rf-cp-hr{ +.rf-cp-hdr{ background-color:'#{richSkin.headerBackgroundColor}'; border-color:'#{richSkin.headerBackgroundColor}'; font-size:'#{richSkin.headerSizeFont}'; @@ -21,6 +21,9 @@ background-image:"url(#{resource['org.richfaces.renderkit.html.GradientA']})"; } +.rf-cp-hdr-exp {} +.rf-cp-hdr-colps {} + .rf-cp-b{ font-size:'#{richSkin.generalSizeFont}'; color:'#{richSkin.generalTextColor}';