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/09/15 11:57:29 UTC
[myfaces-tobago] branch master updated: TOBAGO-1721 Optimize HTML
output when two renderer are involved * fix style for checkbox/radio
buttons in dropdown menus * fix style for inline checkbox/radio buttons *
optimize _tobago.scss
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 2a3a378 TOBAGO-1721 Optimize HTML output when two renderer are involved * fix style for checkbox/radio buttons in dropdown menus * fix style for inline checkbox/radio buttons * optimize _tobago.scss
2a3a378 is described below
commit 2a3a3786b12ebdf9b3f5938d1730025ae3fbd267
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Sep 15 13:54:06 2017 +0200
TOBAGO-1721 Optimize HTML output when two renderer are involved
* fix style for checkbox/radio buttons in dropdown menus
* fix style for inline checkbox/radio buttons
* optimize _tobago.scss
---
...SelectBooleanCheckboxInsideCommandRenderer.java | 5 +
tobago-core/src/main/resources/scss/_tobago.scss | 166 ++++++++-------------
2 files changed, 66 insertions(+), 105 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 3643e59..12eeb59 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
@@ -43,4 +43,9 @@ public class SelectBooleanCheckboxInsideCommandRenderer extends SelectBooleanChe
protected CssItem[] getCssItems(final FacesContext facesContext, final AbstractUISelectBooleanCheckbox select) {
return new CssItem[]{BootstrapClass.DROPDOWN_ITEM};
}
+
+ @Override
+ protected CssItem[] getOuterCssItems(final FacesContext facesContext, final AbstractUISelectBooleanCheckbox select) {
+ return new CssItem[]{};
+ }
}
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 2f0485a..1aeb2de 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -36,7 +36,12 @@ $white: #fff !default;
$gray-dark: #292b2c !default;
$gray-light: #636c72 !default;
$gray-lightest: #f7f7f9 !default;
+$border-width: 1px !default;
+$input-btn-border-width: $border-width !default; // For form controls and buttons
+$input-btn-padding-y: .5rem !default;
+$input-btn-padding-x: .75rem !default;
$dropdown-item-padding-x: 1.5rem !default;
+$dropdown-item-padding-y: .25rem !default;
$dropdown-link-color: $gray-dark !default;
$component-active-color: $white !default;
$dropdown-link-active-color: $component-active-color !default;
@@ -53,6 +58,7 @@ $fa-square-o: "\f096";
$fa-check-square-o: "\f046";
$fa-circle-thin: "\f1db";
$fa-dot-circle-o: "\f192";
+$zero-width-space: "\200b";
/* fix bootstrap ---------------------------------------------------- */
span.dropdown {
@@ -434,7 +440,7 @@ button {
}
&.tobago-link.dropdown-item {
- padding: 3px $dropdown-item-padding-x;
+ padding: $dropdown-item-padding-y $dropdown-item-padding-x;
color: $dropdown-link-color;
text-align: inherit;
white-space: nowrap;
@@ -702,99 +708,101 @@ h1, h2, h3, h4, h5, h6 {
align-content: center;
}
-/* selectBooleanCheckbox ----------------------------------------------- */
-.tobago-selectBooleanCheckbox {
+/* selectBooleanCheckbox, selectManyCheckbox, selectOneRadio ------------------------------ */
+.tobago-selectBooleanCheckbox, .tobago-selectManyCheckbox, .tobago-selectOneRadio {
.form-check-label {
- margin-top: 0.5ex;
- vertical-align: text-top;
- padding-left: 0;
- height: 24px;
-
input {
display: none;
}
-
.tobago-inputPseudo:before {
font-family: FontAwesome;
- content: $fa-square-o;
font-size: large;
font-style: normal;
display: inline-block;
- vertical-align: middle;
- width: 20px;
transition: all 0.2s;
+ position: absolute;
+ margin-left: -$form-check-input-gutter;
+ }
+ img {
+ margin-right: 0.3em;
}
+ &:after {
+ content: $zero-width-space;
+ }
+ }
+}
+.tobago-selectBooleanCheckbox, .tobago-selectManyCheckbox {
+ .form-check-label {
+ .tobago-inputPseudo:before {
+ content: $fa-square-o;
+ }
input[type="checkbox"]:checked + .tobago-inputPseudo:before {
content: $fa-check-square-o;
}
-
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;
}
-
- img {
- margin-right: 0.3em;
- }
}
}
-.dropdown-menu .tobago-selectBooleanCheckbox .form-check-label {
- padding-left: $form-check-input-gutter;
-}
-
-/* selectManyCheckbox ----------------------------------------------------------- */
-.tobago-selectManyCheckbox {
+.tobago-selectOneRadio {
.form-check-label {
- padding-left: 0;
- height: 24px;
-
- input {
- display: none;
- }
-
.tobago-inputPseudo:before {
- font-family: FontAwesome;
- content: $fa-square-o;
- font-size: large;
- font-style: normal;
- display: inline-block;
- vertical-align: middle;
- width: 20px;
- transition: all 0.2s;
+ content: $fa-circle-thin;
}
-
- input[type="checkbox"]:checked + .tobago-inputPseudo:before {
- content: $fa-check-square-o;
+ input[type="radio"]:checked + .tobago-inputPseudo:before {
+ content: $fa-dot-circle-o;
}
-
- input[type="checkbox"]:active:not(:disabled) + .tobago-inputPseudo:before {
+ input[type="radio"]:active:not(:disabled) + .tobago-inputPseudo:before {
text-shadow: 0 0 1px black;
}
-
- input[type="checkbox"]:disabled + .tobago-inputPseudo:before {
+ input[type="radio"]:disabled + .tobago-inputPseudo:before {
opacity: 0.5;
}
+ }
+}
- img {
- margin-right: 0.3em;
+/* dropdown */
+.dropdown-menu {
+ .tobago-selectBooleanCheckbox, .tobago-selectManyCheckbox, .tobago-selectOneRadio {
+ .form-check-label {
+ padding-left: (2 * $form-check-input-gutter) + $dropdown-item-padding-y;
}
}
}
-.dropdown-menu .tobago-selectManyCheckbox .form-check-label {
- padding-left: $form-check-input-gutter;
+/* inline */
+.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 {
+
+ }
}
-.tobago-selectManyCheckbox-inline {
- margin-left: -1.25rem;
- margin-top: 6px;
+.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);
+
+ .form-check.form-check-inline {
+ margin-bottom: 0;
+
+ .form-check-label {
+ vertical-align: baseline;
+ }
+ }
}
+/* selectBooleanCheckbox ----------------------------------------------- */
+
+/* selectManyCheckbox ----------------------------------------------------------- */
+
/* selectManyListbox ----------------------------------------------------------- */
.tobago-selectManyListbox,
.tobago-selectManyListbox-option {
@@ -843,52 +851,6 @@ h1, h2, h3, h4, h5, h6 {
}
/* selectOneRadio ---------------------------------------------------------- */
-.tobago-selectOneRadio {
- .form-check-label {
- padding-left: 0;
- height: 24px;
-
- input {
- display: none;
- }
-
- .tobago-inputPseudo:before {
- font-family: FontAwesome;
- content: $fa-circle-thin;
- font-size: large;
- font-style: normal;
- display: inline-block;
- vertical-align: middle;
- width: 20px;
- transition: all 0.2s;
- }
-
- input[type="radio"]:checked + .tobago-inputPseudo:before {
- content: $fa-dot-circle-o;
- }
-
- 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;
- }
-
- img {
- margin-right: 0.3em;
- }
- }
-}
-
-.dropdown-menu .tobago-selectOneRadio .form-check-label {
- padding-left: $form-check-input-gutter;
-}
-
-.tobago-selectOneRadio-inline {
- margin-left: -1.25rem;
- margin-top: 6px;
-}
/* selectOneChoice ---------------------------------------------------------- */
@@ -916,12 +878,6 @@ h1, h2, h3, h4, h5, h6 {
.tobago-selectOneListbox-option {
}
-/* selectOneRadio, selectManyCheckbox -------------------------------------- */
-
-.dropdown-item .form-check-input {
- margin-left: 0;
-}
-
/* segmentLayout ----------------------------------------------------------- */
.tobago-segmentLayout {
--
To stop receiving notification emails like this one, please contact
['"commits@myfaces.apache.org" <co...@myfaces.apache.org>'].