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/views/organize_thumb_grid.html.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php index 9a9cd819..f29680f7 100644 --- a/modules/organize/views/organize_thumb_grid.html.php +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -1,11 +1,11 @@ children(25, $offset) as $child): ?> -
  • -
    ui-state-active"> +
  • + thumb_img(array("class" => "g-thumbnail", "ref" => $child->id), 90, true) ?> is_album() ? " class=\"ui-icon ui-icon-note\"" : "" ?>> - +
    • -- 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/views') 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 c82061391717a746fb61696ff48152b1e907b49c Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Thu, 4 Feb 2010 08:19:38 -0800 Subject: Don't change the current album when items are dragged to a different album in the album tree. Fixes ticket #959. --- modules/organize/controllers/organize.php | 8 ++++++-- modules/organize/views/organize_tree.html.php | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php index 4a4b9f13..8e2c0cee 100644 --- a/modules/organize/controllers/organize.php +++ b/modules/organize/controllers/organize.php @@ -48,8 +48,12 @@ class Organize_Controller extends Controller { access::required("view", $target_album); access::required("add", $target_album); + $source_album = null; foreach (Input::instance()->post("source_ids") as $source_id) { $source = ORM::factory("item", $source_id); + if (empty($source_album)) { // get the source_album + $source_album = $source->parent(); + } if (!$source->contains($target_album)) { access::required("edit", $source); item::move($source, $target_album); @@ -57,8 +61,8 @@ class Organize_Controller extends Controller { } print json_encode( - array("tree" => (string)self::_expanded_tree(ORM::factory("item", 1), $target_album), - "grid" => (string)self::_get_micro_thumb_grid($target_album, 0))); + array("tree" => (string)self::_expanded_tree(ORM::factory("item", 1), $source_album), + "grid" => (string)self::_get_micro_thumb_grid($source_album, 0))); } function rearrange($target_id, $before_or_after) { diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php index 513c0625..49ed01fc 100644 --- a/modules/organize/views/organize_tree.html.php +++ b/modules/organize/views/organize_tree.html.php @@ -15,7 +15,7 @@
  • " ref="id ?>"> - + " ref="id ?>"> title) ?>
    • -- 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/views') 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 From 83f61ff5cf9c51c998dac9dad23d74ab7339ead5 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Sat, 6 Feb 2010 09:47:56 -0800 Subject: Insure that the 'Ascending'/'Descending' string are translated on the organize dialog. --- modules/organize/views/organize_dialog.html.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'modules/organize/views') diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index e36264f9..7a16f56c 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -30,7 +30,9 @@
  • "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-order"), + array("ASC" => t("Ascending"), "DESC" => t("Descending")), + $album->sort_order) ?>
    -- cgit v1.2.3 From 15e22076552929bf1f45888945f65de621aa2aac Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Sat, 6 Feb 2010 10:12:53 -0800 Subject: correct layout of html for readability --- modules/organize/views/organize_dialog.html.php | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 7a16f56c..38d05b81 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -29,10 +29,14 @@
    • - "g-organize-sort-column"), album::get_sort_order_options(), $album->sort_column) ?>
    • - "g-organize-sort-order"), - array("ASC" => t("Ascending"), "DESC" => t("Descending")), - $album->sort_order) ?>
    + "g-organize-sort-column"), + album::get_sort_order_options(), $album->sort_column) ?> + +
  • + "g-organize-sort-order"), + array("ASC" => t("Ascending"), "DESC" => t("Descending")), $album->sort_order) ?> +
    • + -- cgit v1.2.3 From 47293fcb03d51e5b4691e9905019c1ff1732b0f4 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Mon, 8 Feb 2010 09:15:02 -0800 Subject: Correct tree branch alignment in IE --- modules/organize/views/organize_tree.html.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'modules/organize/views') diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php index 3912c1f6..33d7b4c9 100644 --- a/modules/organize/views/organize_tree.html.php +++ b/modules/organize/views/organize_tree.html.php @@ -1,5 +1,5 @@ -
  • " +
  • " ref="id ?>"> @@ -7,12 +7,12 @@ ref="id ?>"> title) ?> -
      +
        children(null, null, array(array("type", "=", "album"))) as $child): ?> contains($selected)): ?> $selected, "album" => $child)); ?> -
      • " +
      • " ref="id ?>"> " ref="id ?>"> -- cgit v1.2.3