Sure, thanks Pavitra for that CSS and markup, it will make it much easier
and faster.
~ Simon
On 8/22/06, Jeanne Waldman <[EMAIL PROTECTED]> wrote:
And of course, when adding styles to base-desktop.xss, try to use the
simplest style definitions possible so a skin can build on it, and use
"includes" for colors where possible so that a person skinning can
change one of the 'alias' color styles and change the entire app's
color-scheme, including the train.
- Jeanne
Pavitra Subramaniam wrote:
>Actually I meant to say
>
>2) :disabled, :active, :unvisited, :visited, :rtl are pseudo-classes that
represent a state and
>3) overflow-next and overflow-prev, stop, join, join-overflow etc are
pseudo elements. As you mentioned all pseudo-elements can support many
states and can be in one or more states at the same time.
>
>I have also attached a sample css that uses the styles referred to by the
HTML below. These need to be defined in the base-desktop.xss file.
>
>
>SAMPLE STYLES FOR TRAIN
>-----------------------
>
>/***********************************
> Train Styles
>***********************************/
>/* for the processTrain */
>.af-train {
> margin-left: auto;
> margin-right: auto;
> font-size:11px;
> font-family:Tahoma;
>}
>
>/***********************************
> Joins
>***********************************/
>
>/* for joins between the overflow icons and the stops */
>.af|train::join-overflow {
> min-width:20px;
> width:100%;
> height:1px;
>}
>/* join (between overflow and stop icons) in disabled state */
>.af|train::join-overflow:disabled {
> background-color: #A6B3C8;
>}
>/* join (between overflow and stop icons) in visited state */
>.af|train::join-overflow:visited {
> background-color: #72007C;
>}
>/* join (between overflow and stop icons) in unvisited state */
>.af|train::join-overflow:unvisited {
> background-color: #3463D3;
>}
>
>/* for joins between stops */
>.af|train::join {
> min-width:20px;
> width:100%;
> height: 1px;
>}
>/* join in visited state */
>.af|train::join:visited {
> background-color: #72007C;
>}
>/* join in unvisited state */
>.af|train::join:unvisited {
> background-color: #3463D3;
>}
>/* join in disabled state */
>.af|train::join:disabled {
> background-color: #A6B3C8;
>}
>
>/***********************************
> Spacers
>***********************************/
>/* spacer used between stops */
>.af|train::stop-spacer {
> height: 1px;
> width: 5px;
>}
>/* stop spacer in visited state */
>.af|train::stop-spacer:visited {
> background-color: #72007C;
>}
>/* stop spacer in unvisited state */
>.af|train::stop-spacer:unvisited {
> background-color: #3463D3;
>}
>/* stop spacer in disabled state */
>.af|train::stop-spacer:disabled {
> background-color: #A6B3C8;
>}
>/* spacer used between parent train and stops */
>.af|train::parent-spacer {
> height: 1px;
> width: 5px;
>}
>/* spacer used for margins in the beginning and end of the train */
>.af|train::margin-end,
>.af|train::margin-start {
> height: 1px;
> width: 1px;
>}
>
>/***************************************
> Icons: Parent Train, stop & Overflow
>***************************************/
>/* block that displays the parent start icon*/
>.af|train::parent-start-icon-block
>{
> text-align:right;
>}
>/* block that displays the parent start icon*/
>.af|train::parent-end-icon-block
>{
> text-align:left;
>}
>/* icon to indicate a parent process in the beginning of a sub train */
>.af|train::parent-start-icon {
> height:13px;
> width:13px;
> content:url(../images/stop-parent.png);
>}
>/* icon to indicate a parent process in the end of a sub train */
>.af|train::parent-end-icon {
> height:13px;
> width:13px;
> content:url(../images/stop-parent-end.png);
>}
>
>/* block that displays the overflow image */
>.af|train::overflow-icon-block {
> position:relative;top:-1px;
>}
>/* overflow start icon in visited state (indicates presence of previous
steps) */
>.af|train::overflow-start-icon:visited
>{
> height:13px;
> width:13px;
> content:url(../images/overflow-start-visited.png);
>}
>/* overflow start icon in disabled state (indicates presence of previous
stops) */
>.af|train::overflow-start-icon:disabled
>{
> height:13px;
> width:13px;
> content:url(../images/overflow-start-disabled.png);
>}
>/* overflow end icon in disabled state (indicates presence of more stops)
*/
>.af|train::overflow-end-icon:disabled
>{
> height:13px;
> width:13px;
> content:url(../images/overflow-end-disabled.png);
>}
>/* overflow end icon in unvisited state (indicates presence of more
stops) */
>.af|train::overflow-end-icon:unvisited
>{
> height:13px;
> width:13px;
> content:url(../images/overflow-end-unvisited.png);
>}
>/* overflow end icon in visited state (indicates presence of visited
stops in the next set) */
>.af|train::overflow-end-icon:visited
>{
> height:13px;
> width:13px;
> content:url(../images/overflow-end-unvisited.png);
>}
>
>/* block that displays a stop icon (active/disabled/visited/unvisited) */
>.af|train::stop-icon-block
>{
>}
>/* stop icon in visited state */
>.af|train::stop-icon:visited {
> height:13px;
> width:13px;
> content:url(../images/stop-visited.png);
>}
>/* stop icon in active state */
>.af|train::stop-icon:active {
> height:13px;
> width:13px;
> content:url(../images/stop-active.png);
>}
>/* stop icon in unvisited state */
>.af|train::stop-icon:unvisited {
> height:13px;
> width:13px;
> content:url(../images/stop-unvisited.png);
>}
>/* stop icon in disabled state */
>.af|train::stop-icon:disabled {
> height:13px;
> width:13px;
> content:url(../images/stop-disabled.png);
>}
>
>/************************************************
> Labels and Links: parentTrain, overflow & stop
>************************************************/
>/*
> content area in the beginning of the train, to display the parent
process
> name
>*/
>.af|train::parent-start-content
>{
> display:block;
> padding-top:2px;
> padding-bottom:2px;
> padding-left:1px;
> padding-right:1px;
> text-align:right;
>}
>/* content area in the end of the train, to display the parent process
name */
>.af|train::parent-end-content
>{
> display:block;
> padding-top:2px;
> padding-bottom:2px;
> padding-left:1px;
> padding-right:1px;
> text-align:left;
>}
>/*
> content area to display the overflow label in the beginning and end of
the
> train
>*/
>.af|train::overflow-start-content,
>.af|train::overflow-end-content
>{
> display:block;
> padding-top:2px;
> padding-bottom:2px;
> padding-left:1px;
> padding-right:1px;
> text-align:center;
>}
>
>/* content area to display the stop name */
>.af|train::stop-content
>{
> padding-left:2px;
> padding-right:2px;
> padding-top:2px;
> padding-bottom:2px;
> text-align:center;
>}
>
>/* content area that displays the name of the stop in visited state */
>.af|train::stop-content:visited
>{
>}
>/* block that displays the name of the stop in disabled state */
>.af|train::stop-content:disabled
>{
> color:#737373;
>}
>/* block that displays the name of the stop in unvisited state */
>.af|train::stop-content:unvisited
>{
>}
>/* block that displays the name of the stop in active state */
>.af|train::stop-content:active
>{
> font-weight:bold;
> color:#000000;
> text-align:center;
> padding-left:5px;
> padding-right:5px;
>}
>
>/* link for a stop */
>.af|train::stop-link
>{
> text-decoration:none;
>}
>
>/* link for an unvisited stop */
>.af|train::stop-link:unvisited
>{
> text-decoration:underline;
> color:#003399;
>}
>/* link for an visited stop */
>.af|train::stop-link:visited
>{
> text-decoration:underline;
> color:#72007C;
>}
>
>/* link for an active stop */
>.af|train::stop-link:active
>{
> color:#000000;
>}
>/* link for an disabled stop */
>.af|train::stop-link:disabled
>{
> color:#737373;
>}
>
>/* link for an overflow in disabled state */
>.af|train::overflow-link:disabled
>{
> text-decoration:none;
> color:#737373;
>}
>/* link for an overflow in visited state */
>.af|train::overflow-link:visited
>{
> text-decoration:underline;
> color:#72007C;
>}
>/* link for an overflow in unvisited state */
>.af|train::overflow-link:unvisited
>{
> text-decoration:underline;
> color:#003399;
>}
>
>
>- Pavitra
>
>-----Original Message-----
>From: Simon Lessard [mailto:[EMAIL PROTECTED]
>Sent: Tuesday, August 22, 2006 11:42 AM
>To: [email protected]; [EMAIL PROTECTED]
>Subject: Re: ADFFACES-60
>
>Note taken, thanks Pavitra.
>
>On 8/22/06, Pavitra Subramaniam <[EMAIL PROTECTED]> wrote:
>
>
>>Hello Simon,
>>
>>Simon, I am delayed in providing a fix on Trinidad. Please go ahead
>>with your solution but I would recommend we use the skin hooks we
>>discussed earlier and agreed on (Email titled: Process Train Skin
Selectors).
>>
>>1) Can we use the word stop instead of station?
>>2) :disabled, :visited, :unvisited, :active are states and not pseudo
>>elements.
>>3) overflow-next and overflow-prev are pseudo elements and should
>>follow the convention - af|train::overflow-next,
>>af|train::overflow-prev. For a full list of pseudo-elements, refer to my
earlier email.
>>4) I have markup that makes use of one stop icon instead of 2 (left
>>and right). I think we should do that and the example I have attached
>>will provide a . Please see example for train HTML markup, below. If
>>you need me to send you a sample CSS file, that uses these skin hooks,
>>please let me know.
>>
>>Thanks
>>Pavitra
>>
>>Sample HTML for train that uses one stop icon
>>---------------------------------------------
>><table cellpadding="0" cellspacing="0" border="0" class="af_train">
>> <tbody>
>> <tr>
>> <!-- MARGIN -->
>> <td rowspan="2"><div
>>class="af|train::margin-start"><span></span></div></td>
>>
>> <!-- PARENT START -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td>
>> <div class="af|train::parent-start-icon-block">
>> <!-- af|train::parent-start-icon -->
>> <img src="images\step_parent.png" alt="Process A:
>>Step A"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td><div
>>class="af|train::parent-spacer"><span></span></div></td>
>>
>> <!-- OVERFLOW START -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af|train::join-overflow"><span></span></div>
>> </td>
>> <td>
>> <div class="af|train::overflow-icon-block">
>> <!-- af|processTrain::overflow-start-visited-icon -->
>> <img src="images\overflow_start_visited.png"
>>alt="Previous Steps"
>> width="7px" height="7px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af|train::join-overflow
>>af|train::join-overflow:visited">
>> <span></span></div></td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td><div class="af|train::step-spacer
>>af|train::step-spacer:visited"><span></span></div></td>
>>
>> <!-- STEP -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af|train::join-overflow
>>af|train::join-overflow:visited">
>> <span></span></div></td>
>> <td>
>> <div class="af_train_step_icon_block">
>> <img src="images\step_visited.png" alt="Visited Step:
>>Step 1"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af_train_join af_train_join_visited">
>> <span></span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <!-- spacer -->
>> <td>
>> <div class="af_train_step_spacer af_train_step_spacer_visited">
>> <span></span>
>> </div>
>> </td>
>>
>> <!-- STEP -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af_train_join af_train_join_visited">
>> <span></span></div></td>
>> <td>
>> <div class="af_train_step_icon_block">
>> <img src="images\step_active.png" alt="Active Step:
>>Step 2"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af_train_join af_train_join_unvisited">
>> <span></span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td>
>> <div class="af_train_step_spacer
af_train_step_spacer_unvisited">
>> <span></span>
>> </div>
>> </td>
>>
>> <!-- STEP -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af_train_join af_train_join_unvisited">
>> <span></span></div></td>
>> <td>
>> <div class="af_train_step_icon_block">
>> <img src="images\step_unvisited.png" alt="Unvisited
>>Step: Step 3"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af_train_join af_train_join_disabled">
>> <span></span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td><div class="af_train_step_spacer
>>af_train_step_spacer_disabled"><span></span></div></td>
>>
>> <!-- STEP -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af_train_join af_train_join_disabled">
>> <span></span></div></td>
>> <td>
>> <div class="af_train_step_icon_block">
>> <img src="images\step_disabled.png" alt="Disabled
Step:
>>Step 4"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af_train_join af_train_join_disabled">
>> <span></span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td>
>> <div class="af_train_step_spacer af_train_step_spacer_disabled">
>> <span></span>
>> </div>
>> </td>
>>
>> <!-- STEP -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af_train_join af_train_join_disabled">
>> <span></span>
>> </div>
>> </td>
>> <td>
>> <div class="af_train_step_icon_block">
>> <img src="images\step_disabled.png" alt="Disabled
Step:
>>Step 5"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af_train_join af_train_join_disabled">
>> <span></span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td>
>> <div class="af_train_step_spacer af_train_step_spacer_disabled">
>> <span></span>
>> </div>
>> </td>
>>
>> <!-- STEP -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af_train_join af_train_join_disabled">
>> <span></span></div></td>
>> <td>
>> <div class="af_train_step_icon_block">
>> <img src="images\step_disabled.png" alt="Disabled
Step:
>>Step 5"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af_train_join_overflow
>>af_train_join_overflow_disabled">
>> <span></span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td>
>> <div class="af_train_step_spacer af_train_step_spacer_disabled">
>> <span></span>
>> </div>
>> </td>
>>
>> <!-- OVERFLOW END -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td width="50%">
>> <div class="af_train_join_overflow
>>af_train_join_overflow_disabled">
>> <span></span></div></td>
>> <td style="width:1px;">
>> <div class="af_train_overflow_icon_block">
>> <img src="images\overflow_end_disabled.png"
>>alt="Next Steps"
>> width="7px" height="7px"/>
>> </div>
>> </td>
>> <td width="50%">
>> <div class="af_train_join_overflow">
>> <span></span>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td><div class="af_train_parent_spacer"><span></span></div></td>
>>
>> <!-- PARENT END -->
>> <td>
>> <table cellpadding="0" cellspacing="0" border="0" width="100%">
>> <tbody>
>> <tr>
>> <td>
>> <div class="af_train_parent_end_icon_block">
>> <img src="images\step_parent_end.png" alt="Process A:
>>Step A"
>> width="13px" height="13px"/>
>> </div>
>> </td>
>> </tr>
>> </tbody>
>> </table>
>> </td>
>>
>> <td rowspan="2"><div
>>class="af_train_margin_end"><span></span></div></td>
>> </tr>
>>
>> <tr>
>> <td>
>> <div class="af_train_parent_start_content"></div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_overflow_start_content">
>> <a href="" class="af_train_overflow_link_visited">Previous</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_step_content
af_train_step_content_visited">
>> <a href="" class="af_train_step_link
>> af_train_step_link_visited">Step 1</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_step_content af_train_step_content_active">
>> <a href="" class="af_train_step_link
>> af_train_step_link_active">StepStepStep 2</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_step_content
>>af_train_step_content_unvisited">
>> <a href="" class="af_train_step_link
>> af_train_step_link_unvisited">Step 3</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_step_content
af_train_step_content_disabled">
>> <a href="" class="af_train_step_link
>> af_train_step_link_disabled">Step 4</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_step_content
af_train_step_content_disabled">
>> <a href="" class="af_train_step_link
>> af_train_step_link_disabled">StepStepStep 5</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_step_content
af_train_step_content_disabled">
>> <a href="" class="af_train_step_link
>> af_train_step_link_disabled">StepStep 6</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_overflow_end_content">
>> <a href="" class="af_train_overflow_link_disabled">More</a>
>> </div>
>> </td>
>> <td></td>
>>
>> <td>
>> <div class="af_train_parent_end_content"></div>
>> </td>
>>
>> </tr>
>> </tbody>
>></table>
>>
>></body>
>></html>
>>
>>
>>
>>- Pavitra
>>
>>-----Original Message-----
>>From: Simon Lessard [mailto:[EMAIL PROTECTED]
>>Sent: Tuesday, August 22, 2006 10:59 AM
>>To: Trinidad - Dev
>>Subject: ADFFACES-60
>>
>>Hello,
>>
>>Anyone know if Pavitra is still working on the processTrain? If not
>>I'll work on that issue and should be done with it tomorrow or so.
>>I'll use the following hooks:
>>
>>af|train
>>af|train::station
>>af|train::station::join
>>af|train::station::link
>>af|train::station::left-icon
>>af|train::station::right-icon
>>
>>The station will accept the following pseudoClass:
>>:active (except on ::station::join since joins can only be visited or
>>not) :disabled :overflow-next (except on ::station::join since joins
>>can only be visited or
>>not)
>>:overflow-prev (except on ::station::join since joins can only be
>>visited or
>>not)
>>:unvisited
>>:visited
>>
>>And hopefully :disabled will be combinable with any of the other
>>pseduClass.
>>
>>There's one thing I dislike though (and I think Jeanne does as well):
>>the ::left-icon and ::right-icon. A single icon per station station
>>would be far more interesting. However, I cannot find a way to
>>generate markup code accepting one and not having a major drawback. So
>>if someone feels inspired I would be glad to see a better solution.
>>
>>Note: I already tried the following solution (extract showing only
>>active station code) <table class="af|train">
>> <tr>
>> <td class="af|train::station:visited::join"> </td>
>> <td class="af|train::station:active" style="width:1em;"><img
>>src="af|train::station:active::station-icon"/></td>
>> <td class="af|train::station:unvisited::join"> </td>
>> </tr>
>> <tr>
>> <td colspan="3" class="af|train::station:active"/>
>> </tr>
>></table>
>>
>>The above code won't work if af|train::station:active specifies a
>>width (Which happen to be very useful if you want equidistant
>>stations)
>>
>>
>>Regards,
>>
>>~ Simon
>>
>>
>>
>>
>>
>
>
>
>
>
