diff options
Diffstat (limited to 'modules')
-rw-r--r-- | modules/organize/css/organize.css | 129 | ||||
-rw-r--r-- | modules/organize/js/organize.js | 87 | ||||
-rw-r--r-- | modules/organize/views/organize_dialog.html.php | 48 | ||||
-rw-r--r-- | modules/organize/views/organize_thumb_grid.html.php | 3 | ||||
-rw-r--r-- | modules/organize/views/organize_tree.html.php | 3 |
5 files changed, 137 insertions, 133 deletions
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index 41695cae..55267052 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -1,53 +1,42 @@ - /******************************************************************* * Dialog wide styles */ -#g-organize { - height: 100%; - overflow: hidden; -} - -#g-organize #bd { - height: 100%; -} -#g-organize #g-organize-detail { - width: auto; -} - -#g-organize #g-organize-tree-container { - height: 100%; - width: 25%; -} - -#g-organize #g-action-status { - margin-bottom: .4em; - width: 75%; - white-space: nowrap; +#g-organize { + height: auto; + margin: 0 !important; + padding: 0 !important; + position: relative; + width: 100%; } -#g-organize-detail { - height: 100%; +#g-organize-content-pane { + height: auto; + margin: 0 !important; + padding: 0 !important; + position: relative; + width: 100%; } /******************************************************************* * Album Tree styles */ -#g-organize-tree-container { + +#g-organize #g-organize-tree-container { height: 100%; overflow: auto; - margin: 0 !important; - padding: 0 !important; + margin: 0; + padding: 0; + width: 19%; } #g-organize-album-tree .g-selected { - background-color: #cfdeff; + background-color: #eee; border-bottom: 1px solid #999; - margin-right: 0; } #g-organize-album-tree ul li { - padding-left: 1.2em; + padding: 0 0 .2em 1.2em; } .g-organize-album span { @@ -56,9 +45,9 @@ .g-organize-album-text { cursor: pointer; - width: auto; - margin: 2px 0px 1px 2px; display: block; + margin: 2px 0px 1px 2px; + width: auto; } .g-organize-album-text:hover { @@ -68,70 +57,90 @@ /******************************************************************* * Album panel styles */ -#g-organize-microthumb-panel { + +#g-organize #g-organize-detail { + height: 100%; margin: 0 !important; + overflow: hidden; padding: 0 !important; - background-color: #cfdeff; + width: 80%; +} + +#g-organize #g-organize-detail .g-message-block { + margin: 0; + padding-left: 30px !important; +} + +#g-organize-microthumb-panel { + background-color: #eee; border: 1px solid #999; - border-top: none !important; - border-left: none !important; - overflow-x: hidden; - overflow-y: auto; + height: 100%; + margin: 0 !important; + position: relative; + padding: 0 !important; + width: 100%; } #g-organize-microthumb-grid { - padding: 1em; + height: 100%; + overflow: auto; + padding: .4em !important; + position: relative; } .g-organize-microthumb-grid-cell { - font-size: .8em; - padding: .5em !important; - border-left: 1px hidden #13A; - border-right: 1px hidden #13A; - margin: 4px; + margin: 6px; + padding: 0 !important; + position: relative; } .g-organize-microthumb { + background-color: #fff; + border: 1px solid #ccc; display: block; - height: 9em; + height: 100px; + margin: 0; + padding: .4em 0; + position: relative; text-align: center; - width: 9em; + width: 110px; } .g-organize-microthumb-grid-cell.ui-selecting, .g-organize-microthumb-grid-cell.ui-selected { - margin: 2px; border: 2px solid #13A; + margin: 4px; } .ui-selectable-helper { - z-index: 2000 !important; + background: #13A; border: 1px dashed #00F; opacity: 0.25; - background: #13A; -} - -.g-thumbnail { - padding: .5em; + z-index: 2000 !important; } -#g-organize-microthumb-grid .g-album { - background-color: #e8e8e8; +.g-organize-microthumb .ui-icon { + bottom: 0; + left: 0; + position: absolute; + z-index: 4000; } .g-organize-microthumb-grid-cell:hover { - margin: 2px; border: 2px solid #13A; + margin: 4px; } /**************************************************************** * Controls styles */ + #g-organize-controls { - padding-left: 8px; - background-color: #13A; - color: #ccc; - width: 100% !important; + background-color: #666; + color: #eee; + margin: 0 !important; + padding: .2em .4em; + width: 100%; } #g-organize-controls select { diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index d125e2df..a7fe1ad2 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -10,9 +10,9 @@ if (selected.length) { var set = $('<div class="g-drag-helper"></div>') .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}; @@ -29,7 +29,7 @@ }) .appendTo(set) .animate({ width: 10, height: 10, outlineWidth: 1, margin: 1, - left: (20 * j), top: (row * 20) }, 500); + left: (20 * j), top: (row * 20) }, 500); }); return set; } @@ -67,8 +67,8 @@ } $.organize.do_drop({ url: rearrange_url - .replace("__TARGET_ID__", target_id) - .replace("__BEFORE__", before_or_after), + .replace("__TARGET_ID__", target_id) + .replace("__BEFORE__", before_or_after), source: $(ui.helper).children("img") }); } @@ -99,11 +99,11 @@ }); if (source_ids.length) { - $.post(options.url, - { "source_ids[]": source_ids }, - function(data) { - $.organize._refresh(data); - }, + $.post(options.url, + { "source_ids[]": source_ids }, + function(data) { + $.organize._refresh(data); + }, "json"); } }, @@ -122,7 +122,7 @@ mouse_move_handler: function(event) { if ($(".g-drag-helper").length) { - $(".g-organize-microthumb-grid-cell").css({borderStyle: "hidden", margin: "4px"}); + $(".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"}; @@ -141,8 +141,8 @@ $("#g-dialog").dialog("option", "zIndex", 70); $("#g-dialog").bind("dialogopen", function(event, ui) { $("#g-organize").height($("#g-dialog").innerHeight() - 20); - $("#g-organize-microthumb-panel").height($("#g-dialog").innerHeight() - 90); - $("#g-organize-tree-container").height($("#g-dialog").innerHeight() - 59); + $("#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) { @@ -154,7 +154,8 @@ }); $("#g-organize-sort-column,#g-organize-sort-order").change(function(event) { - $.organize.resort($("#g-organize-sort-column").attr("value"), $("#g-organize-sort-order").attr("value")); + $.organize.resort($("#g-organize-sort-column").attr("value"), + $("#g-organize-sort-order").attr("value")); }); $.organize.set_handlers(); @@ -162,12 +163,12 @@ set_handlers: function() { $("#g-organize-microthumb-panel") - .selectable({filter: ".g-organize-microthumb-grid-cell"}) - .droppable($.organize.content_droppable); + .selectable({filter: ".g-organize-microthumb-grid-cell"}) + .droppable($.organize.content_droppable); $(".g-organize-microthumb-grid-cell") - .draggable($.organize.micro_thumb_draggable) + .draggable($.organize.micro_thumb_draggable) .mouseleave($.organize.mouse_leave_handler) - .mousemove($.organize.mouse_move_handler); + .mousemove($.organize.mouse_move_handler); $(".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); @@ -180,20 +181,18 @@ var id = $(event.currentTarget).parent().attr("ref"); if ($(target).hasClass("ui-icon-plus")) { - // Expanding - if (!branch.find("ul").length) { - $.get(tree_url.replace("__ALBUM_ID__", id), { }, - function(data) { - branch.replaceWith(data); - $.organize.set_handlers(); - } - ); - } else { - branch.find("ul:eq(0)").slideDown(); - } + // Expanding + if (!branch.find("ul").length) { + $.get(tree_url.replace("__ALBUM_ID__", id), { }, function(data) { + branch.replaceWith(data); + $.organize.set_handlers(); + }); + } else { + branch.find("ul:eq(0)").slideDown(); + } } else { - // Contracting - branch.find("ul:eq(0)").slideUp(); + // Contracting + branch.find("ul:eq(0)").slideUp(); } $(target).toggleClass("ui-icon-plus"); $(target).toggleClass("ui-icon-minus"); @@ -217,12 +216,12 @@ $(".g-organize-album-text[ref=" + id + "]").addClass("g-selected"); var url = $("#g-organize-microthumb-panel").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"); }, @@ -235,12 +234,12 @@ .replace("__COL__", column) .replace("__DIR__", dir); $.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"); } }; diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php index 57a0bdc6..5e46a5bb 100644 --- a/modules/organize/views/organize_dialog.html.php +++ b/modules/organize/views/organize_dialog.html.php @@ -7,35 +7,31 @@ </script> <div id="g-organize" class="g-dialog-panel"> <h1 style="display:none"><?= t("Organize %name", array("name" => html::purify($album->title))) ?></h1> - <div id="bd"> - <div> - <div class="g-first g-left"> - <h3><?= t("Albums") ?></h3> - </div> - <div id="g-action-status" class="g-message-block g-info"><?= t("Drag and drop photos to re-order or move between albums") ?></div> + <div id="g-organize-content-pane"> + <div id="g-organize-tree-container" class="g-left ui-helper-clearfix"> + <h3><?= t("Albums") ?></h3> + <ul id="g-organize-album-tree"> + <?= $album_tree ?> + </ul> </div> - <div id="g-organize-content-pane"> - <div id="g-organize-tree-container" class="g-first g-left"> - <h3><?= t("Albums") ?></h3><ul id="g-organize-album-tree"> - <?= $album_tree ?> + <div id="g-organize-detail" class="g-left ui-helper-clearfix"> + <div id="g-organize-microthumb-panel" + ref="<?= url::site("organize/album/__ITEM_ID__/__OFFSET__") ?>"> + <div id="g-action-status" class="g-message-block g-info"> + <?= t("Drag and drop photos to re-order or move between albums") ?> + </div> + <ul id="g-organize-microthumb-grid"> + <?= $micro_thumb_grid ?> </ul> </div> - <div id="g-organize-detail"> - <div id="g-organize-microthumb-panel" - ref="<?= url::site("organize/album/__ITEM_ID__/__OFFSET__") ?>"> - <ul id="g-organize-microthumb-grid"> - <?= $micro_thumb_grid ?> - </ul> - </div> - <div id="g-organize-controls"> - <a id="g-organize-close" href="#" ref="done" - class="g-button g-right ui-corner-all ui-state-default"><?= t("Close") ?></a> - <form> - <?= t("Sort order") ?> - <?= form::dropdown(array("id" => "g-organize-sort-column"), album::get_sort_order_options(), $album->sort_column) ?> - <?= form::dropdown(array("id" => "g-organize-sort-order"), array("ASC" => "Ascending", "DESC" => "Descending"), $album->sort_order) ?> - </form> - </div> + <div id="g-organize-controls"> + <a id="g-organize-close" href="#" ref="done" + class="g-button g-right ui-corner-all ui-state-default"><?= t("Close") ?></a> + <form> + <?= t("Sort order") ?> + <?= form::dropdown(array("id" => "g-organize-sort-column"), album::get_sort_order_options(), $album->sort_column) ?> + <?= form::dropdown(array("id" => "g-organize-sort-order"), array("ASC" => "Ascending", "DESC" => "Descending"), $album->sort_order) ?> + </form> </div> </div> </div> diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php index f28176de..3ac32ce0 100644 --- a/modules/organize/views/organize_thumb_grid.html.php +++ b/modules/organize/views/organize_thumb_grid.html.php @@ -1,9 +1,10 @@ <?php defined("SYSPATH") or die("No direct script access.") ?> <? foreach ($album->children(25, $offset) as $child): ?> <li class="g-organize-microthumb-grid-cell g-left" ref="<?= $child->id ?>"> - <div id="g-organize-microthumb_<?= $child->id ?>" + <div id="g-organize-microthumb-<?= $child->id ?>" class="g-organize-microthumb <?= $child->is_album() ? "g-album" : "g-photo" ?>"> <?= $child->thumb_img(array("class" => "g-thumbnail", "ref" => $child->id), 90, true) ?> + <span<?= $child->is_album() ? " class=\"ui-icon ui-icon-note\"" : "" ?>></span> </div> </li> <? endforeach ?> diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php index 924a1bd6..740c2521 100644 --- a/modules/organize/views/organize_tree.html.php +++ b/modules/organize/views/organize_tree.html.php @@ -14,8 +14,7 @@ <? else: ?> <li class="g-organize-album ui-icon-left <?= access::can("edit", $child) ? "" : "g-view-only" ?>" ref="<?= $child->id ?>"> - <span class="ui-icon ui-icon-plus"> - </span> + <span class="ui-icon ui-icon-plus"></span> <span class="g-organize-album-text" ref="<?= $child->id ?>"> <?= html::clean($child->title) ?> </span> |