You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by jw...@apache.org on 2007/08/21 02:36:09 UTC
svn commit: r567884 - in /myfaces/trinidad/trunk/trinidad: src/site/xdoc/
trinidad-examples/trinidad-demo/src/main/webapp/demos/
trinidad-examples/trinidad-demo/src/main/webapp/skins/purple/
trinidad-impl/src/main/java/org/apache/myfaces/trinidadintern...
Author: jwaldman
Date: Mon Aug 20 17:36:08 2007
New Revision: 567884
URL: http://svn.apache.org/viewvc?rev=567884&view=rev
Log:
https://issues.apache.org/jira/browse/TRINIDAD-635
panelBox skinning keys in purple skin demo are obsolete
cleaned up panelBox's selectors; removed old, unused selectors; updated the skin-selectors doc and updated the purple skin to use the most recent panelBox skin selectors.
add purpleBigFont skin to the list of skins in panelPageSkinDemo.
Modified:
myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml
myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/demos/panelPageSkinDemo.jspx
myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/purple/purpleSkin.css
myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/ui/laf/base/desktop/BaseDesktopConstants.java
myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/resources/META-INF/adf/styles/base-desktop.xss
Modified: myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml?rev=567884&r1=567883&r2=567884&view=diff
==============================================================================
--- myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml (original)
+++ myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml Mon Aug 20 17:36:08 2007
@@ -152,8 +152,7 @@
<td>.AFMediumAccentBackground:alias</td>
<td>A slightly lighter background color in the accent color ramp.
This value is computed relative to the
- .AFDarkAccentBackground:alias color. Used in
- .AFPanelBoxMediumBackground:alias.</td>
+ .AFDarkAccentBackground:alias color.</td>
</tr>
<tr>
<td>.AFLightAccentBackground:alias</td>
@@ -1946,20 +1945,21 @@
</table>
</subsection>
<subsection name="tr:panelBox">
- <p>The panelBox contains two main regions: the body region, which
- contains the panelBox contents, and the header region, which contains
- the panelBox header text (set by the text attribute on tr:panelBox).
- Styles can be applied to the body region via the af|panelBox::body
+ <p>The panelBox contains the body region, which
+ contains the panelBox header which contains
+ the panelBox header text (set by the text attribute on tr:panelBox)
+ and the panelBox contents.
+ Styles can be applied to the body region via the af|panelBox::content
selector. Similarly, styles for the header region are specified via
the af|panelBox::header selector. Both section can be skinned with the
- af|panelBox::content selector</p>
+ af|panelBox::body selector</p>
<p>The content is rendered within a layout container that allow round
edges and such. You can access this container using af|panelBox::top,
af|panelBox::bottom, af|panelBox::start, af|panelBox::end,
af|panelBox::top-start, af|panelBox::top-end, af|panelBox::bottom-start
and af|panelBox::bottom-end. To use round edges, set a background
image on each of the corners and set the width and height of those
- corners to the used image's size. Here're some condition for it to
+ corners to the used image's size. Here're some conditions for it to
work properly:</p>
<ul>
<li>The top edge background image should have the same height as both
@@ -1989,42 +1989,45 @@
</tr>
<tr>
<td>af|panelBox::transparent</td>
- <td>Styles the container of transparent panelBox when there is
- a header.</td>
+ <td>Styles the container of transparent panelBox. This is on the root dom element.
+ It includes .AFPanelBox:alias</td>
</tr>
<tr>
<td>af|panelBox::light</td>
- <td>Styles the container of light panelBox when there is a
- header.</td>
+ <td>Styles the container of light panelBox. This is on the root dom element.
+ It includes .AFPanelBox:alias</td>
</tr>
<tr>
<td>af|panelBox::medium</td>
- <td>Styles the container of the medium panelBox when there is
- a header.</td>
+ <td>Styles the container of the medium panelBox. This is on the root dom element.
+ It includes .AFPanelBox:alias</td>
</tr>
<tr>
<td>af|panelBox::dark</td>
- <td>Styles the container of the dark panelBox when there is a
- header.</td>
- </tr>
- <tr>
- <td>af|panelBox::content</td>
- <td>Styles the content region, that is the central frame of the box,
- including both the header and the body.</td>
+ <td>Styles the container of the dark panelBox. This is on the root dom element.
+ It includes .AFPanelBox:alias</td>
</tr>
<tr>
<td>af|panelBox::body</td>
- <td>Styles the body region. The body region is rendered whether or
- not the panelBox has a header.</td>
+ <td>Styles the body region, that is the central frame of the box,
+ including both the header and the content. To skin the body of a particular
+ background panelBox, you can do use descendent selectors like:
+ af|panelBox::light af|panelBox::body.
+ </td>
</tr>
<tr>
<td>af|panelBox::header</td>
- <td>Styles the header region.</td>
+ <td>Styles the header region within the body when there is a header.</td>
</tr>
<tr>
+ <td>af|panelBox::content</td>
+ <td>Styles the content region within the body.</td>
+ </tr>
+ <tr>
<td>af|panelBox::top-start</td>
<td>Styles the top start corner of the box's container. In LTR this is
- the upper left corner.</td>
+ the upper left corner. For rounded-corners you can set background-image and
+ width and height css properties.</td>
</tr>
<tr>
<td>af|panelBox::top</td>
@@ -2033,7 +2036,8 @@
<tr>
<td>af|panelBox::top-end</td>
<td>Styles the top end corner of the box's container. In LTR this is
- the upper right corner.</td>
+ the upper right corner. . For rounded-corners you can set background-image and
+ width and height css properties.</td>
</tr>
<tr>
<td>af|panelBox::start</td>
@@ -2048,7 +2052,8 @@
<tr>
<td>af|panelBox::bottom-start</td>
<td>Styles the bottom start corner of the box's container. In LTR this is
- the lower left corner.</td>
+ the lower left corner. . For rounded-corners you can set background-image and
+ width and height css properties.</td>
</tr>
<tr>
<td>af|panelBox::bottom</td>
@@ -2057,8 +2062,25 @@
<tr>
<td>af|panelBox::bottom-end</td>
<td>Styles the bottom end corner of the box's container. In LTR this is
- the lower right corner.</td>
+ the lower right corner. . For rounded-corners you can set background-image and
+ width and height css properties.</td>
</tr>
+ <tr>
+ <td>.AFPanelBox:alias</td>
+ <td>Alias style that styles the root dom element of the panelBox for all values of the background
+ attribute. It is
+ included in af|panelBox::transparent, af|panelBox::light, af|panelBox::medium,
+ and af|panelBox::dark. Use this to add styles common to all panelBoxes.</td>
+ </tr>
+ <tr>
+ <td>.AFPanelBoxBody:alias</td>
+ <td>Alias style that styles the af|panelBox::body dom element for all
+ values of the background attribute. It is
+ included in af|panelBox::body, af|panelBox::transparent af|panelBox::body, af|panelBox::light af|panelBox::body, af|panelBox::medium af|panelBox::body,
+ and af|panelBox::dark af|panelBox::body. Use this to add styles common to all 'af|panelBox::body' regardless
+ of the panelBox background attribute.</td>
+ </tr>
+
</table>
</subsection>
<subsection name="tr:panelForm Component">
Modified: myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/demos/panelPageSkinDemo.jspx
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/demos/panelPageSkinDemo.jspx?rev=567884&r1=567883&r2=567884&view=diff
==============================================================================
--- myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/demos/panelPageSkinDemo.jspx (original)
+++ myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/demos/panelPageSkinDemo.jspx Mon Aug 20 17:36:08 2007
@@ -89,6 +89,7 @@
<tr:selectItem label="simple" value="simple"/>
<tr:selectItem label="minimal" value="minimal"/>
<tr:selectItem label="purple" value="purple"/>
+ <tr:selectItem label="purpleBigFont" value="purpleBigFont"/>
<tr:selectItem label="beach" value="beach"/>
</tr:selectOneChoice>
<tr:commandButton text="Go"/>
Modified: myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/purple/purpleSkin.css
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/purple/purpleSkin.css?rev=567884&r1=567883&r2=567884&view=diff
==============================================================================
--- myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/purple/purpleSkin.css (original)
+++ myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/purple/purpleSkin.css Mon Aug 20 17:36:08 2007
@@ -77,11 +77,6 @@
.AFButtonDisabledBottomBackgroundIcon:alias {content:url(/skins/purple/images/btndbb.gif); width:1px; height:2px}
-/** generic background for light panelBox's or shuttles **/
-.AFBoxBackground:alias {background-color:#E3E1E1;}
-
-/** when the panelBox is dark, this is the background color */
-.AFPanelBoxDarkBackground:alias {background-color:green}
/** panelTabbed **/
/** ---------- **/
@@ -301,34 +296,69 @@
/** panelBox **/
/* ------------ */
-af|panelBox::medium-header-start-icon
-{
- content:url(/skins/purple/images/panelBoxStart.gif);
+/* Only skin the panelBox in medium mode. Other modes have their default values. */
+
+/* rounded corners on the top-start and top-end */
+af|panelBox::medium af|panelBox::top-start,
+af|panelBox::medium af|panelBox::top-end:rtl {
+ background-image: url(/skins/purple/images/panelBoxStart.gif);
width:8px;
- height:26px
+ height:8px
}
-af|panelBox::medium-header-end-icon
-{
- content:url(/skins/purple/images/panelBoxEnd.gif);
- width:8px;
- height:26px
+
+af|panelBox::medium af|panelBox::top-end,
+af|panelBox::medium af|panelBox::top-start:rtl {
+ background-image: url(/skins/purple/images/panelBoxEnd.gif);
+ height: 8px;
+ width: 8px;
}
-.AFPanelBoxBody:alias
-{
+af|panelBox::medium af|panelBox::top {
+ background-color: purple;
+}
+
+/* make the bottom have a background color and some padding, no rounded corners */
+af|panelBox::medium af|panelBox::bottom-start,
+af|panelBox::medium af|panelBox::bottom-end,
+af|panelBox::medium af|panelBox::bottom {
+ background-color: purple;
+ padding-top: 8px;
+}
+
+
+af|panelBox::medium af|panelBox::start,
+af|panelBox::medium af|panelBox::end {
+ background-color: pink;
+}
+
+af|panelBox::medium af|panelBox::content {
background-color: #E7E4EA;
border-color: purple;
- border-style:solid;
- border-width:3px;
- margin:2px;
+ border-style: dashed;
+ border-width:1px;
+ padding-right: 6px;
+ padding-left: 6px;
}
-af|panelBox::header
-{
- padding: 3px 3px;
- -tr-rule-ref: selector(".AFMediumFont:alias");
+af|panelBox::medium af|panelBox::header {
+ background-color: Aqua;
+}
+
+/* for all panelBox headers, make the font bold */
+af|panelBox::header {
font-weight: bold;
+ padding: 2px;
}
+
+af|panelBox::medium af|panelBox::body {
+ padding: 6px;
+ background-color: pink;
+}
+/* for all body, if doesn't have medium set, use yellow for the background-color */
+.AFPanelBoxBody:alias {
+ background-color: yellow;
+}
+
/* for panelBox without a header and shuttles */
.AFBoxContentBody:alias
{
@@ -354,6 +384,7 @@
content: url(/skins/purple/images/shuttleOrderUp.png);
width: 16px;
height: 16px;
+ border: 2px black solid;
}
af|selectOrderShuttle::reorder-down-icon {
@@ -841,4 +872,7 @@
-tr-inhibit: background-image;
background-color: red;
/* background-image: none;*/
-}
\ No newline at end of file
+}
+
+.AFFooIcon:alias {content:url(/skins/purple/images/btns.gif); width:7px; height:18px}
+.AFBarIcon {content:url(/skins/purple/images/btns.gif); width:7px; height:18px}
\ No newline at end of file
Modified: myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/ui/laf/base/desktop/BaseDesktopConstants.java
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/ui/laf/base/desktop/BaseDesktopConstants.java?rev=567884&r1=567883&r2=567884&view=diff
==============================================================================
--- myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/ui/laf/base/desktop/BaseDesktopConstants.java (original)
+++ myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/ui/laf/base/desktop/BaseDesktopConstants.java Mon Aug 20 17:36:08 2007
@@ -129,68 +129,11 @@
public static final String AF_MENU_BAR_SEPARATOR_STYLE_CLASS =
"af|menuBar::separator";
- // panelBox style classes
- public static final String AF_PANEL_BOX_TRANSPARENT_STYLE_CLASS =
- "af|panelBox::transparent";
-
- public static final String AF_PANEL_BOX_LIGHT_STYLE_CLASS =
- "af|panelBox::light";
-
- public static final String AF_PANEL_BOX_MEDIUM_STYLE_CLASS =
- "af|panelBox::medium";
-
- public static final String AF_PANEL_BOX_DARK_STYLE_CLASS =
- "af|panelBox::dark";
-
- public static final String AF_PANEL_BOX_HEADER_STYLE_CLASS =
- "af|panelBox::header";
-
- public static final String AF_PANEL_BOX_BODY_STYLE_CLASS =
- "af|panelBox::body";
- public static final String AF_SELECT_MANY_SHUTTLE_PB_BODY_STYLE_CLASS =
- "af|selectManyShuttle::box-body";
- public static final String AF_SELECT_ORDER_SHUTTLE_PB_BODY_STYLE_CLASS =
- "af|selectOrderShuttle::box-body";
-
- public static final String AF_PANEL_BOX_CONTENT_TRANSPARENT_STYLE_CLASS =
- "af|panelBox::content-transparent";
-
- public static final String AF_PANEL_BOX_CONTENT_LIGHT_STYLE_CLASS =
- "af|panelBox::content-light";
public static final String AF_SELECT_MANY_SHUTTLE_PB_CONTENT_STYLE_CLASS =
"af|selectManyShuttle::box-content";
public static final String AF_SELECT_ORDER_SHUTTLE_PB_CONTENT_STYLE_CLASS =
"af|selectOrderShuttle::box-content";
- public static final String AF_PANEL_BOX_CONTENT_MEDIUM_STYLE_CLASS =
- "af|panelBox::content-medium";
-
- public static final String AF_PANEL_BOX_CONTENT_DARK_STYLE_CLASS =
- "af|panelBox::content-dark";
-
- public static final String AF_PANEL_BOX_LIGHT_HEADER_START_ICON_NAME =
- "af|panelBox::light-header-start-icon";
- public static final String AF_PANEL_BOX_LIGHT_HEADER_END_ICON_NAME =
- "af|panelBox::light-header-end-icon";
- public static final String AF_PANEL_BOX_LIGHT_HEADER_BG_ICON_NAME =
- "af|panelBox::light-header-background-icon";
-
- public static final String AF_PANEL_BOX_LIGHT_BOTTOM_START_ICON_NAME =
- "af|panelBox::light-bottom-start-icon";
- public static final String AF_PANEL_BOX_LIGHT_BOTTOM_END_ICON_NAME =
- "af|panelBox::light-bottom-end-icon";
- public static final String AF_PANEL_BOX_LIGHT_BOTTOM_BG_ICON_NAME =
- "af|panelBox::light-bottom-background-icon";
- public static final String AF_PANEL_BOX_LIGHT_TOP_START_ICON_NAME =
- "af|panelBox::light-top-start-icon";
- public static final String AF_PANEL_BOX_LIGHT_TOP_END_ICON_NAME =
- "af|panelBox::light-top-end-icon";
- public static final String AF_PANEL_BOX_LIGHT_TOP_BG_ICON_NAME =
- "af|panelBox::light-top-background-icon";
- public static final String AF_PANEL_BOX_LIGHT_START_BG_ICON_NAME =
- "af|panelBox::light-start-background-icon";
- public static final String AF_PANEL_BOX_LIGHT_END_BG_ICON_NAME =
- "af|panelBox::light-end-background-icon";
public static final String AF_SELECT_MANY_SHUTTLE_BOTTOM_START_ICON_NAME =
"af|selectManyShuttle::bottom-start-icon";
Modified: myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/resources/META-INF/adf/styles/base-desktop.xss
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/resources/META-INF/adf/styles/base-desktop.xss?rev=567884&r1=567883&r2=567884&view=diff
==============================================================================
--- myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/resources/META-INF/adf/styles/base-desktop.xss (original)
+++ myfaces/trinidad/trunk/trinidad/trinidad-impl/src/main/resources/META-INF/adf/styles/base-desktop.xss Mon Aug 20 17:36:08 2007
@@ -1671,22 +1671,38 @@
</style>
<!-- panelBox's body selectors -->
+ <!-- hook to enable styling on all panelBox body regardless of 'type' -->
+ <style name="AFPanelBoxBody">
+ </style>
+
+ <!-- AFBoxBackground: used in AFShuttleBoxBackground and
+ <style selector="af|panelBox::light af|panelBox::body">
+ -->
+ <style name="AFBoxBackground">
+ <includeStyle name="AFLightAccentBackground"/>
+ </style>
+
<style selector="af|panelBox::body">
+ <includeStyle name="AFPanelBoxBody"/>
</style>
<style selector="af|panelBox::transparent af|panelBox::body">
+ <includeStyle name="AFPanelBoxBody"/>
</style>
<style selector="af|panelBox::light af|panelBox::body">
<includeStyle name="AFBoxBackground"/>
+ <includeStyle name="AFPanelBoxBody"/>
</style>
<style selector="af|panelBox::medium af|panelBox::body">
- <includeStyle name="AFPanelBoxMediumBackground"/>
+ <includeStyle name="AFMediumAccentBackground"/>
+ <includeStyle name="AFPanelBoxBody"/>
</style>
<style selector="af|panelBox::dark af|panelBox::body">
- <includeStyle name="AFPanelBoxDarkBackground"/>
+ <includeStyle name="AFDarkAccentBackground"/>
+ <includeStyle name="AFPanelBoxBody"/>
</style>
<!-- panelBox's header selector -->
@@ -1702,52 +1718,15 @@
<style selector="af|panelBox::content">
</style>
- <!-- AFBoxBackground: used in AFShuttleBoxBackground and
- <style selector="af|panelBox::light af|panelBox::body"> and
- <style selector="af|panelBox::content-light af|panelBox::body">
- -->
-
- <style name="AFPanelBoxBody">
- </style>
-
- <style name="AFBoxBackground">
- <includeStyle name="AFLightAccentBackground"/>
- </style>
<style name="AFShuttleBoxBackground">
<includeStyle name="AFBoxBackground"/>
</style>
-
- <style name="AFPanelBoxMediumBackground">
- <includeStyle name="AFMediumAccentBackground"/>
- </style>
-
- <style name="AFPanelBoxDarkBackground">
- <includeStyle name="AFDarkAccentBackground"/>
- </style>
-
-
- <!-- Named style which is included by all of the
- af|panelBox::content[Background] style classes
- and AFShuttleBoxContent-->
- <style name="AFBoxContent">
- <includeStyle name="AFDefaultFont"/>
- </style>
-
+
<style name="AFShuttleBoxContent">
- <includeStyle name="AFBoxContent"/>
+ <includeStyle name="AFDefaultFont"/>
</style>
-
- <!-- These styles are only used by panelBox which
- do not have headers (and shuttle's box)-->
- <style selector="af|panelBox::content-transparent">
- <includeStyle name="AFBoxContent"/>
- </style>
-
- <style selector="af|panelBox::content-light">
- <includeStyle name="AFBoxContent"/>
- </style>
<style selector="af|selectManyShuttle::box-content">
<includeStyle name="AFShuttleBoxContent"/>
@@ -1764,31 +1743,7 @@
<style selector="af|selectOrderShuttle::box-content img">
<property name="vertical-align">bottom</property>
</style>
-
- <style selector="af|panelBox::content-medium">
- <includeStyle name="AFBoxContent"/>
- </style>
-
-
- <style selector="af|panelBox::content-dark">
- <includeStyle name="AFBoxContent"/>
- </style>
-
- <!-- since we render in standards mode, images don't take up the entire
- table cell unless we use vertical-align:bottom.
- We don't publish these obviously, cuz they expose the html -->
- <style selector="af|panelBox::content-transparent img">
- <property name="vertical-align">bottom</property>
- </style>
- <style selector="af|panelBox::content-light img">
- <property name="vertical-align">bottom</property>
- </style>
- <style selector="af|panelBox::content-medium img">
- <property name="vertical-align">bottom</property>
- </style>
- <style selector="af|panelBox::content-dark img">
- <property name="vertical-align">bottom</property>
- </style>
+
<!-- Named style for all panelBox bodies for
panelBox which do not have headers -->
@@ -1800,16 +1755,6 @@
<includeStyle name="AFBoxContentBody"/>
</style>
- <style selector="af|panelBox::content-transparent af|panelBox::body">
- <includeStyle name="AFBoxContentBody"/>
- </style>
-
-
- <style selector="af|panelBox::content-light af|panelBox::body">
- <includeStyle name="AFBoxBackground"/>
- <includeStyle name="AFBoxContentBody"/>
- </style>
-
<style selector="af|selectManyShuttle::box-content af|selectManyShuttle::box-body">
<includeStyle name="AFShuttleBoxBackground"/>
<includeStyle name="AFShuttleBoxContentBody"/>
@@ -1820,18 +1765,7 @@
<includeStyle name="AFShuttleBoxContentBody"/>
</style>
- <style selector="af|panelBox::content-medium af|panelBox::body">
- <includeStyle name="AFPanelBoxMediumBackground"/>
- <includeStyle name="AFBoxContentBody"/>
- </style>
-
-
- <style selector="af|panelBox::content-dark af|panelBox::body">
- <includeStyle name="AFPanelBoxDarkBackground"/>
- <includeStyle name="AFBoxContentBody"/>
- </style>
-
-
+
<!--
Footer Styles
-->