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 2018/01/26 18:00:26 UTC
[myfaces-tobago] 01/02: TOBAGO-1845 Change style of
to Bootstrap 4.0.0 (final) * change to bootstrap 4.0.0 style of
card-navigation * better style if bar-facet is used * fix: submit of
tab-link after clicking only on a button in bar-facet
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
commit dd3d35d0c756bc7e61af13ea2c6361eece031260
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Jan 26 18:54:43 2018 +0100
TOBAGO-1845 Change style of <tc:tabGroup> to Bootstrap 4.0.0 (final)
* change to bootstrap 4.0.0 style of card-navigation
* better style if bar-facet is used
* fix: submit of tab-link after clicking only on a button in bar-facet
---
.../renderkit/renderer/TabGroupRenderer.java | 33 +++++++----
.../tobago/renderkit/css/BootstrapClass.java | 1 +
.../myfaces/tobago/renderkit/css/TobagoClass.java | 1 +
tobago-core/src/main/resources/scss/_tobago.scss | 47 +++++++++++-----
.../webapp/content/20-component/070-tab/tab.xhtml | 26 ++++-----
.../src/main/scss/_speyside-classes.scss | 4 +-
.../src/main/scss/_speyside-overwrites.scss | 65 +++++++++++++++++++---
7 files changed, 130 insertions(+), 47 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java
index 060be7b..b2cbcba 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java
@@ -152,6 +152,7 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
writer.writeClassAttribute(
TobagoClass.TAB_GROUP,
TobagoClass.TAB_GROUP.createMarkup(markup),
+ BootstrapClass.CARD,
tabGroup.getCustomClass());
HtmlRendererUtils.writeDataAttributes(facesContext, writer, tabGroup);
writer.writeAttribute(HtmlAttributes.SWITCHTYPE, switchType.name(), false);
@@ -213,8 +214,14 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
final int activeIndex, final SwitchType switchType)
throws IOException {
+ writer.startElement(HtmlElements.DIV);
+ writer.writeClassAttribute(BootstrapClass.CARD_HEADER);
writer.startElement(HtmlElements.UL);
- writer.writeClassAttribute(TobagoClass.TAB_GROUP__HEADER, BootstrapClass.NAV, BootstrapClass.NAV_TABS);
+ writer.writeClassAttribute(
+ TobagoClass.TAB_GROUP__HEADER,
+ BootstrapClass.NAV,
+ BootstrapClass.NAV_TABS,
+ BootstrapClass.CARD_HEADER_TABS);
writer.writeAttribute(HtmlAttributes.ROLE, HtmlRoleValues.TABLIST.toString(), false);
final CommandMap tabGroupMap = RenderUtils.getBehaviorCommands(facesContext, tabGroup);
@@ -225,6 +232,7 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
if (tab.isRendered()) {
final LabelWithAccessKey label = new LabelWithAccessKey(tab);
final UIComponent labelFacet = ComponentUtils.getFacet(tab, Facets.label);
+ final UIComponent barFacet = ComponentUtils.getFacet(tab, Facets.bar);
final boolean disabled = tab.isDisabled();
final String tabId = tab.getClientId(facesContext);
Markup markup = tab.getMarkup() != null ? tab.getMarkup() : Markup.NULL;
@@ -245,6 +253,7 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
TobagoClass.TAB,
TobagoClass.TAB.createMarkup(markup),
BootstrapClass.NAV_ITEM,
+ barFacet != null ? TobagoClass.TAB__BAR_FACET : null,
tab.getCustomClass());
writer.writeAttribute(HtmlAttributes.ROLE, HtmlRoleValues.PRESENTATION.toString(), false);
writer.writeAttribute(HtmlAttributes.TABGROUPINDEX, index);
@@ -253,12 +262,6 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
writer.writeAttribute(HtmlAttributes.TITLE, title, true);
}
- if (!disabled) {
- final CommandMap map = RenderUtils.getBehaviorCommands(facesContext, tab);
- CommandMap.merge(map, tabGroupMap);
- writer.writeAttribute(DataAttributes.COMMANDS, JsonUtils.encode(map), false);
- }
-
writer.startElement(HtmlElements.A);
if (!tab.isDisabled()) {
writer.writeAttribute(DataAttributes.TOGGLE, "tab", false);
@@ -276,6 +279,12 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
DataAttributes.TARGET, '#' + getTabPanelId(facesContext, tab).replaceAll(":", "\\\\:"), false);
}
+ if (!disabled) {
+ final CommandMap map = RenderUtils.getBehaviorCommands(facesContext, tab);
+ CommandMap.merge(map, tabGroupMap);
+ writer.writeAttribute(DataAttributes.COMMANDS, JsonUtils.encode(map), false);
+ }
+
if (!disabled && label.getAccessKey() != null) {
writer.writeAttribute(HtmlAttributes.ACCESSKEY, Character.toString(label.getAccessKey()), false);
AccessKeyLogger.addAccessKey(facesContext, label.getAccessKey(), tabId);
@@ -305,9 +314,10 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
}
writer.endElement(HtmlElements.A);
- final UIComponent bar = ComponentUtils.getFacet(tab, Facets.bar);
- if (bar != null) {
- bar.encodeAll(facesContext);
+ if (barFacet != null) {
+ writer.startElement(HtmlElements.DIV);
+ barFacet.encodeAll(facesContext);
+ writer.endElement(HtmlElements.DIV);
}
writer.endElement(HtmlElements.LI);
@@ -316,13 +326,14 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
}
}
writer.endElement(HtmlElements.UL);
+ writer.endElement(HtmlElements.DIV);
}
protected void encodeContent(
final FacesContext facesContext, final TobagoResponseWriter writer, final UITabGroup tabGroup,
final int activeIndex, final SwitchType switchType) throws IOException {
writer.startElement(HtmlElements.DIV);
- writer.writeClassAttribute(BootstrapClass.TAB_CONTENT);
+ writer.writeClassAttribute(BootstrapClass.CARD_BODY, BootstrapClass.TAB_CONTENT);
int index = 0;
for (final UIComponent tab : tabGroup.getChildren()) {
if (tab instanceof UITab) {
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 7e977f8..afd6ada 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
@@ -94,6 +94,7 @@ public enum BootstrapClass implements CssItem {
CARD_BLOCK("card-body"),
CARD_BODY("card-body"),
CARD_HEADER("card-header"),
+ CARD_HEADER_TABS("card-header-tabs"),
CARD_TITLE("card-title"),
CLOSE("close"),
COLLAPSE("collapse"),
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index bf235aa..23bb69d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -203,6 +203,7 @@ public enum TobagoClass implements CssItem {
SPLIT_LAYOUT__VERTICAL("tobago-splitLayout-vertical"),
SUGGEST("tobago-suggest"),
TAB("tobago-tab"),
+ TAB__BAR_FACET("tobago-tab-barFacet"),
TAB__CONTENT("tobago-tab-content"),
TAB_GROUP("tobago-tabGroup"),
TAB_GROUP__HEADER("tobago-tabGroup-header"),
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 6fa16d7..b06834d 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -1140,15 +1140,10 @@ th.tobago-sheet-headerCell-markup-filler > .tobago-sheet-header {
}
/* tab / tab-group ----------------------------------------------------------------- */
-.tobago-tab-content {
+.tobago-tabGroup-header, .tobago-tab-content {
}
.tobago-tab {
- display: flex;
- justify-content: space-between;
- align-content: center;
- margin-left: 0.2rem;
- z-index: 0; /* IE11 fix to hide bottom border on active tab */
.nav-link:not([href]):not([tabindex]) {
/* fix .nav-links without 'href'; bootstrap tab only works if 'href' is set */
@@ -1175,20 +1170,44 @@ th.tobago-sheet-headerCell-markup-filler > .tobago-sheet-header {
}
}
-.tab-content {
- border: 1px solid #ddd;
- border-radius: 0.25rem;
- padding: 0.3rem;
+.tobago-tab.tobago-tab-barFacet {
+ display: flex;
+
+ > .nav-link {
+ border-right: 0;
+ border-top-right-radius: 0;
+ }
+
+ > div {
+ border: $nav-tabs-border-width solid transparent;
+ border-top-right-radius: $nav-tabs-border-radius;
+ padding-right: $nav-link-padding-x;
+
+ & > button {
+ height: 100%;
+ }
+ & > a {
+ display: inline-block;
+ padding-top: 0.5rem;
+ }
+ }
+
+ .nav-link.active + div {
+ background-color: $nav-tabs-link-active-bg;
+ border-top-color: $nav-tabs-border-color;
+ border-right-color: $nav-tabs-border-color;
+ }
+
+ .nav-link:not(.disabled):hover + div {
+ border-top-color: $gray-200;
+ border-right-color: $gray-200;
+ }
}
.tobago-tabGroup {
margin-bottom: $form-group-margin-bottom;
}
-.tobago-tabGroup > .tobago-tabGroup-header.nav-tabs {
- border-bottom-width: 0;
-}
-
/* tree ---------------------------------------------------------------------- */
.tobago-tree,
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/tab.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/tab.xhtml
index 6cc22f2..c5ab3b1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/tab.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/tab.xhtml
@@ -33,16 +33,16 @@
<pre><code class="language-markup"><tc:tabGroup></code></pre>
<tc:tabGroup>
<tc:tab label="Tab One">
- <p>Content of tab one.</p>
+ Content of tab one.
</tc:tab>
<tc:tab label="Tab Two" disabled="true">
- <p>Content of tab two.</p>
+ Content of tab two.
</tc:tab>
<tc:tab label="Tab Not Rendered" rendered="false">
- <p>This tab shouldn't be rendered.</p>
+ This tab shouldn't be rendered.
</tc:tab>
<tc:tab label="Tab Three">
- <p>Content of tab three.</p>
+ Content of tab three.
</tc:tab>
</tc:tabGroup>
</tc:section>
@@ -51,16 +51,16 @@
<pre><code class="language-markup"><tabGroup switchType="reloadTab"></code></pre>
<tc:tabGroup switchType="reloadTab">
<tc:tab label="Tab One">
- <p>Content of tab one.</p>
+ Content of tab one.
</tc:tab>
<tc:tab label="Tab Two" disabled="true">
- <p>Content of tab two.</p>
+ Content of tab two.
</tc:tab>
<tc:tab label="Tab Not Rendered" rendered="false">
- <p>This tab shouldn't be rendered.</p>
+ This tab shouldn't be rendered.
</tc:tab>
<tc:tab label="Tab Three">
- <p>Content of tab three.</p>
+ Content of tab three.
</tc:tab>
</tc:tabGroup>
</tc:section>
@@ -69,21 +69,21 @@
<pre><code class="language-markup"><tabGroup switchType="reloadPage"></code></pre>
<tc:tabGroup switchType="reloadPage">
<tc:tab label="Tab One">
- <p>Content of tab one.</p>
+ Content of tab one.
</tc:tab>
<tc:tab label="Tab Two" disabled="true">
- <p>Content of tab two.</p>
+ Content of tab two.
</tc:tab>
<tc:tab label="Tab Not Rendered" rendered="false">
- <p>This tab shouldn't be rendered.</p>
+ This tab shouldn't be rendered.
</tc:tab>
<tc:tab label="Tab Three">
<f:facet name="bar">
- <tc:link image="fa-remove">
+ <tc:link image="fa-remove" omit="true">
<tc:dataAttribute name="alert-text" value="Not implemented yet!"/>
</tc:link>
</f:facet>
- <p>Content of tab three.</p>
+ Content of tab three.
</tc:tab>
</tc:tabGroup>
</tc:section>
diff --git a/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-classes.scss b/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-classes.scss
index 5cc964f..91757a0 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-classes.scss
+++ b/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-classes.scss
@@ -47,13 +47,13 @@
right: 1em;
}
-.card {
+.tobago-box.card {
border: 0;
box-shadow: none;
border-left: 10px solid $box-title-background-color;
}
-.card-header {
+.tobago-box-header.card-header {
overflow: hidden;
border-bottom: 0;
background-color: $box-title-background-color;
diff --git a/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss b/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss
index bcfa154..f5298f8 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss
+++ b/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss
@@ -68,14 +68,16 @@ header.tobago-header.fixed-top {
float: left;
}
- a, button.tobago-link:not(.dropdown-item) {
- color: theme-color("primary");
- text-decoration: none;
-
- &:hover, &:focus {
- color: $navbar-light-hover-color;
- cursor: pointer;
+ a, button {
+ &.tobago-link:not(.dropdown-item) {
+ color: theme-color("primary");
text-decoration: none;
+
+ &:hover, &:focus {
+ color: $navbar-light-hover-color;
+ cursor: pointer;
+ text-decoration: none;
+ }
}
}
}
@@ -518,6 +520,55 @@ p, .control-label {
}
}
+.tobago-tabGroup.card {
+ border: 0;
+
+ > .card-header {
+ padding-top: 0;
+ padding-left: 0.5rem;
+ padding-right: 0.6rem;
+ border-bottom: 0;
+ }
+}
+
+.tobago-tab {
+ margin-left: 0.2rem;
+}
+
+.tobago-tabGroup .nav-tabs .nav-item {
+ .nav-link {
+ color: $darkgreen;
+
+ &:hover {
+ color: $orange;
+ }
+ }
+ .nav-link.active:hover {
+ color: $darkgreen;
+ }
+ .nav-link.disabled {
+ color: $gray-300;
+ &:hover {
+ color: $gray-300;
+ }
+ }
+}
+
+.tobago-tab .nav-link:not([href]):not([tabindex]):not(.active):not(.disabled) {
+ /* fix style form standard theme */
+ color: $darkgreen;
+
+ &:hover {
+ color: $orange;
+ }
+}
+
+.tobago-tab.tobago-tab-barFacet {
+ .nav-link.disabled + div {
+ background-color: $gray-100;
+ }
+}
+
/* padding: 0.1px = hack! Padding '0' would be remove margin-bottom from .form-group */
.tab-content {
background-color: white;
--
To stop receiving notification emails like this one, please contact
hnoeth@apache.org.