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/16 22:59:11 UTC
svn commit: r566847 - in /myfaces/trinidad/trunk/trinidad:
src/site/xdoc/skin-selectors.xml
trinidad-examples/trinidad-demo/src/main/webapp/skins/beach/beach.css
Author: jwaldman
Date: Thu Aug 16 13:59:10 2007
New Revision: 566847
URL: http://svn.apache.org/viewvc?view=rev&rev=566847
Log:
https://issues.apache.org/jira/browse/TRINIDAD-626
document in skin-selectors navigationPane component skinning keys
Documented navigationPane::tabs* in skin-selectors.xml.
Fixed up beach.css as I learned some more things as I was writing the doc.
Modified:
myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml
myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/beach/beach.css
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?view=diff&rev=566847&r1=566846&r2=566847
==============================================================================
--- myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml (original)
+++ myfaces/trinidad/trunk/trinidad/src/site/xdoc/skin-selectors.xml Thu Aug 16 13:59:10 2007
@@ -1548,7 +1548,31 @@
</table>
</subsection>
<subsection name="tr:navigationPane hint='tabs'">
- <p>Not yet documented.</p>
+ <p>The navigationPane hint="tabs" renders nested tables. The af|navigationPane::tabs is the root dom
+ element style selector. Within the root dom element are tables denoting af|navigationPane::tabs-active
+ and af|navigationPane::tabs-inactive. Within each of these tables are more tables that break the
+ active or inactive tab into skinnable pieces, so you can skin the start 1/3, the middle, or the
+ end 1/3 of the tab, and each of these pieces have a top and a bottom row..
+ There are also hooks for joining an active tab to an inactive tab or
+ an inactive tab to another inactive tab, hooks for the very first tab shown and hooks for the
+ very last tab shown.
+ </p>
+ <p>
+ By default, the tabs use background image. If you need to use background-color instead,
+ use -tr-inhibit: background-image or background-image: none. Remember CSS specificity rules if
+ you find these don't work. If you want to use background-images to get a rounded look, it is easiest to start with the
+ images that are used by default or in the beach skin.
+ </p>
+ <p>
+ For help in skinning the tabs, look at one of the demos: purple skin or beach skin.
+ Also, it will help to view the html and selectors that are rendered when the active tab is the
+ first tab, a middle tab, or an end tab, because the selectors change slightly. Make sure the
+ styleclass compression that is on by default is turned off as this will help your debugging.
+ This is one of the most complicated components to skin. Looking at the examples or at the base
+ skin's css (see generated css file or base-desktop.xss) will help. Also, hopefully this documentation
+ will help.
+
+ </p>
<table>
<tr>
<th colspan="2">
@@ -1558,7 +1582,140 @@
<tr>
<th>Name</th>
<th>Description</th>
- </tr>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs</td>
+ <td>The style root dom element of the tabs. It is unlikely you'll need to use
+ this selector to skin the tabs, unless you want to skin an instance of a tab component
+ using composite selectors, like af|navigationPane::tabs.MyStyleClass</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-active</td>
+ <td>The style on the root of the active tab. Available pseudo-class is :disabled.
+ For example, to change the color of all disabled tabs, you can do this:
+ af|navigationPane::tabs-active:disabled af|navigationPane::tabs-mid,
+ af|navigationPane::tabs-inactive:disabled af|navigationPane::tabs-mid {color: pink} </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-inactive</td>
+ <td>This is the style that is on the root of each inactive tab. Available pseudo-class is :disabled.
+ For example, to change the color of all disabled tabs, you can do this:
+ af|navigationPane::tabs-active:disabled af|navigationPane::tabs-mid,
+ af|navigationPane::tabs-inactive:disabled af|navigationPane::tabs-mid {color: pink}.
+ To color a non-disabled tab's text, you need to do this:
+ af|navigationPane::tabs-active af|navigationPane::tabs-mid A {color: white;} Note the A.
+ The reason is a disabled tab does not render an A element.</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-start</td>
+ <td>This styles the FIRST tab only, not the middle tabs, and not the last tab.
+ This styles the start 1/3 of an active tab that is the FIRST tab.
+ This is typically the part that styles
+ the background-image that shows the start of the tab.
+ For example, if using images, it's the ramp-up image.
+ There is a different selector for hte 'start' piece that isn't the first tab. See
+ ::tabs-start-join-from-inactive and ::tabs-start-join-from-active
+ Examples:
+ af|navigationPane::tabs-active af|navigationPane::tabs-start {background-image: url('darkrampup.gif');}
+ af|navigationPane::tabs-inactive af|navigationPane::tabs-start {background-image: url('lightrampup.gif');}
+ </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-mid</td>
+ <td>This styles the middle/top portion of all tabs.
+ This is typically the part that holds the text of the tab and
+ it usually has a background-image or background-color.
+ </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-end</td>
+ <td>This selector is for the LAST tab in all the tabs and it is the end 1/3 of that last tab.
+ There is a different selector for the 'end' piece of tabs that are not the last tab.
+ The end piece of the tab that comes before an inactive tab
+ has pseudo-element ::tabs-end-join-to-inactive. There is no 'end' piece for an inactive
+ tab that comes before an active tab.
+ </td>
+ </tr>
+
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-start-join</td>
+ <td>This styles a tab when it isn't the first tab and it isn't the last tab.
+ Use like this: af|navigationPane::tabs-active af|navigationPane::tabs-start-join{} to
+ style the start of a selected tab when the previous tab is unselected. By default it contain an image
+ that depicts the end of the unselected tab image (light accent color)
+ and the start of a selected tab (dark color) where the
+ start of the selected tab overlaps in front of the end of the unselected tab.
+ </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-start-join-from-active</td>
+ <td>This styles an inactive tab when it follows an active tab.
+ This is the start 1/3 of a tab that is inactive and follows an active tab.
+ By default, this image is only 14 pixels wide. It's similar to ::tabs-start, but
+ that is for the FIRST tab, and thus that image is probably wider.
+ </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-start-join-from-inactive</td>
+ <td>This styles an inactive tab when it follows an inactive tab.
+ This is the start 1/3 of a tab that is inactive and follows an inactive tab.
+ You can use the same image as what you defined in ::tabs-start-join-from-active
+ </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-end-join-to-inactive</td>
+ <td>This styles last 1/3 of a tab that isn't the LAST tab. By default, this is the
+ end background-image of a tab.
+ Note: there is no ::end-join-to-active selector because an inactive tab that precedes
+ an active tab only has 2 pieces (start and mid). Instead you'd use ::tabs-start-join
+ </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-bottom-start</td>
+ <td>This selector styles the bottom bit of the first 1/3 of a tab that is either
+ the active tab or if it in an inactive tab, it has to be be the first tab.
+ For example, af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-start {}
+ will skin the bottom bit of the first tab if it is inactive. Otherwise, you will see
+ no effect. af|navigationPane::tabs-active af|navigationPane::tabs-bottom-start {}
+ will skin the bottom bit of the first 1/3 of the active tab, regardless of which tab
+ it is.
+ </td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-bottom-start-content</td>
+ <td>This selector is the empty div inside of tabs-bottom-start. The best thing
+ to do is set background-image to none and let the container style take over.</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-bottom-end</td>
+ <td>The bottom portion, start 1/3 a tab as long as it isn't the FIRST tab. If the
+ last tab is inactive, then this key is on BOTH the start 1/3 and the end 1/3.
+ <i>This key name and its usage needs to be cleaned up, since it is obviously confusing.</i>
+ (The start 1/3 of the FIRST tab is af|navigatonPane::tabs-inactive af|navigationPane::tabs-bottom-start.)
+ In the active tab, this is only the last 1/3 on the LAST tab. Otherwise it is nothing.
+ (see ::tabs-bottom-end-join)</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-bottom-end-content</td>
+ <td>This selector is the empty div inside of tabs-bottom-end. The best thing
+ to do is set background-image to none and let the container style take over.</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-bottom-end-join</td>
+ <td>This is the last 1/3 of a tab, the bottom portion, when it is joining another tab.
+ In the active tab, this is the bottom portion, the last 1/3 that isn't the LAST tab.
+ In the inactive tab, this is the bottom portion, the last 1/3
+ when joining to another inactive tab (therefore it can't be the LAST tab).
+ For an inactive tab that is joining an active tab, the active tab's bottom
+ start overlaps, so there is no ::tabs-bottom-end-join selector.</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|navigationPane::tabs-bottom-mid</td>
+ <td>This is the middle 1/3 of a tab, the bottom bit. If you want to style an inactive
+ tab's middle portion differently than an active tab, then you set af|navigatonPane::tabs-inactive
+ before it.</td>
+ </tr>
+
</table>
</subsection>
<subsection name="tr:navigationTree">
Modified: myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/beach/beach.css
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/beach/beach.css?view=diff&rev=566847&r1=566846&r2=566847
==============================================================================
--- myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/beach/beach.css (original)
+++ myfaces/trinidad/trunk/trinidad/trinidad-examples/trinidad-demo/src/main/webapp/skins/beach/beach.css Thu Aug 16 13:59:10 2007
@@ -490,7 +490,7 @@
background-image: url('/skins/beach/images/tabbeach-start-join-selected.gif');
}
-/* NOT THE FIRST TAB AND NOT THE LAST TAB, but one of the tabs in between. */
+/* NOT THE FIRST TAB but the other tabs. */
/* This is the start 1/3 of a tab that is inactive but is coming from an active tab.
This is the same as the start-deselected image, only not as wide. It is only 14 pixels wide. */
af|navigationPane::tabs-inactive af|navigationPane::tabs-start-join-from-active {
@@ -519,7 +519,7 @@
}
/* The bottom bit, start 1/3 of an active tab, regardless of its position (first tab, middle, or last tab) */
-/* ::tabs-bottom-start-content is the div inside of the td which is ::tabls-bottom-start;
+/* ::tabs-bottom-start-content is the div inside of the td which is ::tabs-bottom-start;
so there is nothing to do here except inhibit the background-image */
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-start-content {
/*
@@ -540,26 +540,16 @@
background-color: #9FA57D;
}
-
-/* Bottom bit, start & 1/3 of an selected/active tab (not sure why it is named tabs-bottom-end). */
-/* should be able to use background color. */
-af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end {
- /* background-image: url('/skins/beach/images/tabbeach-bot-mid-selected.gif'); */
- -tr-inhibit: background-image;
- background-color: red;
-}
-
/* ::tabs-bottom-end is the bottom bit, start 1/3 a tab as long as it isn't the FIRST tab.
-(not sure why it is named tabs-bottom-end).
+(not sure why it is named tabs-bottom-end). It's the end for the last tab.
Ok to use background-color instead of background-image */
af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-end {
/* background-image: url('/skins/beach/images/tabbeach-bot-deselected.gif'); */
- -tr-inhibit: background-image;
- background-color: #9FA57D;
+ -tr-inhibit: background-image;
+ background-color: #9FA57D;
}
-
/* END the Tabs Start */
/* GROUP together all the Tabs Mid */
@@ -636,7 +626,7 @@
}
-/* Selected tab that isn't the LAST tab. The bottom bit. Ok to use color and not an image. */
+/* Selected tab that isn't the LAST tab. The bottom bit, last 1/3. Ok to use color and not an image. */
af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end-join {
/*
background-image: url('/skins/beach/images/tabbeach-bot-deselected.gif');
@@ -645,11 +635,15 @@
background-color: #336699;
}
-/* The very LAST tab, when it is selected. The bottom bit. Ok to use color and not an image. */
-af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end-content {
+/* The very LAST tab, when it is selected. The bottom bit, last 1/3. Ok to use color and not an image. */
+af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end {
/* background-image: url('/skins/beach/images/tabbeach-bot-end-selected.gif'); */
-tr-inhibit: background-image;
background-color: #336699;
+}
+/* This is inside tabs-bottom-end, so just inhibit the image */
+af|navigationPane::tabs-active af|navigationPane::tabs-bottom-end-content {
+ -tr-inhibit: background-image;
}