You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2021/02/18 17:09:30 UTC
[myfaces-tobago] branch master updated: fix: styling for dropdown
inside input group
This is an automated email from the ASF dual-hosted git repository.
lofwyr 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 3fa22e6 fix: styling for dropdown inside input group
3fa22e6 is described below
commit 3fa22e63f229be2d3602771a248a45e5ccea3c3c
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Jan 29 19:58:51 2021 +0100
fix: styling for dropdown inside input group
* fix styling
* add .dropdown-menu-end for better dropdown-menu positioning
* adjust tests
* add frontend test
---
tobago-core/npm/scss/_tobago.scss | 13 ++++++
.../renderkit/renderer/CommandRendererBase.java | 6 ++-
.../internal/renderkit/renderer/InRenderer.java | 14 +++++--
.../myfaces/tobago/renderkit/RendererBase.java | 13 ++++++
.../renderer/in/input-group-dropdown-after.html | 2 +-
.../40000-style/215-input-group/Group.test.js | 48 +++++++++++++++++++++
.../40000-style/215-input-group/Group.xhtml | 49 ++++++++++++++++++++++
7 files changed, 138 insertions(+), 7 deletions(-)
diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index 71f43cd..66a72db 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -458,6 +458,19 @@ tobago-in {
.input-group {
+ > tobago-dropdown {
+ /* fix corner styling, because tobago-dropdown use a surrounding container inside an input group */
+ &:not(:last-child) > .tobago-button {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &:not(:first-child) > .tobago-button {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+
tobago-select-one-choice {
/* fix style for surrounding container (tobago-select-one-choice).
According to bootstrap docs, <select class=.form-select> should be rendered directly to .input-group. But tobago
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
index 3aa1f7b..391e362 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
@@ -20,6 +20,7 @@
package org.apache.myfaces.tobago.internal.renderkit.renderer;
import org.apache.myfaces.tobago.component.Attributes;
+import org.apache.myfaces.tobago.component.Facets;
import org.apache.myfaces.tobago.internal.component.AbstractUIBadge;
import org.apache.myfaces.tobago.internal.component.AbstractUICommand;
import org.apache.myfaces.tobago.internal.component.AbstractUIFormBase;
@@ -168,8 +169,9 @@ public abstract class CommandRendererBase<T extends AbstractUICommand> extends D
List<UIComponent> renderLater = null;
writer.startElement(HtmlElements.DIV);
- writer.writeClassAttribute(BootstrapClass.DROPDOWN_MENU);
-// fixme isInside(facesContext, x) ? BootstrapClass.DROPDOWN_MENU_END : null);
+ writer.writeClassAttribute(BootstrapClass.DROPDOWN_MENU,
+ isInside(facesContext, HtmlElements.TOBAGO_IN) && isInside(facesContext, Facets.after)
+ ? BootstrapClass.DROPDOWN_MENU_END : null);
writer.writeAttribute(Arias.LABELLEDBY, component.getFieldId(facesContext), false);
writer.writeAttribute(HtmlAttributes.NAME, component.getClientId(facesContext), false);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
index 6ee1c47..0bad446 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
@@ -101,7 +101,7 @@ public class InRenderer<T extends AbstractUIIn> extends MessageLayoutRendererBas
writer.startElement(HtmlElements.DIV);
writer.writeClassAttribute(BootstrapClass.INPUT_GROUP);
}
- encodeGroupAddon(facesContext, writer, before);
+ encodeGroupAddon(facesContext, writer, before, false);
writer.startElement(HtmlElements.INPUT);
@@ -164,7 +164,7 @@ public class InRenderer<T extends AbstractUIIn> extends MessageLayoutRendererBas
encodeBehavior(writer, facesContext, component);
- encodeGroupAddon(facesContext, writer, after);
+ encodeGroupAddon(facesContext, writer, after, true);
if (after != null || before != null) {
writer.endElement(HtmlElements.DIV);
@@ -172,10 +172,13 @@ public class InRenderer<T extends AbstractUIIn> extends MessageLayoutRendererBas
}
}
- private void encodeGroupAddon(
- final FacesContext facesContext, final TobagoResponseWriter writer, final UIComponent addon) throws IOException {
+ private void encodeGroupAddon(final FacesContext facesContext, final TobagoResponseWriter writer,
+ final UIComponent addon, final boolean isAfterFacet) throws IOException {
if (addon != null) {
for (final UIComponent child : RenderUtils.getFacetChildren(addon)) {
+ if (isAfterFacet) {
+ insideBegin(facesContext, Facets.after);
+ }
if (child instanceof AbstractUIButton) {
child.encodeAll(facesContext);
} else if (child instanceof AbstractUIOut) {
@@ -188,6 +191,9 @@ public class InRenderer<T extends AbstractUIIn> extends MessageLayoutRendererBas
child.encodeAll(facesContext);
writer.endElement(HtmlElements.SPAN);
}
+ if (isAfterFacet) {
+ insideEnd(facesContext, Facets.after);
+ }
}
}
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/RendererBase.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/RendererBase.java
index e9f9d4c..0fb9ea1 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/RendererBase.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/RendererBase.java
@@ -20,6 +20,7 @@
package org.apache.myfaces.tobago.renderkit;
import org.apache.myfaces.tobago.component.ClientBehaviors;
+import org.apache.myfaces.tobago.component.Facets;
import org.apache.myfaces.tobago.context.TobagoContext;
import org.apache.myfaces.tobago.internal.behavior.EventBehavior;
import org.apache.myfaces.tobago.internal.component.AbstractUICommand;
@@ -181,6 +182,18 @@ public abstract class RendererBase<T extends UIComponent> extends Renderer {
return facesContext.getAttributes().get(inside) != null;
}
+ protected void insideBegin(final FacesContext facesContext, final Facets inside) {
+ facesContext.getAttributes().put(inside, Boolean.TRUE);
+ }
+
+ protected void insideEnd(final FacesContext facesContext, final Facets inside) {
+ facesContext.getAttributes().remove(inside);
+ }
+
+ protected boolean isInside(final FacesContext facesContext, final Facets inside) {
+ return facesContext.getAttributes().get(inside) != null;
+ }
+
/**
* Special implementation for the reload facet (e.g. for tc:panel and tc:sheet).
*/
diff --git a/tobago-core/src/test/resources/renderer/in/input-group-dropdown-after.html b/tobago-core/src/test/resources/renderer/in/input-group-dropdown-after.html
index c356f12..d3e88f5 100644
--- a/tobago-core/src/test/resources/renderer/in/input-group-dropdown-after.html
+++ b/tobago-core/src/test/resources/renderer/in/input-group-dropdown-after.html
@@ -23,7 +23,7 @@ dropdown-menu-right is temporarily not here (in the div with dropdown-menu), XXX
<input type='text' name='id' id='id::field' class='tobago-in form-control'>
<tobago-dropdown id='button' class='dropdown'>
<button type='button' id='button::command' name='button' data-bs-toggle='dropdown' aria-expanded='false' class='tobago-button btn btn-secondary dropdown-toggle'><tobago-behavior event='click' client-id='button' field-id='button::command' omit='omit'></tobago-behavior><span>dropdown</span></button>
- <div class='dropdown-menu' aria-labelledby='button::command' name='button'>
+ <div class='dropdown-menu dropdown-menu-end' aria-labelledby='button::command' name='button'>
<button type='button' id='l1' name='l1' class='tobago-link dropdown-item'><tobago-behavior event='click' client-id='l1'></tobago-behavior><span>Link 1</span></button>
<button type='button' id='l2' name='l2' class='tobago-link dropdown-item'><tobago-behavior event='click' client-id='l2'></tobago-behavior><span>Link 2</span></button>
</div>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/215-input-group/Group.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/215-input-group/Group.test.js
new file mode 100644
index 0000000..8cecc9f
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/215-input-group/Group.test.js
@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+import {elementByIdFn} from "/script/tobago-test.js";
+
+it("border-radius", function (done) {
+ let dropdown1Fn = elementByIdFn("page:mainForm:dd1::command");
+ let dropdown2Fn = elementByIdFn("page:mainForm:dd2::command");
+ let dropdown3Fn = elementByIdFn("page:mainForm:dd3::command");
+ let dropdown4Fn = elementByIdFn("page:mainForm:dd4::command");
+
+ const test = new JasmineTestTool(done);
+ test.do(() => expect(getComputedStyle(dropdown1Fn()).borderTopLeftRadius).not.toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown1Fn()).borderTopRightRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown1Fn()).borderBottomLeftRadius).not.toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown1Fn()).borderBottomRightRadius).toBe("0px"));
+
+ test.do(() => expect(getComputedStyle(dropdown2Fn()).borderTopLeftRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown2Fn()).borderTopRightRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown2Fn()).borderBottomLeftRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown2Fn()).borderBottomRightRadius).toBe("0px"));
+
+ test.do(() => expect(getComputedStyle(dropdown3Fn()).borderTopLeftRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown3Fn()).borderTopRightRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown3Fn()).borderBottomLeftRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown3Fn()).borderBottomRightRadius).toBe("0px"));
+
+ test.do(() => expect(getComputedStyle(dropdown4Fn()).borderTopLeftRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown4Fn()).borderTopRightRadius).not.toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown4Fn()).borderBottomLeftRadius).toBe("0px"));
+ test.do(() => expect(getComputedStyle(dropdown4Fn()).borderBottomRightRadius).not.toBe("0px"));
+ test.start();
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/215-input-group/Group.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/215-input-group/Group.xhtml
new file mode 100644
index 0000000..9b9823b
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/215-input-group/Group.xhtml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:f="http://xmlns.jcp.org/jsf/core"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+
+ <tc:section label="Dropdown Menu">
+ <p>Test if dropdown menu has correct rounded conrners.</p>
+
+ <tc:in id="ddGroup">
+ <f:facet name="before">
+ <tc:button id="dd1" label="Dropdown1" omit="true">
+ <tc:link id="dd1link" label="Link"/>
+ </tc:button>
+ <tc:button id="dd2" label="Dropdown2" omit="true">
+ <tc:link id="dd2link" label="Link"/>
+ </tc:button>
+ </f:facet>
+ <f:facet name="after">
+ <tc:button id="dd3" label="Dropdown3" omit="true">
+ <tc:link id="dd3link" label="Link"/>
+ </tc:button>
+ <tc:button id="dd4" label="Dropdown4" omit="true">
+ <tc:link id="dd4link" label="Link"/>
+ </tc:button>
+ </f:facet>
+ </tc:in>
+ </tc:section>
+</ui:composition>