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/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/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/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/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 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/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 From 81b595743f75aea96a8159c8ab827fa3d25233ab Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Sat, 6 Feb 2010 16:30:25 -0800 Subject: Force each branch of a tree onto a new line. --- modules/organize/css/organize.css | 2 ++ 1 file changed, 2 insertions(+) (limited to 'modules/organize/css/organize.css') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index 22d6e051..87f9e55b 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -40,10 +40,12 @@ #g-organize-album-tree ul li { padding: 0 0 .2em 1.2em; + width: 100%; } .rtl #g-organize-album-tree ul li { padding: 0 1.2em .2em 0; + width: 100%; } .g-organize-album span { -- cgit v1.2.3 From 6340d8caf2261199e029841baca66e302c861679 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Sat, 6 Feb 2010 16:43:55 -0800 Subject: 100% was just to wide, so scale the width back to 90% for organize album tree branches. --- modules/organize/css/organize.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'modules/organize/css/organize.css') diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index 87f9e55b..7a8c3a5f 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -40,12 +40,12 @@ #g-organize-album-tree ul li { padding: 0 0 .2em 1.2em; - width: 100%; + width: 90%; } .rtl #g-organize-album-tree ul li { padding: 0 1.2em .2em 0; - width: 100%; + width: 90%; } .g-organize-album span { -- cgit v1.2.3