Commit f1b4836f authored by Dries's avatar Dries
Browse files

- Patch #649982 by casey: improve the drag-drop handling for dashboard customization.

parent 40fb3a93
......@@ -66,7 +66,7 @@
margin: 5px;
}
#dashboard #disabled-blocks .section {
#dashboard #disabled-blocks .region {
background-color: #E0E0D8;
border: #ccc 1px solid;
padding: 10px;
......@@ -77,12 +77,6 @@
padding: 5px 0;
}
#dashboard div.dragging {
background: #0074BD;
color: #fff;
width: 30%;
}
#dashboard #disabled-blocks h2 {
display: inline;
font-weight: normal;
......@@ -94,7 +88,7 @@
color: #fff;
}
#dashboard #disabled-blocks .block:hover {
#dashboard.customize-inactive #disabled-blocks .block:hover {
background: #0074BD;
}
......@@ -112,12 +106,12 @@
padding: 0 17px;
}
#dashboard #disabled-blocks .block:hover h2 {
#dashboard.customize-inactive #disabled-blocks .block:hover h2 {
background: #0074BD url(../../misc/draggable.png) no-repeat 0px -39px;
color: #fff;
}
#dashboard .dashboard-region .ui-sortable .block:hover h2 {
#dashboard.customize-inactive .dashboard-region .ui-sortable .block:hover h2 {
background: #0074BD url(../../misc/draggable.png) no-repeat;
background-position: 3px -36px;
color: #fff;
......
......@@ -44,7 +44,7 @@ Drupal.behaviors.dashboard = {
* Enter "customize" mode by displaying disabled blocks.
*/
enterCustomizeMode: function () {
$('#dashboard').addClass('customize-mode');
$('#dashboard').addClass('customize-mode customize-inactive');
Drupal.behaviors.dashboard.addPlaceholders();
// Hide the customize link
$('#dashboard .customize .action-links').hide();
......@@ -56,7 +56,7 @@ Drupal.behaviors.dashboard = {
* Exit "customize" mode by simply forcing a page refresh.
*/
exitCustomizeMode: function () {
$('#dashboard').removeClass('customize-mode');
$('#dashboard').removeClass('customize-mode customize-inactive');
Drupal.behaviors.dashboard.addPlaceholders();
location.href = Drupal.settings.dashboard.dashboard;
},
......@@ -75,11 +75,12 @@ Drupal.behaviors.dashboard = {
cursor: 'move',
cursorAt: {top:0},
dropOnEmpty: true,
items: '>div.block, div.disabled-block',
opacity: 1,
helper: 'block-dragging',
items: '> div.block, > div.disabled-block',
placeholder: 'block-placeholder clearfix',
tolerance: 'pointer',
start: Drupal.behaviors.dashboard.start,
over: Drupal.behaviors.dashboard.over,
sort: Drupal.behaviors.dashboard.sort,
update: Drupal.behaviors.dashboard.update
});
},
......@@ -95,6 +96,7 @@ Drupal.behaviors.dashboard = {
* An object containing information about the item that is being dragged.
*/
start: function (event, ui) {
$('#dashboard').removeClass('customize-inactive');
var item = $(ui.item);
// If the block is already in disabled state, don't do anything.
......@@ -103,6 +105,48 @@ Drupal.behaviors.dashboard = {
}
},
/**
* While dragging, adapt block's width to the width of the region it is moved
* into.
*
* This function is called on the jQuery UI Sortable "over" event.
*
* @param event
* The event that triggered this callback.
* @param ui
* An object containing information about the item that is being dragged.
*/
over: function (event, ui) {
var item = $(ui.item);
// If the block is in disabled state, remove width.
if ($(this).closest('#disabled-blocks').length) {
item.css('width', '');
}
else {
item.css('width', $(this).width());
}
},
/**
* While dragging, adapt block's position to stay connected with the position
* of the mouse pointer.
*
* This function is called on the jQuery UI Sortable "sort" event.
*
* @param event
* The event that triggered this callback.
* @param ui
* An object containing information about the item that is being dragged.
*/
sort: function (event, ui) {
var item = $(ui.item);
if (event.pageX > ui.offset.left + item.width()) {
item.css('left', event.pageX);
}
},
/**
* Send block order to the server, and expand previously disabled blocks.
*
......@@ -114,6 +158,7 @@ Drupal.behaviors.dashboard = {
* An object containing information about the item that was just dropped.
*/
update: function (event, ui) {
$('#dashboard').addClass('customize-inactive');
var item = $(ui.item);
// If the user dragged a disabled block, load the block contents.
......
......@@ -451,7 +451,7 @@ function theme_dashboard_region($variables) {
function theme_dashboard_disabled_blocks($variables) {
extract($variables);
$output = '<div class="canvas-content"><p>' . t('Drag and drop these blocks to the columns below. Changes are automatically saved.') . '</p>';
$output .= '<div id="disabled-blocks"><div class="section region disabled-blocks clearfix">';
$output .= '<div id="disabled-blocks"><div class="region disabled-blocks clearfix">';
foreach ($blocks as $block) {
$output .= theme('dashboard_disabled_block', array('block' => $block));
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment