From a8e09fad0e6c7994308c557f54c4944c05b95d42 Mon Sep 17 00:00:00 2001 From: stephan Date: Sun, 25 Dec 2016 12:51:32 +0100 Subject: [PATCH] #596 and #594 improve compatibility to PrimeFaces, and generate the attributes `style` and `styleClass` even if the datepicker is in inline mode --- gradleResources/staticResources/css/bsf.css | 2 +- .../META-INF/resources/bsf/css/bsf.css | 396 +++++++++++++++++- .../component/datepicker/Datepicker.java | 4 +- 3 files changed, 398 insertions(+), 4 deletions(-) diff --git a/gradleResources/staticResources/css/bsf.css b/gradleResources/staticResources/css/bsf.css index d2f01c173..a036660b1 100644 --- a/gradleResources/staticResources/css/bsf.css +++ b/gradleResources/staticResources/css/bsf.css @@ -44,7 +44,7 @@ font-weight: bold; min-height: auto; } -.ui-widget { +.ui-datepicker-inline { font-size: 0.85em; } div > .ui-datepicker-trigger { diff --git a/mavenResources/META-INF/resources/bsf/css/bsf.css b/mavenResources/META-INF/resources/bsf/css/bsf.css index 276af0e8d..a036660b1 100644 --- a/mavenResources/META-INF/resources/bsf/css/bsf.css +++ b/mavenResources/META-INF/resources/bsf/css/bsf.css @@ -1 +1,395 @@ -.navbar-static-bottom {margin-top: 10px;margin-bottom: 1px;}.navbar-fixed-top .navbar-inner, .navbar-static-bottom .navbar-inner {border-width: 1px 0 0;}.row .form-group {margin-bottom: 10px;}.commandLink {cursor: pointer;}.ui-datepicker.ui-widget.ui-widget-content {z-index: 2000 !important;}.ui-datepicker-header {font-weight: bold;min-height: auto;}.ui-widget {font-size: 0.85em;}div > .ui-datepicker-trigger {display:none;}.ui-datepicker-calendar tbody > tr > td {border: 0 none;padding: 1px;}.ui-datepicker-calendar > thead > tr > th {border: 0 none;padding: 0.7em 0.3em;}.row .slider2 { margin-left: 0px; }.slider2 .badge { min-width: 30px; }.slider2 input { width: auto; }.slider2-vertical input { margin: 5px auto; width: auto; padding: 5px; }.slider2-vertical .badge { margin: 10px auto; display: block; width: 66%; max-width: 50px; padding-left:0px; padding-right:0px;}.row .slider2-vertical { padding-bottom: 5px; margin-left: 0px;}.slider2-vertical p { font-weight: bold; margin: 0px; text-align: center;}.slider2 .tooltip-inner { width: auto !important; }@media (min-width: 992px) { .slider2 .col-md-1 { width: 6%; } }@media (min-width: 1200px) { .slider2 .col-lg-1 { width: 5%; } }@media (max-width: 768px) { .slider2 .col-xs-1 { width: 10%; } }@media (max-width: 640px) { .slider2 .col-xs-1 { width: 12.5%; } }@media (max-width: 480px) { .slider2 .col-xs-1 { width: 15%; } }@media (max-width: 320px) { .slider2 .col-xs-1 { width: 20%; } }.row .slider { margin-left: 0px; }.slider input { width: auto; }.slider .badge { min-width: 30px; }.slider .ui-widget { margin-top: 7px; }.slider-vertical input { margin: 5px auto; width: auto; padding: 5px; }.slider-vertical .badge { margin: 10px auto; display: block; width: 66%; max-width: 50px; padding-left:0px; padding-right:0px;}.row .slider-vertical { padding-bottom: 5px; margin-left: 0px;}.slider-vertical p { font-weight: bold; margin: 0px; text-align: center;}.slider-vertical .ui-widget { margin: 0 auto; }.ui-slider .ui-slider-handle-round { border-radius: 10px; }.ui-slider .ui-slider-handle-md { height: 20px !important; margin: -2px 0 0 -2px; width: 20px !important; }.ui-slider .ui-slider-handle-lg { height: 24px !important; margin: -4px 0 0 -4px; width: 24px !important; }.ui-slider.ui-slider-vertical .ui-slider-handle-md { height: 20px !important; margin: -2px 0 -8px -2px; width: 20px !important; }.ui-slider.ui-slider-vertical .ui-slider-handle-lg { height: 24px !important; margin: -4px 0 -8px -4px; width: 24px !important; }.ui-slider .ui-slider-handle-lg.ui-slider-handle-round { border-radius: 15px; }@media (min-width: 992px) { .slider .col-md-1 { width: 6%; } }@media (min-width: 1200px) { .slider .col-lg-1 { width: 5%; } }@media (max-width: 768px) { .slider .col-xs-1 { width: 10%; } }@media (max-width: 640px) { .slider .col-xs-1 { width: 12.5%; } }@media (max-width: 480px) { .slider .col-xs-1 { width: 15%; } }@media (max-width: 320px) { .slider .col-xs-1 { width: 20%; } }.input-group .input-group-btn .btn-group { margin-left: -2px; margin-right: -2px; }.scrollbar-measure {width: 1px;height: 1px;overflow: scroll;position: absolute;top: -9999px;}.fa-lg {font-size: 1.33333333em;line-height: 0.75em;vertical-align: -15%;}.fa-2x {font-size: 2em;}.fa-3x {font-size: 3em;}.fa-4x {font-size: 4em;}.fa-5x {font-size: 5em;}.fa-fw {width: 1.28571429em;text-align: center;}.fa-border {padding: .2em .25em .15em;border: solid 0.08em #eeeeee;border-radius: .1em;}.fa.pull-left {margin-right: .3em;}.fa.pull-right {margin-left: .3em;}.fa-spin {-webkit-animation: fa-spin 2s infinite linear;animation: fa-spin 2s infinite linear;}.fa-pulse {-webkit-animation: fa-spin 1s infinite steps(8);animation: fa-spin 1s infinite steps(8);}@-webkit-keyframes fa-spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}}@keyframes fa-spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}}.fa-rotate-90 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}.fa-rotate-180 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}.fa-rotate-270 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg);}.fa-flip-horizontal {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform: scale(-1, 1);-ms-transform: scale(-1, 1);transform: scale(-1, 1);}.fa-flip-vertical {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform: scale(1, -1);-ms-transform: scale(1, -1);transform: scale(1, -1);}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical {filter: none;}.fa-stack {position: relative;display: inline-block;width: 2em;height: 2em;line-height: 2em;vertical-align: middle;}.fa-stack-1x,.fa-stack-2x {position: absolute;left: 0;width: 100%;text-align: center;}.fa-stack-1x {line-height: inherit;}.fa-stack-2x {font-size: 2em;}.fa-inverse {color: #ffffff;}label.bf-required:after { content:" *"; }label.bf-no-message { }label.bf-info { }label.bf-warning { color: orange; }label.bf-error { color: red; }label.bf-fatal { color: red; }.bf-message { padding-top: 2px !important; padding-bottom:2px !important;margin-top:7px; margin-bottom:0px !important;}.bf-message-summary { padding-left:10px; font-weight:bold;}.bf-message-detail { padding-left:10px;}.tabs-below > .nav-tabs,.tabs-right > .nav-tabs,.tabs-left > .nav-tabs,.tabs-below > .nav-pills,.tabs-right > .nav-pills,.tabs-left > .nav-pills {border-bottom: 0;}.tab-content > .tab-pane,.pill-content > .pill-pane {display: none;}.tab-content > .active,.pill-content > .active {display: block;}.tabs-below > .nav-tabs {border-top: 1px solid #ddd;}.tabs-below > .nav-tabs > li,.tabs-below > .nav-pills > li {margin-top: -1px;margin-bottom: 0;}.tabs-below > .nav-tabs > li > a {-webkit-border-radius: 0 0 4px 4px;-moz-border-radius: 0 0 4px 4px;border-radius: 0 0 4px 4px;}.tabs-below > .nav-tabs > li > a:hover,.tabs-below > .nav-tabs > li > a:focus,.tabs-below > .nav-pills > li > a:hover,.tabs-below > .nav-pills > li > a:focus {border-top-color: #ddd;border-bottom-color: transparent;}.tabs-below > .nav-tabs > .active > a,.tabs-below > .nav-tabs > .active > a:hover,.tabs-below > .nav-tabs > .active > a:focus,.tabs-below > .nav-pills > .active > a,.tabs-below > .nav-pills > .active > a:hover,.tabs-below > .nav-pills > .active > a:focus {border-color: transparent #ddd #ddd #ddd;}.form-inline {@media (min-width: @screen-sm) {// Inline-block all the things for "inline".form-group {display: inline-block;margin-bottom: 0;vertical-align: middle;}// In navbar-form, allow folks to *not* use `.form-group`.form-control {display: inline-block;}// Override `width: 100%;` when not within a `.form-group`select.form-control {width: auto;}.radio,.checkbox {display: inline-block;margin-top: 0;margin-bottom: 0;padding-left: 0;}.radio input[type="radio"],.checkbox input[type="checkbox"] {float: none;margin-left: 0;}}}.img-responsive {display: block;max-width: 100%;height: auto;}.dropdown-kebab ul > li > a {padding: 1px 15px;}.form-inline .minicolors {display: inline-block;} \ No newline at end of file +/*! + * Copyright 2013-2016 Riccardo Massera (TheCoder4.Eu) + * BootsFaces Framework CSS + * + * This file is part of BootsFaces. + * + * Licensed 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. + */ + +/* Navbar */ +.navbar-static-bottom { + margin-top: 10px; + margin-bottom: 1px; +} +.navbar-fixed-top .navbar-inner, .navbar-static-bottom .navbar-inner { + border-width: 1px 0 0; +} + +/* inputText */ +.row .form-group { + margin-bottom: 10px; +} + +/* navCommandLink */ +.commandLink { + cursor: pointer; +} + +/* Datepicker */ +.ui-datepicker.ui-widget.ui-widget-content { + z-index: 2000 !important; +} +.ui-datepicker-header { + font-weight: bold; + min-height: auto; +} +.ui-datepicker-inline { + font-size: 0.85em; +} +div > .ui-datepicker-trigger { + display:none; +} + +.ui-datepicker-calendar tbody > tr > td { + border: 0 none; + padding: 1px; +} + +.ui-datepicker-calendar > thead > tr > th { + border: 0 none; + padding: 0.7em 0.3em; +} +/* Slider2 */ +.row .slider2 { margin-left: 0px; } +.slider2 .badge { min-width: 30px; } +.slider2 input { width: auto; } +.slider2-vertical input { margin: 5px auto; width: auto; padding: 5px; } +.slider2-vertical .badge { margin: 10px auto; display: block; width: 66%; max-width: 50px; padding-left:0px; padding-right:0px;} +.row .slider2-vertical { padding-bottom: 5px; margin-left: 0px;} +.slider2-vertical p { font-weight: bold; margin: 0px; text-align: center;} +.slider2 .tooltip-inner { width: auto !important; } + +@media (min-width: 992px) { .slider2 .col-md-1 { width: 6%; } } +@media (min-width: 1200px) { .slider2 .col-lg-1 { width: 5%; } } +@media (max-width: 768px) { .slider2 .col-xs-1 { width: 10%; } } +@media (max-width: 640px) { .slider2 .col-xs-1 { width: 12.5%; } } +@media (max-width: 480px) { .slider2 .col-xs-1 { width: 15%; } } +@media (max-width: 320px) { .slider2 .col-xs-1 { width: 20%; } } + +/* Slider */ +.row .slider { margin-left: 0px; } +.slider input { width: auto; } +.slider .badge { min-width: 30px; } +.slider .ui-widget { margin-top: 7px; } +.slider-vertical input { margin: 5px auto; width: auto; padding: 5px; } +.slider-vertical .badge { margin: 10px auto; display: block; width: 66%; max-width: 50px; padding-left:0px; padding-right:0px;} +.row .slider-vertical { padding-bottom: 5px; margin-left: 0px;} +.slider-vertical p { font-weight: bold; margin: 0px; text-align: center;} +.slider-vertical .ui-widget { margin: 0 auto; } + +.ui-slider .ui-slider-handle-round { border-radius: 10px; } +.ui-slider .ui-slider-handle-md { height: 20px !important; margin: -2px 0 0 -2px; width: 20px !important; } +.ui-slider .ui-slider-handle-lg { height: 24px !important; margin: -4px 0 0 -4px; width: 24px !important; } +.ui-slider.ui-slider-vertical .ui-slider-handle-md { height: 20px !important; margin: -2px 0 -8px -2px; width: 20px !important; } +.ui-slider.ui-slider-vertical .ui-slider-handle-lg { height: 24px !important; margin: -4px 0 -8px -4px; width: 24px !important; } +.ui-slider .ui-slider-handle-lg.ui-slider-handle-round { border-radius: 15px; } + +@media (min-width: 992px) { .slider .col-md-1 { width: 6%; } } +@media (min-width: 1200px) { .slider .col-lg-1 { width: 5%; } } +@media (max-width: 768px) { .slider .col-xs-1 { width: 10%; } } +@media (max-width: 640px) { .slider .col-xs-1 { width: 12.5%; } } +@media (max-width: 480px) { .slider .col-xs-1 { width: 15%; } } +@media (max-width: 320px) { .slider .col-xs-1 { width: 20%; } } +.input-group .input-group-btn .btn-group { margin-left: -2px; margin-right: -2px; } +/* Temporary fix for modal by @fat until Bootstrap 3.1.0 */ +.scrollbar-measure { + width: 1px; + height: 1px; + overflow: scroll; + position: absolute; + top: -9999px; +} +/* Font Awesome classes for Gliphicons */ + +/* makes the font 33% larger relative to the icon container */ +.fa-lg { + font-size: 1.33333333em; + line-height: 0.75em; + vertical-align: -15%; +} +.fa-2x { + font-size: 2em; +} +.fa-3x { + font-size: 3em; +} +.fa-4x { + font-size: 4em; +} +.fa-5x { + font-size: 5em; +} +.fa-fw { + width: 1.28571429em; + text-align: center; +} +.fa-border { + padding: .2em .25em .15em; + border: solid 0.08em #eeeeee; + border-radius: .1em; +} +.fa.pull-left { + margin-right: .3em; +} +.fa.pull-right { + margin-left: .3em; +} +.fa-spin { + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; +} +.fa-pulse { + -webkit-animation: fa-spin 1s infinite steps(8); + animation: fa-spin 1s infinite steps(8); +} +@-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +.fa-rotate-90 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.fa-rotate-180 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.fa-rotate-270 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.fa-flip-horizontal { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +.fa-flip-vertical { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +:root .fa-rotate-90, +:root .fa-rotate-180, +:root .fa-rotate-270, +:root .fa-flip-horizontal, +:root .fa-flip-vertical { + filter: none; +} +.fa-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.fa-stack-1x, +.fa-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} +.fa-stack-1x { + line-height: inherit; +} +.fa-stack-2x { + font-size: 2em; +} +.fa-inverse { + color: #ffffff; +} + +/* Moved in customizations.less */ +/* Collapsible panels +.panel-heading a:after { + font-family:'Glyphicons Halflings'; + content:"\e114"; + float: right; + color: grey; +} +.panel-heading a.collapsed:after { + content:"\e080"; +} +a.panel-title-link { + outline: thin dotted rgba(255, 255, 255, 0.3); + outline-offset: 3px; +} */ + +/* required fields and displaying errors */ +label.bf-required:after { content:" *"; } +label.bf-no-message { } +label.bf-info { } +label.bf-warning { color: orange; } +label.bf-error { color: red; } +label.bf-fatal { color: red; } + +.bf-message { padding-top: 2px !important; padding-bottom:2px !important;margin-top:7px; margin-bottom:0px !important;} +.bf-message-summary { padding-left:10px; font-weight:bold;} +.bf-message-detail { padding-left:10px;} + +/* tab position */ +.tabs-below > .nav-tabs, +.tabs-right > .nav-tabs, +.tabs-left > .nav-tabs, +.tabs-below > .nav-pills, +.tabs-right > .nav-pills, +.tabs-left > .nav-pills { + border-bottom: 0; +} + +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} + +.tab-content > .active, +.pill-content > .active { + display: block; +} + +/** BELOW TAB **/ +.tabs-below > .nav-tabs { + border-top: 1px solid #ddd; +} + +.tabs-below > .nav-tabs > li, +.tabs-below > .nav-pills > li { + margin-top: -1px; + margin-bottom: 0; +} + +.tabs-below > .nav-tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.tabs-below > .nav-tabs > li > a:hover, +.tabs-below > .nav-tabs > li > a:focus, +.tabs-below > .nav-pills > li > a:hover, +.tabs-below > .nav-pills > li > a:focus { + border-top-color: #ddd; + border-bottom-color: transparent; +} + +.tabs-below > .nav-tabs > .active > a, +.tabs-below > .nav-tabs > .active > a:hover, +.tabs-below > .nav-tabs > .active > a:focus, +.tabs-below > .nav-pills > .active > a, +.tabs-below > .nav-pills > .active > a:hover, +.tabs-below > .nav-pills > .active > a:focus { + border-color: transparent #ddd #ddd #ddd; +} + +/* NavBar +// Inline forms +// +// Make forms appear inline(-block) by adding the `.form-inline` class. Inline +// forms begin stacked on extra small (mobile) devices and then go inline when +// viewports reach <768px. +// +// Requires wrapping inputs and labels with `.form-group` for proper display of +// default HTML form controls and our custom form controls (e.g., input groups). +// +// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. */ + +.form-inline { + + /* Kick in the inline */ + @media (min-width: @screen-sm) { + // Inline-block all the things for "inline" + .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + + // In navbar-form, allow folks to *not* use `.form-group` + .form-control { + display: inline-block; + } + + // Override `width: 100%;` when not within a `.form-group` + select.form-control { + width: auto; + } + + /* Remove default margin on radios/checkboxes that were used for stacking, and + // then undo the floating of radios and checkboxes to match (which also avoids + // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).*/ + .radio, + .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + } + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + float: none; + margin-left: 0; + } + } +} + +/* Thumbnails +// Responsive image +// +// Keep images from scaling beyond the width of their parents. */ + +.img-responsive { + display: block; + max-width: 100%; /* Part 1: Set a maximum relative to the parent */ + height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ +} + +/*Kebabs */ +.dropdown-kebab ul > li > a { + padding: 1px 15px; +} + +/* Glyphicons path override +@font-face { + font-family: "Glyphicons Halflings"; + src: url("../../../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../../../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../../../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); +}*/ + +.form-inline .minicolors { + display: inline-block; +} \ No newline at end of file diff --git a/src/main/java/net/bootsfaces/component/datepicker/Datepicker.java b/src/main/java/net/bootsfaces/component/datepicker/Datepicker.java index d6eca5943..a10e8ee3b 100644 --- a/src/main/java/net/bootsfaces/component/datepicker/Datepicker.java +++ b/src/main/java/net/bootsfaces/component/datepicker/Datepicker.java @@ -304,13 +304,13 @@ private void encodeHTML(FacesContext fc) throws IOException { dpId = clientId + "_" + "div"; rw.startElement("div", this); rw.writeAttribute("id", dpId, null); - rw.endElement("div"); if (getStyleClass() != null) { - rw.writeAttribute("styleClass", getStyleClass(), "styleClass"); + rw.writeAttribute("class", getStyleClass(), "styleClass"); } if (getStyle() != null) { rw.writeAttribute("style", getStyle(), "style"); } + rw.endElement("div"); } else { // popup dpId = clientId + "_input";