From 17e69a53f7137802d35426b608c5d861d572f981 Mon Sep 17 00:00:00 2001 From: "Anton Bagdatyev (Tonix)" Date: Fri, 1 May 2020 22:56:23 +0200 Subject: [PATCH 1/6] UX fix for blanking cursor when clicking day on calendar --- .prettierignore | 1 + src/js/tempusdominus-bootstrap-4.js | 2 ++ src/sass/_tempusdominus-bootstrap-4.scss | 4 ++++ 3 files changed, 7 insertions(+) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..fa29cdf --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +** \ No newline at end of file diff --git a/src/js/tempusdominus-bootstrap-4.js b/src/js/tempusdominus-bootstrap-4.js index bce758e..0738fcf 100644 --- a/src/js/tempusdominus-bootstrap-4.js +++ b/src/js/tempusdominus-bootstrap-4.js @@ -523,7 +523,9 @@ const TempusDominusBootstrap4 = ($ => { // eslint-disable-line no-unused-vars currentDate.add(1, 'd'); } + $('body').addClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); daysView.find('tbody').empty().append(html); + $('body').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); this._updateMonths(); diff --git a/src/sass/_tempusdominus-bootstrap-4.scss b/src/sass/_tempusdominus-bootstrap-4.scss index 8e68b98..4100804 100644 --- a/src/sass/_tempusdominus-bootstrap-4.scss +++ b/src/sass/_tempusdominus-bootstrap-4.scss @@ -10,6 +10,10 @@ $bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default; $bs-datetimepicker-primary-border-color: white !default; $bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default; +body.tempusdominus-bootstrap-datetimepicker-widget-day-click { + cursor: pointer !important; +} + .bootstrap-datetimepicker-widget { list-style: none; From 18386fea9174e9638b9c1dbb6c840e7e53e7c181 Mon Sep 17 00:00:00 2001 From: "Anton Bagdatyev (Tonix)" Date: Fri, 1 May 2020 23:12:25 +0200 Subject: [PATCH 2/6] Added cursor pointer fix to html element --- src/js/tempusdominus-bootstrap-4.js | 2 ++ src/sass/_tempusdominus-bootstrap-4.scss | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/tempusdominus-bootstrap-4.js b/src/js/tempusdominus-bootstrap-4.js index 0738fcf..3a4a3d9 100644 --- a/src/js/tempusdominus-bootstrap-4.js +++ b/src/js/tempusdominus-bootstrap-4.js @@ -523,9 +523,11 @@ const TempusDominusBootstrap4 = ($ => { // eslint-disable-line no-unused-vars currentDate.add(1, 'd'); } + $('html').addClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); $('body').addClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); daysView.find('tbody').empty().append(html); $('body').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); + $('html').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); this._updateMonths(); diff --git a/src/sass/_tempusdominus-bootstrap-4.scss b/src/sass/_tempusdominus-bootstrap-4.scss index 4100804..2649817 100644 --- a/src/sass/_tempusdominus-bootstrap-4.scss +++ b/src/sass/_tempusdominus-bootstrap-4.scss @@ -10,7 +10,7 @@ $bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default; $bs-datetimepicker-primary-border-color: white !default; $bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default; -body.tempusdominus-bootstrap-datetimepicker-widget-day-click { +html.tempusdominus-bootstrap-datetimepicker-widget-day-click, body.tempusdominus-bootstrap-datetimepicker-widget-day-click { cursor: pointer !important; } From 7c5bbaf9ea2dd39f8e0b322cc0705fef8e5d3369 Mon Sep 17 00:00:00 2001 From: "Anton Bagdatyev (Tonix)" Date: Fri, 1 May 2020 23:30:26 +0200 Subject: [PATCH 3/6] Further attempt to fix blinking cursor on click in a cross-browser manner --- src/sass/_tempusdominus-bootstrap-4.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sass/_tempusdominus-bootstrap-4.scss b/src/sass/_tempusdominus-bootstrap-4.scss index 2649817..15c25ab 100644 --- a/src/sass/_tempusdominus-bootstrap-4.scss +++ b/src/sass/_tempusdominus-bootstrap-4.scss @@ -10,7 +10,8 @@ $bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default; $bs-datetimepicker-primary-border-color: white !default; $bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default; -html.tempusdominus-bootstrap-datetimepicker-widget-day-click, body.tempusdominus-bootstrap-datetimepicker-widget-day-click { +html.tempusdominus-bootstrap-datetimepicker-widget-day-click, body.tempusdominus-bootstrap-datetimepicker-widget-day-click, +body.tempusdominus-bootstrap-datetimepicker-widget-day-click * { cursor: pointer !important; } From e9af9005ff192ccf7a8ee7e1641bf6568cd8c963 Mon Sep 17 00:00:00 2001 From: "Anton Bagdatyev (Tonix)" Date: Fri, 1 May 2020 23:48:45 +0200 Subject: [PATCH 4/6] Added glass panel --- src/js/tempusdominus-bootstrap-4.js | 2 ++ src/sass/_tempusdominus-bootstrap-4.scss | 14 ++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/src/js/tempusdominus-bootstrap-4.js b/src/js/tempusdominus-bootstrap-4.js index 3a4a3d9..71669b0 100644 --- a/src/js/tempusdominus-bootstrap-4.js +++ b/src/js/tempusdominus-bootstrap-4.js @@ -523,11 +523,13 @@ const TempusDominusBootstrap4 = ($ => { // eslint-disable-line no-unused-vars currentDate.add(1, 'd'); } + $('body').append('
'); $('html').addClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); $('body').addClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); daysView.find('tbody').empty().append(html); $('body').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); $('html').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); + $('body').remove('.tempusdominus-bootstrap-datetimepicker-widget-day-click-glass-panel'); this._updateMonths(); diff --git a/src/sass/_tempusdominus-bootstrap-4.scss b/src/sass/_tempusdominus-bootstrap-4.scss index 15c25ab..171c069 100644 --- a/src/sass/_tempusdominus-bootstrap-4.scss +++ b/src/sass/_tempusdominus-bootstrap-4.scss @@ -15,6 +15,20 @@ body.tempusdominus-bootstrap-datetimepicker-widget-day-click * { cursor: pointer !important; } +body.tempusdominus-bootstrap-datetimepicker-widget-day-click { + position: relative; +} + +.tempusdominus-bootstrap-datetimepicker-widget-day-click-glass-panel { + position: absolute; + z-index: 999999999999; + top: 0; + left: 0; + right: 0; + bottom: 0; + cursor: pointer !important; +} + .bootstrap-datetimepicker-widget { list-style: none; From 6b4db1bde5aa012507ea9a4b0da84aa8f18633b2 Mon Sep 17 00:00:00 2001 From: "Anton Bagdatyev (Tonix)" Date: Fri, 1 May 2020 23:53:01 +0200 Subject: [PATCH 5/6] Bugfix --- src/js/tempusdominus-bootstrap-4.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/tempusdominus-bootstrap-4.js b/src/js/tempusdominus-bootstrap-4.js index 71669b0..71c1ecd 100644 --- a/src/js/tempusdominus-bootstrap-4.js +++ b/src/js/tempusdominus-bootstrap-4.js @@ -529,7 +529,7 @@ const TempusDominusBootstrap4 = ($ => { // eslint-disable-line no-unused-vars daysView.find('tbody').empty().append(html); $('body').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); $('html').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); - $('body').remove('.tempusdominus-bootstrap-datetimepicker-widget-day-click-glass-panel'); + $('body').find('.tempusdominus-bootstrap-datetimepicker-widget-day-click-glass-panel').remove(); this._updateMonths(); From 7aa2453af1026acac21d120cedac1cf95a6c2b1b Mon Sep 17 00:00:00 2001 From: "Anton Bagdatyev (Tonix)" Date: Sat, 2 May 2020 12:44:01 +0200 Subject: [PATCH 6/6] Complete UX fix for blinking cursor pointer on calendar days when clicking --- src/js/tempusdominus-bootstrap-4.js | 6 ++---- src/sass/_tempusdominus-bootstrap-4.scss | 10 ++++++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/js/tempusdominus-bootstrap-4.js b/src/js/tempusdominus-bootstrap-4.js index 71c1ecd..e99cf44 100644 --- a/src/js/tempusdominus-bootstrap-4.js +++ b/src/js/tempusdominus-bootstrap-4.js @@ -523,13 +523,11 @@ const TempusDominusBootstrap4 = ($ => { // eslint-disable-line no-unused-vars currentDate.add(1, 'd'); } - $('body').append('
'); - $('html').addClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); $('body').addClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); + $('body').append('
'); daysView.find('tbody').empty().append(html); - $('body').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); - $('html').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); $('body').find('.tempusdominus-bootstrap-datetimepicker-widget-day-click-glass-panel').remove(); + $('body').removeClass('tempusdominus-bootstrap-datetimepicker-widget-day-click'); this._updateMonths(); diff --git a/src/sass/_tempusdominus-bootstrap-4.scss b/src/sass/_tempusdominus-bootstrap-4.scss index 171c069..790583b 100644 --- a/src/sass/_tempusdominus-bootstrap-4.scss +++ b/src/sass/_tempusdominus-bootstrap-4.scss @@ -10,13 +10,13 @@ $bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default; $bs-datetimepicker-primary-border-color: white !default; $bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default; -html.tempusdominus-bootstrap-datetimepicker-widget-day-click, body.tempusdominus-bootstrap-datetimepicker-widget-day-click, +body.tempusdominus-bootstrap-datetimepicker-widget-day-click, body.tempusdominus-bootstrap-datetimepicker-widget-day-click * { cursor: pointer !important; } body.tempusdominus-bootstrap-datetimepicker-widget-day-click { - position: relative; + position: relative !important; } .tempusdominus-bootstrap-datetimepicker-widget-day-click-glass-panel { @@ -29,6 +29,12 @@ body.tempusdominus-bootstrap-datetimepicker-widget-day-click { cursor: pointer !important; } +.bootstrap-datetimepicker-widget .datepicker-days { + tbody td { + cursor: pointer; + } +} + .bootstrap-datetimepicker-widget { list-style: none;