fixed #244

added bootstrap 4.0.0 support started implementation for localization of the timepicker
atatanasov · Jan 24, 2018 · 9320767 · 9320767
1 parent b87c103
commit 9320767
Show file tree

Hide file tree

Showing 482 changed files with 650 additions and 558 deletions.
diff --git a/Gijgo.GitHub.csproj b/Gijgo.GitHub.csproj
@@ -173,6 +173,11 @@
     <Content Include="src\icons\undo.svg" />
     <Content Include="src\timepicker\css\timepicker.base.css" />
     <Content Include="src\timepicker\js\header.txt" />
+    <Content Include="src\timepicker\js\messages\messages.bg-bg.js" />
+    <Content Include="src\timepicker\js\messages\messages.de-de.js" />
+    <Content Include="src\timepicker\js\messages\messages.fr-fr.js" />
+    <Content Include="src\timepicker\js\messages\messages.pt-br.js" />
+    <Content Include="src\timepicker\js\messages\messages.ru-ru.js" />
     <Content Include="src\timepicker\js\timepicker.base.js" />
     <Content Include="src\tree\css\tree.base.css" />
     <Content Include="src\tree\css\tree.dragAndDrop.css" />

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -323,7 +323,7 @@ var writer = {
     buildHtmlFile: function (record) {
         return '<!DOCTYPE html>\r\n<html>\r\n' +
             writer.analyzeLibs(record.libs) +
-            '<body style="padding: 6px;">\r\n' +
+            '<body style="padding: 8px;">\r\n' +
             record.text +
             '</body>\r\n</html>';
     },
@@ -353,7 +353,7 @@ var writer = {
                         }
                         break;
                     case 'bootstrap4':
-                        result += '  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">\r\n';
+                        result += '  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">\r\n';
                         break;
                     case 'fontawesome':
                         result += '  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">\r\n';

diff --git a/dist/combined/css/gijgo.css b/dist/combined/css/gijgo.css
@@ -1900,6 +1900,7 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
 .gj-calendar-bootstrap table tr td.gj-cursor-pointer div:hover {
     background: #EEEEEE;
     border-radius: 4px;
+    color: #212529;
 }
 
 .gj-calendar-bootstrap table tr td.today div {
@@ -1946,6 +1947,7 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
 .gj-datepicker-bootstrap span[role="right-icon"] .input-group-text {
     padding: 7px 8px 8px 30px;
     border-left: 0px;
+    display: inline;
 }
 
 .gj-datepicker-bootstrap span[role="right-icon"] .input-group-text .gj-icon,
@@ -1957,8 +1959,8 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
 
 .gj-datepicker-bootstrap span[role="right-icon"] .input-group-text .fa {
     position: absolute;
-    right: 10px;
-    top: 7px;
+    right: 11px;
+    top: 8px;
     font-size: 21px;
 }
 .gj-timepicker {
@@ -1989,7 +1991,6 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     line-height: 1;
     color: rgba(0,0,0,.87);
     background-color: #FFFFFF;
-    border: 1px solid #E0E0E0;
 }
 
 .gj-clock .selected {
@@ -2135,6 +2136,11 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
 }
 
 /* Bootstrap */
+.gj-clock-bootstrap {
+    border-radius: 4px;
+    border: 1px solid #E0E0E0;
+}
+
 .gj-clock-bootstrap .selected {
     color: #888;
 }
@@ -2170,7 +2176,7 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
 .gj-timepicker-bootstrap span[role="right-icon"].input-group-addon .gj-icon,
 .gj-timepicker-bootstrap span[role="right-icon"].input-group-addon .material-icons {
     position: absolute;
-    top: 5px;
+    top: 4px;
     left: 7px;
 }
 

diff --git a/dist/combined/css/gijgo.min.css b/dist/combined/css/gijgo.min.css
diff --git a/dist/combined/js/gijgo.js b/dist/combined/js/gijgo.js
@@ -13853,7 +13853,9 @@ gj.timepicker = {
     messages: {
         'en-us': {
             am: 'AM',
-            pm: 'PM'
+            pm: 'PM',
+            ok: 'Ok',
+            cancel: 'Cancel'
         }
     }
 };
@@ -13904,7 +13906,7 @@ gj.timepicker.config = {
          * @example False <!-- timepicker -->
          * <input id="timepicker" width="280" />
          * <script>
-         *    $('#timepicker').timepicker({ header: false });
+         *    $('#timepicker').timepicker({ header: false, mode: '24hr' });
          * </script>
          */
         header: true,
@@ -13959,7 +13961,7 @@ gj.timepicker.config = {
          * @example Bootstrap.3 <!-- bootstrap, timepicker -->
          * <input id="timepicker" width="270" />
          * <script>
-         *     $('#timepicker').timepicker({ uiLibrary: 'bootstrap' });
+         *     $('#timepicker').timepicker({ uiLibrary: 'bootstrap', modal: false, footer: false });
          * </script>
          * @example Bootstrap.4 <!-- bootstrap4, timepicker -->
          * <input id="timepicker" width="276" />
@@ -14060,7 +14062,6 @@ gj.timepicker.config = {
 
     bootstrap: {
         style: {
-            modal: 'modal',
             wrapper: 'gj-timepicker gj-timepicker-bootstrap gj-unselectable input-group',
             input: 'form-control',
             clock: 'gj-clock gj-clock-bootstrap',
@@ -14072,7 +14073,6 @@ gj.timepicker.config = {
 
     bootstrap4: {
         style: {
-            modal: 'modal',
             wrapper: 'gj-timepicker gj-timepicker-bootstrap gj-unselectable input-group',
             input: 'form-control',
             clock: 'gj-clock gj-clock-bootstrap',
@@ -14186,6 +14186,10 @@ gj.timepicker.methods = {
                     if (hour >= 12) {
                         $clock.attr('hour', hour - 12);
                     }
+                    if (!data.modal) {
+                        clearTimeout($timepicker.timeout);
+                        $timepicker.focus();
+                    }
                 }));
                 $mode.append('<br />');
                 $mode.append($('<span role="pm">PM</span>').on('click', function () {
@@ -14196,6 +14200,10 @@ gj.timepicker.methods = {
                     if (hour < 12) {
                         $clock.attr('hour', hour + 12);
                     }
+                    if (!data.modal) {
+                        clearTimeout($timepicker.timeout);
+                        $timepicker.focus();
+                    }
                 }));
                 $header.append($mode);
             }
@@ -14284,7 +14292,7 @@ gj.timepicker.methods = {
         rect = e.target.getBoundingClientRect();
         if (data.dialMode == 'hours') {
             value = gj.timepicker.methods.getPointerValue(mouseX - rect.left, mouseY - rect.top, data.mode);
-            $clock.attr('hour', value);
+            $clock.attr('hour', data.mode === 'ampm' && $clock.attr('mode') === 'pm' && value < 12 ? value + 12 : value);
         } else if (data.dialMode == 'minutes') {
             value = gj.timepicker.methods.getPointerValue(mouseX - rect.left, mouseY - rect.top, 'minutes');
             $clock.attr('minute', value);
@@ -14371,8 +14379,10 @@ gj.timepicker.methods = {
         return function (e) {
             gj.timepicker.methods.updateArrow(e, $timepicker, $clock);
             $timepicker.mouseMove = false;
-            $timepicker.focus();
-            clearTimeout($timepicker.timeout);
+            if (!$timepicker.data().modal) {
+                clearTimeout($timepicker.timeout);
+                $timepicker.focus();
+            }
         }
     },
 
@@ -14449,8 +14459,7 @@ gj.timepicker.methods = {
     },
 
     show: function ($timepicker) {
-        var time, hour, data = $timepicker.data(),
-            offset = $timepicker.offset(),
+        var time, hour, offset, data = $timepicker.data(),
             $clock = $('body').find('[role="clock"][guid="' + $timepicker.attr('data-guid') + '"]');
 
         if ($timepicker.value()) {
@@ -14471,9 +14480,10 @@ gj.timepicker.methods = {
         if (data.modal) {
             gj.core.center($clock);
         } else {
+            offset = $timepicker.offset();
             $clock.css('left', offset.left).css('top', offset.top + $timepicker.outerHeight(true) + 3);
+            $timepicker.focus();
         }
-        $timepicker.focus();
         gj.timepicker.events.show($timepicker);
     },
 

diff --git a/dist/combined/js/gijgo.min.js b/dist/combined/js/gijgo.min.js
diff --git a/dist/modular/css/datepicker.css b/dist/modular/css/datepicker.css
@@ -140,6 +140,7 @@
 .gj-calendar-bootstrap table tr td.gj-cursor-pointer div:hover {
     background: #EEEEEE;
     border-radius: 4px;
+    color: #212529;
 }
 
 .gj-calendar-bootstrap table tr td.today div {
@@ -186,6 +187,7 @@
 .gj-datepicker-bootstrap span[role="right-icon"] .input-group-text {
     padding: 7px 8px 8px 30px;
     border-left: 0px;
+    display: inline;
 }
 
 .gj-datepicker-bootstrap span[role="right-icon"] .input-group-text .gj-icon,
@@ -197,7 +199,7 @@
 
 .gj-datepicker-bootstrap span[role="right-icon"] .input-group-text .fa {
     position: absolute;
-    right: 10px;
-    top: 7px;
+    right: 11px;
+    top: 8px;
     font-size: 21px;
 }
diff --git a/dist/modular/css/datepicker.min.css b/dist/modular/css/datepicker.min.css
diff --git a/dist/modular/css/timepicker.css b/dist/modular/css/timepicker.css
@@ -26,7 +26,6 @@
     line-height: 1;
     color: rgba(0,0,0,.87);
     background-color: #FFFFFF;
-    border: 1px solid #E0E0E0;
 }
 
 .gj-clock .selected {
@@ -172,6 +171,11 @@
 }
 
 /* Bootstrap */
+.gj-clock-bootstrap {
+    border-radius: 4px;
+    border: 1px solid #E0E0E0;
+}
+
 .gj-clock-bootstrap .selected {
     color: #888;
 }
@@ -207,7 +211,7 @@
 .gj-timepicker-bootstrap span[role="right-icon"].input-group-addon .gj-icon,
 .gj-timepicker-bootstrap span[role="right-icon"].input-group-addon .material-icons {
     position: absolute;
-    top: 5px;
+    top: 4px;
     left: 7px;
 }