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-1810 Create a markup for expanding tc:bar * implement markups 'small', 'medium', 'large', 'extraLarge' for tc:bar * if no markup is set, CSS class 'navbar-expand' is set (never collapse) * adjust demo
Date Mon, 09 Oct 2017 09:54:08 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 e7b006b  TOBAGO-1810 Create a markup for expanding tc:bar * implement markups 'small',
'medium', 'large', 'extraLarge' for tc:bar * if no markup is set, CSS class 'navbar-expand'
is set (never collapse) * adjust demo
e7b006b is described below

commit e7b006bf4c5d9f91df7aa980eed5009e954445a3
Author: Henning Noeth <hnoeth@apache.org>
AuthorDate: Mon Oct 9 11:53:35 2017 +0200

    TOBAGO-1810 Create a markup for expanding tc:bar
    * implement markups 'small', 'medium', 'large', 'extraLarge' for tc:bar
    * if no markup is set, CSS class 'navbar-expand' is set (never collapse)
    * adjust demo
---
 .../org/apache/myfaces/tobago/context/Markup.java  |   2 +
 .../internal/renderkit/renderer/BarRenderer.java   |  20 ++++
 .../tobago/renderkit/css/BootstrapClass.java       |   4 +
 .../50-migration/96-migration/migration40.xhtml    |   2 +-
 .../20-component/050-container/60-bar/bar.xhtml    | 114 ++++++++++++---------
 5 files changed, 90 insertions(+), 52 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 6a38648..62c4802 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
@@ -68,6 +68,7 @@ public final class Markup implements Serializable, Iterable<String>
{
   public static final Markup ERROR = valueOf("error");
   public static final Markup EVEN = valueOf("even");
   public static final Markup EXPANDED = valueOf("expanded");
+  public static final Markup EXTRA_LARGE = valueOf("extraLarge");
   public static final Markup FILLER = valueOf("filler");
   public static final Markup FATAL = valueOf("fatal");
   /**
@@ -84,6 +85,7 @@ public final class Markup implements Serializable, Iterable<String>
{
   public static final Markup LARGE = valueOf("large");
   public static final Markup LEFT = valueOf("left");
   public static final Markup MARKED = valueOf("marked");
+  public static final Markup MEDIUM = valueOf("medium");
   public static final Markup MODAL = valueOf("modal");
   public static final Markup NUMBER = valueOf("number");
   public static final Markup ODD = valueOf("odd");
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 9b8393f..4df02f6 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
@@ -53,11 +53,13 @@ public class BarRenderer extends RendererBase {
 
     final String clientId = bar.getClientId(facesContext);
     final String navbarId = clientId + "::navbar";
+    final Markup markup = bar.getMarkup();
 
     writer.startElement(HtmlElements.NAV);
     writer.writeIdAttribute(clientId);
     writer.writeClassAttribute(
         BootstrapClass.NAVBAR,
+        getNavbarExpand(markup),
         bar.getCustomClass());
     writer.writeAttribute(HtmlAttributes.ROLE, HtmlRoleValues.NAVIGATION.toString(), false);
     HtmlRendererUtils.writeDataAttributes(facesContext, writer, bar);
@@ -72,6 +74,24 @@ public class BarRenderer extends RendererBase {
         BootstrapClass.ALIGN_ITEMS_CENTER);
   }
 
+  private BootstrapClass getNavbarExpand(Markup markup) {
+    if (markup == null) {
+      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;
+    }
+
+    return BootstrapClass.NAVBAR_EXPAND;
+  }
+
   @Override
   public boolean getRendersChildren() {
     return true;
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 473d809..0524e83 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
@@ -326,7 +326,11 @@ public enum BootstrapClass implements CssItem {
   NAVBAR_COLLAPSE("navbar-collapse"),
   NAVBAR_BRAND("navbar-brand"),
   NAVBAR_DARK("navbar-dark"),
+  NAVBAR_EXPAND("navbar-expand"),
+  NAVBAR_EXPAND_LG("navbar-expand-lg"),
+  NAVBAR_EXPAND_MD("navbar-expand-md"),
   NAVBAR_EXPAND_SM("navbar-expand-sm"),
+  NAVBAR_EXPAND_XL("navbar-expand-xl"),
   /**
    * @deprecated since 4.0.0, please use {@link #FIXED_BOTTOM}
    */
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 f1ed407..b11cbc9 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,7 @@
     &lt;/tc:flexLayout>
   &lt;/f:facet>
 &lt;/tc:bar></code></pre>
-        <p>For more information have a look at
+        <p>Also new markups are added to change collapse/expand behavior. 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 fa93b39..ed555f8 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
@@ -25,19 +25,17 @@
   <ui:param name="title" value="#{demoBundle.bar} &lt;tc:bar>"/>
   <p><code class="language-markup">&lt;tc:bar/></code> is a container
which display elements in one single line
     as long as there is enough space.
-    If space is too narrow, the bar collapse. Hidden items are accessible by clicking on
the bar-icon.
-    This makes <code class="language-markup">&lt;tc:bar/></code> great
for navigation menus.</p>
+    If space is too narrow, the bar collapse. Hidden items are accessible by clicking on
the bar-icon.</p>
   <p>Additionally the facet <code class="language-markup">&lt;f:facet name="brand"/></code>
can be added.
-    It show the 'brand', a logo a text or both on the left site of the bar.</p>
+    It shows the 'brand', a logo, text or both on the left site of the bar.</p>
   <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
            link="#{demoBundle.tagDocUrl}/#{info.stableVersion}/tld/tc/bar.html"/>
 
   <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>You need to set the CSS class <code class="language-css">.navbar-expand{-sm|-md|-lg|-xl}</code>
with the
-      <code class="language-markup">&lt;tc:style></code> attribute.</p>
-    <pre><code class="language-markup">&lt;tc:bar>
-  &lt;tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
+    <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"/>
   &lt;f:facet name="brand">
     &lt;tc:link label="BRAND" link="/"/>
   &lt;/f:facet>
@@ -52,8 +50,8 @@
     &lt;/tc:flexLayout>
   &lt;/f:facet>
 &lt;/tc:bar></code></pre>
-    <tc:bar>
-      <tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-dark bg-dark"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
       </f:facet>
@@ -72,7 +70,7 @@
 
   <tc:section label="Centered Menu Example">
     <p>This example shows how to center content.</p>
-    <pre><code class="language-markup">&lt;tc:bar>
+    <pre><code class="language-markup">&lt;tc:bar markup="large">
   &lt;tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
   &lt;f:facet name="brand">
     &lt;tc:link label="BRAND" link="/"/>
@@ -84,8 +82,8 @@
     // right sided content
   &lt;/f:facet>
 &lt;/tc:bar></code></pre>
-    <tc:bar>
-      <tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-dark bg-dark"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
       </f:facet>
@@ -106,7 +104,7 @@
   <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 navbar-expand-lg"/>
+      <tc:style customClass="navbar-dark bg-dark"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
       </f:facet>
@@ -122,30 +120,32 @@
     </tc:bar>
   </tc:section>
 
-  <tc:section label="Styles">
-    <p>Some examples to style the bar.</p>
-    <pre><code class="language-markup">&lt;tc:bar>
-  &lt;tc:style customClass="navbar-dark bg-dark bg navbar-expand-lg"/>
+  <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"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar>
-  &lt;tc:style customClass="navbar-light bg-light navbar-expand-lg"/>
+&lt;tc:bar markup="large">
+  &lt;tc:style customClass="navbar-light bg-light"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar>
-  &lt;tc:style customClass="navbar-dark bg-danger navbar-expand-lg"/>
+&lt;tc:bar markup="large">
+  &lt;tc:style customClass="navbar-dark bg-danger"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar>
-  &lt;tc:style customClass="navbar-dark bg-primary navbar-expand-lg"/>
+&lt;tc:bar markup="large">
+  &lt;tc:style customClass="navbar-dark bg-primary"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar>
-  &lt;tc:style customClass="navbar-light bg-warning navbar-expand-lg"/>
+&lt;tc:bar markup="large">
+  &lt;tc:style customClass="navbar-light bg-warning"/>
   ...
 &lt;/tc:bar></code></pre>
-    <tc:bar>
-      <tc:style customClass="navbar-dark bg-dark bg navbar-expand-lg"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-dark 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>
-      <tc:style customClass="navbar-light bg-light navbar-expand-lg"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-light 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>
-      <tc:style customClass="navbar-dark bg-danger navbar-expand-lg"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-dark 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>
-      <tc:style customClass="navbar-dark bg-primary navbar-expand-lg"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-dark 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>
-      <tc:style customClass="navbar-light bg-warning navbar-expand-lg"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-light bg-warning"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -237,26 +237,26 @@
   </tc:section>
 
   <tc:section label="Expand Sizes">
-    <p>Examples for the different expand sizes.</p>
-
+    <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>
-  &lt;tc:style customClass="navbar-dark bg-dark bg navbar-expand-sm"/>
   ...
 &lt;/tc:bar>
-&lt;tc:bar>
-  &lt;tc:style customClass="navbar-light bg-light navbar-expand-md"/>
+&lt;tc:bar markup="small">
+  ...
+&lt;/tc:bar>
+&lt;tc:bar markup="medium">
   ...
 &lt;/tc:bar>
-&lt;tc:bar>
-  &lt;tc:style customClass="navbar-dark bg-danger navbar-expand-lg"/>
+&lt;tc:bar markup="large">
   ...
 &lt;/tc:bar>
-&lt;tc:bar>
-  &lt;tc:style customClass="navbar-dark bg-primary navbar-expand-xl"/>
+&lt;tc:bar markup="extraLarge">
   ...
 &lt;/tc:bar></code></pre>
     <tc:bar>
-      <tc:style customClass="navbar-light bg-light navbar-expand-sm"/>
+      <tc:style customClass="navbar-light 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>
-      <tc:style customClass="navbar-light bg-light navbar-expand-md"/>
+    <tc:bar markup="small">
+      <tc:style customClass="navbar-light 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>
-      <tc:style customClass="navbar-light bg-light navbar-expand-lg"/>
+    <tc:bar markup="medium">
+      <tc:style customClass="navbar-light bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>
@@ -291,8 +291,20 @@
         <tc:link label="Link Two"/>
       </tc:links>
     </tc:bar>
-    <tc:bar>
-      <tc:style customClass="navbar-light bg-light navbar-expand-xl"/>
+    <tc:bar markup="large">
+      <tc:style customClass="navbar-light bg-light"/>
+      <f:facet name="brand">
+        <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+          <tc:style customClass="navbar-brand"/>
+        </tc:link>
+      </f:facet>
+      <tc:links>
+        <tc:link label="Link One"/>
+        <tc:link label="Link Two"/>
+      </tc:links>
+    </tc:bar>
+    <tc:bar markup="extraLarge">
+      <tc:style customClass="navbar-light bg-light"/>
       <f:facet name="brand">
         <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
           <tc:style customClass="navbar-brand"/>

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

Mime
View raw message