From aa4ed454737d45bf8140fd84f2eea2e04ed4a7d6 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Wed, 3 Feb 2010 09:43:22 -0800 Subject: Differentiate between selected and non selected items. --- modules/organize/css/organize.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) (limited to 'modules/organize/css') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index d8923ea7..bc8e5b0c 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -87,16 +87,10 @@ } .g-organize-microthumb-grid-cell { - margin: 6px; - padding: 0 !important; - position: relative; -} - -.g-organize-microthumb { display: block; height: 100px; - margin: 0; - padding: .4em 0; + margin: 6px; + padding: .4em 0 !important; position: relative; text-align: center; width: 110px; @@ -106,7 +100,7 @@ z-index: 2000 !important; } -.g-organize-microthumb .ui-icon { +.g-organize-microthumb-grid-cell .ui-icon { bottom: 0; left: 0; position: absolute; -- cgit v1.2.3 From 95b26db82c3f835f66cdb32aef13aa84a6a206e5 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Wed, 3 Feb 2010 13:56:04 -0800 Subject: 1) Simplify the layout of the organize dialog content. 2) Use CSS to layout the thmbnail grid to the full dialog size. Fixes ticker #848. 3) Separate css that can be themed into organize_theme.css. This isolates the themed components into a separate file for easy of overriding by a theme. --- modules/organize/css/organize.css | 47 ++++++++++++---------- modules/organize/css/organize_theme.css | 10 +++++ modules/organize/helpers/organize_theme.php | 1 + modules/organize/js/organize.js | 30 +++++++------- modules/organize/views/organize_dialog.html.php | 10 ++--- .../organize/views/organize_thumb_grid.html.php | 12 +++--- 6 files changed, 60 insertions(+), 50 deletions(-) create mode 100644 modules/organize/css/organize_theme.css (limited to 'modules/organize/css') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index bc8e5b0c..ef1f856b 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -3,18 +3,18 @@ */ #g-organize { - height: auto; margin: 0 !important; + min-height: auto; padding: 0 !important; position: relative; width: 100%; } #g-organize-content-pane { - height: auto; + height: 100%; margin: 0 !important; padding: 0 !important; - position: relative; + position: absolute; width: 100%; } @@ -23,11 +23,15 @@ */ #g-organize #g-organize-tree-container { - height: 100%; - overflow: auto; margin: 0; + min-height: 100%; padding: 0; - width: 19%; + position: relative; + width: 20%; +} + +#g-organize #g-organize-tree-container h3 { + margin-bottom: 0.1em; } #g-organize-album-tree { @@ -54,10 +58,10 @@ */ #g-organize #g-organize-detail { - height: 100%; margin: 0 !important; - overflow: hidden; + min-height: 100%; padding: 0 !important; + position: relative; width: 80%; } @@ -71,21 +75,17 @@ width: inherit; } -#g-organize-microthumb-panel { - height: 100%; - margin: 0 !important; - position: relative; - padding: 0 !important; - width: 100%; -} - #g-organize-microthumb-grid { - height: 100%; - overflow: auto; + bottom: 1.8em; + left: 0; + margin: 0 !important; + overflow-x: hidden; + overflow-y: auto; padding: .4em !important; - position: relative; + position: absolute; + right: 0; + top: 1.6em; } - .g-organize-microthumb-grid-cell { display: block; height: 100px; @@ -112,8 +112,13 @@ */ #g-organize-controls { + bottom: 0; + height: 1.9em; + left: 0; margin: 0 !important; - padding: .2em .4em; + padding: .1em .4em; + position: absolute; + right: 0; } #g-organize-controls select { diff --git a/modules/organize/css/organize_theme.css b/modules/organize/css/organize_theme.css new file mode 100644 index 00000000..727dca97 --- /dev/null +++ b/modules/organize/css/organize_theme.css @@ -0,0 +1,10 @@ +/** ******************************************************************* + * Organize styles that are theme overrideable + *********************************************************************/ +.g-organize-microthumb-grid-cell.ui-selected { + background: #DFEFFC !important; +} + +#g-organize-microthumb-grid { + border: 1px solid #79B7E7; +} diff --git a/modules/organize/helpers/organize_theme.php b/modules/organize/helpers/organize_theme.php index 61b6fe7d..c2914675 100644 --- a/modules/organize/helpers/organize_theme.php +++ b/modules/organize/helpers/organize_theme.php @@ -27,6 +27,7 @@ class organize_theme { // approach that lets us continue to use the Kohana cascading filesystem. $theme->script("organize.js"); $theme->css("organize.css"); + $theme->css("organize_theme.css"); } } } diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index 76eadf85..a89305f6 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -4,15 +4,15 @@ handle: ".ui-selected", distance: 10, cursorAt: { left: -10, top: -10}, - appendTo: "#g-organize-microthumb-panel", + appendTo: "#g-organize", helper: function(event, ui) { var selected = $(".ui-draggable.ui-selected img"); if (selected.length) { var set = $('
') .css({ - zIndex: 2000, - width: 80, - height: Math.ceil(selected.length / 5) * 16 + zIndex: 2000, + width: 80, + height: Math.ceil(selected.length / 5) * 16 }); var offset = $(this).offset(); var click = {left: event.pageX - offset.left, top: event.pageY - offset.top}; @@ -37,16 +37,16 @@ }, start: function(event, ui) { - $("#g-organize-microthumb-panel .ui-selected").hide(); + $("#g-organize-microthumb-grid .ui-selected").hide(); }, drag: function(event, ui) { - var top = $("#g-organize-microthumb-panel").offset().top; - var height = $("#g-organize-microthumb-panel").height(); + var top = $("#g-organize-microthumb-grid").offset().top; + var height = $("#g-organize-microthumb-grid").height(); if (ui.offset.top > height + top - 20) { - $("#g-organize-microthumb-panel").get(0).scrollTop += 100; + $("#g-organize-microthumb-grid").get(0).scrollTop += 100; } else if (ui.offset.top < top + 20) { - $("#g-organize-microthumb-panel").get(0).scrollTop = Math.max(0, $("#g-organize-microthumb-panel").get(0).scrollTop - 100); + $("#g-organize-microthumb-grid").get(0).scrollTop = Math.max(0, $("#g-organize-microthumb-grid").get(0).scrollTop - 100); } } }, @@ -63,7 +63,7 @@ target_id = $(".currentDropTarget").attr("ref"); } else { before_or_after = "after"; - target_id = $("#g-organize-microthumb-grid li:last").attr("ref"); + target_id = $("#g-organize-microthumb-grid div:last").attr("ref"); } $.organize.do_drop({ url: rearrange_url @@ -92,7 +92,7 @@ }, do_drop: function(options) { - $("#g-organize-microthumb-panel").selectable("destroy"); + $("#g-organize-microthumb-grid").selectable("destroy"); var source_ids = []; $(options.source).each(function(i) { source_ids.push($(this).attr("ref")); @@ -102,7 +102,7 @@ $.post(options.url, { "source_ids[]": source_ids }, function(data) { - $.organize._refresh(data); + $.organize._refresh(data); }, "json"); } @@ -141,8 +141,6 @@ $("#g-dialog").dialog("option", "zIndex", 70); $("#g-dialog").bind("dialogopen", function(event, ui) { $("#g-organize").height($("#g-dialog").innerHeight() - 20); - $("#g-organize-microthumb-grid").height($("#g-dialog").innerHeight() - 91); - $("#g-organize-tree-container").height($("#g-dialog").innerHeight() - 60); }); $("#g-dialog").bind("dialogclose", function(event, ui) { @@ -210,11 +208,11 @@ if ($(parent).hasClass("g-view-only")) { return; } - $("#g-organize-microthumb-panel").selectable("destroy"); + $("#g-organize-microthumb-grid").selectable("destroy"); var id = $(event.currentTarget).attr("ref"); $(".g-organize-album-text.ui-state-focus").removeClass("ui-state-focus"); $(".g-organize-album-text[ref=" + id + "]").addClass("ui-state-focus"); - var url = $("#g-organize-microthumb-panel").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0); + var url = $("#g-organize-microthumb-grid").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0); $.get(url, {}, function(data) { $("#g-organize-microthumb-grid").html(data.grid); diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 435f5ae3..3d824886 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -15,14 +15,12 @@
-
+
    • + +
    "> -
      -
      • -
    -
      -
    children(25, $offset) as $child): ?> -
  • - - thumb_img(array("class" => "g-thumbnail", "ref" => $child->id), 90, true) ?> - is_album() ? " class=\"ui-icon ui-icon-note\"" : "" ?>> - -
    • +
    " + ref="id ?>"> + thumb_img(array("class" => "g-thumbnail", "ref" => $child->id), 90, true) ?> + is_album() ? " class=\"ui-icon ui-icon-note\"" : "" ?>> +
    children_count() > $offset): ?> -- cgit v1.2.3 From 48efd21556dbc4f9f4046f9d2f685726b1c006ff Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Wed, 3 Feb 2010 22:48:47 -0800 Subject: Provide visual feedback when over tree branches. --- modules/organize/css/organize.css | 7 +++++++ modules/organize/css/organize_theme.css | 5 +++-- 2 files changed, 10 insertions(+), 2 deletions(-) (limited to 'modules/organize/css') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index ef1f856b..686ec034 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -53,6 +53,11 @@ width: auto; } +.g-organize-album-text:hover { + border-width: 1px; + border-style: dotted; +} + /******************************************************************* * Album panel styles */ @@ -76,6 +81,8 @@ } #g-organize-microthumb-grid { + border-width: 1px; + border-style: solid; bottom: 1.8em; left: 0; margin: 0 !important; diff --git a/modules/organize/css/organize_theme.css b/modules/organize/css/organize_theme.css index 727dca97..4248f095 100644 --- a/modules/organize/css/organize_theme.css +++ b/modules/organize/css/organize_theme.css @@ -5,6 +5,7 @@ background: #DFEFFC !important; } -#g-organize-microthumb-grid { - border: 1px solid #79B7E7; +#g-organize-microthumb-grid, +.g-organize-album-text:hover { + border-color: #79B7E7; } -- cgit v1.2.3 From 3d2a3bee572b8ccddf08982c5596b35a0e983b85 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Thu, 4 Feb 2010 08:42:55 -0800 Subject: Provide better formating for the album tree in rtl mode. --- modules/organize/css/organize.css | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'modules/organize/css') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index 686ec034..a561a134 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -42,6 +42,10 @@ padding: 0 0 .2em 1.2em; } +.rtl #g-organize-album-tree ul li { + padding: 0 1.2em .2em 0; +} + .g-organize-album span { cursor: pointer; } @@ -53,6 +57,13 @@ width: auto; } +.rtl .g-organize-album-text { + cursor: pointer; + display: block; + margin: 2px 2px 1px 1px; + width: auto; +} + .g-organize-album-text:hover { border-width: 1px; border-style: dotted; -- cgit v1.2.3 From a8d30dcecf40210096a4adaea0f5d231b69ead6a Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Fri, 5 Feb 2010 08:08:12 -0800 Subject: Improve the handling of the drop target marker when dragging items within the grid. Originally the borders disappeared not they don't. A single element is used to contain the drop target marker. This element contains all the position information for the drop handler to determine where the item should be positioned. In addition, the drop target marker is removed when the drag extends outside the grid and is re shown, when the cursor re-enters the thumbnail grid. --- modules/organize/css/organize_theme.css | 5 ++ modules/organize/js/organize.js | 100 +++++++++++++++++++++++--------- 2 files changed, 77 insertions(+), 28 deletions(-) (limited to 'modules/organize/css') diff --git a/modules/organize/css/organize_theme.css b/modules/organize/css/organize_theme.css index 4248f095..3d289755 100644 --- a/modules/organize/css/organize_theme.css +++ b/modules/organize/css/organize_theme.css @@ -6,6 +6,11 @@ } #g-organize-microthumb-grid, +#g-organize-drop-target-marker, .g-organize-album-text:hover { border-color: #79B7E7; } + +#g-organize-drop-target-marker { + background-color: #79B7E7; +} diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index a89305f6..56377ce3 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -56,19 +56,11 @@ tolerance: "pointer", greedy: true, drop: function(event, ui) { - var before_or_after = null; - var target_id = null; - if ($(".currentDropTarget").length) { - before_or_after = $(".currentDropTarget").css("borderLeftStyle") == "solid" ? "before" : "after"; - target_id = $(".currentDropTarget").attr("ref"); - } else { - before_or_after = "after"; - target_id = $("#g-organize-microthumb-grid div:last").attr("ref"); - } + var target = $("#g-organize-drop-target-marker").data("drop_position"); $.organize.do_drop({ url: rearrange_url - .replace("__TARGET_ID__", target_id) - .replace("__BEFORE__", before_or_after), + .replace("__TARGET_ID__", target.id) + .replace("__BEFORE__", target.before ? "before" : "after"), source: $(ui.helper).children("img") }); } @@ -120,14 +112,58 @@ $.organize.set_handlers(); }, - mouse_move_handler: function(event) { + grid_mouse_leave_handler: function(event) { + if ($(".g-drag-helper").length && $("#g-organize-drop-target-marker").length) { + $("#g-organize-drop-target-marker").remove(); + } + }, + + grid_mouse_move_handler: function(event) { if ($(".g-drag-helper").length) { - $(".g-organize-microthumb-grid-cell").css({borderStyle: "hidden", margin: "6px"}); - $(".currentDropTarget").removeClass("currentDropTarget"); - var borderStyle = event.pageX < $(this).offset().left + $(this).width() / 2 ? - {borderLeftStyle: "solid", marginLeft: "2px"} : {borderRightStyle: "solid", marginRight: "2px"}; - $(this).addClass("currentDropTarget") - .css(borderStyle); + var cellSize = $("#g-organize").data("cellSize"); + var thumbnailCount = $(".g-organize-microthumb-grid-cell:visible").length; + var rows = Math.ceil(thumbnailCount / cellSize.columns); + + + var itemPos = { + col: Math.floor((event.pageX - $(this).offset().left) / cellSize.width), + row: Math.floor((event.pageY - $(this).offset().top) / cellSize.height) + }; + var itemIndex = itemPos.row * cellSize.columns + itemPos.col; + + var item; + if (itemIndex < thumbnailCount) { + item = $(".g-organize-microthumb-grid-cell:visible").get(itemIndex); + } else { + item = $(".g-organize-microthumb-grid-cell:visible:last"); + } + + var old_position = {top: 0, left: 0}; + if ($("#g-organize-drop-target-marker").length) { + old_position = $("#g-organize-drop-target-marker").position(); + } + var before = event.pageX < ($(item).offset().left + $(item).width() / 2); + + var left = (before && itemIndex < thumbnailCount ? $(item).position().left : $(item).position().left + cellSize.width) - 3; + var top = $(item).position().top + 6; + + if (old_position.top != top || old_position.left != left) { + if ($("#g-organize-drop-target-marker").length) { + $("#g-organize-drop-target-marker").remove(); + } + var set = $('
    ') + .css({zIndex: 2000, + width: 2, + height: 112, + borderWidth: 1, + borderStyle: "solid", + position: "absolute", + top: top, + left: left + }) + .data("drop_position", {id: $(item).attr("ref"), position: before}); + $("#g-organize-microthumb-grid").append(set); + } } }, @@ -140,7 +176,15 @@ $(".sf-menu li.sfHover ul").css("z-index", 68); $("#g-dialog").dialog("option", "zIndex", 70); $("#g-dialog").bind("dialogopen", function(event, ui) { - $("#g-organize").height($("#g-dialog").innerHeight() - 20); + var outerHeight = $(".g-organize-microthumb-grid-cell").outerHeight(true); + var outerWidth = $(".g-organize-microthumb-grid-cell").outerWidth(true); + $("#g-organize") + .height($("#g-dialog").innerHeight() - 20) + .data("cellSize", { + height: outerHeight, + width: outerWidth, + columns: Math.floor($("#g-organize-microthumb-grid").innerWidth() / outerWidth) + }); }); $("#g-dialog").bind("dialogclose", function(event, ui) { @@ -162,11 +206,11 @@ set_handlers: function() { $("#g-organize-microthumb-grid") .selectable({filter: ".g-organize-microthumb-grid-cell"}) + .mousemove($.organize.grid_mouse_move_handler) + .mouseleave($.organize.grid_mouse_leave_handler) .droppable($.organize.content_droppable); $(".g-organize-microthumb-grid-cell") - .draggable($.organize.micro_thumb_draggable) - .mouseleave($.organize.mouse_leave_handler) - .mousemove($.organize.mouse_move_handler); + .draggable($.organize.micro_thumb_draggable); $(".g-organize-album").droppable($.organize.branch_droppable); $(".g-organize-album-text").click($.organize.show_album); $("#g-organize-album-tree .ui-icon-plus,#g-organize-album-tree .ui-icon-minus").click($.organize.toggle_branch); @@ -214,12 +258,12 @@ $(".g-organize-album-text[ref=" + id + "]").addClass("ui-state-focus"); var url = $("#g-organize-microthumb-grid").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0); $.get(url, {}, - function(data) { - $("#g-organize-microthumb-grid").html(data.grid); - $("#g-organize-sort-column").attr("value", data.sort_column); - $("#g-organize-sort-order").attr("value", data.sort_order); - $.organize.set_handlers(); - }, + function(data) { + $("#g-organize-microthumb-grid").html(data.grid); + $("#g-organize-sort-column").attr("value", data.sort_column); + $("#g-organize-sort-order").attr("value", data.sort_order); + $.organize.set_handlers(); + }, "json"); }, -- cgit v1.2.3 From 94cc061e8b51704c6cb38d637aa3082ee4adb1ca Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Fri, 5 Feb 2010 10:25:55 -0800 Subject: Correct alignment in IE7. fixes ticket #795 --- modules/organize/css/organize.css | 8 +++++++- modules/organize/views/organize_dialog.html.php | 8 +++++--- modules/organize/views/organize_tree.html.php | 12 ++++++------ 3 files changed, 18 insertions(+), 10 deletions(-) (limited to 'modules/organize/css') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index a561a134..22d6e051 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -88,7 +88,7 @@ #g-organize #g-organize-detail .g-message-block li { padding-bottom: .2em; padding-top: .2em; - width: inherit; + width: auto; } #g-organize-microthumb-grid { @@ -139,7 +139,13 @@ right: 0; } +#g-organize-controls #g-organize-sort-order-text { + padding: .2em 0 0 0; +} + + #g-organize-controls select { + margin-left: .42em; display: inline; } diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 3d824886..e36264f9 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -26,9 +26,11 @@
    - - "g-organize-sort-column"), album::get_sort_order_options(), $album->sort_column) ?> - "g-organize-sort-order"), array("ASC" => "Ascending", "DESC" => "Descending"), $album->sort_order) ?> +
      +
      • +
    • + "g-organize-sort-column"), album::get_sort_order_options(), $album->sort_column) ?>
    • + "g-organize-sort-order"), array("ASC" => "Ascending", "DESC" => "Descending"), $album->sort_order) ?>
    diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php index 49ed01fc..3912c1f6 100644 --- a/modules/organize/views/organize_tree.html.php +++ b/modules/organize/views/organize_tree.html.php @@ -1,9 +1,9 @@ -
  • " +
  • " ref="id ?>"> - + - " + " ref="id ?>"> title) ?> @@ -12,10 +12,10 @@ contains($selected)): ?> $selected, "album" => $child)); ?> -
  • " +
  • " ref="id ?>"> - - " ref="id ?>"> + + " ref="id ?>"> title) ?>
    • -- cgit v1.2.3