From e0e450d90fe67ac199d82d2b8e902cff5c8b6c7d Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sat, 11 Jul 2009 00:40:57 -0600 Subject: Position gItem and gPhoto relative, then position quick and thumb menus as absolute within them. Moved css from quick.js to quick.css. --- themes/default/js/ui.init.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 9d9d3079..29e04d5e 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -36,6 +36,14 @@ $(document).ready(function() { $(dialogLinks[i]).bind("click", handleDialogEvent); } + // gThumbMenu + if ($(".gItem .gMenu").length) { + $(".gItem .gMenu").removeClass("sf-menu"); + $(".gItem .gMenu span").removeClass("sf-sub-indicator"); + $(".gItem .gMenu span").addClass("ui-icon ui-icon-triangle-1-n"); + $(".gItem .gMenu li:first-child").addClass("ui-icon-right ui-corner-top ui-state-default"); + } + // Initialize view menu if ($("#gViewMenu").length) { $("#gViewMenu ul").removeClass("gMenu").removeClass("sf-menu"); -- cgit v1.2.3 From 8bfcf09b4c9628f13fdee2b958b3d11c9abce474 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sat, 11 Jul 2009 23:14:26 -0600 Subject: Styled thumb menu, still needs script to set up interraction. --- themes/default/css/screen.css | 14 +++++++++----- themes/default/js/ui.init.js | 20 +++++++++++++++----- 2 files changed, 24 insertions(+), 10 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index d08ada17..66989ea4 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -584,17 +584,21 @@ form .gError, /* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -.gItem .gMenu { +#gContent .gThumbMenu { bottom: 0; - margin-bottom: -2px; + left: 0; position: absolute; - right: 0; + width: 100%; } -.gItem .gMenu li { - font-weight: normal !important; +#gContent .gThumbMenu li { + border-left: none; + border-right: none; } +#gContent .gThumbMenu a:hover { + text-decoration: none; +} /* View Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #gViewMenu { diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 29e04d5e..b14127f6 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -13,6 +13,10 @@ var shortForms = new Array( $(document).ready(function() { + // Remove .gMenu from thumb menu's before initializing Superfish + $("#gContent .gItem .gMenu").removeClass("gMenu"); + $("#gContent .gQuick + ul").addClass("gThumbMenu") + // Initialize Superfish menus $("ul.gMenu").addClass("sf-menu"); $('ul.sf-menu').superfish({ @@ -37,11 +41,17 @@ $(document).ready(function() { } // gThumbMenu - if ($(".gItem .gMenu").length) { - $(".gItem .gMenu").removeClass("sf-menu"); - $(".gItem .gMenu span").removeClass("sf-sub-indicator"); - $(".gItem .gMenu span").addClass("ui-icon ui-icon-triangle-1-n"); - $(".gItem .gMenu li:first-child").addClass("ui-icon-right ui-corner-top ui-state-default"); + if ($("#gContent .gThumbMenu").length) { + $("#gContent .gThumbMenu li").addClass("ui-state-default"); + // ui-icon-triangle-1-n + $("#gContent .gThumbMenu li a") + .not('[class]') + .addClass("gButtonLink ui-icon") + .css({ + "height":"10px", + "margin":"0", + "padding":"0" + }); } // Initialize view menu -- cgit v1.2.3 From 58d0a5013d4cda1be0cf528b8ff08d44b123d75f Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 12 Jul 2009 11:43:41 -0600 Subject: First attempt at animating gThumbMenu. Doesn't work. --- themes/default/css/screen.css | 2 +- themes/default/js/ui.init.js | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 0c65cd96..1853a11d 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -459,7 +459,7 @@ form .gError, font-size: .7em; height: 240px; overflow: hidden; - padding: 14px 8px; + padding: 15px 8px 30px 8px; position: relative; text-align: center; width: 213px; diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index b14127f6..d5755aed 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -50,8 +50,23 @@ $(document).ready(function() { .css({ "height":"10px", "margin":"0", - "padding":"0" + "padding":"0", + "width":"16px" }); + var menuHt = $("#gContent .gThumbMenu").height(); + var bottomPos = "-" + (menuHt - 15) + "px"; + $("#gContent .gThumbMenu").css("bottom",bottomPos); + console.log("Initilizing: Placing at " + bottomPos); + $("#gContent .gThumbMenu li").hover( + function(){ + $(this).css("bottom","0"); + console.log("Placing at 0px"); + }, + function(){ + $(this).css("bottom",bottomPos); + console.log("Placing at " + bottomPos); + } + ); } // Initialize view menu -- cgit v1.2.3 From 413174e89edb36b311237aea4ab8386d75d16760 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 12 Jul 2009 16:07:16 -0600 Subject: Second attempt at showing and hiding the thumb menu. Renamed gThumbMenu to gPhotoMenu for use on both album and photo pages, eventually. --- themes/default/css/screen.css | 9 +++++---- themes/default/js/ui.init.js | 28 +++++++++++----------------- 2 files changed, 16 insertions(+), 21 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 1853a11d..93b68e68 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -582,23 +582,24 @@ form .gError, margin-bottom: 0; } -/* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Photo Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gThumbMenu { +#gContent .gPhotoMenu { bottom: 0; left: 0; position: absolute; width: 100%; } -#gContent .gThumbMenu li { +#gContent .gPhotoMenu li { border-left: none; border-right: none; } -#gContent .gThumbMenu a:hover { +#gContent .gPhotoMenu a:hover { text-decoration: none; } + /* View Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #gViewMenu { diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index d5755aed..37261727 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -14,8 +14,9 @@ var shortForms = new Array( $(document).ready(function() { // Remove .gMenu from thumb menu's before initializing Superfish + // @todo gallery_menu should only apply gMenu to top-level menus, submenus should be gSubMenu-N $("#gContent .gItem .gMenu").removeClass("gMenu"); - $("#gContent .gQuick + ul").addClass("gThumbMenu") + $("#gContent .gQuick + ul").addClass("gPhotoMenu"); // Initialize Superfish menus $("ul.gMenu").addClass("sf-menu"); @@ -40,31 +41,24 @@ $(document).ready(function() { $(dialogLinks[i]).bind("click", handleDialogEvent); } - // gThumbMenu - if ($("#gContent .gThumbMenu").length) { - $("#gContent .gThumbMenu li").addClass("ui-state-default"); - // ui-icon-triangle-1-n - $("#gContent .gThumbMenu li a") + // Initialize photo menus + if ($("#gContent .gPhotoMenu").length) { + $("#gContent .gPhotoMenu li").addClass("ui-state-default"); + $("#gContent .gPhotoMenu li a") .not('[class]') .addClass("gButtonLink ui-icon") .css({ "height":"10px", "margin":"0", - "padding":"0", - "width":"16px" + "padding":"0" }); - var menuHt = $("#gContent .gThumbMenu").height(); - var bottomPos = "-" + (menuHt - 15) + "px"; - $("#gContent .gThumbMenu").css("bottom",bottomPos); - console.log("Initilizing: Placing at " + bottomPos); - $("#gContent .gThumbMenu li").hover( + //$(".gPhotoMenu ul").hide(); + $(".gPhotoMenu").hover( function(){ - $(this).css("bottom","0"); - console.log("Placing at 0px"); + $(this + " ul").show(); }, function(){ - $(this).css("bottom",bottomPos); - console.log("Placing at " + bottomPos); + $(this + " ul").hide(); } ); } -- cgit v1.2.3 From 895fbfd95b5e7a42dd865f4a18401fd2e1491bc2 Mon Sep 17 00:00:00 2001 From: Bharat Mediratta Date: Sat, 11 Jul 2009 17:59:55 -0700 Subject: Get the thumbnail menu working. 1) Stop changing the menu classes in JS, instead allow us to specify it in the Menu class itself and then set it to be gThumbMenu in Theme_View 2) Move the gThumbMenu init code to the bottom of the $(document).ready() block; something in there was interfering with it. --- modules/gallery/libraries/Menu.php | 9 ++++-- modules/gallery/libraries/Theme_View.php | 11 ++++---- themes/default/css/screen.css | 8 +++--- themes/default/js/ui.init.js | 47 ++++++++++++++++---------------- 4 files changed, 38 insertions(+), 37 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/modules/gallery/libraries/Menu.php b/modules/gallery/libraries/Menu.php index 162cd3b0..a39b59a5 100644 --- a/modules/gallery/libraries/Menu.php +++ b/modules/gallery/libraries/Menu.php @@ -136,7 +136,9 @@ class Menu_Core extends Menu_Element { return new Menu_Element_Dialog($type); case "root": - return new Menu("root"); + $menu = new Menu("root"); + $menu->css_class("gMenu"); + return $menu; case "submenu": return new Menu("submenu"); @@ -156,6 +158,7 @@ class Menu_Core extends Menu_Element { } } } + return $this; } public function __construct($type) { @@ -206,8 +209,8 @@ class Menu_Core extends Menu_Element { } public function __toString() { - $html = $this->is_root ? "
    " : - "
  • label\">$this->label
      "; + $html = $this->is_root ? "
        css_class\">" : + "
      • label\">$this->label
          "; $html .= implode("\n", $this->elements); $html .= $this->is_root ? "
        " : "
      "; return $html; diff --git a/modules/gallery/libraries/Theme_View.php b/modules/gallery/libraries/Theme_View.php index 75138f25..fa45ec89 100644 --- a/modules/gallery/libraries/Theme_View.php +++ b/modules/gallery/libraries/Theme_View.php @@ -99,19 +99,19 @@ class Theme_View_Core extends Gallery_View { } public function album_menu() { - $this->_menu("album"); + print $this->_menu("album"); } public function tag_menu() { - $this->_menu("tag"); + print $this->_menu("tag"); } public function photo_menu() { - $this->_menu("photo"); + print $this->_menu("photo"); } public function thumb_menu($item) { - $this->_menu("thumb", $item); + print $this->_menu("thumb", $item)->css_class("gThumbMenu"); } private function _menu($type, $item=null) { @@ -127,8 +127,7 @@ class Theme_View_Core extends Gallery_View { } } - $menu->compact(); - print $menu; + return $menu->compact(); } public function pager() { diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 93b68e68..c0954690 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -582,21 +582,21 @@ form .gError, margin-bottom: 0; } -/* Photo Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Thumb Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gContent .gPhotoMenu { +#gContent .gThumbMenu { bottom: 0; left: 0; position: absolute; width: 100%; } -#gContent .gPhotoMenu li { +#gContent .gThumbMenu li { border-left: none; border-right: none; } -#gContent .gPhotoMenu a:hover { +#gContent .gThumbMenu a:hover { text-decoration: none; } diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index 37261727..ac7ef8d2 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -15,8 +15,6 @@ $(document).ready(function() { // Remove .gMenu from thumb menu's before initializing Superfish // @todo gallery_menu should only apply gMenu to top-level menus, submenus should be gSubMenu-N - $("#gContent .gItem .gMenu").removeClass("gMenu"); - $("#gContent .gQuick + ul").addClass("gPhotoMenu"); // Initialize Superfish menus $("ul.gMenu").addClass("sf-menu"); @@ -41,28 +39,6 @@ $(document).ready(function() { $(dialogLinks[i]).bind("click", handleDialogEvent); } - // Initialize photo menus - if ($("#gContent .gPhotoMenu").length) { - $("#gContent .gPhotoMenu li").addClass("ui-state-default"); - $("#gContent .gPhotoMenu li a") - .not('[class]') - .addClass("gButtonLink ui-icon") - .css({ - "height":"10px", - "margin":"0", - "padding":"0" - }); - //$(".gPhotoMenu ul").hide(); - $(".gPhotoMenu").hover( - function(){ - $(this + " ul").show(); - }, - function(){ - $(this + " ul").hide(); - } - ); - } - // Initialize view menu if ($("#gViewMenu").length) { $("#gViewMenu ul").removeClass("gMenu").removeClass("sf-menu"); @@ -118,6 +94,29 @@ $(document).ready(function() { } ); + // Initialize thumbnail menus + if ($("#gContent .gThumbMenu").length) { + $("#gContent .gThumbMenu li").addClass("ui-state-default"); + $("#gContent .gThumbMenu li a") + .not('[class]') + .addClass("gButtonLink ui-icon") + .css({ + height: "10px", + margin: "0", + padding: "0" + }); + + $(".gThumbMenu ul").hide(); + $(".gThumbMenu").hover( + function() { + $(this).find("ul").slideDown("fast"); + }, + function() { + $(this).find("ul").slideUp("slow"); + } + ); + } + }); /** -- cgit v1.2.3 From 50cd41655a5e083de3fee5b43fd72c21ffb3dd25 Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Sun, 12 Jul 2009 22:41:57 -0600 Subject: Minor style tweaks. --- themes/default/css/screen.css | 5 +++++ themes/default/js/ui.init.js | 9 +++++---- 2 files changed, 10 insertions(+), 4 deletions(-) (limited to 'themes/default/js/ui.init.js') diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index c0954690..88631e81 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -594,6 +594,11 @@ form .gError, #gContent .gThumbMenu li { border-left: none; border-right: none; + border-bottom: none; +} + +#gContent .gThumbMenu li li { + padding: .3em; } #gContent .gThumbMenu a:hover { diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js index ac7ef8d2..92a42ded 100644 --- a/themes/default/js/ui.init.js +++ b/themes/default/js/ui.init.js @@ -95,24 +95,25 @@ $(document).ready(function() { ); // 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") + .addClass("gButtonLink ui-icon ui-icon-caret-l-n") .css({ height: "10px", margin: "0", - padding: "0" + padding: "0 0 3px 0" }); $(".gThumbMenu ul").hide(); $(".gThumbMenu").hover( function() { - $(this).find("ul").slideDown("fast"); + $(this).find("ul").slideDown("fast"); }, function() { - $(this).find("ul").slideUp("slow"); + $(this).find("ul").slideUp("slow"); } ); } -- cgit v1.2.3