diff --git a/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css b/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css index 75a7d6fef..ff49ae71c 100644 --- a/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css +++ b/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css @@ -20,5 +20,6 @@ @import url(dialogs/dialogs.css); @import url(modals/modals.css); @import url(datepicker/datepicker.css); +@import url(timepicker/timepicker.css); @import url(style.css); @import url(colors.css); \ No newline at end of file diff --git a/src/main/java/org/dominokit/domino/ui/public/css/style.css b/src/main/java/org/dominokit/domino/ui/public/css/style.css index ad27e7521..fee7f8d9d 100644 --- a/src/main/java/org/dominokit/domino/ui/public/css/style.css +++ b/src/main/java/org/dominokit/domino/ui/public/css/style.css @@ -5560,6 +5560,7 @@ a.list-group-item:not([class*="bg-"]):not([class*="-success"]):not([class*="-dan .menu .tree-leaf a .title { font-weight: 500; + display: block; } .menu .list .ml-tree { @@ -6187,164 +6188,6 @@ a.disabled { .clock-picker .small-hour:hover { } -.time-picker { - width: 100%; - display: inline-block; - -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); -} - -.time-picker .picker-content { - height: 255px; -} - -.time-picker .time-panel { - text-align: center; - padding-top: 10px; - height: 80px; -} - -.time-picker .time-display-large { - font-size: 42px; - display: flex; - flex-direction: row; - justify-content: center; - transition-duration: 600ms; - align-items: flex-end; -} - -.time-picker .hour-text { - font-size: 42px; - line-height: 60px; - cursor: pointer; -} - -.time-picker .minute-text { - font-size: 42px; - line-height: 60px; - cursor: pointer; -} - -.time-picker .am-pm-container { - cursor: pointer; - padding-left: 5px; - text-transform: uppercase; -} - -.time-picker .am-pm-text { -} - -.time-picker .am-pm-top { - line-height: 10px; - float: left; - clear: left; - font-size: 12px; - width: 40px; - color: #d2d2d2; - text-align: left; -} - -.time-picker .am-pm-bottom { - float: left; - clear: left; - padding-bottom: 10px; - width: 40px; - text-align: left; - font-size: 18px; -} - -.time-picker .navigate { - border-radius: 50%; - transform: scale(0.9); - text-align: center; - font-weight: 600; - position: relative; - color: white !important; -} - -.time-picker .navigate-left { - left: -30px; -} - -.time-picker .navigate-right { - right: -30px; -} - -.time-picker .full-time { - text-align: center; -} - -.time-picker-container { - -} - -.time-picker .left-button { - position: relative; - left: -57px; - padding-left: 0px; - padding-right: 0px; - z-index: 1; - line-height: 40px; -} - -.time-picker .right-button { - position: relative; - right: -137px; - padding-left: 0px; - padding-right: 0px; - z-index: 1; - line-height: 40px; -} - -.time-picker .left-sm-button { - top: -2px; - position: relative; - left: -154px; - padding-left: 0px; - padding-right: 0px; - z-index: 1; - line-height: 30px; -} - -.time-picker .right-sm-button { - top: -2px; - position: relative; - right: -54px; - padding-left: 0px; - padding-right: 0px; - z-index: 1; - line-height: 30px; -} - -.time-text { - height: 40px;; - width: 200px; - position: absolute; - left: 50%; - margin-left: -100px; - margin-top: 10px; -} - -.time-picker .time-footer { - padding: 5px; - text-align: center; -} - -.time-picker .time-footer .btn { - text-transform: uppercase; - text-overflow: ellipsis; - max-width: 85px; - padding: 2px; -} - -.time-picker .clear-button { - float: left; -} - -.time-picker .close-button { - float: right; -} - .cursor-pointer { cursor: pointer; } diff --git a/src/main/java/org/dominokit/domino/ui/public/css/timepicker/timepicker.css b/src/main/java/org/dominokit/domino/ui/public/css/timepicker/timepicker.css new file mode 100644 index 000000000..23637d142 --- /dev/null +++ b/src/main/java/org/dominokit/domino/ui/public/css/timepicker/timepicker.css @@ -0,0 +1,157 @@ +.time-picker { + width: 100%; + display: inline-block; +} + +.time-picker .picker-content { + height: 255px; + position: relative; + text-align: center; +} + +.time-picker .time-panel { + text-align: center; + padding-top: 10px; + height: 80px; +} + +.time-picker .time-display-large { + font-size: 42px; + display: flex; + flex-direction: row; + justify-content: center; + transition-duration: 600ms; + align-items: flex-end; +} + +.time-picker .hour-text { + font-size: 42px; + line-height: 60px; + cursor: pointer; +} + +.time-picker .minute-text { + font-size: 42px; + line-height: 60px; + cursor: pointer; +} + +.time-picker .am-pm-container { + cursor: pointer; + padding-left: 5px; + text-transform: uppercase; +} + +.time-picker .am-pm-text { +} + +.time-picker .am-pm-top { + line-height: 10px; + float: left; + clear: left; + font-size: 12px; + width: 40px; + color: #d2d2d2; + text-align: left; +} + +.time-picker .am-pm-bottom { + float: left; + clear: left; + padding-bottom: 10px; + width: 40px; + text-align: left; + font-size: 18px; +} + +.time-picker .navigate { + border-radius: 50%; + transform: scale(0.9); + text-align: center; + font-weight: 600; + position: relative; + color: white !important; +} + +.time-picker .navigate-left { + left: -30px; +} + +.time-picker .navigate-right { + right: -30px; +} + +.time-picker .full-time { + text-align: center; +} + +.time-picker-container { + +} + +.time-picker .left-button { + position: relative; + left: -57px; + padding-left: 0px; + padding-right: 0px; + z-index: 1; + line-height: 40px; +} + +.time-picker .right-button { + position: relative; + right: -137px; + padding-left: 0px; + padding-right: 0px; + z-index: 1; + line-height: 40px; +} + +.time-picker .left-sm-button { + top: -2px; + position: relative; + left: -154px; + padding-left: 0px; + padding-right: 0px; + z-index: 1; + line-height: 30px; +} + +.time-picker .right-sm-button { + top: -2px; + position: relative; + right: -54px; + padding-left: 0px; + padding-right: 0px; + z-index: 1; + line-height: 30px; +} + +.time-text { + height: 40px;; + width: 200px; + position: absolute; + left: 50%; + margin-left: -100px; + margin-top: 10px; +} + +.time-picker .time-footer { + padding: 5px; + text-align: center; +} + +.time-picker .time-footer .btn { + text-transform: uppercase; + text-overflow: ellipsis; + max-width: 85px; + padding: 2px; +} + +.time-picker .clear-button { + float: left; +} + +.time-picker .close-button { + float: right; +} \ No newline at end of file diff --git a/src/main/java/org/dominokit/domino/ui/timepicker/ClockElement.java b/src/main/java/org/dominokit/domino/ui/timepicker/ClockElement.java index 7b65128e1..660be8d2f 100644 --- a/src/main/java/org/dominokit/domino/ui/timepicker/ClockElement.java +++ b/src/main/java/org/dominokit/domino/ui/timepicker/ClockElement.java @@ -34,11 +34,11 @@ private ClockElement(int value, String text, double angle, double drawRadius, Co this.value = value; double circleRadius = radius; Color innerColor = colorScheme.lighten_4(); - String elementStyle = "hour"; + String elementStyle = TimePickerStyles.HOUR; if (isMinute) { if (value % 5 != 0) { circleRadius = 10; - elementStyle = "small-hour"; + elementStyle = TimePickerStyles.SMALL_HOUR; innerColor = colorScheme.darker_2(); } } diff --git a/src/main/java/org/dominokit/domino/ui/timepicker/TimePicker.java b/src/main/java/org/dominokit/domino/ui/timepicker/TimePicker.java index 5c3af1b1f..6c9d67296 100644 --- a/src/main/java/org/dominokit/domino/ui/timepicker/TimePicker.java +++ b/src/main/java/org/dominokit/domino/ui/timepicker/TimePicker.java @@ -12,6 +12,7 @@ import org.dominokit.domino.ui.modals.ModalDialog; import org.dominokit.domino.ui.pickers.PickerHandler; import org.dominokit.domino.ui.style.ColorScheme; +import org.dominokit.domino.ui.style.Styles; import org.dominokit.domino.ui.utils.DominoElement; import org.dominokit.domino.ui.utils.ElementUtil; import org.dominokit.domino.ui.utils.TextNode; @@ -33,8 +34,7 @@ public class TimePicker implements IsElement { - public static final String PICKER_WIDTH = "270px"; - private HTMLDivElement pickerContentContainer; + private DominoElement pickerContentContainer; private Clock clock; double centerX = 135; @@ -46,27 +46,33 @@ public class TimePicker implements IsElement { private SVGElement hoursRootSvg; private SVGCircleElement hoursCircle; private SVGCircleElement hoursCenterCircle; - private HTMLDivElement hoursPanel; + private DominoElement hoursPanel; private SVGElement minutesRootSvg; private SVGCircleElement minutesCircle; private SVGCircleElement minutesCenterCircle; - private HTMLDivElement minutesPanel; + private DominoElement minutesPanel; - private DominoElement element = DominoElement.of(div().css("time-picker")); - private DominoElement headerPanel = DominoElement.of(div().css("time-panel")); + private DominoElement element = DominoElement.of(div() + .css(TimePickerStyles.TIME_PICKER) + .css(Styles.default_shadow)); + private DominoElement headerPanel = DominoElement.of(div().css(TimePickerStyles.TIME_PANEL)); private Text splitText = TextNode.of(":"); - private DominoElement hoursText = DominoElement.of(div().css("hour-text")); - private DominoElement minutesText = DominoElement.of(div().css("minute-text")); - private DominoElement amPmContainer = DominoElement.of(div().css("am-pm-container")); - private DominoElement amPmSpanTop = DominoElement.of(span().css("am-pm-text").css("am-pm-top")); - private DominoElement amPmSpanBottom = DominoElement.of(span().css("am-pm-text").css("am-pm-bottom")); - - private HTMLAnchorElement backToHours; - private HTMLAnchorElement backToMinutes; - - private DominoElement clockPanel = DominoElement.of(div().css("time-display-large")); - private DominoElement footerPanel = DominoElement.of(div().css("time-footer")); + private DominoElement hoursText = DominoElement.of(div().css(TimePickerStyles.HOUR_TEXT)); + private DominoElement minutesText = DominoElement.of(div().css(TimePickerStyles.MINUTE_TEXT)); + private DominoElement amPmContainer = DominoElement.of(div().css(TimePickerStyles.AM_PM_CONTAINER)); + private DominoElement amPmSpanTop = DominoElement.of(span() + .css(TimePickerStyles.AM_PM_TEXT) + .css(TimePickerStyles.AM_PM_TOP)); + private DominoElement amPmSpanBottom = DominoElement.of(span() + .css(TimePickerStyles.AM_PM_TEXT) + .css(TimePickerStyles.AM_PM_BOTTOM)); + + private DominoElement backToHours; + private DominoElement backToMinutes; + + private DominoElement clockPanel = DominoElement.of(div().css(TimePickerStyles.TIME_DISPLAY_LARGE)); + private DominoElement footerPanel = DominoElement.of(div().css(TimePickerStyles.TIME_FOOTER)); private ColorScheme colorScheme = ColorScheme.BLUE; @@ -121,33 +127,35 @@ public TimePicker(DateTimeFormatInfo dateTimeFormatInfo) { private void initFooter() { element.appendChild(footerPanel); - clearButton = Button.createDefault("CLEAR").linkify().setColor(colorScheme.color()); - clearButton.style().add("clear-button"); - - clearButton.addClickListener(evt -> { - for (int i = 0; i < clearHandlers.size(); i++) { - clearHandlers.get(i).handle(); - } - }); - - nowButton = Button.createDefault("NOW").linkify().setColor(colorScheme.color()); - nowButton.style().add("now-button"); - nowButton.addClickListener(evt -> { - setTime(new Date()); - }); - - closeButton = Button.createDefault("CLOSE").linkify().setColor(colorScheme.color()); - closeButton.style().add("close-button"); + clearButton = Button.createDefault("CLEAR") + .linkify() + .setColor(colorScheme.color()) + .styler(style -> style.add(TimePickerStyles.CLEAR_BUTTON)) + .addClickListener(evt -> { + for (int i = 0; i < clearHandlers.size(); i++) { + clearHandlers.get(i).handle(); + } + }); - closeButton.addClickListener(evt -> { - for (int i = 0; i < closeHandlers.size(); i++) { - closeHandlers.get(i).handle(); - } - }); + nowButton = Button.createDefault("NOW") + .linkify() + .setColor(colorScheme.color()) + .styler(style -> style.add(TimePickerStyles.NOW_BUTTON)) + .addClickListener(evt -> setTime(new Date())); + + closeButton = Button.createDefault("CLOSE") + .linkify() + .setColor(colorScheme.color()) + .styler(style -> style.add(TimePickerStyles.CLOSE_BUTTON)) + .addClickListener(evt -> { + for (int i = 0; i < closeHandlers.size(); i++) { + closeHandlers.get(i).handle(); + } + }); - footerPanel.appendChild(clearButton.asElement()); - footerPanel.appendChild(nowButton.asElement()); - footerPanel.appendChild(closeButton.asElement()); + footerPanel.appendChild(clearButton); + footerPanel.appendChild(nowButton); + footerPanel.appendChild(closeButton); } @@ -178,22 +186,26 @@ public TimePicker showBorder() { private void initPickerElements() { - backToHours = a().css("navigate").css("navigate-left") - .style("display: none;") + backToHours = DominoElement.of(a() + .css(TimePickerStyles.NAVIGATE) + .css(TimePickerStyles.NAVIGATE_LEFT) .on(EventType.click, event -> { if (minutesVisible) { showHours(); } }) - .add(Icons.ALL.navigate_before()).asElement(); - backToMinutes = a().css("navigate").css("navigate-right") - .style("display: none;") + .add(Icons.ALL.navigate_before())) + .collapse(); + + backToMinutes = DominoElement.of(a().css(TimePickerStyles.NAVIGATE) + .css(TimePickerStyles.NAVIGATE_RIGHT) .on(EventType.click, event -> { if (!minutesVisible) { showMinutes(); } }) - .add(Icons.ALL.navigate_next()).asElement(); + .add(Icons.ALL.navigate_next())) + .collapse(); element.appendChild(headerPanel); @@ -209,27 +221,29 @@ private void initPickerElements() { amPmContainer.appendChild(amPmSpanTop); amPmContainer.appendChild(amPmSpanBottom); - minutesText.style().add(colorScheme.lighten_4().getStyle()); + minutesText + .styler(style -> style.add(colorScheme.lighten_4().getStyle())) + .addClickListener(evt -> { + if (!minutesVisible) + showMinutes(); + }); - hoursText.addEventListener(EventType.click.getName(), evt -> { + hoursText.addClickListener(evt -> { if (minutesVisible) showHours(); }); - minutesText.addEventListener(EventType.click.getName(), evt -> { - if (!minutesVisible) - showMinutes(); - }); - amPmContainer.addEventListener(EventType.click.getName(), evt -> switchPeriod()); + amPmContainer.addClickListener(evt -> switchPeriod()); - pickerContentContainer = div().css("picker-content").style("position: relative; text-align: center;").asElement(); + pickerContentContainer = DominoElement.of(div() + .css(TimePickerStyles.PICKER_CONTENT)); - hoursPanel = div().css("clock-picker").asElement(); - minutesPanel = div().css("clock-picker").asElement(); + hoursPanel = DominoElement.of(div().css(TimePickerStyles.CLOCK_PICKER)); + minutesPanel = DominoElement.of(div().css(TimePickerStyles.CLOCK_PICKER)); - minutesPanel.style.display = "none"; + minutesPanel.collapse(); pickerContentContainer.appendChild(hoursPanel); pickerContentContainer.appendChild(minutesPanel); @@ -475,10 +489,10 @@ private void updateMinute(int minute) { } private void showMinutes() { - this.minutesPanel.style.display = "block"; + this.minutesPanel.expand(); this.minutesRootSvg.setAttributeNS(null, "style", "display: block; margin: auto;"); - this.hoursPanel.style.display = "none"; + this.hoursPanel.collapse(); this.hoursRootSvg.setAttributeNS(null, "style", "display: none; margin: auto;"); this.minutesVisible = true; @@ -500,10 +514,10 @@ private void animateClock() { } private void showHours() { - this.hoursPanel.style.display = "block"; + this.hoursPanel.expand(); this.hoursRootSvg.setAttributeNS(null, "style", "display: block; margin: auto;"); - this.minutesPanel.style.display = "none"; + this.minutesPanel.collapse(); this.minutesRootSvg.setAttributeNS(null, "style", "display: none; margin: auto;"); this.minutesVisible = false; @@ -558,33 +572,33 @@ private void updateHour(int hour) { } public TimePicker showNowButton() { - this.nowButton.style().setDisplay("block"); + this.nowButton.expand(); return this; } public TimePicker hideNowButton() { - this.nowButton.style().setDisplay("none"); + this.nowButton.collapse(); return this; } public TimePicker showClearButton() { - this.clearButton.style().setDisplay("block"); + this.clearButton.expand(); return this; } public TimePicker hideClearButton() { - this.clearButton.style().setDisplay("none"); + this.clearButton.collapse(); return this; } public TimePicker showCloseButton() { - this.closeButton.style().setDisplay("block"); + this.closeButton.expand(); return this; } public TimePicker hideCloseButton() { - this.closeButton.style().setDisplay("none"); + this.closeButton.collapse(); return this; } @@ -682,7 +696,7 @@ public TimePicker closeButtonText(String text) { } public TimePicker fixedWidth() { - element.style().setWidth(PICKER_WIDTH, true); + element.style().setWidth(TimePickerStyles.PICKER_WIDTH, true); return this; } @@ -691,20 +705,20 @@ public TimePicker fixedWidth(String width) { return this; } - public HTMLDivElement getHoursPanel() { + public DominoElement getHoursPanel() { return hoursPanel; } - public HTMLDivElement getMinutesPanel() { + public DominoElement getMinutesPanel() { return minutesPanel; } - public HTMLDivElement getPickerContentContainer() { + public DominoElement getPickerContentContainer() { return pickerContentContainer; } - public HTMLDivElement getClockPanel() { - return clockPanel.asElement(); + public DominoElement getClockPanel() { + return clockPanel; } public boolean isShowSwitchers() { @@ -713,11 +727,11 @@ public boolean isShowSwitchers() { public TimePicker setShowSwitchers(boolean showSwitchers) { if (showSwitchers) { - backToHours.style.display = "block"; - backToMinutes.style.display = "block"; + backToHours.expand(); + backToMinutes.expand(); } else { - backToHours.style.display = "none"; - backToMinutes.style.display = "none"; + backToHours.collapse(); + backToMinutes.collapse(); } this.showSwitchers = showSwitchers; @@ -728,10 +742,10 @@ public TimePicker setClockStyle(ClockStyle clockStyle) { this.clockStyle = clockStyle; if (_12.equals(clockStyle)) { this.clock = new Clock12(dateTimeFormatInfo); - amPmContainer.style().setDisplay("block"); + amPmContainer.expand(); } else { this.clock = new Clock24(dateTimeFormatInfo); - amPmContainer.style().setDisplay("none"); + amPmContainer.collapse(); } reDraw(); formatTime(); diff --git a/src/main/java/org/dominokit/domino/ui/timepicker/TimePickerStyles.java b/src/main/java/org/dominokit/domino/ui/timepicker/TimePickerStyles.java new file mode 100644 index 000000000..27e02aa7d --- /dev/null +++ b/src/main/java/org/dominokit/domino/ui/timepicker/TimePickerStyles.java @@ -0,0 +1,25 @@ +package org.dominokit.domino.ui.timepicker; + +public class TimePickerStyles { + public static final String PICKER_WIDTH = "270px"; + public static final String TIME_PICKER = "time-picker"; + public static final String TIME_PANEL = "time-panel"; + public static final String HOUR_TEXT = "hour-text"; + public static final String MINUTE_TEXT = "minute-text"; + public static final String AM_PM_CONTAINER = "am-pm-container"; + public static final String AM_PM_TEXT = "am-pm-text"; + public static final String AM_PM_TOP = "am-pm-top"; + public static final String AM_PM_BOTTOM = "am-pm-bottom"; + public static final String TIME_DISPLAY_LARGE = "time-display-large"; + public static final String TIME_FOOTER = "time-footer"; + public static final String CLEAR_BUTTON = "clear-button"; + public static final String NOW_BUTTON = "now-button"; + public static final String CLOSE_BUTTON = "close-button"; + public static final String NAVIGATE = "navigate"; + public static final String NAVIGATE_LEFT = "navigate-left"; + public static final String NAVIGATE_RIGHT = "navigate-right"; + public static final String PICKER_CONTENT = "picker-content"; + public static final String CLOCK_PICKER = "clock-picker"; + public static final String HOUR = "hour"; + public static final String SMALL_HOUR = "small-hour"; +}