myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jwald...@apache.org
Subject svn commit: r1547128 - in /myfaces/trinidad/trunk: src/site/xdoc/devguide/skinning.xml trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/style/xml/parse/StyleSheetNode.java
Date Mon, 02 Dec 2013 18:08:56 GMT
Author: jwaldman
Date: Mon Dec  2 18:08:56 2013
New Revision: 1547128

URL: http://svn.apache.org/r1547128
Log:
TRINIDAD-2428 rtl styles are getting overriden by non rtl styles
patch by Anand Nath

Modified:
    myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml
    myfaces/trinidad/trunk/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/style/xml/parse/StyleSheetNode.java

Modified: myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml?rev=1547128&r1=1547127&r2=1547128&view=diff
==============================================================================
--- myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml (original)
+++ myfaces/trinidad/trunk/src/site/xdoc/devguide/skinning.xml Mon Dec  2 18:08:56 2013
@@ -68,6 +68,8 @@
               </li>
               <li><a href="#client-side-at-rules">Client side at-rules</a>
               </li>
+              <li><a href="#server-side-pseudo-classes">Server side pseudo classes</a>
+              </li>
             </ul>
           </li>
           <li>
@@ -1176,94 +1178,69 @@ public class SkinTranslationMapDemo
         <strong>@mode</strong> {/skin definitions go here/} - >
         Possible values are quirks or standards. This is to define styles particular only
for browser quirks or standard mode.
         </li>
-        <li>
-        <strong>:rtl</strong> - >  pseudo-class to create a style or icon
definition when the browser 
-        is in a right-to-left language. The best example is that of images that are not symmetric.
-        If you set a skin selector that uses a asymmetrical image, when you set your browser
to
-        the right-to-left reading direction, then you want your image to be flipped. To do
this,
-        you use the :rtl pseudo-class at the end of your selector and point it to a flipped-looking
image.
-        </li>
-        <li>
-        :lang - >  Not yet implemented in Trinidad.         
-        </li>          
         </ul>
           
         <source>
-        /** for ie and gecko on windows, linux and solaris, make the color pink **/
-        @platform windows, linux, solaris
-        {
-          @agent ie, gecko
-          {
-            af|inputText::content {background-color:pink}
-          }
-        }
-        
-        af|someComponent {color: red; width: 10px; padding: 4px}
-        
-        /* for ie, we need to increase the width, so we override the width. 
-        We still want the color and padding; this gets merged in. We want to add height in
IE.  */
-        @agent ie
-        {
-          af|someComponent {width: 25px; height: 10px}
-        }
+/** for ie and gecko on windows, linux and solaris, make the color pink **/
+@platform windows, linux, solaris
+{
+  @agent ie, gecko
+  {
+    af|inputText::content {background-color:pink}
+  }
+}
 
-        /* for ie 5 and 6, we also need some margins.*/
-        @agent ie and (version: 5), ie and (version: 6)
-        {
-          af|someComponent {margin: 5px;}
-        }
-        
-        /* for Firefox 3 (gecko 1.9) use a smaller margin.*/
-        @agent gecko and (version: 1.9)
-        {
-          af|someComponent {margin: 4px;}
-        }
+af|someComponent {color: red; width: 10px; padding: 4px}
 
-        @locale en, de {
-           af|commandButton {
-              color: red;
-           }
-         }
-         @locale ro-RO {
-           af|commandButton {
-             color: blue;
-           }
-         }
-        
-        /* The following selectors are for all platforms and all browsers */
-        
-         /* rounded corners on the top-start and top-end */
-         /* shows how to use :rtl mode pseudo-class. The start image in ltr mode is the same
as the 
-         end image in the right-to-left mode */
-        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:8px
-        }
-        
-        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;
-        }  
-        /* don't use the base skin's background-image */
-        af|navigationPane::tabs-active af|navigationPane::tabs-bottom-start-content {
-          -tr-inhibit: background-image;  
-        }
-        /* this should end up with  .portlet-form-input-field {padding: 8px} */
-        .portlet-form-input-field {
-        /* This should first inhibit all inherited styles. Then everything else
-           should be included.*/
-          -tr-inhibit: all;
-          padding: 8px;
-          /* This should inhibit the background-color that is inherited and/or included,

-          like in .AFLightAccentBackground:alias
-          The order of this does not matter. */
-          -tr-inhibit: background-color;
-          -tr-rule-ref: selector(".AFLightAccentBackground:alias");
-        }        
+/* for ie, we need to increase the width, so we override the width.
+We still want the color and padding; this gets merged in. We want to add height in IE.  */
+@agent ie
+{
+  af|someComponent {width: 25px; height: 10px}
+}
+
+/* for ie 5 and 6, we also need some margins.*/
+@agent ie and (version: 5), ie and (version: 6)
+{
+  af|someComponent {margin: 5px;}
+}
+
+/* for Firefox 3 (gecko 1.9) use a smaller margin.*/
+@agent gecko and (version: 1.9)
+{
+  af|someComponent {margin: 4px;}
+}
+
+@locale en, de {
+   af|commandButton {
+      color: red;
+   }
+ }
+ @locale ro-RO {
+   af|commandButton {
+     color: blue;
+   }
+ }
+
+/* The following selectors are for all platforms and all browsers */
+
+/* don't use the base skin's background-image */
+af|navigationPane::tabs-active af|navigationPane::tabs-bottom-start-content {
+  -tr-inhibit: background-image;
+}
+
+/* this should end up with  .portlet-form-input-field {padding: 8px} */
+.portlet-form-input-field {
+/* This should first inhibit all inherited styles. Then everything else
+   should be included.*/
+  -tr-inhibit: all;
+  padding: 8px;
+  /* This should inhibit the background-color that is inherited and/or included,
+  like in .AFLightAccentBackground:alias
+  The order of this does not matter. */
+  -tr-inhibit: background-color;
+  -tr-rule-ref: selector(".AFLightAccentBackground:alias");
+}
         
         </source>
        </subsection>
@@ -1366,6 +1343,62 @@ af|document {
 }
           </source>
         </subsection>
+        <a name="server-side-pseudo-classes"></a>
+        <subsection name="Server side pseudo classes">
+          <P>
+            Generally, pseudo classes are executed at the client side. CSS supports pseudo
+            classes such as ":hover", ":focus" etc and these pseudo classes are rendered
as is
+            into the CSS generated by skinning framework and gets applied by the browser
+            automatically.
+          </P>
+          <P>
+            There are some special pseudo classes supported by skinning framework, which
are
+            evaluated at the server side. These pseudo classes are not rendered into the
+            generated CSS, but the decision to render the selector is taken at the server
side
+            base on the user agent or application configuration.
+          </P>
+          <ul>
+            <li>
+              <strong>:ltr</strong> - >  pseudo-class to create a style or
icon definition when
+              the browser is in a left-to-right language.
+            </li>
+            <li>
+              <strong>:rtl</strong> - >  pseudo-class to create a style or
icon definition when
+              the browser is in a right-to-left language. The best example is that of images
that
+              are not symmetric. If you set a skin selector that uses a asymmetrical image,
when
+              you set your browser to the right-to-left reading direction, then you want
your
+              image to be flipped. To do this, you use the :rtl pseudo-class at the end of
your
+              selector and point it to a flipped-looking image.
+              <source>
+/* rounded corners on the top-start and top-end */
+/* shows how to use :rtl mode pseudo-class. The start image in ltr mode is the same as the
+end image in the right-to-left mode */
+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:8px
+}
+
+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;
+}
+              </source>
+            </li>
+            <li>
+              :lang - >  Not yet implemented in Trinidad.
+            </li>
+          </ul>
+          <P>
+            <strong>Note about "rtl" and "lrt" pseudo classes</strong>: A selector
which does not
+            use "lrt" or "rtl" pseudo class is applicable to <strong>both</strong>.
A selector
+            with "lrt" or "rtl" pseudo class will override one without it. "lrt" or "rtl"
pseudo
+            class selectors are used to define selectors specific to the direction.
+          </P>
+        </subsection>
       </section>
       <a name="Package_Skin_In_JAR"></a>
       <section name="Package your Skin in a JAR file">

Modified: myfaces/trinidad/trunk/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/style/xml/parse/StyleSheetNode.java
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/style/xml/parse/StyleSheetNode.java?rev=1547128&r1=1547127&r2=1547128&view=diff
==============================================================================
--- myfaces/trinidad/trunk/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/style/xml/parse/StyleSheetNode.java
(original)
+++ myfaces/trinidad/trunk/trinidad-impl/src/main/java/org/apache/myfaces/trinidadinternal/style/xml/parse/StyleSheetNode.java
Mon Dec  2 18:08:56 2013
@@ -194,6 +194,7 @@ public class StyleSheetNode
     int browserAndVersionMatch = _compareBrowserAndVersion(agent);
     if (browserAndVersionMatch == 0)
       return 0;
+
     int modeMatch = _compareMode(mode);
     if(modeMatch == 0)
       return 0;
@@ -206,7 +207,8 @@ public class StyleSheetNode
     if (accessibilityMatch == 0)
       return 0;
 
-    return (localeMatch | browserAndVersionMatch | osMatch | accessibilityMatch);
+    return (localeMatch | directionMatch | browserAndVersionMatch | modeMatch |
+              osMatch | accessibilityMatch);
   }
 
   @Override



Mime
View raw message