myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From hno...@apache.org
Subject [myfaces-tobago] branch master updated: TOBAGO-1814 Create markups for light / dark tc:bar * implement markups 'light' and 'dark' for tc:bar
Date Thu, 12 Oct 2017 13:36:10 GMT
This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/master by this push:
     new b68e2a2  TOBAGO-1814 Create markups for light / dark tc:bar * implement markups 'light'
and 'dark' for tc:bar
b68e2a2 is described below

commit b68e2a2b46c610ada7a29dea6d8efecef1ad42fd
Author: Henning Noeth <hnoeth@apache.org>
AuthorDate: Thu Oct 12 15:36:06 2017 +0200

    TOBAGO-1814 Create markups for light / dark tc:bar
    * implement markups 'light' and 'dark' for tc:bar
---
 .../org/apache/myfaces/tobago/context/Markup.java  |  2 +
 .../internal/renderkit/renderer/BarRenderer.java   | 33 +++++---
 .../tobago/renderkit/css/BootstrapClass.java       |  1 +
 .../50-migration/96-migration/migration40.xhtml    |  3 +-
 .../20-component/050-container/60-bar/bar.xhtml    | 98 +++++++++++-----------
 .../tobago-example-demo/src/main/webapp/menu.xhtml |  4 +-
 6 files changed, 77 insertions(+), 64 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java
index 62c4802..42185ca 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java
@@ -61,6 +61,7 @@ public final class Markup implements Serializable, Iterable<String>
{
   public static final Markup BORDERED = valueOf("bordered");
   public static final Markup CENTER = valueOf("center");
   public static final Markup CLICKABLE = valueOf("clickable");
+  public static final Markup DARK = valueOf("dark");
   public static final Markup DEFAULT = valueOf("default");
   public static final Markup DELETED = valueOf("deleted");
   public static final Markup DESCENDING = valueOf("descending");
@@ -84,6 +85,7 @@ public final class Markup implements Serializable, Iterable<String>
{
   public static final Markup INVERSE = valueOf("inverse");
   public static final Markup LARGE = valueOf("large");
   public static final Markup LEFT = valueOf("left");
+  public static final Markup LIGHT = valueOf("light");
   public static final Markup MARKED = valueOf("marked");
   public static final Markup MEDIUM = valueOf("medium");
   public static final Markup MODAL = valueOf("modal");
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
index 4df02f6..8deae82 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
@@ -60,6 +60,7 @@ public class BarRenderer extends RendererBase {
     writer.writeClassAttribute(
         BootstrapClass.NAVBAR,
         getNavbarExpand(markup),
+        getNavbarColorScheme(markup),
         bar.getCustomClass());
     writer.writeAttribute(HtmlAttributes.ROLE, HtmlRoleValues.NAVIGATION.toString(), false);
     HtmlRendererUtils.writeDataAttributes(facesContext, writer, bar);
@@ -75,21 +76,29 @@ public class BarRenderer extends RendererBase {
   }
 
   private BootstrapClass getNavbarExpand(Markup markup) {
-    if (markup == null) {
-      return BootstrapClass.NAVBAR_EXPAND;
+    if (markup != null) {
+      if (markup.contains(Markup.EXTRA_LARGE)) {
+        return BootstrapClass.NAVBAR_EXPAND_XL;
+      } else if (markup.contains(Markup.LARGE)) {
+        return BootstrapClass.NAVBAR_EXPAND_LG;
+      } else if (markup.contains(Markup.MEDIUM)) {
+        return BootstrapClass.NAVBAR_EXPAND_MD;
+      } else if (markup.contains(Markup.SMALL)) {
+        return BootstrapClass.NAVBAR_EXPAND_SM;
+      }
     }
+    return BootstrapClass.NAVBAR_EXPAND;
+  }
 
-    if (markup.contains(Markup.EXTRA_LARGE)) {
-      return BootstrapClass.NAVBAR_EXPAND_XL;
-    } else if (markup.contains(Markup.LARGE)) {
-      return BootstrapClass.NAVBAR_EXPAND_LG;
-    } else if (markup.contains(Markup.MEDIUM)) {
-      return BootstrapClass.NAVBAR_EXPAND_MD;
-    } else if (markup.contains(Markup.SMALL)) {
-      return BootstrapClass.NAVBAR_EXPAND_SM;
+  private BootstrapClass getNavbarColorScheme(Markup markup) {
+    if (markup != null) {
+      if (markup.contains(Markup.DARK)) {
+        return BootstrapClass.NAVBAR_DARK;
+      } else if (markup.contains(Markup.LIGHT)) {
+        return BootstrapClass.NAVBAR_LIGHT;
+      }
     }
-
-    return BootstrapClass.NAVBAR_EXPAND;
+    return null;
   }
 
   @Override
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
index 5f0abb0..ada9be2 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/BootstrapClass.java
@@ -349,6 +349,7 @@ public enum BootstrapClass implements CssItem {
    */
   @Deprecated
   NAVBAR_INVERSE("navbar-inverse"),
+  NAVBAR_LIGHT("navbar-light"),
   NAVBAR_NAV("navbar-nav"),
   /**
    * @deprecated since 4.0.0, please use {@link #NAVBAR_EXPAND_SM}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
index b11cbc9..49ceb51 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/96-migration/migration40.xhtml
@@ -99,7 +99,8 @@
     &lt;/tc:flexLayout>
   &lt;/f:facet>
 &lt;/tc:bar></code></pre>
-        <p>Also new markups are added to change collapse/expand behavior. For more
information have a look at
+        <p>Also new markups are added to change collapse/expand behavior and color
scheme.
+          For more information have a look at
           <tc:link label="tc:bar" outcome="/content/20-component/050-container/60-bar/bar.xhtml"/></p>
       </tc:section>
       <tc:section label="&lt;tc:segmentLayoutConstraint>">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
index ed555f8..3f04df1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
@@ -34,10 +34,10 @@
   <tc:section label="Example">
     <p>This example show a dark bar with a 'brand' facet, a menu and right sided content
inside an 'after' facet.</p>
     <p>The bar should collapse on large size, so the markup <code>large</code>
is added.</p>
-    <pre><code class="language-markup">&lt;tc:bar markup="large">
-  &lt;tc:style customClass="navbar-dark"/>
+    <pre><code class="language-markup">&lt;tc:bar markup="large, dark">
+  &lt;tc:style customClass="bg-dark"/>
   &lt;f:facet name="brand">
-    &lt;tc:link label="BRAND" link="/"/>
+    &lt;tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
   &lt;/f:facet>
   &lt;tc:links>
     &lt;tc:link label="Link One"/>
@@ -50,8 +50,8 @@
     &lt;/tc:flexLayout>
   &lt;/f:facet>
 &lt;/tc:bar></code></pre>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-dark bg-dark"/>
+    <tc:bar markup="large, dark">
+      <tc:style customClass="bg-dark"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
       </f:facet>
@@ -70,10 +70,10 @@
 
   <tc:section label="Centered Menu Example">
     <p>This example shows how to center content.</p>
-    <pre><code class="language-markup">&lt;tc:bar markup="large">
-  &lt;tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
+    <pre><code class="language-markup">&lt;tc:bar markup="large, dark">
+  &lt;tc:style customClass="bg-dark"/>
   &lt;f:facet name="brand">
-    &lt;tc:link label="BRAND" link="/"/>
+    &lt;tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
   &lt;/f:facet>
   &lt;div class="ml-auto">
     // centered content
@@ -82,8 +82,8 @@
     // right sided content
   &lt;/f:facet>
 &lt;/tc:bar></code></pre>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-dark bg-dark"/>
+    <tc:bar markup="large, dark">
+      <tc:style customClass="bg-dark"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
       </f:facet>
@@ -103,8 +103,8 @@
 
   <tc:section label="Bar with dropdown">
     <p>An example of a dropdown menu with radio entries.</p>
-    <tc:bar>
-      <tc:style customClass="navbar-dark bg-dark"/>
+    <tc:bar markup="dark">
+      <tc:style customClass="bg-dark"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
       </f:facet>
@@ -122,30 +122,30 @@
 
   <tc:section label="Background Color">
     <p>Some examples with different background colors.</p>
-    <p>For dark backgrounds, add the <code class="language-css">navbar-dark</code>
CSS class.<br/>
-      For light background choose <code class="language-css">navbar-light</code>.</p>
-    <pre><code class="language-markup">&lt;tc:bar markup="large">
-  &lt;tc:style customClass="navbar-dark bg-dark"/>
+    <p>For dark backgrounds, add the <code>dark</code> markup value.<br/>
+      For light background choose <code>light</code> markup.</p>
+    <pre><code class="language-markup">&lt;tc:bar markup="large, dark">
+  &lt;tc:style customClass="bg-dark"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="large">
-  &lt;tc:style customClass="navbar-light bg-light"/>
+&lt;tc:bar markup="large, light">
+  &lt;tc:style customClass="bg-light"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="large">
-  &lt;tc:style customClass="navbar-dark bg-danger"/>
+&lt;tc:bar markup="large, dark">
+  &lt;tc:style customClass="bg-danger"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="large">
-  &lt;tc:style customClass="navbar-dark bg-primary"/>
+&lt;tc:bar markup="large, dark">
+  &lt;tc:style customClass="bg-primary"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="large">
-  &lt;tc:style customClass="navbar-light bg-warning"/>
+&lt;tc:bar markup="large, light">
+  &lt;tc:style customClass="bg-warning"/>
   ...
 &lt;/tc:bar></code></pre>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-dark bg-dark"/>
+    <tc:bar markup="large, dark">
+      <tc:style customClass="bg-dark"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -162,8 +162,8 @@
         </tc:flexLayout>
       </f:facet>
     </tc:bar>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-light bg-light"/>
+    <tc:bar markup="large, light">
+      <tc:style customClass="bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -180,8 +180,8 @@
         </tc:flexLayout>
       </f:facet>
     </tc:bar>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-dark bg-danger"/>
+    <tc:bar markup="large, dark">
+      <tc:style customClass="bg-danger"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -198,8 +198,8 @@
         </tc:flexLayout>
       </f:facet>
     </tc:bar>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-dark bg-primary"/>
+    <tc:bar markup="large, dark">
+      <tc:style customClass="bg-primary"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -216,8 +216,8 @@
         </tc:flexLayout>
       </f:facet>
     </tc:bar>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-light bg-warning"/>
+    <tc:bar markup="large, light">
+      <tc:style customClass="bg-warning"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -240,23 +240,23 @@
     <p>Examples for the different expand sizes.<br/>
       Markup values are: <code>small</code>, <code>medium</code>,
<code>large</code>, <code>extraLarge</code></p>
     <p>If no markup is set, the bar never collapse.</p>
-    <pre><code class="language-markup">&lt;tc:bar>
+    <pre><code class="language-markup">&lt;tc:bar markup="light">
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="small">
+&lt;tc:bar markup="small, light">
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="medium">
+&lt;tc:bar markup="medium, light">
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="large">
+&lt;tc:bar markup="large, light">
   ...
 &lt;/tc:bar>
-&lt;tc:bar markup="extraLarge">
+&lt;tc:bar markup="extraLarge, light">
   ...
 &lt;/tc:bar></code></pre>
-    <tc:bar>
-      <tc:style customClass="navbar-light bg-light"/>
+    <tc:bar markup="light">
+      <tc:style customClass="bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -267,8 +267,8 @@
         <tc:link label="Link Two"/>
       </tc:links>
     </tc:bar>
-    <tc:bar markup="small">
-      <tc:style customClass="navbar-light bg-light"/>
+    <tc:bar markup="small, light">
+      <tc:style customClass="bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -279,8 +279,8 @@
         <tc:link label="Link Two"/>
       </tc:links>
     </tc:bar>
-    <tc:bar markup="medium">
-      <tc:style customClass="navbar-light bg-light"/>
+    <tc:bar markup="medium, light">
+      <tc:style customClass="bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -291,8 +291,8 @@
         <tc:link label="Link Two"/>
       </tc:links>
     </tc:bar>
-    <tc:bar markup="large">
-      <tc:style customClass="navbar-light bg-light"/>
+    <tc:bar markup="large, light">
+      <tc:style customClass="bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -303,8 +303,8 @@
         <tc:link label="Link Two"/>
       </tc:links>
     </tc:bar>
-    <tc:bar markup="extraLarge">
-      <tc:style customClass="navbar-light bg-light"/>
+    <tc:bar markup="extraLarge, light">
+      <tc:style customClass="bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml
index d39de73..0f9e46a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/menu.xhtml
@@ -29,8 +29,8 @@
     <tc:image value="image/feather-leaf.png"/>
 -->
 
-    <tc:bar id="bar" markup="togglerLeft">
-      <tc:style customClass="navbar-light bg-light box-shadow navbar-expand-lg"/>
+    <tc:bar id="bar" markup="togglerLeft, light, large">
+      <tc:style customClass="bg-light box-shadow"/>
       <f:facet name="brand">
         <!-- label="Tobago Demo" contains a NO-BREAK SPACE character -->
         <tc:link image="#{request.contextPath}/image/feather-leaf.png" label="Tobago Demo"
id="brand"

-- 
To stop receiving notification emails like this one, please contact
['"commits@myfaces.apache.org" <commits@myfaces.apache.org>'].

Mime
View raw message