From 091fde3e0076a110590c6dfa3004bf7b49253153 Mon Sep 17 00:00:00 2001 From: Tim Almdal Date: Mon, 27 Apr 2009 20:30:46 +0000 Subject: Another iteration of the organize module: Rearrange the layout as per discussion with thumb, start the drawer functionality. Still to do... 1) Add the processing behind the buttons on the drawer handle 2) Enable the drawer buttons when something is selected 3) Create a copy of the thumbs for the drawer 4) Add the bulk editting functionality to the drawer --- modules/organize/controllers/organize.php | 2 +- modules/organize/css/organize.css | 86 ++++++++++++++++++--- modules/organize/css/organize_edit_drawer.png | Bin 0 -> 464 bytes modules/organize/js/organize.js | 55 ++++++++----- modules/organize/js/organize_init.js | 2 +- modules/organize/views/organize.html.php | 62 ++++++++++----- .../organize/views/organize_button_pane.html.php | 21 ++++- modules/organize/views/organize_edit.html.php | 20 +---- 8 files changed, 174 insertions(+), 74 deletions(-) create mode 100644 modules/organize/css/organize_edit_drawer.png (limited to 'modules') 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 new file mode 100644 index 00000000..34735a00 Binary files /dev/null and b/modules/organize/css/organize_edit_drawer.png differ 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("
" + data.task.status + "
"); + $("#gOrganizeStatus").empty().append("
" + data.task.status + "
"); }, dataType: "json", type: "POST", @@ -292,7 +307,7 @@ var startRearrangeCallback = function (data, textStatus) { $.ajax({async: false, success: function(data, textStatus) { task = null; - $("#gOrganizeStatus").append("
" + data.task.status + "
"); + $("#gOrganizeStatus").empty().append("
" + data.task.status + "
"); }, 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("
" + data.task.status + "
"); + $("#gOrganizeStatus").empty().append("
" + data.task.status + "
"); $("#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 @@
$item->title)) ?>
-
-
-
-
- - -
"> -
    -
-
- +
+
+
+
+

+
+
+
-
-

- +
+
+ +
+
"> +
+
+
+
+

+
+
+
+

+
+
+ +
+
+
+
+ +
+
+
+ + + +
+
+
+
    +
    -
    -
    -
    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 @@ + +"> + + + + + "> + disabled="1" title=""> "> + disabled="1" title=""> +"> + + + + + "> + disabled="1" title=""> 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 @@ -
    +
    "post")) ?> -
    -
    -

    -
    -
    -
    -

    -
    -
    - -
    - -
    -
    ">
    • @@ -31,10 +18,9 @@ Description:  
    -
    +
    - "gOrganizePauseButton", "name" => "pause", "disabled" => true, "class" => "submit", "style" => "display:none"), t("Pause")) ?> "gOrganizeApplyButton", "name" => "apply", "disabled" => true, "class" => "submit"), t("Apply")) ?> -- cgit v1.2.3