diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less index ebbb49e8d5..f9724fa974 100644 --- a/src/Umbraco.Web.UI.Client/src/less/gridview.less +++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less @@ -10,8 +10,9 @@ // Sortabel // ------------------------- + .usky-grid .ui-sortable-helper { - position:absolute; + position:absolute !important; border: dashed 1px #000 !important; background: #ccc; opacity: 0.4; @@ -44,8 +45,9 @@ text-align: center; font-size: 85px; line-height: 65px; - color: @grayLighter; + color: @gray; vertical-align: middle; + background-color:@grayLighter; } .usky-grid .ui-sortable-placeholder:hover{ @@ -138,6 +140,7 @@ .usky-grid .usky-cell{ position: relative; border: 1px dashed rgba(0,0,0,0); + min-height:127px; } .usky-grid .cell-tools { diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js index c843971989..d900a24a4e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js @@ -28,6 +28,17 @@ angular.module("umbraco") left: 90 }, + sort: function (event, ui) { + /* prevent vertical scroll out of the screen */ + var max = $(".usky-grid").width() - 150; + if (parseInt(ui.helper.css('left')) > max) { + ui.helper.css({ 'left': max + "px" }) + } + if (parseInt(ui.helper.css('left')) < 20) { + ui.helper.css({ 'left': 20 }) + } + }, + start: function (e, ui) { ui.item.find('.mceNoEditor').each(function () { tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); @@ -46,7 +57,6 @@ angular.module("umbraco") var cancelMove = false; $scope.sortableOptionsCell = { - distance: 10, cursor: "move", placeholder: "ui-sortable-placeholder", @@ -61,6 +71,18 @@ angular.module("umbraco") left: 90 }, + sort: function (event, ui) { + /* prevent vertical scroll out of the screen */ + var position = parseInt(ui.item.parent().offset().left) + parseInt(ui.helper.css('left')) - parseInt($(".usky-grid").offset().left); + var max = $(".usky-grid").width() - 220; + if (position > max) { + ui.helper.css({ 'left': max - parseInt(ui.item.parent().offset().left) + parseInt($(".usky-grid").offset().left) + "px" }) + } + if (position < 0) { + ui.helper.css({ 'left': 0 - parseInt(ui.item.parent().offset().left) + parseInt($(".usky-grid").offset().left) + "px" }) + } + }, + over: function (event, ui) { allowedEditors = $(event.target).scope().area.allowed; @@ -527,7 +549,6 @@ angular.module("umbraco") }; - // ********************************************* // Init control // *********************************************