time picker #161

DominoKit · Jan 8, 2019 · 1ab68a1 · 1ab68a1
1 parent fc86b97
commit 1ab68a1
Show file tree

Hide file tree

Showing 6 changed files with 281 additions and 241 deletions.
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
@@ -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);
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
@@ -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
@@ -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;
+}
diff --git 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();
             }
         }