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. --- modules/digibug/helpers/digibug_event.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'modules/digibug/helpers') diff --git a/modules/digibug/helpers/digibug_event.php b/modules/digibug/helpers/digibug_event.php index c4f9e560..efe66a0f 100644 --- a/modules/digibug/helpers/digibug_event.php +++ b/modules/digibug/helpers/digibug_event.php @@ -36,9 +36,9 @@ class digibug_event_Core { ->css_id("gDigibugLink")); } - static function thumb_menu($menu, $theme, $item) { + static function context_menu($menu, $theme, $item) { if ($item->type == "photo") { - $menu->get("options_menu") + $menu ->append( Menu::factory("link") ->id("digibug") -- 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 'modules/digibug/helpers') 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 1c4e1344c6899f1abbfd914d36e7686afec2e5cc Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Sun, 9 Aug 2009 12:14:17 -0700 Subject: Update photo_menu() and context_menu() to work with recent menu changes. --- modules/digibug/helpers/digibug_event.php | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) (limited to 'modules/digibug/helpers') diff --git a/modules/digibug/helpers/digibug_event.php b/modules/digibug/helpers/digibug_event.php index 93bc1747..c75eed49 100644 --- a/modules/digibug/helpers/digibug_event.php +++ b/modules/digibug/helpers/digibug_event.php @@ -28,23 +28,21 @@ class digibug_event_Core { static function photo_menu($menu, $theme) { $item = $theme->item(); - $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")); + $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->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")); + $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")); } } } -- cgit v1.2.3 From 85afa537df540bf60ea58029b8954753903f53e6 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 9 Aug 2009 13:56:39 -0600 Subject: Add jquery ui print icon class to menu --- modules/digibug/helpers/digibug_event.php | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'modules/digibug/helpers') diff --git a/modules/digibug/helpers/digibug_event.php b/modules/digibug/helpers/digibug_event.php index c75eed49..b257d16c 100644 --- a/modules/digibug/helpers/digibug_event.php +++ b/modules/digibug/helpers/digibug_event.php @@ -32,17 +32,19 @@ class digibug_event_Core { ->id("digibug") ->label(t("Print with Digibug")) ->url(url::site("digibug/print_photo/$item->id?csrf=$theme->csrf")) - ->css_id("gDigibugLink")); + ->css_id("gDigibugLink") + ->css_class("ui-icon-print")); } - static function context_menu($menu, $theme, $item) { + static function context_menu($menu, $theme) { $item = $theme->item(); if ($item->type == "photo") { $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")); + ->css_id("gDigibugLink") + ->css_class("ui-icon-print")); } } } -- cgit v1.2.3 From f7a23e0a9cdd4a85e4bc50964917d6995b7d54ab Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Sun, 9 Aug 2009 23:08:35 -0700 Subject: Fix up context menus a bit. - Update digibug_event::context_menu() to take the actual item - Change gallery::context_menu() to not require the page_type as an argument --- modules/digibug/helpers/digibug_event.php | 16 ++++++++-------- modules/gallery/helpers/gallery.php | 7 ++++--- modules/gallery/libraries/Theme_View.php | 5 ++--- 3 files changed, 14 insertions(+), 14 deletions(-) (limited to 'modules/digibug/helpers') diff --git a/modules/digibug/helpers/digibug_event.php b/modules/digibug/helpers/digibug_event.php index b257d16c..d2830b80 100644 --- a/modules/digibug/helpers/digibug_event.php +++ b/modules/digibug/helpers/digibug_event.php @@ -36,15 +36,15 @@ class digibug_event_Core { ->css_class("ui-icon-print")); } - static function context_menu($menu, $theme) { - $item = $theme->item(); + static function context_menu($menu, $theme, $item) { if ($item->type == "photo") { - $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") - ->css_class("ui-icon-print")); + $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") + ->css_class("ui-icon-print")); } } } diff --git a/modules/gallery/helpers/gallery.php b/modules/gallery/helpers/gallery.php index 0bf180c1..279f2013 100644 --- a/modules/gallery/helpers/gallery.php +++ b/modules/gallery/helpers/gallery.php @@ -197,7 +197,8 @@ class gallery_Core { return $menu; } - static function context_menu($menu, $theme, $item, $page_type) { + static function context_menu($menu, $theme, $item) { + $page_type = $theme->page_type(); switch ($item->type) { case "movie": $edit_title = t("Edit this movie"); @@ -218,9 +219,9 @@ class gallery_Core { $move_title = t("Move to another album"); $csrf = access::csrf_token(); - + $menu->append($options_menu = Menu::factory("submenu") - ->id("options") + ->id("options_menu") ->label(t("Options")) ->css_class("ui-icon-carat-1-n")); diff --git a/modules/gallery/libraries/Theme_View.php b/modules/gallery/libraries/Theme_View.php index 24dea729..a5f5db03 100644 --- a/modules/gallery/libraries/Theme_View.php +++ b/modules/gallery/libraries/Theme_View.php @@ -118,9 +118,8 @@ class Theme_View_Core extends Gallery_View { ->label(t("Options"))) ->css_class("gContextMenu"); - $page_type = Input::instance()->get("page_type"); - gallery::context_menu($menu, $this, $item, $page_type); - module::event("context_menu", $menu, $this, $item, $page_type); + gallery::context_menu($menu, $this, $item); + module::event("context_menu", $menu, $this, $item); return $menu->compact(); } -- cgit v1.2.3