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 2020/04/20 20:23:19 UTC
[myfaces-tobago] branch master updated: update toggle,
checkbox and radio buttons to Bootstrap 4.2
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 60bd333 update toggle, checkbox and radio buttons to Bootstrap 4.2
60bd333 is described below
commit 60bd3337eeb005f80ccf4ccc93ae27e45de30cc0
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Mon Apr 20 22:14:22 2020 +0200
update toggle, checkbox and radio buttons to Bootstrap 4.2
* remove getCssItems() from input (booleanCheckbox) because style should only be done on the label
* set COL_FORM_LABEL on outer CSS for checkbox/toggle for better align with label layout
* fix toggle, checkbox and radio buttons for dropdown menus
* remove BootstrapClass.DISABLED because it has no longer any effect
* adjust style for
* dropdown menu
* inline radio
* inline checkbox
* itemImage
* cleanup style
Issue: TOBAGO-1969
---
...SelectBooleanCheckboxInsideCommandRenderer.java | 11 +-
.../renderer/SelectBooleanCheckboxRenderer.java | 11 +-
.../renderer/SelectBooleanToggleRenderer.java | 6 +-
.../SelectManyCheckboxInsideCommandRenderer.java | 5 -
.../renderer/SelectManyCheckboxRenderer.java | 21 +-
.../SelectOneRadioInsideCommandRenderer.java | 5 -
.../renderkit/renderer/SelectOneRadioRenderer.java | 21 +-
.../myfaces/tobago/renderkit/css/TobagoClass.java | 4 +
tobago-core/src/main/resources/scss/_tobago.scss | 213 +++++++--------------
9 files changed, 108 insertions(+), 189 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxInsideCommandRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxInsideCommandRenderer.java
index 4a5b8a7..957d295 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxInsideCommandRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxInsideCommandRenderer.java
@@ -40,12 +40,15 @@ public class SelectBooleanCheckboxInsideCommandRenderer extends SelectBooleanChe
}
@Override
- protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectBoolean select) {
- return new CssItem[]{BootstrapClass.DROPDOWN_ITEM};
+ protected CssItem[] getOuterCssItems(final FacesContext facesContext, final AbstractUISelectBoolean select) {
+ return new CssItem[]{
+ BootstrapClass.CUSTOM_CONTROL,
+ BootstrapClass.CUSTOM_CHECKBOX
+ };
}
@Override
- protected CssItem[] getOuterCssItems(final FacesContext facesContext, final AbstractUISelectBoolean select) {
- return new CssItem[]{};
+ protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectBoolean select) {
+ return new CssItem[]{BootstrapClass.DROPDOWN_ITEM};
}
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java
index d240db0..21a1976 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanCheckboxRenderer.java
@@ -94,7 +94,6 @@ public class SelectBooleanCheckboxRenderer extends MessageLayoutRendererBase {
getTobagoClass(),
getTobagoClass().createMarkup(markup),
getOuterCssItems(facesContext, select),
- disabled ? BootstrapClass.DISABLED : null,
select.getCustomClass());
HtmlRendererUtils.writeDataAttributes(facesContext, writer, select);
@@ -103,9 +102,7 @@ public class SelectBooleanCheckboxRenderer extends MessageLayoutRendererBase {
}
writer.startElement(HtmlElements.INPUT);
- writer.writeClassAttribute(
- BootstrapClass.CUSTOM_CONTROL_INPUT,
- getCssItems(facesContext, select));
+ writer.writeClassAttribute(BootstrapClass.CUSTOM_CONTROL_INPUT);
writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.CHECKBOX);
writer.writeAttribute(HtmlAttributes.VALUE, "true", false);
writer.writeNameAttribute(clientId);
@@ -152,7 +149,11 @@ public class SelectBooleanCheckboxRenderer extends MessageLayoutRendererBase {
}
protected CssItem[] getOuterCssItems(final FacesContext facesContext, final AbstractUISelectBoolean select) {
- return new CssItem[]{BootstrapClass.CUSTOM_CONTROL, BootstrapClass.CUSTOM_CHECKBOX};
+ return new CssItem[]{
+ !select.isLabelLayoutSkip() ? BootstrapClass.COL_FORM_LABEL : null,
+ BootstrapClass.CUSTOM_CONTROL,
+ BootstrapClass.CUSTOM_CHECKBOX
+ };
}
protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectBoolean select) {
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java
index 5a48646..94c87b9f 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectBooleanToggleRenderer.java
@@ -34,7 +34,11 @@ public class SelectBooleanToggleRenderer extends SelectBooleanCheckboxRenderer {
}
protected CssItem[] getOuterCssItems(final FacesContext facesContext, final AbstractUISelectBoolean select) {
- return new CssItem[]{BootstrapClass.CUSTOM_CONTROL, BootstrapClass.CUSTOM_SWITCH};
+ return new CssItem[]{
+ !select.isLabelLayoutSkip() ? BootstrapClass.COL_FORM_LABEL : null,
+ BootstrapClass.CUSTOM_CONTROL,
+ BootstrapClass.CUSTOM_SWITCH
+ };
}
public HtmlElements getComponentTag() {
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxInsideCommandRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxInsideCommandRenderer.java
index 0254944..678ef9b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxInsideCommandRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxInsideCommandRenderer.java
@@ -40,11 +40,6 @@ public class SelectManyCheckboxInsideCommandRenderer extends SelectManyCheckboxR
}
@Override
- protected boolean renderOuterItem() {
- return false;
- }
-
- @Override
protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectManyCheckbox select) {
return new CssItem[]{BootstrapClass.DROPDOWN_ITEM};
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
index 06ba308..3277ef4 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
@@ -84,14 +84,11 @@ public class SelectManyCheckboxRenderer extends SelectManyRendererBase {
if (renderRange == null || ArrayUtils.contains(renderRange, i)) {
final boolean itemDisabled = item.isDisabled() || disabled;
final String itemId = id + ComponentUtils.SUB_SEPARATOR + i;
- if (renderOuterItem()) {
- writer.startElement(HtmlElements.DIV);
- writer.writeClassAttribute(
- BootstrapClass.CUSTOM_CONTROL,
- BootstrapClass.CUSTOM_CHECKBOX,
- inline ? BootstrapClass.CUSTOM_CONTROL_INLINE : null,
- itemDisabled ? BootstrapClass.DISABLED : null);
- }
+ writer.startElement(HtmlElements.DIV);
+ writer.writeClassAttribute(
+ BootstrapClass.CUSTOM_CONTROL,
+ BootstrapClass.CUSTOM_CHECKBOX,
+ inline ? BootstrapClass.CUSTOM_CONTROL_INLINE : null);
writer.startElement(HtmlElements.INPUT);
writer.writeClassAttribute(BootstrapClass.CUSTOM_CONTROL_INPUT);
@@ -143,9 +140,7 @@ public class SelectManyCheckboxRenderer extends SelectManyRendererBase {
}
writer.endElement(HtmlElements.LABEL);
- if (renderOuterItem()) {
- writer.endElement(HtmlElements.DIV);
- }
+ writer.endElement(HtmlElements.DIV);
}
i++;
}
@@ -163,10 +158,6 @@ public class SelectManyCheckboxRenderer extends SelectManyRendererBase {
writer.endElement(HtmlElements.DIV);
}
- protected boolean renderOuterItem() {
- return true;
- }
-
protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectManyCheckbox select) {
return null;
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioInsideCommandRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioInsideCommandRenderer.java
index 430ca19..ed2f058 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioInsideCommandRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioInsideCommandRenderer.java
@@ -40,11 +40,6 @@ public class SelectOneRadioInsideCommandRenderer extends SelectOneRadioRenderer
}
@Override
- protected boolean renderOuterItem() {
- return false;
- }
-
- @Override
protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectOneRadio select) {
return new CssItem[]{BootstrapClass.DROPDOWN_ITEM};
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
index 0726932..7b0b7eb 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
@@ -86,14 +86,11 @@ public class SelectOneRadioRenderer extends SelectOneRendererBase {
if (renderRange == null || ArrayUtils.contains(renderRange, i)) {
final boolean itemDisabled = item.isDisabled() || disabled;
final String itemId = id + ComponentUtils.SUB_SEPARATOR + i;
- if (renderOuterItem()) {
- writer.startElement(HtmlElements.DIV);
- writer.writeClassAttribute(
- BootstrapClass.CUSTOM_CONTROL,
- BootstrapClass.CUSTOM_RADIO,
- inline ? BootstrapClass.CUSTOM_CONTROL_INLINE : null,
- itemDisabled ? BootstrapClass.DISABLED : null);
- }
+ writer.startElement(HtmlElements.DIV);
+ writer.writeClassAttribute(
+ BootstrapClass.CUSTOM_CONTROL,
+ BootstrapClass.CUSTOM_RADIO,
+ inline ? BootstrapClass.CUSTOM_CONTROL_INLINE : null);
writer.startElement(HtmlElements.INPUT);
writer.writeClassAttribute(BootstrapClass.CUSTOM_CONTROL_INPUT);
@@ -142,9 +139,7 @@ public class SelectOneRadioRenderer extends SelectOneRendererBase {
}
writer.endElement(HtmlElements.LABEL);
- if (renderOuterItem()) {
- writer.endElement(HtmlElements.DIV);
- }
+ writer.endElement(HtmlElements.DIV);
}
i++;
}
@@ -166,10 +161,6 @@ public class SelectOneRadioRenderer extends SelectOneRendererBase {
encodeBehavior(writer, facesContext, select);
}
- protected boolean renderOuterItem() {
- return true;
- }
-
protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectOneRadio select) {
return null;
}
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 b0b4d16..78e8a69 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
@@ -36,6 +36,10 @@ public enum TobagoClass implements CssItem {
// general classes
+ /**
+ * @deprecated since 4.5.0
+ */
+ @Deprecated
INPUT_PSEUDO("tobago-inputPseudo"),
/**
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 985148f..882a478 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -21,6 +21,15 @@ XXX code will be inserted after the _variables.scss
*/
$alert-padding-x: 1.25rem !default;
$border-radius: .25rem !default;
+$border-width: 1px !default;
+$font-size-base: 1rem !default;
+$line-height-base: 1.5 !default;
+$custom-control-gutter: .5rem !default;
+$custom-control-indicator-size: 1rem !default;
+$input-border-width: $input-btn-border-width !default;
+$input-btn-border-width: $border-width !default;
+$input-btn-padding-y: .375rem !default;
+$input-padding-y: $input-btn-padding-y !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$spacer: 1rem !default;
@@ -630,6 +639,27 @@ ul > tobago-dropdown {
display: list-item;
}
+.dropdown-menu {
+ .custom-control {
+ padding-left: 0;
+
+ .custom-control-label.dropdown-item {
+ padding-left: ($custom-control-gutter + $custom-control-indicator-size) + $dropdown-item-padding-x;
+
+ &:before {
+ top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2) + $dropdown-item-padding-y;
+ left: $dropdown-item-padding-x;
+ }
+
+ &:after {
+ top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2) + $dropdown-item-padding-y;
+ left: $dropdown-item-padding-x;
+ }
+ }
+ }
+}
+
+
/* dropdown-submenu ------------------------------------------------------- */
.tobago-dropdown-submenu {
cursor: pointer;
@@ -954,177 +984,89 @@ h1, h2, h3, h4, h5, h6 {
}
/* select ----------------------------------------------------------- */
-
-tobago-select-boolean-checkbox {
- display: block;
+.tobago-inputPseudo {
+ //deprecated should be removed
}
-tobago-select-boolean-toggle {
- display: block;
+@mixin adjustCustomControlLabel() {
+ .custom-control-label {
+ &:after {
+ content: "";
+ }
+
+ img {
+ padding-right: 0.3em;
+ }
+ }
}
-tobago-select-many-checkbox {
- display: block;
+@mixin inlinePadding() {
+ padding-top: calc(#{$input-padding-y} + #{$input-border-width});
+ padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
}
-tobago-select-many-shuttle {
+/* selectBooleanCheckbox ---------------------------------------------------- */
+tobago-select-boolean-checkbox {
display: block;
}
-tobago-select-one-listbox {
- display: block;
+.tobago-selectBooleanCheckbox {
+ @include adjustCustomControlLabel();
}
-tobago-select-one-radio {
+/* selectBooleanToggle ---------------------------------------------------- */
+tobago-select-boolean-toggle {
display: block;
}
-/* selectBooleanCheckbox, selectManyCheckbox, selectOneRadio ------------------------------ */
-
-.tobago-selectBooleanCheckbox, .tobago-selectBooleanToggle,
-.tobago-selectManyCheckbox, .tobago-selectManyToggle,
-.tobago-selectOneRadio {
- .form-check-label {
- input {
- position: absolute;
- opacity: 0;
- z-index: -1;
- }
- .tobago-inputPseudo:before {
- font-family: FontAwesome;
- font-size: large;
- font-style: normal;
- display: inline-block;
- transition: all 0.2s;
- position: relative;
- margin-left: -$form-check-input-gutter;
- }
- img {
- margin-right: 0.3em;
- }
- &:after {
- content: $zero-width-space;
- }
- }
-
- label.custom-control-label:after {
- content: "";
- }
+.tobago-selectBooleanToggle {
+ @include adjustCustomControlLabel();
}
-.tobago-selectBooleanToggle, .tobago-selectManyToggle {
- .form-check-label {
- .tobago-inputPseudo:before {
- font-size: larger;
- }
- }
+/* selectOneListbox -------------------------------------------------------- */
+tobago-select-one-listbox {
+ display: block;
}
-.tobago-selectBooleanCheckbox, .tobago-selectManyCheckbox {
- .form-check-label {
- .tobago-inputPseudo:before {
- content: $fa-square-o;
- position: absolute;
- }
- input[type="checkbox"]:checked + .tobago-inputPseudo:before {
- content: $fa-check-square-o;
- }
- input[type="checkbox"]:focus:not(:disabled) + .tobago-inputPseudo:before,
- input[type="checkbox"]:active:not(:disabled) + .tobago-inputPseudo:before {
- text-shadow: 0 0 1px black;
- }
- input[type="checkbox"]:disabled + .tobago-inputPseudo:before {
- opacity: 0.5;
- }
- }
+.tobago-selectOneListbox,
+.tobago-selectOneListbox-option {
}
-.tobago-selectBooleanToggle, .tobago-selectManyToggle {
- .form-check-label {
- .tobago-inputPseudo:before {
- content: $fa-toggle-off;
- position: relative;
- margin-right: 0.5rem;
- }
- input[type="checkbox"]:checked + .tobago-inputPseudo:before {
- content: $fa-toggle-on;
- }
- input[type="checkbox"]:focus:not(:disabled) + .tobago-inputPseudo:before,
- input[type="checkbox"]:active:not(:disabled) + .tobago-inputPseudo:before {
- text-shadow: 0 0 1px black;
- }
- input[type="checkbox"]:disabled + .tobago-inputPseudo:before {
- opacity: 0.5;
- }
- }
+/* selectOneRadio ---------------------------------------------------------- */
+tobago-select-one-radio {
+ display: block;
}
.tobago-selectOneRadio {
- .form-check-label {
- .tobago-inputPseudo:before {
- content: $fa-circle-thin;
- position: absolute;
- }
- input[type="radio"]:checked + .tobago-inputPseudo:before {
- content: $fa-dot-circle-o;
- }
- input[type="radio"]:focus:not(:disabled) + .tobago-inputPseudo:before,
- input[type="radio"]:active:not(:disabled) + .tobago-inputPseudo:before {
- text-shadow: 0 0 1px black;
- }
- input[type="radio"]:disabled + .tobago-inputPseudo:before {
- opacity: 0.5;
- }
- }
-}
+ @include adjustCustomControlLabel();
-/* dropdown */
-.dropdown-menu {
- .tobago-selectBooleanCheckbox, .tobago-selectManyCheckbox, .tobago-selectOneRadio {
- .form-check-label {
- padding-left: (2 * $form-check-input-gutter) + $dropdown-item-padding-y;
- }
+ &.tobago-selectOneRadio-inline {
+ @include inlinePadding();
}
}
-/* inline */
-.tobago-selectBooleanToggle.form-check,
-.tobago-selectBooleanCheckbox.form-check {
- padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
- padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
- margin-bottom: 0;
-
- .form-check-label {
-
- }
+/* selectManyCheckbox ----------------------------------------------------- */
+tobago-select-many-checkbox {
+ display: block;
}
-.tobago-selectManyToggle-inline,
-.tobago-selectManyCheckbox-inline,
-.tobago-selectOneRadio-inline {
- padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
- padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
+.tobago-selectManyCheckbox {
+ @include adjustCustomControlLabel();
- .form-check.form-check-inline {
- margin-bottom: 0;
- padding-left: 1rem;
-
- .form-check-label {
- vertical-align: baseline;
- }
+ &.tobago-selectManyCheckbox-inline {
+ @include inlinePadding();
}
}
-/* selectBooleanCheckbox ----------------------------------------------- */
-
-/* selectManyCheckbox ----------------------------------------------------------- */
-
/* selectManyListbox ----------------------------------------------------------- */
.tobago-selectManyListbox,
.tobago-selectManyListbox-option {
}
/* selectManyShuttle ----------------------------------------------------------- */
+tobago-select-many-shuttle {
+ display: block;
+}
.tobago-selectManyShuttle-add,
.tobago-selectManyShuttle-addAll,
@@ -1166,8 +1108,6 @@ tobago-select-one-radio {
}
}
-/* selectOneRadio ---------------------------------------------------------- */
-
/* selectOneChoice ---------------------------------------------------------- */
.tobago-selectOneChoice-option {
@@ -1183,11 +1123,6 @@ tobago-select-one-radio {
border-bottom-left-radius: 0;
}
-/* selectOneListbox -------------------------------------------------------- */
-.tobago-selectOneListbox,
-.tobago-selectOneListbox-option {
-}
-
/* segmentLayout ----------------------------------------------------------- */
.tobago-segmentLayout {