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 2023/01/12 14:44:51 UTC
[myfaces-tobago] 01/02: fix(separator): colors
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 26a0f949fd4b8aaf1cac45b22cea970c8f76d837
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Jan 12 11:45:31 2023 +0100
fix(separator): colors
Use two <hr/> tags and a <div> with text to create a separator with a label. This way the color of the separator is always the same, no matter if a label is set or not.
* tests adjusted
Issue: TOBAGO-2188
---
.../renderkit/renderer/SeparatorRenderer.java | 29 +++++++---------
.../myfaces/tobago/renderkit/css/TobagoClass.java | 1 +
.../050-container/30-separator/Separator.xhtml | 4 +--
tobago-theme/src/main/scss/_tobago.scss | 39 +++++-----------------
4 files changed, 23 insertions(+), 50 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SeparatorRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SeparatorRenderer.java
index 12a383a8c1..f5b72b7274 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SeparatorRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SeparatorRenderer.java
@@ -41,32 +41,27 @@ public class SeparatorRenderer<T extends AbstractUISeparator> extends RendererBa
final TobagoResponseWriter writer = getResponseWriter(facesContext);
final String clientId = component.getClientId(facesContext);
+ writer.startElement(HtmlElements.TOBAGO_SEPARATOR);
+ writer.writeIdAttribute(clientId);
+
if (isInside(facesContext, HtmlElements.COMMAND)) {
- writer.startElement(HtmlElements.TOBAGO_SEPARATOR);
- writer.writeIdAttribute(clientId);
- writer.writeClassAttribute(
- BootstrapClass.DROPDOWN_DIVIDER,
- component.getCustomClass());
- writer.endElement(HtmlElements.TOBAGO_SEPARATOR);
+ writer.writeClassAttribute(BootstrapClass.DROPDOWN_DIVIDER, component.getCustomClass());
} else {
+ writer.writeClassAttribute(component.getCustomClass());
+ writer.startElement(HtmlElements.HR);
+ writer.endElement(HtmlElements.HR);
+
final String label = getLabel(component);
if (label != null) {
- writer.startElement(HtmlElements.P);
- writer.writeIdAttribute(clientId);
- writer.writeClassAttribute(
- TobagoClass.SEPARATOR,
- component.getCustomClass());
+ writer.startElement(HtmlElements.DIV);
+ writer.writeClassAttribute(TobagoClass.LABEL);
writer.writeText(label);
- writer.endElement(HtmlElements.P);
- } else {
+ writer.endElement(HtmlElements.DIV);
writer.startElement(HtmlElements.HR);
- writer.writeIdAttribute(clientId);
- writer.writeClassAttribute(
- TobagoClass.SEPARATOR,
- component.getCustomClass());
writer.endElement(HtmlElements.HR);
}
}
+ writer.endElement(HtmlElements.TOBAGO_SEPARATOR);
}
private String getLabel(final AbstractUISeparator separator) {
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 224a6cb706..30bff979e3 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
@@ -53,6 +53,7 @@ public enum TobagoClass implements CssItem {
FOLDER("tobago-folder"),
FILTER("tobago-filter"),
HEADER("tobago-header"),
+ LABEL("tobago-label"),
LABEL__CONTAINER("tobago-label-container"),
LEVEL("tobago-level"),
LINK("tobago-link"),
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/30-separator/Separator.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/30-separator/Separator.xhtml
index f995efecc5..f97a012eb4 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/30-separator/Separator.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/30-separator/Separator.xhtml
@@ -26,14 +26,14 @@
<tc:section label="Separator with label">
<demo-highlight language="markup"><tc:separator label="Separator with label"/></demo-highlight>
- <tc:in id="i1" label="Text 1"/>
+ <tc:in id="i1" label="Text 1" autoSpacing="false"/>
<tc:separator label="Separator with label"/>
<tc:in id="i2" label="Text 2"/>
</tc:section>
<tc:section label="Separator without label">
<demo-highlight language="markup"><tc:separator/></demo-highlight>
- <tc:in id="i3" label="Text 1"/>
+ <tc:in id="i3" label="Text 1" autoSpacing="false"/>
<tc:separator/>
<tc:in id="i4" label="Text 2"/>
</tc:section>
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index dd6234c28b..95dda23f87 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1348,43 +1348,20 @@ tobago-segment-layout {
*/
}
-/* separator -------------------------------------------------------------- */
tobago-separator {
- display: block;
-}
-
-hr.tobago-separator {
- border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
+ display: flex;
+ align-items: center;
-p.tobago-separator {
- text-align: center;
- border: 0;
- white-space: nowrap;
- display: block;
- overflow: hidden;
- padding: 0;
- margin-top: 1em;
- margin-bottom: 1em;
-
- &:before, &:after {
- content: "";
- height: 1px;
- background-color: rgba(0, 0, 0, 0.1);
- display: inline-block;
- vertical-align: middle;
+ hr {
+ flex-grow: 1;
}
- &:before {
- width: 80px;
- margin-left: 0;
- margin-right: 5px;
+ .tobago-label {
+ margin: $hr-margin-y 0.25rem;
}
- &:after {
- width: 100%;
- margin-left: 5px;
- margin-right: 0;
+ .tobago-separator {
+ //this is for TobagoClassUnitTest
}
}