From 08d480ccb10b3b18620c8e49bdae6e8ffff8e899 Mon Sep 17 00:00:00 2001 From: Jasper de Vries Date: Sun, 28 Jan 2024 20:32:00 +0100 Subject: [PATCH] #1428 TimePicker styling (#1430) * #1428 Fix styling * Restore after merge --- .../clockpicker/ClockPickerRenderer.java | 1 + .../clockpicker/0-clockpicker.css | 210 +++++++++++++++++- .../clockpicker/0-clockpicker.js | 2 +- .../clockpicker/1-clockpicker-widget.js | 4 +- .../clockpicker/1-pfe-component.css | 1 + .../src/main/webapp/resources/css/global.css | 4 - .../src/main/webapp/resources/css/layout.css | 5 +- .../clockpicker/example-basicUsage.xhtml | 32 ++- 8 files changed, 227 insertions(+), 32 deletions(-) create mode 100644 core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-pfe-component.css diff --git a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java index 2385ae952..5def1e660 100644 --- a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java +++ b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java @@ -74,6 +74,7 @@ private void encodeMarkup(FacesContext context, ClockPicker clockPicker, final S String inputId = clientId + "_input"; writer.startElement("div", clockPicker); + writer.writeAttribute("id", clientId, null); writer.writeAttribute("class", ClockPicker.CONTAINER_CLASS, null); writer.startElement("input", null); diff --git a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.css b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.css index 330254218..c943bca03 100644 --- a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.css +++ b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.css @@ -1,3 +1,205 @@ +/*! + * ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/) + * Copyright 2014 Wang Shenwei. + * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE) + * + * Bootstrap v3.1.1 (http://getbootstrap.com) + * Copyright 2011-2014 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +/* Picked from bootstrap: .popover, .btn, .text-primary */ + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1010; + display: none; + max-width: 276px; + padding: 1px; + text-align: left; + white-space: normal; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); +} +.popover.top { + margin-top: -10px; +} +.popover.right { + margin-left: 10px; +} +.popover.bottom { + margin-top: 10px; +} +.popover.left { + margin-left: -10px; +} +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + border-radius: 5px 5px 0 0; +} +.popover-content { + padding: 9px 14px; +} +.popover > .arrow, +.popover > .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + /* The following are set in WordPress (wp-admin/css/revisions.css) - reset them to initial values */ + overflow:visible; + margin:0; + padding:0; + z-index:auto; + background-color:transparent; + -webkit-box-shadow:none; + box-shadow:none; + bottom:auto; + left:auto; + right:auto; + top:auto; + -webkit-transform:none; + -ms-transform:none; + transform:none; +} +.popover > .arrow { + border-width: 11px; +} +.popover > .arrow:after { + content: ""; + border-width: 10px; +} +.popover.top > .arrow { + bottom: -11px; + left: 50%; + margin-left: -11px; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, .25); + border-bottom-width: 0; +} +.popover.top > .arrow:after { + bottom: 1px; + margin-left: -10px; + content: " "; + border-top-color: #fff; + border-bottom-width: 0; +} +.popover.right > .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-right-color: #999; + border-right-color: rgba(0, 0, 0, .25); + border-left-width: 0; +} +.popover.right > .arrow:after { + bottom: -10px; + left: 1px; + content: " "; + border-right-color: #fff; + border-left-width: 0; +} +.popover.bottom > .arrow { + top: -11px; + left: 50%; + margin-left: -11px; + border-top-width: 0; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, .25); +} +.popover.bottom > .arrow:after { + top: 1px; + margin-left: -10px; + content: " "; + border-top-width: 0; + border-bottom-color: #fff; +} +.popover.left > .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-right-width: 0; + border-left-color: #999; + border-left-color: rgba(0, 0, 0, .25); +} +.popover.left > .arrow:after { + right: 1px; + bottom: -10px; + content: " "; + border-right-width: 0; + border-left-color: #fff; +} +.btn { + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-image: none; + border: 1px solid transparent; + +} +.btn:focus, +.btn:active:focus, +.btn.active:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.btn:hover, +.btn:focus { + color: #333; + text-decoration: none; +} +.btn:active, +.btn.active { + background-image: none; + outline: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); +} +.btn-default { + color: #333; + background-color: #fff; + border-color: #ccc; +} +.btn-default:hover, +.btn-default:focus, +.btn-default:active, +.btn-default.active, +.open .dropdown-toggle.btn-default { + color: #333; + background-color: #ebebeb; + border-color: #adadad; +} +.btn-default:active, +.btn-default.active, +.open .dropdown-toggle.btn-default { + background-image: none; +} +.btn-block { + display: block; + width: 100%; +} +.text-primary { + color: #428bca; +} + /*! * ClockPicker v{package.version} for Bootstrap (http://weareoutman.github.io/clockpicker/) * Copyright 2014 Wang Shenwei. @@ -24,12 +226,6 @@ top: auto; bottom: 6px; } - -/**Custom CSS**/ -.clockpicker-popover { - width: 224px; -} - .clockpicker-popover .popover-title { background-color: #fff; color: #999; @@ -164,7 +360,7 @@ padding: 5px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; - + } .clockpicker-button.pm-button { margin: 1px 1px 1px 136px; diff --git a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js index a1f0f36ed..6f73d5084 100644 --- a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js +++ b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js @@ -66,7 +66,7 @@ // Popover template var tpl = [ - '
', + '
', '
', '
', '', diff --git a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js index 7ab705062..68ee17303 100644 --- a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js +++ b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js @@ -22,6 +22,8 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({ // pfs metadata this.jq.data(PrimeFaces.CLIENT_ID_DATA, this.id); this.originalValue = this.jq.val(); + + PrimeFaces.skinInput(this.jq); }, // @override @@ -107,4 +109,4 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({ PrimeFaces.utils.enableInputWidget(this.jq); this.clockpicker = this.createClockPicker(); } -}); \ No newline at end of file +}); diff --git a/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-pfe-component.css b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-pfe-component.css new file mode 100644 index 000000000..8bfc1c29a --- /dev/null +++ b/core/src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/1-pfe-component.css @@ -0,0 +1 @@ +/* TODO support theme colors and dark mode here */ diff --git a/showcase/src/main/webapp/resources/css/global.css b/showcase/src/main/webapp/resources/css/global.css index 668be07de..348fa2de8 100644 --- a/showcase/src/main/webapp/resources/css/global.css +++ b/showcase/src/main/webapp/resources/css/global.css @@ -18,10 +18,6 @@ --vela4: hsl(29, 44%, 92%); } -* { - font-size: 12px; -} - html { overflow: auto !important; visibility: hidden; diff --git a/showcase/src/main/webapp/resources/css/layout.css b/showcase/src/main/webapp/resources/css/layout.css index babe14ea1..81d7ee637 100644 --- a/showcase/src/main/webapp/resources/css/layout.css +++ b/showcase/src/main/webapp/resources/css/layout.css @@ -166,8 +166,9 @@ div.source { text-align: left; } -body .ui-panelgrid .ui-panelgrid-cell { - padding: 0.571rem 1rem; +html body .ui-panelgrid .ui-panelgrid-cell, +html body .ui-panel.ui-layout-south .ui-panel-content { + padding: .25rem; } body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon.ui-icon-none { diff --git a/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml b/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml index 220dd27c7..3fbab5372 100644 --- a/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml +++ b/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml @@ -7,24 +7,22 @@ - -

Auto-Close Mode

- + +

Auto-Close Mode

+ +

Manual Close Mode

+ -

Manual Close Mode

- - - - - - - + + + + - \ No newline at end of file +