diff options
Diffstat (limited to 'themes')
-rw-r--r-- | themes/admin_default/js/ui.init.js | 3 | ||||
-rw-r--r-- | themes/admin_default/views/admin.html.php | 1 | ||||
-rw-r--r-- | themes/default/css/fix-ie.css | 4 | ||||
-rw-r--r-- | themes/default/css/screen.css | 76 | ||||
-rw-r--r-- | themes/default/js/ui.init.js | 122 | ||||
-rw-r--r-- | themes/default/views/album.html.php | 2 | ||||
-rw-r--r-- | themes/default/views/movie.html.php | 1 | ||||
-rw-r--r-- | themes/default/views/page.html.php | 1 | ||||
-rw-r--r-- | themes/default/views/photo.html.php | 1 |
9 files changed, 135 insertions, 76 deletions
diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js index e52f0c4c..daa6dd70 100644 --- a/themes/admin_default/js/ui.init.js +++ b/themes/admin_default/js/ui.init.js @@ -19,6 +19,9 @@ $(document).ready(function(){ // Initialize modal dialogs $(".gDialogLink").gallery_dialog(); + // Initialize ajax links + $(".gDialogLink").gallery_ajax(); + // Initialize panels $(".gPanelLink").gallery_panel(); diff --git a/themes/admin_default/views/admin.html.php b/themes/admin_default/views/admin.html.php index d27f9260..3f4128cb 100644 --- a/themes/admin_default/views/admin.html.php +++ b/themes/admin_default/views/admin.html.php @@ -25,6 +25,7 @@ <script type="text/javascript"> var MSG_CANCEL = "<?= t('Cancel') ?>"; </script> + <?= $theme->script("gallery.ajax.js") ?> <?= $theme->script("gallery.dialog.js") ?> <?= $theme->script("superfish/js/superfish.js") ?> <?= $theme->script("jquery.dropshadow.js") ?> 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..55839c57 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -453,41 +453,69 @@ 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; } +#gContent .gPhoto h2, +#gContent .gItem .gMetadata { + display: none; +} + #gContent #gAlbumGrid .gAlbum { background-color: #e8e8e8; } #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; width: 16px; } +#gContent #gAlbumGrid #gHoverItem { + background-color: #fff; + border: 1px solid #000; + display: none; + height: auto; + padding: 0; + position: absolute; + width: auto; + z-index: 100; +} + +#gContent #gAlbumGrid #gHoverItem .gItem { + border: none; +} + +#gContent #gHoverItem .gItem h2, +#gContent #gHoverItem .gItem .gMetadata { + display: block; +} + /* Individual photo content ~~~~~~~~~~~~~~ */ #gContent #gItem { + position: relative; width: 99%; } @@ -586,26 +614,48 @@ form .gError, margin-bottom: 0 !important; } -/* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Context Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gThumbMenu { +.gContextMenu { + position: absolute; bottom: 0; left: 0; - position: absolute; +} + +.gItem .gContextMenu { + display: none; + margin-top: 2em; width: 100%; } -#gContent .gThumbMenu li { +#gItem .gContextMenu { + font-size: .7em; +} + +#gItem .gContextMenu ul { + display: none; +} + +.gContextMenu li { border-left: none; border-right: none; border-bottom: none; } -#gContent .gThumbMenu li li { - padding: .3em; +.gContextMenu li a { + display: block; + line-height: 1.6em; +} + +#gHoverItem .gContextMenu { + display: block; +} + +#gHoverItem .gContextMenu li { + text-align: left; } -#gContent .gThumbMenu a:hover { +#gHoverItem .gContextMenu a:hover { text-decoration: none; } diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index b8ad68db..ef7e43d9 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -32,7 +32,6 @@ $(document).ready(function() { $("#gMessage li").gallery_show_message(); // Initialize dialogs - $(".gMenuLink").addClass("gDialogLink"); $("#gLoginLink").addClass("gDialogLink"); $(".gDialogLink").gallery_dialog(); @@ -50,24 +49,78 @@ $(document).ready(function() { // Apply jQuery UI button css to submit inputs $("input[type=submit]:not(.gShortForm input)").addClass("ui-state-default ui-corner-all"); + // Apply styles and icon classes to gContextMenu + if ($(".gContextMenu").length) { + $(".gContextMenu li").addClass("ui-state-default"); + $(".gContextMenu a").addClass("gButtonLink ui-icon-left"); + $(".gContextMenu a").prepend("<span class=\"ui-icon\"></span>"); + $(".gContextMenu a span").each(function() { + var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]+/).toString(); + $(this).addClass(iconClass); + }); + } + // Album view only if ($("#gAlbumGrid").length) { // Vertical align thumbnails/metadata in album grid $(".gItem").gallery_valign(); - $(".gQuick").ajaxStop(function(){ - $(".gItem").gallery_valign(); - }); + + // Initialize context menus + $(".gItem").hover( + function(){ + var position = $(this).position(); + var item_classes = $(this).attr("class"); + var bg_color = $(this).css("background-color"); + var container = $(this).parent(); + $("#gHoverItem").remove(); + container.append("<div id=\"gHoverItem\"><div class=\"" + item_classes + "\">" + + $(this).html() + "</div></div>"); + $("#gHoverItem").css("top", position.top); + $("#gHoverItem").css("left", position.left); + $("#gHoverItem").css("background-color", bg_color); + $.fn.gallery_hover_init(); + 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(){ + $(this).gallery_context_menu(); + }, + function() { + $(this).hide(); + } + ); + } + ); } - // Photo/Item item view only + // Photo/Item item view if ($("#gItem").length) { - // Ensure that sized image versions - // fit inside their container - sizedImage(); + // Ensure the resized image fits within its container + $("#gItem").gallery_fit_photo(); + + // Initialize context menus + var resize = $("#gItem").gallery_get_photo(); + $(resize).hover(function(){ + $(this).gallery_context_menu(); + }); // Collapse comments form, insert button to expand if ($("#gAddCommentForm").length) { - var showCommentForm = '<a href="#add_comment_form" class="showCommentForm gButtonLink ui-corner-all ui-icon-left ui-state-default right"><span class="ui-icon ui-icon-comment"></span>' + ADD_A_COMMENT + '</a>'; + var showCommentForm = '<a href="#add_comment_form"' + + ' class="showCommentForm gButtonLink ui-corner-all ui-icon-left ui-state-default right">' + + '<span class="ui-icon ui-icon-comment"></span>' + ADD_A_COMMENT + '</a>'; $("#gAddCommentForm").hide(); $("#gComments").prepend(showCommentForm); $(".showCommentForm").click(function(){ @@ -81,56 +134,9 @@ $(document).ready(function() { duration: 1000, hash: true }); - } - // Add hover state for buttons - $(".ui-state-default").hover( - function(){ - $(this).addClass("ui-state-hover"); - }, - function(){ - $(this).removeClass("ui-state-hover"); - } - ); - - // Initialize thumbnail menus - // @todo Toggle between north and south caret's on hover - if ($("#gContent .gThumbMenu").length) { - $("#gContent .gThumbMenu li").addClass("ui-state-default"); - $("#gContent .gThumbMenu li a") - .not('[class]') - .addClass("gButtonLink ui-icon ui-icon-caret-l-n") - .css({ - height: "10px", - margin: "0", - padding: "0 0 3px 0" - }); - - $(".gThumbMenu ul").hide(); - $(".gThumbMenu").hover( - function() { - $(this).find("ul").slideDown("fast"); - }, - function() { - $(this).find("ul").slideUp("slow"); - } - ); - } + // Initialize button hover effect + $.fn.gallery_hover_init(); }); - -/** - * Reduce width of sized photo if it's wider than its parent container - */ -function sizedImage() { - var containerWidth = $("#gItem").width(); - var oPhoto = $("#gItem img").filter(function() { - return this.id.match(/gPhotoId-/); - }); - if (containerWidth < oPhoto.width()) { - var proportion = containerWidth / oPhoto.width(); - oPhoto.width(containerWidth); - oPhoto.height(proportion * oPhoto.height()); - } -} diff --git a/themes/default/views/album.html.php b/themes/default/views/album.html.php index 65ea3381..e2890482 100644 --- a/themes/default/views/album.html.php +++ b/themes/default/views/album.html.php @@ -19,7 +19,7 @@ <?= $child->thumb_img(array("class" => "gThumbnail")) ?> </a> <?= $theme->thumb_bottom($child) ?> - <?= $theme->thumb_menu($child) ?> + <?= $theme->context_menu($child, "#gItemId-{$child->id} .gThumbnail") ?> <h2><span></span><a href="<?= $child->url() ?>"><?= p::clean($child->title) ?></a></h2> <ul class="gMetadata"> <?= $theme->thumb_info($child) ?> diff --git a/themes/default/views/movie.html.php b/themes/default/views/movie.html.php index c90a370c..c8ecd769 100644 --- a/themes/default/views/movie.html.php +++ b/themes/default/views/movie.html.php @@ -36,4 +36,5 @@ var ADD_A_COMMENT = "<?= t("Add a comment") ?>"; </script> <?= $theme->photo_bottom() ?> + <?= $theme->context_menu($item, "#gMovieId-{$item->id}") ?> </div> diff --git a/themes/default/views/page.html.php b/themes/default/views/page.html.php index 66282bae..2cb71b9e 100644 --- a/themes/default/views/page.html.php +++ b/themes/default/views/page.html.php @@ -53,6 +53,7 @@ <script type="text/javascript"> var MSG_CANCEL = "<?= t('Cancel') ?>"; </script> + <?= $theme->script("gallery.ajax.js") ?> <?= $theme->script("gallery.dialog.js") ?> <?= $theme->script("gallery.form.js") ?> <?= $theme->script("superfish/js/superfish.js") ?> diff --git a/themes/default/views/photo.html.php b/themes/default/views/photo.html.php index 48472170..fa5def47 100644 --- a/themes/default/views/photo.html.php +++ b/themes/default/views/photo.html.php @@ -47,6 +47,7 @@ </a> <? endif ?> <?= $theme->resize_bottom($item) ?> + <?= $theme->context_menu($item, "#gPhotoId-{$item->id}") ?> </div> <div id="gInfo"> |