- Fixing up the date and time picker UI a little to keep the input in a block

- Some work on the timepicker to keep its width and right alignment in check (still need to make right/left alignment on its target element an option)

--HG--
extra : convert_revision : svn%3A5ff7c347-ad56-4c35-b696-ccb81de16e03/trunk%4046087

src/Orchard.Web/Packages/Orchard.Blogs/Scripts/ui.timepickr.js

@@ -84,7 +84,7 @@
             var ui = this;
             var btn = false;
             var row = $.tpl('timepickr.row').bind('mouseover', function() {
-                $(this).next().slideDown(200);
+                $(this).next().show();
             });
             $.each(range, function(idx, val) {
                 ui._createButton(val, format || false).appendTo(row);
@@ -115,16 +115,16 @@
 
         _getVal: function() {
             var ols = this._dom.menu.find('ol');
-            function get(unit) {
+            function g(unit) {
                 var u = ols.filter('.' + unit).find('.ui-state-hover:first').text();
                 return u || ols.filter('.' + unit + 'li:first span').text();
             }
             return {
-                h: get('hours'),
+                h: g('hours'),
-                m: get('minutes'),
+                m: g('minutes'),
-                s: get('seconds'),
+                s: g('seconds'),
-                a: get('prefix'),
+                a: g('prefix'),
-                z: get('suffix'),
+                z: g('suffix'),
                 f: this.options['format' + this.c],
                 c: this.c
             };
@@ -149,11 +149,25 @@
         },
         show: function() {
             this._trigger('show');
-            this._dom.menu.slideDown(200);; //todo: (heskew) make show effect an option
+            var pos = this.element.position();
+            var width = this.element.data('width');
+            var elementWidth = this.element.outerWidth();
+            var windowWidth = $(window).width() + $(window).scrollLeft();
+
+            if (width) {
+                this._dom.menu.css(
+                    'left',
+                    pos.left + elementWidth < windowWidth
+                        ? pos.left - width + elementWidth
+                        : windowWidth - width
+                    );
+            }
+
+            this._dom.menu.show(); //todo: (heskew) make show effect an option
         },
         hide: function() {
             this._trigger('hide');
-            this._dom.menu.slideUp(200);
+            this._dom.menu.hide();
         }
 
     });
@@ -167,7 +181,9 @@
         start: function(e, ui) {
             var menu = ui._dom.menu;
             var pos = ui.element.position();
-            menu.insertAfter(ui.element).css('left', pos.left - 225); //todo: (heskew) right-align better and have alignment an option
+
+            //render off screen, to be repositioned by show()
+            menu.insertAfter(ui.element).css('left', '-9999em');
 
             if (!$.boxModel) { // IE alignement fix
                 menu.css('margin-top', ui.element.height() + 8);
@@ -176,7 +192,7 @@
             ui.element
             .bind(ui.options.trigger, function() {
                 ui._dom.menu.find('ol:first').show();
-                ui._dom.menu.slideDown(200);
+                ui.show();
                 ui._trigger('focus');
                 if (ui.options.trigger != 'focus') {
                     ui.element.focus();
@@ -192,6 +208,23 @@
                 ui._trigger('refresh');
             });
         },
+        initialized: function(e, ui) {
+            var menuItems = ui._dom.menu.find('ol');
+            var pos = ui.element.position();
+
+            //load up
+            ui.show();
+            menuItems.show();
+
+            //store width(s)
+            ui.element.data('width', ui._dom.menu.outerWidth());
+            //fix the width
+            ui._dom.menu.width(ui._dom.menu.width());
+
+            //hide
+            menuItems.hide();
+            ui.hide();
+        },
         refresh: function(e, ui) {
             // Realign each menu layers
             ui._dom.menu.find('ol').each(function() {

src/Orchard.Web/Packages/Orchard.Blogs/Views/EditorTemplates/Parts/Blogs.BlogPost.Publish.ascx

@@ -22,6 +22,8 @@
     <div>
         <%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %>
         <label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label>
+    </div>
+    <div>
         <label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label>
         <%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%>
         <label class="forpicker" for="ScheduledPublishUtcTime"><%=_Encoded("Time")%></label>
@@ -41,6 +43,6 @@
             .blur(function() { var $this = $(this); setTimeout(function() { if (!$this.val()) { $this.addClass("hinted").val($this.data("hint")) } }, 300) });
         }
     });
-    $("input#ScheduledPublishUtcDate").datepicker().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
+    $("input#ScheduledPublishUtcDate").datepicker({showAnim:""}).focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
     $("input#ScheduledPublishUtcTime").timepickr().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
 })</script>

src/Orchard.Web/Packages/Orchard.Pages/Scripts/ui.timepickr.js

@@ -84,7 +84,7 @@
             var ui = this;
             var btn = false;
             var row = $.tpl('timepickr.row').bind('mouseover', function() {
-                $(this).next().slideDown(200);
+                $(this).next().show();
             });
             $.each(range, function(idx, val) {
                 ui._createButton(val, format || false).appendTo(row);
@@ -115,16 +115,16 @@
 
         _getVal: function() {
             var ols = this._dom.menu.find('ol');
-            function get(unit) {
+            function g(unit) {
                 var u = ols.filter('.' + unit).find('.ui-state-hover:first').text();
                 return u || ols.filter('.' + unit + 'li:first span').text();
             }
             return {
-                h: get('hours'),
+                h: g('hours'),
-                m: get('minutes'),
+                m: g('minutes'),
-                s: get('seconds'),
+                s: g('seconds'),
-                a: get('prefix'),
+                a: g('prefix'),
-                z: get('suffix'),
+                z: g('suffix'),
                 f: this.options['format' + this.c],
                 c: this.c
             };
@@ -149,11 +149,25 @@
         },
         show: function() {
             this._trigger('show');
-            this._dom.menu.slideDown(200);; //todo: (heskew) make show effect an option
+            var pos = this.element.position();
+            var width = this.element.data('width');
+            var elementWidth = this.element.outerWidth();
+            var windowWidth = $(window).width() + $(window).scrollLeft();
+
+            if (width) {
+                this._dom.menu.css(
+                    'left',
+                    pos.left + elementWidth < windowWidth
+                        ? pos.left - width + elementWidth
+                        : windowWidth - width
+                    );
+            }
+
+            this._dom.menu.show(); //todo: (heskew) make show effect an option
         },
         hide: function() {
             this._trigger('hide');
-            this._dom.menu.slideUp(200);
+            this._dom.menu.hide();
         }
 
     });
@@ -167,7 +181,9 @@
         start: function(e, ui) {
             var menu = ui._dom.menu;
             var pos = ui.element.position();
-            menu.insertAfter(ui.element).css('left', pos.left - 225); //todo: (heskew) right-align better and have alignment an option
+
+            //render off screen, to be repositioned by show()
+            menu.insertAfter(ui.element).css('left', '-9999em');
 
             if (!$.boxModel) { // IE alignement fix
                 menu.css('margin-top', ui.element.height() + 8);
@@ -176,7 +192,7 @@
             ui.element
             .bind(ui.options.trigger, function() {
                 ui._dom.menu.find('ol:first').show();
-                ui._dom.menu.slideDown(200);
+                ui.show();
                 ui._trigger('focus');
                 if (ui.options.trigger != 'focus') {
                     ui.element.focus();
@@ -192,6 +208,23 @@
                 ui._trigger('refresh');
             });
         },
+        initialized: function(e, ui) {
+            var menuItems = ui._dom.menu.find('ol');
+            var pos = ui.element.position();
+
+            //load up
+            ui.show();
+            menuItems.show();
+
+            //store width(s)
+            ui.element.data('width', ui._dom.menu.outerWidth());
+            //fix the width
+            ui._dom.menu.width(ui._dom.menu.width());
+
+            //hide
+            menuItems.hide();
+            ui.hide();
+        },
         refresh: function(e, ui) {
             // Realign each menu layers
             ui._dom.menu.find('ol').each(function() {

src/Orchard.Web/Packages/Orchard.Pages/Views/EditorTemplates/Parts/Pages.Page.Publish.ascx

@@ -23,6 +23,8 @@
     <div>
         <%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %>
         <label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label>
+    </div>
+    <div>
         <label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label>
         <%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%>
         <label class="forpicker" for="ScheduledPublishUtcTime"><%=_Encoded("Time")%></label>
@@ -42,6 +44,6 @@
             .blur(function() { var $this = $(this); setTimeout(function() { if (!$this.val()) { $this.addClass("hinted").val($this.data("hint")) } }, 300) });
         }
     });
-    $("input#ScheduledPublishUtcDate").datepicker().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
+    $("input#ScheduledPublishUtcDate").datepicker({showAnim:""}).focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
     $("input#ScheduledPublishUtcTime").timepickr().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
 })</script>