You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2017/10/09 09:54:08 UTC
[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
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 <hn...@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 @@
</tc:flexLayout>
</f:facet>
</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="<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} <tc:bar>"/>
<p><code class="language-markup"><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"><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"><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"><tc:style></code> attribute.</p>
- <pre><code class="language-markup"><tc:bar>
- <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"><tc:bar markup="large">
+ <tc:style customClass="navbar-dark"/>
<f:facet name="brand">
<tc:link label="BRAND" link="/"/>
</f:facet>
@@ -52,8 +50,8 @@
</tc:flexLayout>
</f:facet>
</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"><tc:bar>
+ <pre><code class="language-markup"><tc:bar markup="large">
<tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
<f:facet name="brand">
<tc:link label="BRAND" link="/"/>
@@ -84,8 +82,8 @@
// right sided content
</f:facet>
</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"><tc:bar>
- <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"><tc:bar markup="large">
+ <tc:style customClass="navbar-dark bg-dark"/>
...
</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"/>
...
</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"/>
...
</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"/>
...
</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"/>
...
</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"><tc:bar>
- <tc:style customClass="navbar-dark bg-dark bg navbar-expand-sm"/>
...
</tc:bar>
-<tc:bar>
- <tc:style customClass="navbar-light bg-light navbar-expand-md"/>
+<tc:bar markup="small">
+ ...
+</tc:bar>
+<tc:bar markup="medium">
...
</tc:bar>
-<tc:bar>
- <tc:style customClass="navbar-dark bg-danger navbar-expand-lg"/>
+<tc:bar markup="large">
...
</tc:bar>
-<tc:bar>
- <tc:style customClass="navbar-dark bg-primary navbar-expand-xl"/>
+<tc:bar markup="extraLarge">
...
</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" <co...@myfaces.apache.org>'].