diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index dea5ac04a9..8224966978 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -10,7 +10,6 @@ //= require jquery-migrate-min //= require jquery_ujs //= require jquery.ui.all -//= require jquery-ui-timepicker-addon //= require jquery.powertip //= require jquery.cookie //= require jquery.jstree/jquery.jstree @@ -24,6 +23,23 @@ //= require angular-rails-templates //= require lodash.underscore.js +// datetimepicker (fil, nb) +//= require flatpickr/dist/flatpickr.min +//= require flatpickr/dist/l10n/ar +//= require flatpickr/dist/l10n/cat +//= require flatpickr/dist/l10n/cy +//= require flatpickr/dist/l10n/de +//= require flatpickr/dist/l10n/es +//= require flatpickr/dist/l10n/fr +//= require flatpickr/dist/l10n/it +//= require flatpickr/dist/l10n/nl +//= require flatpickr/dist/l10n/pl +//= require flatpickr/dist/l10n/pt +//= require flatpickr/dist/l10n/ru +//= require flatpickr/dist/l10n/sv +//= require flatpickr/dist/l10n/tr +//= require shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr.min + // spree //= require admin/spree/spree //= require admin/spree/spree-select2 diff --git a/app/assets/javascripts/admin/directives/date_picker.js.coffee b/app/assets/javascripts/admin/directives/date_picker.js.coffee deleted file mode 100644 index 6b5cac3e1b..0000000000 --- a/app/assets/javascripts/admin/directives/date_picker.js.coffee +++ /dev/null @@ -1,9 +0,0 @@ -angular.module("ofn.admin").directive "datepicker", -> - require: "ngModel" - link: (scope, element, attrs, ngModel) -> - element.datepicker - dateFormat: "yy-mm-dd" - onSelect: (dateText, inst) -> - scope.$apply (scope) -> - # Fires ngModel.$parsers - ngModel.$setViewValue dateText \ No newline at end of file diff --git a/app/assets/javascripts/admin/directives/datetime_picker.js.coffee b/app/assets/javascripts/admin/directives/datetime_picker.js.coffee deleted file mode 100644 index 0d9728701f..0000000000 --- a/app/assets/javascripts/admin/directives/datetime_picker.js.coffee +++ /dev/null @@ -1,11 +0,0 @@ -angular.module("ofn.admin").directive "datetimepicker", -> - require: "ngModel" - link: (scope, element, attrs, ngModel) -> - element.datetimepicker - dateFormat: "yy-mm-dd" - timeFormat: "HH:mm:ss" - stepMinute: 15 - onSelect: (dateText, inst) -> - scope.$apply (scope) -> - # Fires ngModel.$parsers - ngModel.$setViewValue dateText diff --git a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee index 69735c4a33..2786b34608 100644 --- a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee +++ b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee @@ -3,21 +3,11 @@ angular.module('admin.orderCycles', ['ngTagsInput', 'admin.indexUtils', 'admin.e require: "ngModel" link: (scope, element, attrs, ngModel) -> $timeout -> - # using $parse instead of scope[attrs.datetimepicker] for cases - # where attrs.datetimepicker is 'foo.bar.lol' - $(element).datetimepicker( - Object.assign( - window.JQUERY_UI_DATETIME_PICKER_DEFAULTS, - { - onSelect: (dateText, inst) -> - scope.$apply(-> - element.val(dateText) - parsed = $parse(attrs.datetimepicker) - parsed.assign(scope, dateText) - ) - } - ) - ) + flatpickr(element, Object.assign({}, + window.FLATPICKR_DATETIME_DEFAULT, { + onOpen: (selectedDates, dateStr, instance) -> + instance.setDate(ngModel.$modelValue) + })); .directive 'ofnOnChange', -> (scope, element, attrs) -> diff --git a/app/assets/javascripts/admin/spree/base.js.erb b/app/assets/javascripts/admin/spree/base.js.erb index 4b9bf8216f..8a2015d786 100644 --- a/app/assets/javascripts/admin/spree/base.js.erb +++ b/app/assets/javascripts/admin/spree/base.js.erb @@ -98,40 +98,6 @@ $.fn.radioControlsVisibilityOfElement = function(dependentElementSelector){ } $(document).ready(function() { - if (typeof Spree !== 'undefined' && - typeof Spree.translations !== 'undefined') { - handle_date_picker_fields = function(){ - $('.datepicker').datepicker({ - dateFormat: Spree.translations.date_picker, - dayNames: Spree.translations.abbr_day_names, - dayNamesMin: Spree.translations.abbr_day_names, - monthNames: Spree.translations.month_names, - prevText: Spree.translations.previous, - nextText: Spree.translations.next, - showOn: "focus" - }); - - $.datepicker.regional[I18n.locale] = { - prevText: Spree.translations.previous, - nextText: Spree.translations.next, - monthNames: Spree.translations.month_names, - dayNames: Spree.translations.abbr_day_names, - dayNamesMin: Spree.translations.abbr_day_names, - dateFormat: Spree.translations.date_picker - }; - $.datepicker.setDefaults( $.datepicker.regional[I18n.locale]); - // Correctly display range dates - $('.date-range-filter .datepicker-from').datepicker('option', 'onSelect', function(selectedDate) { - $(".date-range-filter .datepicker-to" ).datepicker( "option", "minDate", selectedDate ); - }); - $('.date-range-filter .datepicker-to').datepicker('option', 'onSelect', function(selectedDate) { - $(".date-range-filter .datepicker-from" ).datepicker( "option", "maxDate", selectedDate ); - }); - } - - handle_date_picker_fields(); - } - $(".observe_field").on('change', function() { target = $(this).attr("data-update"); ajax_indicator = $(this).attr("data-ajax-indicator") || '#busy_indicator'; diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb index 373dba4767..698f199816 100644 --- a/app/assets/javascripts/admin/util.js.erb +++ b/app/assets/javascripts/admin/util.js.erb @@ -1,30 +1,45 @@ -$(document).ready(function(){ - window.JQUERY_UI_DATE_PICKER_DEFAULTS = { - dateFormat: Spree.translations.date_picker, - dayNames: Spree.translations.abbr_day_names, - dayNamesMin: Spree.translations.abbr_day_names, - monthNames: Spree.translations.month_names, - prevText: Spree.translations.previous, - nextText: Spree.translations.next, - oneLine: true, - showOn: 'button', - buttonImage: "<%= asset_path 'datepicker/cal.gif' %>", - buttonImageOnly: true +$(document).ready(function() { + var onClickButtons = function(index, fp) { + var date; + switch (index) { + case 0: + date = new Date(); + break; + } + fp.setDate(date, true); } - - window.JQUERY_UI_DATETIME_PICKER_DEFAULTS = Object.assign( + window.FLATPICKR_DATE_DEFAULT = { + dateFormat: Spree.translations.flatpickr_date_format, + locale: I18n.locale, + plugins: [ + ShortcutButtonsPlugin({ + button: [{ + label: Spree.translations.today + }], + label: "or", + onClick: onClickButtons + }) + ] + } + window.FLATPICKR_DATETIME_DEFAULT = Object.assign( {}, - window.JQUERY_UI_DATE_PICKER_DEFAULTS, + window.FLATPICKR_DATE_DEFAULT, { - currentText: Spree.translations.datetime_ui_current_text, - closeText: Spree.translations.datetime_ui_close_text, - timeText: Spree.translations.datetime_ui_time_text, - timeFormat: 'HH:mm', - controlType: 'select', - stepMinute: 15 + dateFormat: Spree.translations.flatpickr_datetime_format, + enableTime: true, + time_24hr: true, + plugins: [ + ShortcutButtonsPlugin({ + button: [{ + label: Spree.translations.now + }], + label: "or", + onClick: onClickButtons + }) + ] } ); - $('.datetimepicker').datetimepicker(window.JQUERY_UI_DATETIME_PICKER_DEFAULTS); + flatpickr(".datetimepicker", window.FLATPICKR_DATETIME_DEFAULT); $('a.close').click(function(event){ event.preventDefault(); $(this).parent().slideUp(250); diff --git a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee b/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee index c6c8b4fba6..455215f99e 100644 --- a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee +++ b/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee @@ -1,9 +1,11 @@ -angular.module("admin.utils").directive "datepicker", -> +angular.module("admin.utils").directive "datepicker", ($window, $timeout) -> require: "ngModel" link: (scope, element, attrs, ngModel) -> - element.datepicker - dateFormat: "yy-mm-dd" - onSelect: (dateText, inst) -> - scope.$apply (scope) -> - # Fires ngModel.$parsers - ngModel.$setViewValue dateText + $timeout -> + flatpickr(element, Object.assign( + {}, + $window.FLATPICKR_DATE_DEFAULT, { + onOpen: (selectedDates, dateStr, instance) -> + instance.setDate(ngModel.$modelValue) + } + )); diff --git a/app/assets/stylesheets/admin/all.scss b/app/assets/stylesheets/admin/all.scss index 9784acf9c1..12635372f3 100644 --- a/app/assets/stylesheets/admin/all.scss +++ b/app/assets/stylesheets/admin/all.scss @@ -7,11 +7,13 @@ *= require normalize *= require responsive-tables *= require jquery.powertip - *= require jquery.ui.datepicker - *= require jquery-ui-timepicker-addon + *= require jquery.ui.dialog *= require shared/textAngular *= require shared/ng-tags-input.min *= require select2 + *= require flatpickr/dist/flatpickr + *= require flatpickr/dist/themes/material_blue + *= require shortcut-buttons-flatpickr/dist/themes/light *= require_self */ @@ -29,6 +31,8 @@ @import 'shared/forms'; @import 'shared/layout'; +@import 'plugins/flatpickr-customization'; + @import 'plugins/powertip'; @import 'plugins/jstree'; @import 'plugins/font-awesome'; diff --git a/app/assets/stylesheets/admin/components/date-picker.scss b/app/assets/stylesheets/admin/components/date-picker.scss index f54f33d5b5..6b251b441f 100644 --- a/app/assets/stylesheets/admin/components/date-picker.scss +++ b/app/assets/stylesheets/admin/components/date-picker.scss @@ -2,6 +2,8 @@ @import 'admin/globals/mixins'; @import 'admin/plugins/font-awesome'; +// scss-lint:disable QualifyingElement + .date-range-filter { .range-divider { padding: 0; @@ -11,148 +13,19 @@ } } -#ui-datepicker-div { - @include border-radius($border-radius); - border-color: $color-3; - padding: 0; - margin-top: 10px; - - &:before { - content: ''; - position: absolute; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-bottom: 10px solid $color-3; - top: 0px; - margin-top: -10px; - left: 25px; - z-index: 1; - } - - .ui-datepicker-header { - padding: 0; - background-image: none; - background-color: $color-3; - border: none; - border-bottom: none; - border-radius: 0; - height: 32px; - - .ui-datepicker-prev, .ui-datepicker-next { - border-radius: 0; - top: 0; - height: 32px; - - &:hover { - border: none; - background-image: none; - background-color: $color-3; - cursor: pointer; - } - - .ui-icon { - background-image: none; - text-indent: 0; - color: $color-1; - width: 10px; - margin-left: -5px; - @extend [class^="icon-"]:before; - - &:hover { - color: very-light($color-2, 25); - } - } - } - .ui-datepicker-prev { - left: 0; - - .ui-icon { - @extend .icon-arrow-left; - } - } - .ui-datepicker-next { - right: 0; - - .ui-icon { - @extend .icon-arrow-right; - } - - &:hover { - .ui-icon { - margin-left: -5px; - } - } - } - - .ui-datepicker-title { - color: $color-1; - text-transform: uppercase; - font-size: 85% !important; - padding: 6px 10px; - } - } - - table.ui-datepicker-calendar { - border: none; - - thead { - th { - border-bottom: 1px solid $color-border; - border-right: 1px solid $color-border; - color: $color-body-text; - width: 33px; - - &:last-child { - border-right: none; - } - } - } - tbody { - tr:hover { - td { - background-color: transparent !important; - } - } - &:last-child tr:last-child td { - border-bottom: none; - } - td { - a { - border: 1px solid transparent; - background-color: $color-1; - background-image: none; - font-size: 85%; - color: $color-body-text; - - &.ui-state-active { - background-color: $color-2; - color: $color-1; - } - - &:hover { - background-color: $color-2; - color: $color-1; - border-color: darken($color-2, 5); - - } - } - - &.ui-state-disabled { - .ui-state-default { - border: none; - background-image: none; - background-color: transparent; - } - } - - &.ui-datepicker-today { - a { - background-color: $color-6; - color: $color-1; - border: 1px solid darken($color-6, 5); - } - } - } - } - } +input.datetimepicker { + min-width: 12.9em; } + +.container input[readonly].flatpickr-input { + background-color: $white; + cursor: pointer; +} + +img.ui-datepicker-trigger { + margin-left: -1.75em; + position: absolute; + margin-top: 0.5em; +} + +// scss-lint:enable QualifyingElement diff --git a/app/assets/stylesheets/admin/datepicker.scss b/app/assets/stylesheets/admin/datepicker.scss deleted file mode 100644 index 87dcf4b786..0000000000 --- a/app/assets/stylesheets/admin/datepicker.scss +++ /dev/null @@ -1,9 +0,0 @@ -input.datetimepicker { - min-width: 12.9em; -} - -img.ui-datepicker-trigger { - margin-left: -1.75em; - position: absolute; - margin-top: 0.5em; -} \ No newline at end of file diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss new file mode 100644 index 0000000000..e26fb0af97 --- /dev/null +++ b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss @@ -0,0 +1,62 @@ +$background-grey: #eceef1; +$background-blue: #5498da; + +// scss-lint:disable SelectorFormat + +.flatpickr-calendar { + border-radius: 0; + + // Disable animation + &.animate.open { + animation: none; + } + + &.arrowBottom::after { + border-top-color: $background-grey; + } + + &.arrowTop::after { + border-bottom-color: $background-blue; + } + + .flatpickr-months .flatpickr-month { + border-radius: 0; + } + + .flatpickr-months .flatpickr-month, + .flatpickr-current-month .flatpickr-monthDropdown-months { + background: $background-blue; + } + + .flatpickr-weekdays { + background: $background-blue; + + .flatpickr-weekday { + background: $background-blue; + } + } + + .flatpickr-day.selected, + .flatpickr-day.startRange, + .flatpickr-day.endRange, + .flatpickr-day.selected.inRange, + .flatpickr-day.startRange.inRange, + .flatpickr-day.endRange.inRange, + .flatpickr-day.selected:focus, + .flatpickr-day.startRange:focus, + .flatpickr-day.endRange:focus, + .flatpickr-day.selected:hover, + .flatpickr-day.startRange:hover, + .flatpickr-day.endRange:hover, + .flatpickr-day.selected.prevMonthDay, + .flatpickr-day.startRange.prevMonthDay, + .flatpickr-day.endRange.prevMonthDay, + .flatpickr-day.selected.nextMonthDay, + .flatpickr-day.startRange.nextMonthDay, + .flatpickr-day.endRange.nextMonthDay { + background: $background-blue; + border-color: $background-blue; + } +} + +// scss-lint:enable SelectorFormat diff --git a/app/views/spree/admin/shared/_translations.html.erb b/app/views/spree/admin/shared/_translations.html.erb index 5daa7234b3..ae1c510129 100644 --- a/app/views/spree/admin/shared/_translations.html.erb +++ b/app/views/spree/admin/shared/_translations.html.erb @@ -1,9 +1,13 @@