You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2009/11/17 10:50:27 UTC

svn commit: r881219 - in /myfaces/tobago/trunk/theme: charlotteville/src/main/resources/org/apache/myfaces/tobago/renderkit/html/charlotteville/standard/style/ richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/prope...

Author: lofwyr
Date: Tue Nov 17 09:50:27 2009
New Revision: 881219

URL: http://svn.apache.org/viewvc?rev=881219&view=rev
Log:
TOBAGO-606: Simplify box rendering, easy way to have boxes without shadow

Modified:
    myfaces/tobago/trunk/theme/charlotteville/src/main/resources/org/apache/myfaces/tobago/renderkit/html/charlotteville/standard/style/style.css
    myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/property/tobago-theme-config.properties
    myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/style/style.css
    myfaces/tobago/trunk/theme/speyside/src/main/java/org/apache/myfaces/tobago/renderkit/html/speyside/standard/tag/BoxRenderer.java
    myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/property/tobago-theme-config.properties
    myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/style/style.css

Modified: myfaces/tobago/trunk/theme/charlotteville/src/main/resources/org/apache/myfaces/tobago/renderkit/html/charlotteville/standard/style/style.css
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/theme/charlotteville/src/main/resources/org/apache/myfaces/tobago/renderkit/html/charlotteville/standard/style/style.css?rev=881219&r1=881218&r2=881219&view=diff
==============================================================================
--- myfaces/tobago/trunk/theme/charlotteville/src/main/resources/org/apache/myfaces/tobago/renderkit/html/charlotteville/standard/style/style.css (original)
+++ myfaces/tobago/trunk/theme/charlotteville/src/main/resources/org/apache/myfaces/tobago/renderkit/html/charlotteville/standard/style/style.css Tue Nov 17 09:50:27 2009
@@ -19,30 +19,16 @@
 
 .tobago-box-default {
   background: #785A1D;
-  border: 0px solid #FECB66;
+  border: 1px solid #FECB66;
 }
 
 .tobago-box-header {
   background: #FADC9F none;
-  height: 20px;
-  border: 1px solid #FECB66;
-  border-bottom: 0px dotted #FECB66;
-  font: bold 12px arial, helvetica, sans-serif;
   color: #660000;
-  padding-left: 5px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
 }
 
 .tobago-box-content {
-  border: 1px solid #FECB66;
-  border-top: 0px solid #FECB66;
   background-color: #FFEECF;
-  padding: 5px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
 }
 
 /* button ------------------------------------------------------------------ */

Modified: myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/property/tobago-theme-config.properties
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/property/tobago-theme-config.properties?rev=881219&r1=881218&r2=881219&view=diff
==============================================================================
--- myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/property/tobago-theme-config.properties (original)
+++ myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/property/tobago-theme-config.properties Tue Nov 17 09:50:27 2009
@@ -15,6 +15,12 @@
 # limitations under the License.
 #
 
+# deactivates the shadow
+Box.shadow=0
+Box.css.border-left-width=1
+Box.css.border-top-width=1
+Box.css.border-right-width=1
+Box.css.border-bottom-width=1
 
 # padding-top + padding-bottom + border-top + border-bottom
 TabGroup.paddingHeight=28

Modified: myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/style/style.css
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/style/style.css?rev=881219&r1=881218&r2=881219&view=diff
==============================================================================
--- myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/style/style.css (original)
+++ myfaces/tobago/trunk/theme/richmond/src/main/resources/org/apache/myfaces/tobago/renderkit/html/richmond/standard/style/style.css Tue Nov 17 09:50:27 2009
@@ -118,33 +118,20 @@
 
 .tobago-box-default {
   background: #E6E6E6;
-  border: 0px solid #FF9900;
+  border: 1px solid #FF9900;
 }
 
 .tobago-box-header {
   background: #FFCC66 none;
-  height: 20px;
-  border: 1px solid #FF9900;
-  border-bottom: 0px dotted #FF9900;
-  font: bold 12px arial, helvetica, sans-serif;
   color: #3366CC;
-  padding-left: 5px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
 }
 
 .tobago-box-content {
-  border: 1px solid #FF9900;
-  border-top: 0px solid #FF9900;
   background-color: #E6E6E6;
-  padding: 5px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
 }
 
-/* tobago button ------------------------------------------------------------ */
+/* button ------------------------------------------------------------ */
+
 .tobago-button-default  {
   border: 1px #FF7D00 solid;
   background: #FFCC66;
@@ -180,7 +167,7 @@
 }
 
 
-/* tobago label ------------------------------------------------------------ */
+/* label ------------------------------------------------------------ */
 
 div.tobago-label-default  {
   background: #99ccff;
@@ -199,7 +186,7 @@
   background: #e6e6e6;
 }
 
-/* Tab ---------------------------------------------------------------------- */
+/* tab ---------------------------------------------------------------------- */
 .tobago-tab-link {
   font: bold 12px Arial, Helvetica, sans-serif;
   color: #D6EBFF;
@@ -305,7 +292,7 @@
   border: 1px solid #ff0000;
 }
 
-/* Time -------------------------------------------------------------------- */
+/* time -------------------------------------------------------------------- */
 
 .tobago-time-borderDiv {
   border-color: #3366CC;
@@ -319,7 +306,7 @@
   background: #D6EBFF;
 }
 
-/* Toolbar ----------------------------------------------------------------- */
+/* toolbar ----------------------------------------------------------------- */
 .tobago-toolBar-default  {
   height: 20px;
   border: 1px solid #FF9900;
@@ -397,13 +384,13 @@
   padding-left: 5px;
 }
 
-/* Validation ----------------------------------------------------------------- */
+/* validation ----------------------------------------------------------------- */
 .tobago-validation-message {
   color: #ff0000;
   font: 14px arial, helvetica, sans-serif;
 }
 
-/* MenuBar ----------------------------------------------------------------- */
+/* menuBar ----------------------------------------------------------------- */
 .tobago-menuBar-default {
   border: 1px solid #FF9900;
   background: #FFCC66;
@@ -440,7 +427,7 @@
   color: #888888;
 }
 
-/* Sheet ----------------------------------------------------------------- */
+/* sheet ----------------------------------------------------------------- */
 .tobago-sheet-header-div {
   border-bottom: 1px solid #d6ebff;
 

Modified: myfaces/tobago/trunk/theme/speyside/src/main/java/org/apache/myfaces/tobago/renderkit/html/speyside/standard/tag/BoxRenderer.java
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/theme/speyside/src/main/java/org/apache/myfaces/tobago/renderkit/html/speyside/standard/tag/BoxRenderer.java?rev=881219&r1=881218&r2=881219&view=diff
==============================================================================
--- myfaces/tobago/trunk/theme/speyside/src/main/java/org/apache/myfaces/tobago/renderkit/html/speyside/standard/tag/BoxRenderer.java (original)
+++ myfaces/tobago/trunk/theme/speyside/src/main/java/org/apache/myfaces/tobago/renderkit/html/speyside/standard/tag/BoxRenderer.java Tue Nov 17 09:50:27 2009
@@ -19,13 +19,15 @@
 
 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
-import static org.apache.myfaces.tobago.TobagoConstants.SUBCOMPONENT_SEP;
 import org.apache.myfaces.tobago.ajax.api.AjaxRenderer;
 import org.apache.myfaces.tobago.ajax.api.AjaxUtils;
 import org.apache.myfaces.tobago.component.Attributes;
 import org.apache.myfaces.tobago.component.Facets;
 import org.apache.myfaces.tobago.component.UIBox;
 import org.apache.myfaces.tobago.component.UIToolBar;
+import org.apache.myfaces.tobago.config.ThemeConfig;
+import org.apache.myfaces.tobago.layout.Measure;
+import org.apache.myfaces.tobago.layout.PixelMeasure;
 import org.apache.myfaces.tobago.renderkit.BoxRendererBase;
 import org.apache.myfaces.tobago.renderkit.css.Style;
 import org.apache.myfaces.tobago.renderkit.html.HtmlConstants;
@@ -40,6 +42,8 @@
 import java.io.IOException;
 import java.util.Map;
 
+import static org.apache.myfaces.tobago.TobagoConstants.SUBCOMPONENT_SEP;
+
 public class BoxRenderer extends BoxRendererBase implements AjaxRenderer {
 
   private static final Log LOG = LogFactory.getLog(BoxRenderer.class);
@@ -53,17 +57,29 @@
   }
 
   /*
+  
+with shadow
+  
 <div class="tobago-box-default" style="width: 100px; height: 100px">
   <div class="tobago-box-shadow" style="width: 99px; height: 99px">
     <div class="tobago-box-border" style="width: 97px; height: 97px">
-      <div class="tobago-box-header">
-        <span class="tobago-box-header-label">Label</span>
-      </div>
+      <div class="tobago-box-header">Label</div>
     </div>
   </div>
-            <div style="position: absolute; top: 26px; left: 6px; width: 87px; height: 67px; background-color: blue;">
-            Content
-            </div>
+
+  <div style="position: absolute; top: 26px; left: 6px; width: 87px; height: 67px; background-color: blue;">
+    Content
+  </div>
+</div>
+
+without shadow
+
+<div class="tobago-box-default" style="width: 100px; height: 100px">
+  <span class="tobago-box-header">Label</span>
+
+  <div style="position: absolute; top: 26px; left: 6px; width: 87px; height: 67px; background-color: blue;">
+    Content
+  </div>
 </div>
 
    */
@@ -85,65 +101,58 @@
 
   private void encodeBox(FacesContext facesContext, TobagoResponseWriter writer, UIBox box) throws IOException {
 
-    // shadow begin
-    writer.startElement(HtmlConstants.DIV, box);
-
-    StyleClasses classes = new StyleClasses();
-    classes.addClass("box", "shadow");
-    writer.writeClassAttribute(classes);
-
-    Style shadow = new Style();
-    shadow.setWidth(box.getWidth().subtract(1));
-    shadow.setHeight(box.getHeight().subtract(1));
-    writer.writeStyleAttribute(shadow);
-
-    // border begin
-    writer.startElement(HtmlConstants.DIV, box);
-
-    classes = new StyleClasses();
-    classes.addClass("box", "border");
-    writer.writeClassAttribute(classes);
-
-    Style border = new Style();
-    border.setWidth(box.getWidth().subtract(3));
-    border.setHeight(box.getHeight().subtract(3));
-    writer.writeStyleAttribute(border);
-
-    renderBoxHeader(facesContext, writer, box);
-
-    // border end
-    writer.endElement(HtmlConstants.DIV);
-    // shadow end
-    writer.endElement(HtmlConstants.DIV);
-  }
-
-  protected void renderBoxHeader(
-      FacesContext facesContext, TobagoResponseWriter writer, UIBox box) throws IOException {
+    // todo: shadow = 0px means, that shadow is disabled, but it may be better, if we can set a boolean in the config.
+    Measure measure = ThemeConfig.getMeasure(facesContext, box.getRendererType(), "shadow");
+    boolean hasShadow = measure.greaterThan(PixelMeasure.ZERO);
+
+    if (hasShadow) {
+      // shadow begin
+      writer.startElement(HtmlConstants.DIV, box);
+
+      StyleClasses classes = new StyleClasses();
+      classes.addClass("box", "shadow");
+      writer.writeClassAttribute(classes);
+
+      Style shadow = new Style();
+      shadow.setWidth(box.getWidth().subtract(1));
+      shadow.setHeight(box.getHeight().subtract(1));
+      writer.writeStyleAttribute(shadow);
+
+      // border begin
+      writer.startElement(HtmlConstants.DIV, box);
+
+      classes = new StyleClasses();
+      classes.addClass("box", "border");
+      writer.writeClassAttribute(classes);
+
+      Style border = new Style();
+      border.setWidth(box.getWidth().subtract(3));
+      border.setHeight(box.getHeight().subtract(3));
+      writer.writeStyleAttribute(border);
+    }
 
-    writer.startElement(HtmlConstants.DIV, box);
-    StyleClasses headerClasses = new StyleClasses();
-    headerClasses.addClass("box", "header");
-    // XXX should this be done everywhere?
-    headerClasses.addMarkupClass(box, "box", "header");
-    writer.writeClassAttribute(headerClasses);
-    String id = box.getClientId(facesContext) + HEADER;
-    writer.writeIdAttribute(id);
     UIComponent label = box.getFacet(Facets.LABEL);
-    writer.startElement(HtmlConstants.SPAN, null);
-    writer.writeClassAttribute("tobago-box-header-label");
+    writer.startElement(HtmlConstants.DIV, null);
+    writer.writeClassAttribute("tobago-box-header");
     String labelString = (String) box.getAttributes().get(Attributes.LABEL);
     if (label != null) {
       RenderUtil.encode(facesContext, label);
     } else if (labelString != null) {
       writer.writeText(labelString);
     }
-    writer.endElement(HtmlConstants.SPAN);
+    writer.endElement(HtmlConstants.DIV);
 
     UIPanel toolbar = (UIPanel) box.getFacet(Facets.TOOL_BAR);
     if (toolbar != null) {
       renderToolbar(facesContext, writer, toolbar);
     }
-    writer.endElement(HtmlConstants.DIV);
+    
+    if (hasShadow) {
+      // border end
+      writer.endElement(HtmlConstants.DIV);
+      // shadow end
+      writer.endElement(HtmlConstants.DIV);
+    }
   }
 
   @Override

Modified: myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/property/tobago-theme-config.properties
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/property/tobago-theme-config.properties?rev=881219&r1=881218&r2=881219&view=diff
==============================================================================
--- myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/property/tobago-theme-config.properties (original)
+++ myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/property/tobago-theme-config.properties Tue Nov 17 09:50:27 2009
@@ -30,6 +30,7 @@
 Box.topOffset=26
 Box.rightOffset=7
 Box.bottomOffset=7
+Box.shadow=1
 
 Button.preferredHeight=20
 Button.minimalHeight=20

Modified: myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/style/style.css
URL: http://svn.apache.org/viewvc/myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/style/style.css?rev=881219&r1=881218&r2=881219&view=diff
==============================================================================
--- myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/style/style.css (original)
+++ myfaces/tobago/trunk/theme/speyside/src/main/resources/org/apache/myfaces/tobago/renderkit/html/speyside/standard/style/style.css Tue Nov 17 09:50:27 2009
@@ -363,19 +363,13 @@
 
 .tobago-box-header {
   background: #E8E8E8 url(../image/box-header-bg.gif) repeat-x top;
-  height: 19px;
+  height: 16px;
   border-bottom: 1px dotted black;
   font: bold 12px arial, helvetica, sans-serif;
   color: #660000;
-  padding: 0px 0px 0px 5px;
+  padding: 3px 0 0 5px;
   overflow: hidden;
   position: relative;
-}
-
-.tobago-box-header-label {
-  padding-top: 3px;
-  padding-bottom: 2px;
-  float: left;
   white-space: nowrap;
 }