Merge pull request #3472 from pacodelaluna/fix-datetime-picker

Fix datetime picker on Order Cycle form

app/assets/javascripts/admin/all.js

@@ -9,7 +9,7 @@
 //= require jquery-migrate-min
 //= require jquery_ujs
 //= require jquery-ui
-//= require shared/jquery-ui-timepicker-addon
+//= require jquery-ui-timepicker-addon
 //= require angular
 //= require angular-resource
 //= require angular-animate

app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee

@@ -10,17 +10,19 @@ angular.module('admin.orderCycles', ['ngTagsInput', 'admin.indexUtils', 'admin.e
         # using $parse instead of scope[attrs.datetimepicker] for cases
         # where attrs.datetimepicker is 'foo.bar.lol'
         $(element).datetimepicker
-        	dateFormat: 'yy-mm-dd'
-        	timeFormat: 'HH:mm:ss'
-        	showOn: "button"
-        	buttonImage: "<%= asset_path 'datepicker/cal.gif' %>"
-        	buttonImageOnly: true
-        	stepMinute: 15
-        	onSelect: (dateText, inst) ->
-        	  scope.$apply(->
+          dateFormat: 'yy-mm-dd'
+          timeFormat: 'HH:mm'
+          showOn: 'button'
+          controlType: 'select'
+          oneLine: true
+          buttonImage: "<%= asset_path 'datepicker/cal.gif' %>"
+          buttonImageOnly: true
+          stepMinute: 15
+          onSelect: (dateText, inst) ->
+            scope.$apply(->
               element.val(dateText)
-        	    parsed = $parse(attrs.datetimepicker)
-        	    parsed.assign(scope, dateText)
+              parsed = $parse(attrs.datetimepicker)
+              parsed.assign(scope, dateText)
             )
 
 

app/assets/javascripts/admin/util.js.erb

@@ -1,12 +1,15 @@
 $(document).ready(function() {
   $('.datetimepicker').datetimepicker({
     dateFormat: 'yy-mm-dd',
+    timeFormat: 'HH:mm',
     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: "button",
+    showOn: 'button',
+    controlType: 'select',
+    oneLine: true,
     buttonImage: "<%= asset_path 'datepicker/cal.gif' %>",
     buttonImageOnly: true,
     stepMinute: 15

app/assets/stylesheets/admin/all.scss

@@ -7,9 +7,10 @@
  *= require admin/spree_backend
  *= require admin/spree_auth
 
- *= require shared/jquery-ui-timepicker-addon
+ *= require jquery-ui-timepicker-addon
  *= require shared/textAngular
  *= require shared/ng-tags-input.min
+ *= require admin/custom
 
  *= require_self
 */

app/assets/stylesheets/admin/custom.css

@@ -0,0 +1,2 @@
+/* Custom fix */
+.ui-timepicker-div.ui-timepicker-oneLine dl dd { width: 25%; }

app/assets/stylesheets/shared/jquery-ui-timepicker-addon.css

@@ -1,10 +0,0 @@
-.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
-.ui-timepicker-div dl { text-align: left; }
-.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
-.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
-.ui-timepicker-div td { font-size: 90%; }
-.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
-
-.ui-timepicker-rtl{ direction: rtl; }
-.ui-timepicker-rtl dl { text-align: right; }
-.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

spec/features/admin/order_cycles_spec.rb

@@ -117,7 +117,7 @@ feature %q{
   end
 
   describe 'listing order cycles with other locales' do
-    let!(:oc_de) { create(:simple_order_cycle, name: 'oc', orders_open_at: '2012-01-01 00:00:00') }
+    let!(:oc_de) { create(:simple_order_cycle, name: 'oc', orders_open_at: '2012-01-01 00:00') }
 
     around(:each) do |spec|
       I18n.locale = :de
@@ -131,7 +131,7 @@ feature %q{
         visit admin_order_cycles_path
 
         within("tr.order-cycle-#{oc_de.id}") do
-          expect(find('input.datetimepicker', match: :first).value).to start_with '2012-01-01 00:00:00'
+          expect(find('input.datetimepicker', match: :first).value).to start_with '2012-01-01 00:00'
           find('img.ui-datepicker-trigger', match: :first).click
         end
 
@@ -143,7 +143,7 @@ feature %q{
         end
 
         within("tr.order-cycle-#{oc_de.id}") do
-          expect(find('input.datetimepicker', match: :first).value).to eq '2012-01-30 00:00:00'
+          expect(find('input.datetimepicker', match: :first).value).to eq '2012-01-30 00:00'
         end
       end
     end
@@ -556,7 +556,7 @@ feature %q{
 
     within("tr.order-cycle-#{oc3.id}") do
       # Then that date/time should appear on the form
-      expect(find("input#oc#{oc3.id}_orders_open_at").value).to eq "2040-12-01 00:00:00"
+      expect(find("input#oc#{oc3.id}_orders_open_at").value).to eq "2040-12-01 00:00"
 
       # Manually fill out time
       find("input#oc#{oc3.id}_name").set "Updated Order Cycle 3"

vendor/assets/stylesheets/jquery-ui-timepicker-addon.css

@@ -0,0 +1,30 @@
+.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
+.ui-timepicker-div dl { text-align: left; }
+.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
+.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
+.ui-timepicker-div td { font-size: 90%; }
+.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
+.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
+
+.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
+.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
+
+.ui-timepicker-rtl{ direction: rtl; }
+.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
+.ui-timepicker-rtl dl dt{ float: right; clear: right; }
+.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
+
+/* Shortened version style */
+.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
+.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }