Added flatpickr for better date/time picker

cypht-org · Sep 11, 2024 · 02471bc · 02471bc
1 parent 7740d0f
commit 02471bc
Show file tree

Hide file tree

Showing 27 changed files with 91 additions and 24 deletions.
diff --git a/language/az.php b/language/az.php
@@ -636,4 +636,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/de.php b/language/de.php
@@ -633,4 +633,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/en.php b/language/en.php
@@ -651,4 +651,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/es.php b/language/es.php
@@ -633,4 +633,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/et.php b/language/et.php
@@ -641,4 +641,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/fa.php b/language/fa.php
@@ -685,4 +685,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/fr.php b/language/fr.php
@@ -632,4 +632,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/hu.php b/language/hu.php
@@ -633,4 +633,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/id.php b/language/id.php
@@ -640,4 +640,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/it.php b/language/it.php
@@ -633,4 +633,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/ja.php b/language/ja.php
@@ -633,4 +633,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/nl.php b/language/nl.php
@@ -633,4 +633,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/pt-BR.php b/language/pt-BR.php
@@ -632,4 +632,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/ro.php b/language/ro.php
@@ -632,4 +632,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/ru.php b/language/ru.php
@@ -634,4 +634,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/zh-Hans.php b/language/zh-Hans.php
@@ -654,4 +654,6 @@
     'Server capabilities' => false,
     'Capabilities' => false,
     'Screen %s first emails' => false,
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/language/zh-TW.php b/language/zh-TW.php
@@ -650,4 +650,6 @@
     'No tags available yet.' => '尚無可用標籤。',
     'Server capabilities' => '伺服器功能',
     'Capabilities' => '功能',
+    'Please pick a valid date/time' => false,
+    'Snoozing messages...' => false,
 );
diff --git a/modules/core/output_modules.php b/modules/core/output_modules.php
@@ -498,6 +498,7 @@ class Hm_Output_header_css extends Hm_Output_Module {
     protected function output() {
         $res = '';
         $mods = $this->get('router_module_list');
+        $res .= '<link href="' . WEB_ROOT . 'third_party/flatpickr.min.css?v=' . CACHE_ID . '" media="all" rel="stylesheet" type="text/css" />';
         if (! $this->get('theme')) {
             $res .= '<link href="' . WEB_ROOT . 'modules/themes/assets/default/css/default.css?v=' . CACHE_ID . '" media="all" rel="stylesheet" type="text/css" />';
         }
@@ -543,6 +544,7 @@ protected function output() {
             $res = '';
             $js_lib = '<script type="text/javascript" src="'.WEB_ROOT.'vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>';
             $js_lib .= '<script type="text/javascript" src="'.WEB_ROOT.'third_party/cash.min.js"></script>';
+            $js_lib .= '<script type="text/javascript" src="'.WEB_ROOT.'third_party/flatpickr.min.js"></script>';
             $js_lib .= '<script type="text/javascript" src="'.WEB_ROOT.'third_party/resumable.min.js"></script>';
             $js_lib .= '<script type="text/javascript" src="'.WEB_ROOT.'third_party/ays-beforeunload-shim.js"></script>';
             $js_lib .= '<script type="text/javascript" src="'.WEB_ROOT.'third_party/jquery.are-you-sure.js"></script>';

diff --git a/modules/core/site.css b/modules/core/site.css
@@ -1365,3 +1365,12 @@ div.unseen,
 .mobile .credentials-container .form-floating {
   margin-bottom: 7px;
 }
+.centered-calendar {
+  position: fixed;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%);
+  z-index: 1000 !important;  /* Ensure it appears above other content */
+  background: white;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+}
diff --git a/modules/imap/functions.php b/modules/imap/functions.php
@@ -1449,15 +1449,15 @@ function snooze_dropdown($output, $unsnooze = false) {
     $values = snooze_formats();
 
     $txt = '<div class="dropdown d-inline-block">
-                <button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" id="dropdownMenuSnooze" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'.$output->trans('Snooze').'</button>
+                <button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" id="dropdownMenuSnooze" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-bs-auto-close="outside">'.$output->trans('Snooze').'</button>
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuSnooze">';
     foreach ($values as $format) {
         $labels = get_snooze_date($format, true);
         $txt .= '<li><a href="#" class="snooze_helper dropdown-item d-flex justify-content-between gap-5" data-value="'.$format.'"><span>'.$output->trans($labels[0]).'</span> <span class="text-end">'.$labels[1].'</span></a></li>';
     }
     $txt .= '<li><hr class="dropdown-divider"></li>';
-    $txt .= '<li><label for="snooze_input_date" class="snooze_date_picker dropdown-item cursor-pointer">'.$output->trans('Pick a date').'</label>';
-    $txt .= '<input id="snooze_input_date" type="datetime-local" min="'.date('Y-m-d\Th:m').'" class="snooze_input_date" style="visibility: hidden; position: absolute; height: 0;">';
+    $txt .= '<li><span class="snooze_date_picker dropdown-item cursor-pointer">'.$output->trans('Pick a date').'</span>';
+    $txt .= '<input id="snooze_input_date" type="text" class="snooze_input_date d-none">';
     $txt .= '<input class="snooze_input" style="display:none;"></li>';
     if ($unsnooze) {
         $txt .= '<a href="#" data-value="unsnooze" class="unsnooze snooze_helper dropdown-item"">'.$output->trans('Unsnooze').'</a>';

diff --git a/modules/imap/site.js b/modules/imap/site.js
@@ -1135,28 +1135,31 @@ var imap_setup_tags = function() {
 }
 
 var imap_setup_snooze = function() {
+    flatpickr('.snooze_input_date', {
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i',
+        time_24hr: true,
+        minDate: 'today',
+        appendTo: document.body,
+        onOpen: function(selectedDates, dateStr, instance) {
+            instance.calendarContainer.classList.add('centered-calendar');
+        },
+        onClose: function(selectedDates, dateStr, instance) {            
+            if (dateStr && new Date().getTime() < new Date(dateStr).getTime()) {
+                $('.snooze_input').val(dateStr).trigger('change');
+            } else {
+                Hm_Utils.add_sys_message(hm_trans('Please pick a valid date/time'));
+            }
+        }
+    });
     $(document).on('click', '.snooze_date_picker', function(e) {
-        document.querySelector('.snooze_input_date').showPicker();
+        $('.snooze_input_date').trigger('click');
+        $(this).closest('.dropdown-menu').removeClass('show');
     });
     $(document).on('click', '.snooze_helper', function(e) {
         e.preventDefault();
         $('.snooze_input').val($(this).attr('data-value')).trigger('change');
     });
-    $(document).on('input', '.snooze_input_date', function(e) {
-        var now = new Date();
-        now.setMinutes(now.getMinutes() + 1);
-        $(this).attr('min', now.toJSON().slice(0, 16));
-        if (new Date($(this).val()).getTime() <= now.getTime()) {
-            $('.snooze_date_picker').css('border', '1px solid red');
-        } else {
-            $('.snooze_date_picker').css({'border': 'unset', 'border-top': '1px solid #ddd'});
-        }
-    });
-    $(document).on('change', '.snooze_input_date', function(e) {
-        if ($(this).val() && new Date().getTime() < new Date($(this).val()).getTime()) {
-            $('.snooze_input').val($(this).val()).trigger('change');
-        }
-    });
     $(document).on('change', '.snooze_input', function(e) {
         $('.snooze_dropdown').hide();
         var ids = [];
@@ -1174,6 +1177,7 @@ var imap_setup_snooze = function() {
                 return;
             };
         }
+        Hm_Utils.add_sys_message(hm_trans('Snoozing messages...'));
         Hm_Ajax.request(
             [{'name': 'hm_ajax_hook', 'value': 'ajax_imap_snooze'},
             {'name': 'imap_snooze_ids', 'value': ids},

diff --git a/scripts/config_gen.php b/scripts/config_gen.php
@@ -247,6 +247,7 @@ function combine_includes($js, $js_compress, $css, $css_compress, $settings) {
         $mods = get_modules($settings);
         $js_lib = file_get_contents(VENDOR_PATH . "twbs/bootstrap/dist/js/bootstrap.bundle.min.js");
         $js_lib .= file_get_contents("third_party/cash.min.js");
+        $js_lib .= file_get_contents("third_party/flatpickr.min.js");
         if (in_array('desktop_notifications', $mods, true)) {
             $js_lib .= file_get_contents("third_party/push.min.js");
         }

diff --git a/tests/phpunit/.phpunit.cache/test-results b/tests/phpunit/.phpunit.cache/test-results
diff --git a/tests/phpunit/modules/core/output_modules.php b/tests/phpunit/modules/core/output_modules.php
@@ -395,7 +395,7 @@ public function test_header_content() {
     public function test_header_css() {
         $test = new Output_Test('header_css', 'core');
         $res = $test->run();
-        $this->assertEquals(array('<link href="modules/themes/assets/default/css/default.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="site.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><style type="text/css">@font-face {font-family:"Behdad";src:url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff2") format("woff2"),url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff") format("woff");</style>'), $res->output_response);
+        $this->assertEquals(array('<link href="third_party/flatpickr.min.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="modules/themes/assets/default/css/default.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="site.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><style type="text/css">@font-face {font-family:"Behdad";src:url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff2") format("woff2"),url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff") format("woff");</style>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -406,7 +406,7 @@ public function test_header_css_integrity() {
         $test = new Output_Test('header_css', 'core');
         $test->handler_response = array('router_module_list', array('core'));
         $res = $test->run();
-        $this->assertEquals(array('<link href="modules/themes/assets/default/css/default.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="site.css?v=asdf" integrity="foo" media="all" rel="stylesheet" type="text/css" /><style type="text/css">@font-face {font-family:"Behdad";src:url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff2") format("woff2"),url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff") format("woff");</style>'), $res->output_response);
+        $this->assertEquals(array('<link href="third_party/flatpickr.min.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="modules/themes/assets/default/css/default.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="site.css?v=asdf" integrity="foo" media="all" rel="stylesheet" type="text/css" /><style type="text/css">@font-face {font-family:"Behdad";src:url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff2") format("woff2"),url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff") format("woff");</style>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled

diff --git a/tests/phpunit/modules/core/output_modules_debug.php b/tests/phpunit/modules/core/output_modules_debug.php
@@ -17,7 +17,7 @@ public function test_header_css_debug() {
         $test = new Output_Test('header_css', 'core');
         $test->handler_response = array('router_module_list' => array('core'));
         $res = $test->run();
-        $this->assertEquals(array('<link href="modules/themes/assets/default/css/default.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="vendor/twbs/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" type="text/css" /><link href="modules/core/site.css" media="all" rel="stylesheet" type="text/css" /><style type="text/css">@font-face {font-family:"Behdad";src:url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff2") format("woff2"),url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff") format("woff");</style>'), $res->output_response);
+        $this->assertEquals(array('<link href="third_party/flatpickr.min.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="modules/themes/assets/default/css/default.css?v=asdf" media="all" rel="stylesheet" type="text/css" /><link href="vendor/twbs/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" type="text/css" /><link href="modules/core/site.css" media="all" rel="stylesheet" type="text/css" /><style type="text/css">@font-face {font-family:"Behdad";src:url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff2") format("woff2"),url("modules/core/assets/fonts/Behdad/Behdad-Regular.woff") format("woff");</style>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -27,10 +27,10 @@ public function test_page_js_debug() {
         $test = new Output_Test('page_js', 'core');
         $test->handler_response = array('encrypt_ajax_requests' => true, 'router_module_list' => array('foo', 'core'));
         $res = $test->run();
-        $this->assertEquals(array('<script type="text/javascript" src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script><script type="text/javascript" src="third_party/cash.min.js"></script><script type="text/javascript" src="third_party/resumable.min.js"></script><script type="text/javascript" src="third_party/ays-beforeunload-shim.js"></script><script type="text/javascript" src="third_party/jquery.are-you-sure.js"></script><script type="text/javascript" src="third_party/sortable.min.js"></script><script type="text/javascript" src="third_party/forge.min.js"></script><script type="text/javascript" src="modules/core/site.js"></script>'), $res->output_response);
+        $this->assertEquals(array('<script type="text/javascript" src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script><script type="text/javascript" src="third_party/cash.min.js"></script><script type="text/javascript" src="third_party/flatpickr.min.js"></script><script type="text/javascript" src="third_party/resumable.min.js"></script><script type="text/javascript" src="third_party/ays-beforeunload-shim.js"></script><script type="text/javascript" src="third_party/jquery.are-you-sure.js"></script><script type="text/javascript" src="third_party/sortable.min.js"></script><script type="text/javascript" src="third_party/forge.min.js"></script><script type="text/javascript" src="modules/core/site.js"></script>'), $res->output_response);
         $test->handler_response = array('encrypt_ajax_requests' => true, 'router_module_list' => array('imap'));
         $res = $test->run();
-        $this->assertEquals(array('<script type="text/javascript" src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script><script type="text/javascript" src="third_party/cash.min.js"></script><script type="text/javascript" src="third_party/resumable.min.js"></script><script type="text/javascript" src="third_party/ays-beforeunload-shim.js"></script><script type="text/javascript" src="third_party/jquery.are-you-sure.js"></script><script type="text/javascript" src="third_party/sortable.min.js"></script><script type="text/javascript" src="third_party/forge.min.js"></script><script type="text/javascript" src="modules/core/site.js"></script><script type="text/javascript" src="modules/imap/site.js"></script>'), $res->output_response);
+        $this->assertEquals(array('<script type="text/javascript" src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script><script type="text/javascript" src="third_party/cash.min.js"></script><script type="text/javascript" src="third_party/flatpickr.min.js"></script><script type="text/javascript" src="third_party/resumable.min.js"></script><script type="text/javascript" src="third_party/ays-beforeunload-shim.js"></script><script type="text/javascript" src="third_party/jquery.are-you-sure.js"></script><script type="text/javascript" src="third_party/sortable.min.js"></script><script type="text/javascript" src="third_party/forge.min.js"></script><script type="text/javascript" src="modules/core/site.js"></script><script type="text/javascript" src="modules/imap/site.js"></script>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled