diff options
Diffstat (limited to 'modules')
-rw-r--r-- | modules/organize/controllers/organize.php | 2 | ||||
-rw-r--r-- | modules/organize/css/organize.css | 86 | ||||
-rw-r--r-- | modules/organize/css/organize_edit_drawer.png | bin | 0 -> 464 bytes | |||
-rw-r--r-- | modules/organize/js/organize.js | 55 | ||||
-rw-r--r-- | modules/organize/js/organize_init.js | 2 | ||||
-rw-r--r-- | modules/organize/views/organize.html.php | 62 | ||||
-rw-r--r-- | modules/organize/views/organize_button_pane.html.php | 21 | ||||
-rw-r--r-- | modules/organize/views/organize_edit.html.php | 20 |
8 files changed, 174 insertions, 74 deletions
diff --git a/modules/organize/controllers/organize.php b/modules/organize/controllers/organize.php index 89315323..62a23444 100644 --- a/modules/organize/controllers/organize.php +++ b/modules/organize/controllers/organize.php @@ -31,7 +31,7 @@ class Organize_Controller extends Controller { $v->album_tree = $this->tree($item, $root); $v->edit_form = new View("organize_edit.html"); - $v->edit_form->button_pane = new View("organize_button_pane.html"); + $v->button_pane = new View("organize_button_pane.html"); print $v; } diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css index 0a66d0ad..1e5e90ed 100644 --- a/modules/organize/css/organize.css +++ b/modules/organize/css/organize.css @@ -3,17 +3,22 @@ * Dialog wide stylings */ #gOrganizeStatus { - height: 6em; - border: 1px solid #999; - margin-top: .5em; - margin-bottom: .5em; - overflow-y: auto; + height: 1.2em; + font-weight: bold; } #gOrganizeProgressDialog { text-align: left; } +#gDialog .yui-gf div.first { + width: 20%; +} + +#gDialog .yui-gf .yui-u { + width: 80%; +} + /******************************************************************* * Album Tree styling */ @@ -59,6 +64,13 @@ /******************************************************************* * Album Panel Styles */ + +#gMicroThumbUnselectAll, +#gMicroThumbSelectAll { + font-size: 1em; + font-weight: bold; +} + #gMicroThumbPanel { margin: 0 !important; padding: 0 !important; @@ -67,7 +79,8 @@ border-top: none !important; border-left: none !important; margin-left: -1em !important; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; } #gMicroThumbGrid { @@ -76,9 +89,6 @@ .gMicroThumbContainer { display: block; - //border: 2px solid #e8e8e8; - //border-right-color: #ccc; - //border-bottom-color: #ccc; float: left; font-size: .7em; height: 9em; @@ -128,11 +138,65 @@ /**************************************************************** - * Organize Edit styling + * Organize Edit Drawer styling */ +#gOrganizeEditDrawer { + background-color: #13A; + float: left; + margin: 0 5% 10px; + width: 90%; +} + +#gOrganizeEditDrawerPanel { + background-color: #CFDEFF; + border: 1px solid #13A; + display: none; + min-height: 150px; +} + +#gOrganizeEditHandleLeft { + background-image: url(organize_edit_drawer.png); + background-color: #CFDEFF; + float: left; + height: 30px; + margin: 2px 0 0; + width: 15px; +} + +#gOrganizeEditHandleButtonsLeft { + float: left; + height: 20px; + padding: 2px 10px; +} + +#gOrganizeEditHandleButtonsLeft a { + float: left; + margin: 0 2.5px; +} + +#gOrganizeEditHandleButtonsRight { + float: right; + height: 20px; + padding: 2px 10px; +} + +#gOrganizeEditHandleButtonsRight a { + float: left; + margin: 0 2.5px; +} + +#gOrganizeEditHandleRight { + background-color: #CFDEFF; + background-image: url(organize_edit_drawer.png); + background-position: -15px 0; + float: right; + height: 30px; + margin: 2px 0 0; + width: 15px; +} + #gOrganizeFormButtons { bottom: 0.5em; - position: absolute; } #gOrganizeFormButtons .submit { diff --git a/modules/organize/css/organize_edit_drawer.png b/modules/organize/css/organize_edit_drawer.png Binary files differnew file mode 100644 index 00000000..34735a00 --- /dev/null +++ b/modules/organize/css/organize_edit_drawer.png diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js index 1eac785b..66ca0b33 100644 --- a/modules/organize/js/organize.js +++ b/modules/organize/js/organize.js @@ -112,7 +112,7 @@ var treeDroppable = { var moveItems = ""; var targetItemId = $(this).attr("ref"); if ($(this).hasClass("gBranchSelected")) { - $("#gOrganizeStatus").append(INVALID_DROP_TARGET); + $("#gOrganizeStatus").empty().append(INVALID_DROP_TARGET); ui.draggable.trigger("stop", event); return false; } @@ -122,7 +122,7 @@ var treeDroppable = { okToMove &= targetItemId != $(this).attr("ref"); }); if (!okToMove) { - $("#gOrganizeStatus").append(INVALID_DROP_TARGET); + $("#gOrganizeStatus").empty().append(INVALID_DROP_TARGET); ui.draggable.trigger("stop", event); return false; } @@ -193,18 +193,33 @@ var onMicroThumbContainerMousemove = function(event) { } }; -// Select All and Deselect All click -function toggleSelectAll(event) { - if ($(this).attr("id") == "gMicroThumbSelectAll") { - $(".gMicroThumbContainer").addClass("ui-selected"); - $("#gMicroThumbSelectAll").hide(); - $("#gMicroThumbUnselectAll").show(); - } else { - $(".gMicroThumbContainer").removeClass("ui-selected"); - $("#gMicroThumbSelectAll").show(); - $("#gMicroThumbUnselectAll").hide(); +// Handle click events on the buttons on the drawer handle +function drawerHandleButtonsClick(event) { + event.preventDefault(); + if (!$(this).attr("disabled")) { + var operation = $(this).attr("ref"); + switch (operation) { + case "edit": + $("#gOrganizeEditDrawerPanel").slideToggle("normal"); + break; + case "select-all": + $(".gMicroThumbContainer").addClass("ui-selected"); + $("#gMicroThumbSelectAll").hide(); + $("#gMicroThumbUnselectAll").show(); + break; + case "unselect-all": + $(".gMicroThumbContainer").removeClass("ui-selected"); + $("#gMicroThumbSelectAll").show(); + $("#gMicroThumbUnselectAll").hide(); + break; + case "close": + $("#gDialog").dialog("close"); + break; + default: + console.log(operation); + } } -} +}; // ************************************************************************** // AJAX Callbacks @@ -252,7 +267,7 @@ var startMoveCallback = function (data, textStatus) { success: function(data, textStatus) { task = null; transitItems = []; - $("#gOrganizeStatus").append("<div class='gSuccess'>" + data.task.status + "</div>"); + $("#gOrganizeStatus").empty().append("<div class='gSuccess'>" + data.task.status + "</div>"); }, dataType: "json", type: "POST", @@ -292,7 +307,7 @@ var startRearrangeCallback = function (data, textStatus) { $.ajax({async: false, success: function(data, textStatus) { task = null; - $("#gOrganizeStatus").append("<div class='gSuccess'>" + data.task.status + "</div>"); + $("#gOrganizeStatus").empty().append("<div class='gSuccess'>" + data.task.status + "</div>"); }, dataType: "json", type: "POST", @@ -344,11 +359,9 @@ function organize_dialog_init() { retrieveMicroThumbs(item_id); //showLoading("#gDialog"); - $("#gMicroThumbSelectAll").click(toggleSelectAll); - $("#gMicroThumbUnselectAll").click(toggleSelectAll); - $("#gMicroThumbPanel").droppable(thumbDroppable); $("#gMicroThumbGrid").selectable(selectable); + $("#gOrganizeEditDrawerHandle a").click(drawerHandleButtonsClick); } function retrieveMicroThumbs() { @@ -421,13 +434,13 @@ function createProgressDialog(title) { $("#gOrganizeTaskPause").hide(); $("#gOrganizeTaskResume").show(); $("#gOrganizeTaskCancel").show(); - $("#gOrganizeStatus").append(task.pauseMsg); + $("#gOrganizeStatus").empty().append(task.pauseMsg); }); $("#gOrganizeTaskResume").click(function(event) { $("#gOrganizeTaskPause").show(); $("#gOrganizeTaskResume").hide(); $("#gOrganizeTaskCancel").hide(); - $("#gOrganizeStatus").append(task.resumeMsg); + $("#gOrganizeStatus").empty().append(task.resumeMsg); startRearrangeCallback(); }); $("#gOrganizeTaskCancel").click(function(event) { @@ -440,7 +453,7 @@ function createProgressDialog(title) { task = null; paused = false; transitItems = []; - $("#gOrganizeStatus").append("<div class='gWarning'>" + data.task.status + "</div>"); + $("#gOrganizeStatus").empty().append("<div class='gWarning'>" + data.task.status + "</div>"); $("#gOrganizeProgressDialog").dialog("destroy").remove(); }, dataType: "json", diff --git a/modules/organize/js/organize_init.js b/modules/organize/js/organize_init.js index efe21af4..ed036fdb 100644 --- a/modules/organize/js/organize_init.js +++ b/modules/organize/js/organize_init.js @@ -9,7 +9,7 @@ $("document").ready(function() { autoOpen: false, autoResize: false, modal: true, - resizable: true, + resizable: false, close: function () { $("#gDialog").trigger("organize_close"); $("#gDialog").dialog("destroy").remove(); diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php index 493ad81a..c423f5a1 100644 --- a/modules/organize/views/organize.html.php +++ b/modules/organize/views/organize.html.php @@ -23,28 +23,50 @@ <fieldset style="display: none"> <legend><?= t("Organize %name", array("name" => $item->title)) ?></legend> </fieldset> -<div id="doc3" class="yui-t1"> - <div id="bd" role="main"> - <div id="yui-main"> - <div class="yui-b"> - <a id="gMicroThumbSelectAll" href="#"><?= t("select all") ?></a> - <a id="gMicroThumbUnselectAll" href="#" style="display: none"><?= t("deselect all") ?></a> - <div id="gMicroThumbPanel" class="yui-u first" - ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>"> - <ul id="gMicroThumbGrid"> - </ul> - </div> - <!-- div id="gOrganizeEditContainer" class="yui-u"> - < ?= $edit_form ? > - </div --> +<div id="doc3" class="yui-t7"> + <div id="bd"> + <div class="yui-gf"> + <div class="yui-u first"> + <h3><?= t("Albums") ?></h3> + </div> + <div id="gOrganizeStatus" class="yui-u"> + <div class="gInfo"><?= t("Select one or more items to edit; drag and drop items to re-order or move between albums") ?></div> </div> </div> - <div id="gOrganizeTreeContainer" class="yui-b"> - <h3><?= t("Albums") ?></h3> - <?= $album_tree ?> + <div class="yui-gf"> + <div id="gOrganizeTreeContainer" class="yui-u first"> + <?= $album_tree ?> + </div> + <div id="gMicroThumbPanel" class="yui-u" + ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>"> + <div id="gOrganizeEditDrawer"> + <div id="gOrganizeEditDrawerPanel" class="yui-gf" style="display: none"> + <div id="gOrganizeFormThumbs" class="yui-u first"> + <div id="gOrganizeFormNoImage"> + <h3><?= t("No Image Selected") ?></h3> + </div> + <div id="gOrganizeFormThumb" style="display: none"></div> + <div id="gOrganizeFormMultipleImages" style="display:none"> + <h3><?= t("Multiple Images Selected") ?></h3> + </div> + </div> + <?= $edit_form ?> + </div> + <div id="gOrganizeEditDrawerHandle"> + <div id="gOrganizeEditHandleLeft"></div> + <div id="gOrganizeEditHandleButtonsLeft"> + <?= $button_pane ?> + </div> + <div id="gOrganizeEditHandleRight"></div> + <div id="gOrganizeEditHandleButtonsRight"> + <a id="gMicroThumbSelectAll" href="#" ref="select-all" class="gButtonLink ui-corner-all ui-state-default"><?= t("Select all") ?></a> + <a id="gMicroThumbUnselectAll" href="#" ref="unselect-all" style="display: none" class="gButtonLink ui-corner-all ui-state-default"><?= t("Deselect all") ?></a> + <a id="gMicroThumbDone" href="#" ref="close" class="gButtonLink ui-corner-all ui-state-default"><?= t("Done") ?></a> + </div> + </div> + </div> + <ul id="gMicroThumbGrid"></ul> + </div> </div> </div> - <div id="ft"> - <div id="gOrganizeStatus"></div> - </div> </div> diff --git a/modules/organize/views/organize_button_pane.html.php b/modules/organize/views/organize_button_pane.html.php index 82b7607d..a39c643c 100644 --- a/modules/organize/views/organize_button_pane.html.php +++ b/modules/organize/views/organize_button_pane.html.php @@ -1,23 +1,38 @@ <?php defined("SYSPATH") or die("No direct script access.") ?> + +<a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="edit" + disabled="1" title="<?= t("Edit Selection") ?>"> + <span class="ui-icon ui-icon-pencil"> + <?= t("Edit Selection") ?> + </span> +</a> + <? if (graphics::can("rotate")): ?> <a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="rotate_ccw" - title="<?= t("Rotate 90 degrees counter clockwise") ?>"> + disabled="1" title="<?= t("Rotate 90 degrees counter clockwise") ?>"> <span class="ui-icon ui-icon-rotate-ccw"> <?= t("Rotate 90 degrees counter clockwise") ?> </span> </a> <a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="rotate_cw" - title="<?= t("Rotate 90 degrees clockwise") ?>"> + disabled="1" title="<?= t("Rotate 90 degrees clockwise") ?>"> <span class="ui-icon ui-icon-rotate-cw"> <?= t("Rotate 90 degrees clockwise") ?> </span> </a> <? endif ?> +<a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="album_cover" + disabled="1" title="<?= t("Choose this photo as the album cover") ?>"> + <span class="ui-icon ui-icon-star"> + <?= t("Choose this photo as the album cover") ?> + </span> +</a> + <a class="gButtonLink ui-corner-all ui-state-default" href="#" ref="delete" - title="<?= t("Delete selection") ?>"> + disabled="1" title="<?= t("Delete selection") ?>"> <span class="ui-icon ui-icon-trash"> <?= t("Delete selection") ?> </span> diff --git a/modules/organize/views/organize_edit.html.php b/modules/organize/views/organize_edit.html.php index 1085a863..f3b6eb87 100644 --- a/modules/organize/views/organize_edit.html.php +++ b/modules/organize/views/organize_edit.html.php @@ -1,21 +1,8 @@ <?php defined("SYSPATH") or die("No direct script access.") ?> -<div id="gOrganizeForm"> +<div id="gOrganizeForm" class="yui-u"> <?= form::open(url::site("organize/update/__ITEM_ID__?csrf=__CSRF__&action=__ACTION__"), array("method" => "post")) ?> - <div id="gOrganizeFormThumbs"> - <div id="gOrganizeFormNoImage"> - <h3><?= t("No Image Selected") ?></h3> - </div> - <div id="gOrganizeFormThumb" style="display: none"></div> - <div id="gOrganizeFormMultipleImages" style="display:none"> - <h3><?= t("Multiple Images Selected") ?></h3> - </div> - </div> - - <div id="gOrganizeButtonPane" style="display: none"> - <?= $button_pane ?> - </div> - <div id="gOrganizeFormInfo" style="display:none" + <!-- div id="gOrganizeFormInfo" style="display:none" ref="<?= url::site("organize/detail/__ITEM_ID__") ?>"> <ul> <li> @@ -31,10 +18,9 @@ Description: <span id="gOrganizeFormDescription"> </span> </li> </ul> - </div> + </div --> <span id="gOrganizeFormButtons"> - <?= form::submit(array("id" => "gOrganizePauseButton", "name" => "pause", "disabled" => true, "class" => "submit", "style" => "display:none"), t("Pause")) ?> <?= form::submit(array("id" => "gOrganizeApplyButton", "name" => "apply", "disabled" => true, "class" => "submit"), t("Apply")) ?> </span> <?= form::close() ?> |