From 52147cf6f857c4c54a2f3d753e72b27b5141d028 Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Mon, 3 Aug 2009 21:45:54 -0700 Subject: Combine the quick menu and the thumb menu into a single menu called the "context" menu. This new context menu is generated using the typical event processing system, like our other menus. The specialized quick CSS and JS is now gone, replaced by our generic menu handling code. It's all rolled together currently using the thumb_menu UI for easy packaging. All the CSS and JS is updated. NOTE: the non-dialog links (rotate, album_cover) have a broken UI because they return JSON which the quick.js code handled specially, but we don't handle properly now. I need to fix this. --- themes/default/css/fix-ie.css | 4 ---- themes/default/css/screen.css | 9 +++++---- 2 files changed, 5 insertions(+), 8 deletions(-) (limited to 'themes/default/css') diff --git a/themes/default/css/fix-ie.css b/themes/default/css/fix-ie.css index c7c1ebad..eee88c15 100644 --- a/themes/default/css/fix-ie.css +++ b/themes/default/css/fix-ie.css @@ -35,7 +35,3 @@ input.submit { .gPager .ui-icon-right { width: 60px; } - -.gQuickPane { - height: 32px !important; -} \ No newline at end of file diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index c5a9956d..eb092b83 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -588,24 +588,25 @@ form .gError, /* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gThumbMenu { +#gContent .gContextMenu { bottom: 0; left: 0; position: absolute; width: 100%; + display: none; } -#gContent .gThumbMenu li { +#gContent .gContextMenu li { border-left: none; border-right: none; border-bottom: none; } -#gContent .gThumbMenu li li { +#gContent .gContextMenu li li { padding: .3em; } -#gContent .gThumbMenu a:hover { +#gContent .gContextMenu a:hover { text-decoration: none; } -- cgit v1.2.3 From 6357f3332b9bc33b10c11dc93b83ba9e72eec109 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sat, 8 Aug 2009 01:14:22 -0600 Subject: Added basic context menu affects and styles. Simplified some of the action labels in the menu. --- modules/digibug/helpers/digibug_event.php | 18 ++++----- modules/gallery/helpers/gallery.php | 30 ++++++++------- themes/default/css/screen.css | 64 ++++++++++++++++++++++++++----- themes/default/js/ui.init.js | 63 +++++++++++++++++++++++------- 4 files changed, 128 insertions(+), 47 deletions(-) (limited to 'themes/default/css') diff --git a/modules/digibug/helpers/digibug_event.php b/modules/digibug/helpers/digibug_event.php index efe66a0f..93bc1747 100644 --- a/modules/digibug/helpers/digibug_event.php +++ b/modules/digibug/helpers/digibug_event.php @@ -28,19 +28,19 @@ class digibug_event_Core { static function photo_menu($menu, $theme) { $item = $theme->item(); - $menu->append( - Menu::factory("link") - ->id("digibug") - ->label(t("Print with Digibug")) - ->url(url::site("digibug/print_photo/$item->id?csrf=$theme->csrf")) - ->css_id("gDigibugLink")); + $menu->get("options_menu") + ->append(Menu::factory("link") + ->id("digibug") + ->label(t("Print with Digibug")) + ->url(url::site("digibug/print_photo/$item->id?csrf=$theme->csrf")) + ->css_id("gDigibugLink")); } static function context_menu($menu, $theme, $item) { + $item = $theme->item(); if ($item->type == "photo") { - $menu - ->append( - Menu::factory("link") + $menu->get("options_menu") + ->append(Menu::factory("link") ->id("digibug") ->label(t("Print with Digibug")) ->url(url::site("digibug/print_photo/$item->id?csrf=$theme->csrf")) diff --git a/modules/gallery/helpers/gallery.php b/modules/gallery/helpers/gallery.php index 085965a2..72e7aeeb 100644 --- a/modules/gallery/helpers/gallery.php +++ b/modules/gallery/helpers/gallery.php @@ -201,28 +201,30 @@ class gallery_Core { switch ($item->type) { case "movie": $edit_title = t("Edit this movie"); - $move_title = t("Move this movie to another album"); - $cover_title = t("Choose this movie as the album cover"); $delete_title = t("Delete this movie"); break; case "album": $edit_title = t("Edit this album"); - $move_title = t("Move this album to another album"); - $cover_title = t("Choose this album as the album cover"); $delete_title = t("Delete this album"); break; default: $edit_title = t("Edit this photo"); - $move_title = t("Move this photo to another album"); - $cover_title = t("Choose this photo as the album cover"); $delete_title = t("Delete this photo"); break; } + $cover_title = t("Choose as the album cover"); + $move_title = t("Move to another album"); $csrf = access::csrf_token(); - $menu->append(Menu::factory("dialog") + + $menu->append($options_menu = Menu::factory("submenu") + ->id("options") + ->label(t("Options")) + ->css_class("ui-icon-carat-1-n")); + + $options_menu->append(Menu::factory("dialog") ->id("edit") ->label($edit_title) ->css_clasS("ui-icon-pencil") @@ -230,22 +232,22 @@ class gallery_Core { if ($item->is_photo() && graphics::can("rotate")) { - $menu + $options_menu ->append(Menu::factory("link") ->id("rotate_ccw") - ->label(t("Rotate 90 degrees counter clockwise")) + ->label(t("Rotate 90° counter clockwise")) ->css_class("ui-icon-rotate-ccw") ->url(url::site("quick/rotate/$item->id/ccw?csrf=$csrf&page_type=$page_type"))) ->append(Menu::factory("link") ->id("rotate_cw") - ->label(t("Rotate 90 degrees clockwise")) + ->label(t("Rotate 90° clockwise")) ->css_class("ui-icon-rotate-cw") ->url(url::site("quick/rotate/$item->id/cw?csrf=$csrf&page_type=$page_type"))); } // Don't move photos from the photo page; we don't yet have a good way of redirecting after move if ($page_type == "album") { - $menu + $options_menu ->append(Menu::factory("dialog") ->id("move") ->label($move_title) @@ -264,11 +266,11 @@ class gallery_Core { } else { $disabledState = " "; } - $menu + $options_menu ->append(Menu::factory("link") ->id("make_album_cover") ->label($cover_title) - ->css_class($disabledState) + ->css_class("ui-icon-star") ->url( url::site("quick/make_album_cover/$item->id?csrf=$csrf&page_type=$page_type"))) ->append(Menu::factory("dialog") @@ -280,7 +282,7 @@ class gallery_Core { } if ($item->is_album()) { - $menu + $options_menu ->append(Menu::factory("dialog") ->id("add_item") ->label(t("Add a photo")) diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index eb092b83..1cb813f3 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -453,26 +453,32 @@ form .gError, #gContent #gAlbumGrid { margin: 1em 0; + position: relative; + z-index: 1; } #gContent #gAlbumGrid .gItem { - border: 1px solid #e8e8e8; - border-right-color: #ccc; - border-bottom-color: #ccc; + background-color: #fff; + border: 1px solid #fff; float: left; font-size: .7em; - height: 240px; + height: 220px; overflow: hidden; - padding: 15px 8px 30px 8px; + padding: .6em 8px; position: relative; text-align: center; width: 213px; + z-index: 1; } #gContent #gAlbumGrid .gItem h2 { margin: 5px 0; } +.gPhoto h2, .gItem .gMetadata { + display: none; +} + #gContent #gAlbumGrid .gAlbum { background-color: #e8e8e8; } @@ -485,6 +491,35 @@ form .gError, width: 16px; } +#gContent #gAlbumGrid #gHoverItem { + background-color: #fff; + border: 1px solid #000; + display: none; + height: auto; + margin-top: -1em; + margin-left: -.4em; + padding: 0; + position: absolute; + width: auto; + z-index: 100; +} + +#gContent #gAlbumGrid #gHoverItem .gItem { + float: none; + height: 210px; + margin: 0; + padding: 0 1em 3em; +} + +#gContent #gAlbumGrid #gHoverItem .gItem div { + margin-top: 1em !important; +} + +#gHoverItem .gItem h2, +#gHoverItem .gItem .gMetadata { + display: block; +} + /* Individual photo content ~~~~~~~~~~~~~~ */ #gContent #gItem { @@ -588,25 +623,34 @@ form .gError, /* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gContextMenu { +.gContextMenu { bottom: 0; + display: none; left: 0; position: absolute; width: 100%; - display: none; } -#gContent .gContextMenu li { +.gContextMenu li { border-left: none; border-right: none; border-bottom: none; } -#gContent .gContextMenu li li { +.gContextMenu li li { padding: .3em; } -#gContent .gContextMenu a:hover { + +#gHoverItem .gContextMenu { + display: block; +} + +#gHoverItem .gContextMenu li { + text-align: left; +} + +#gHoverItem .gContextMenu a:hover { text-decoration: none; } diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 6414cbcc..b3c1d514 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -96,21 +96,56 @@ $(document).ready(function() { ); // Initialize context menus - if ($("#gContent .gContextMenu").length) { - $("#gContent .gContextMenu li").addClass("ui-state-default"); - $(".gContextMenu").parent().hover( - function() { - $(this).find(".gContextMenu").slideDown("fast"); - var dialogLinks = $(this).find(".gDialogLink"); - for (var i = 0; i < dialogLinks.length; i++) { - $(dialogLinks[i]).bind("click", handleDialogEvent); + // @todo Switch Options icon to carat-1-s when menu's open + // @todo apply hover affect to links + $(".gItem").hover( + function(){ + var pos = $(this).position(); + var itemClasses = $(this).attr("class"); + var bgColor = $(this).css("background-color"); + var cont = $(this).parent(); + var iconSpan = ""; + $("#gHoverItem .ui-icon-carat-1-n").html(iconSpan + $("#gHoverItem .ui-icon-carat-1-n").html()); + + $("#gHoverItem").remove(); + cont.append("
" + + $(this).html() + "
"); + $("#gHoverItem").css("top", pos.top); + $("#gHoverItem").css("left", pos.left); + $("#gHoverItem").css("background-color", bgColor); + $("#gHoverItem").fadeIn("fast"); + $("#gHoverItem").hover( + function(){ + // Initialize context menus + $("#gContent .gContextMenu li").addClass("ui-state-default"); + $(".gContextMenu ul").hide(); + $(".gContextMenu").hover( + function() { + $(this).find("ul").slideDown("fast"); + var optLinks = $(this).find("a"); + for (var i = 0; i < optLinks.length; i++) { + var iconClass = $(optLinks[i]).attr("class").match(/ui-icon-.[^\s]*/); + iconSpan = ""; + $(optLinks[i]).html(iconSpan + $(optLinks[i]).html()); + if ($(optLinks[i]).hasClass("gDialogLink")) { + $(optLinks[i]).bind("click", handleDialogEvent); + } + } + $("#gContent .gContextMenu li a").addClass("gButtonLink ui-icon-left"); + }, + function() { + $(this).find("ul").slideUp("slow"); + } + ); + }, + function() { + $(this).hide(); } - }, - function() { - $(this).find(".gContextMenu").slideUp("slow"); - } - ); - } + ); + }, + function(){ + } + ); }); -- cgit v1.2.3 From 3a8f1f426294737aac145d15462caa808aef14b1 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sat, 8 Aug 2009 13:20:00 -0600 Subject: Cleanup context menu styles a bit --- themes/default/css/screen.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'themes/default/css') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 1cb813f3..05d2977a 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -621,7 +621,7 @@ form .gError, margin-bottom: 0 !important; } -/* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .gContextMenu { bottom: 0; @@ -637,11 +637,10 @@ form .gError, border-bottom: none; } -.gContextMenu li li { - padding: .3em; +.gContextMenu li a { + line-height: 1.6em; } - #gHoverItem .gContextMenu { display: block; } -- cgit v1.2.3 From 1231e095c824ed9961b1156d89f6a1cae231f96f Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 9 Aug 2009 12:46:17 -0600 Subject: Keep image placement from shifting on hover, set gHoverItem height properly. --- themes/default/css/screen.css | 21 +++++++-------------- themes/default/js/ui.init.js | 38 +++++++++++++++++++++++++++++--------- 2 files changed, 36 insertions(+), 23 deletions(-) (limited to 'themes/default/css') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 05d2977a..6a29e95f 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -475,7 +475,8 @@ form .gError, margin: 5px 0; } -.gPhoto h2, .gItem .gMetadata { +#gContent .gPhoto h2, +#gContent .gItem .gMetadata { display: none; } @@ -484,7 +485,7 @@ form .gError, } #gContent #gAlbumGrid .gAlbum h2 span { - background: transparent url('../images/ico-album.png') no-repeat top left !important; + background: transparent url('../images/ico-album.png') no-repeat top left; display: inline-block; height: 16px; margin-right: 5px; @@ -496,8 +497,6 @@ form .gError, border: 1px solid #000; display: none; height: auto; - margin-top: -1em; - margin-left: -.4em; padding: 0; position: absolute; width: auto; @@ -505,18 +504,11 @@ form .gError, } #gContent #gAlbumGrid #gHoverItem .gItem { - float: none; - height: 210px; - margin: 0; - padding: 0 1em 3em; -} - -#gContent #gAlbumGrid #gHoverItem .gItem div { - margin-top: 1em !important; + border: none; } -#gHoverItem .gItem h2, -#gHoverItem .gItem .gMetadata { +#gContent #gHoverItem .gItem h2, +#gContent #gHoverItem .gItem .gMetadata { display: block; } @@ -627,6 +619,7 @@ form .gError, bottom: 0; display: none; left: 0; + margin-top: 2em; position: absolute; width: 100%; } diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 29680a48..9d8acf28 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -86,7 +86,6 @@ $(document).ready(function() { duration: 1000, hash: true }); - } // Add hover state for buttons @@ -103,16 +102,30 @@ $(document).ready(function() { // @todo apply hover affect to links $(".gItem").hover( function(){ - var pos = $(this).position(); - var itemClasses = $(this).attr("class"); - var bgColor = $(this).css("background-color"); - var cont = $(this).parent(); + var position = $(this).position(); + var item_classes = $(this).attr("class"); + var bg_color = $(this).css("background-color"); + var container = $(this).parent(); $("#gHoverItem").remove(); - cont.append("
" + container.append("
" + $(this).html() + "
"); - $("#gHoverItem").css("top", pos.top); - $("#gHoverItem").css("left", pos.left); - $("#gHoverItem").css("background-color", bgColor); + $("#gHoverItem").css("top", position.top); + $("#gHoverItem").css("left", position.left); + $("#gHoverItem").css("background-color", bg_color); + + var v_align = $(this).find(".gValign"); + var title = $(this).find("h2"); + var meta = $(this).find(".gMetadata"); + var context = $(this).find(".gContextMenu"); + var context_label = $(this).find(".gContextMenu li:first"); + $("#gHoverItem .gItem").height( + $(v_align).gallery_height() + + $(title).gallery_height() + + $(meta).gallery_height() + + parseInt($(context).css("margin-top").replace("px","")) + + $(context_label).gallery_height() + ); + $("#gHoverItem").fadeIn("fast"); $("#gHoverItem").hover( function(){ @@ -138,4 +151,11 @@ $(document).ready(function() { } ); + $.fn.gallery_height = function() { + var ht = $(this).height(); + var mt = $(this).css("margin-top").replace("px",""); + var mb = $(this).css("margin-bottom").replace("px",""); + return ht + parseInt(mt) + parseInt(mb); + }; + }); -- cgit v1.2.3 From cea1d4f1f3d295284f3ba19f0d73bb2785b6ed29 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 9 Aug 2009 23:32:53 -0600 Subject: Forgot to commit the css for the resize photo view context menu. --- themes/default/css/screen.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'themes/default/css') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 6a29e95f..5ab9083d 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -515,6 +515,7 @@ form .gError, /* Individual photo content ~~~~~~~~~~~~~~ */ #gContent #gItem { + position: relative; width: 99%; } @@ -616,14 +617,25 @@ form .gError, /* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .gContextMenu { + position: absolute; bottom: 0; - display: none; left: 0; +} + +.gItem .gContextMenu { + display: none; margin-top: 2em; - position: absolute; width: 100%; } +#gItem .gContextMenu { + font-size: .7em; +} + +#gItem .gContextMenu ul { + display: none; +} + .gContextMenu li { border-left: none; border-right: none; -- cgit v1.2.3 From 99d7a0c0dbb799ba64d769475a1534650e98e5b6 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Tue, 11 Aug 2009 00:33:15 -0600 Subject: Make each context menu button clickable from side-to-side --- themes/default/css/screen.css | 1 + 1 file changed, 1 insertion(+) (limited to 'themes/default/css') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 5ab9083d..55839c57 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -643,6 +643,7 @@ form .gError, } .gContextMenu li a { + display: block; line-height: 1.6em; } -- cgit v1.2.3