diff options
-rw-r--r-- | modules/digibug/helpers/digibug_event.php | 18 | ||||
-rw-r--r-- | modules/gallery/helpers/gallery.php | 30 | ||||
-rw-r--r-- | themes/default/css/screen.css | 64 | ||||
-rw-r--r-- | themes/default/js/ui.init.js | 63 |
4 files changed, 128 insertions, 47 deletions
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 = "<span class=\"ui-icon ui-icon-carat-1-n\"></span>"; + $("#gHoverItem .ui-icon-carat-1-n").html(iconSpan + $("#gHoverItem .ui-icon-carat-1-n").html()); + + $("#gHoverItem").remove(); + cont.append("<div id=\"gHoverItem\"><div class=\"" + itemClasses + "\">" + + $(this).html() + "</div></div>"); + $("#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 = "<span class=\"ui-icon " + iconClass + "\"></span>"; + $(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(){ + } + ); }); |