[Rt-commit] rt branch, 4.2/floating-page-menu, created. rt-4.0.6-448-g4570443

[Thomas Sibley]

The branch, 4.2/floating-page-menu has been created
        at  45704434391dbb9ee85bcc3c23e05a126b453ebe (commit)

- Log -----------------------------------------------------------------
commit 80bca53864692fe99c97293076b14bb5510d8533
Author: Thomas Sibley <trs at bestpractical.com>
Date:   Mon Sep 10 21:37:12 2012 -0700

    Don't duplicate the surrounding <span> of the bookmark toggle
    
    Use a custom callback to replace the current bookmark toggle with the one
    fetched, rather than replacing the inner contents.
    
    jQuery.load() replaces the _contents_ of the given element with the HTML
    returned by the AJAX request.  This meant the span.toggle-bookmark-$id elements
    nested when clicked.

diff --git a/share/html/Ticket/Elements/Bookmark b/share/html/Ticket/Elements/Bookmark
index 21c8104..c41e481 100644
--- a/share/html/Ticket/Elements/Bookmark
+++ b/share/html/Ticket/Elements/Bookmark
@@ -63,7 +63,7 @@ $Toggle => 0
 </%ARGS>
 <span class="toggle-bookmark-<% $id %>">
 % my $url = RT->Config->Get('WebPath') ."/Helpers/Toggle/TicketBookmark?id=". $id;
-<a align="right" href="<% $url %>" onclick="jQuery('.toggle-bookmark-'+<% $id |n,j%>).load(<% $url |n,j %>); return false;" >
+<a align="right" href="<% $url %>" onclick="jQuery.get(<% $url |n,j %>, function(data){ jQuery('.toggle-bookmark-'+<% $id |n,j%>).replaceWith(data) }); return false;" >
 % if ( $is_bookmarked ) {
 <img src="<% RT->Config->Get('WebPath') %>/NoAuth/images/star.gif" alt="<% loc('Remove Bookmark') %>" style="border-style: none" />
 % } else {

commit 45704434391dbb9ee85bcc3c23e05a126b453ebe
Author: Thomas Sibley <trs at bestpractical.com>
Date:   Mon Sep 10 21:40:35 2012 -0700

    Pin the page menu to the top left corner when scrolling
    
    Quick, unobtrusive access to actions and other pages without scrolling
    all the way back to the top.  Aileron only.
    
    Thanks to Tom Wardrop for the suggestion and prototype in [rt3 #20811].

diff --git a/share/html/NoAuth/css/aileron/AfterMenus b/share/html/NoAuth/css/aileron/AfterMenus
index f8654df..0d90e30 100644
--- a/share/html/NoAuth/css/aileron/AfterMenus
+++ b/share/html/NoAuth/css/aileron/AfterMenus
@@ -7,6 +7,13 @@ var initMenus = function() {
 
     jQuery("#app-nav.toplevel").addClass('sf-menu sf-js-enabled sf-shadow').supersubs().superfish({ speed: 'fast' });
     jQuery("#page-menu.toplevel").addClass('sf-menu sf-js-enabled').supersubs().superfish({ dropShadows: false, speed: 'fast' }).supposition();
+
+    var originalOffset = jQuery("#page-menu").offset().top;
+    var floatMenu      = function () {
+        jQuery("#page-menu").toggleClass("pinned", jQuery(document).scrollTop() > originalOffset);
+    };
+    floatMenu();
+    jQuery(window).scroll(floatMenu);
 };
 
 // If everything is loaded, init NOW.  Otherwise, defer to DOM ready.
diff --git a/share/html/NoAuth/css/aileron/nav.css b/share/html/NoAuth/css/aileron/nav.css
index f7c4685..cb510db 100644
--- a/share/html/NoAuth/css/aileron/nav.css
+++ b/share/html/NoAuth/css/aileron/nav.css
@@ -162,3 +162,55 @@
 #topactions #simple-search .field:focus {
  color: #000;
  }
+
+/* The bookmark star is too tall without adjusting the padding and height */
+
+.sf-menu .toggle-bookmark a {
+    padding: 0 1em;
+    height: 2.5em;
+}
+
+.sf-menu .toggle-bookmark a img {
+    padding-top: 0.6em;
+}
+
+/* Pin page menu to top left corner once you scroll past it */
+
+#page-menu.pinned {
+    position: fixed;
+    top:    0;
+    right:  0;
+    left:   auto;
+    width:  auto;
+
+    background:     white;
+    border-left:    1px #aaa solid;
+    border-bottom:  1px #aaa solid;
+    border-radius:  0 0 0 5px;
+    box-shadow:     0 0 10px rgba(0,0,0,0.4);
+
+    /* stupid vendor prefixes */
+    -moz-border-radius:     0 0 0 5px;
+    -webkit-border-radius:  0 0 0 5px;
+    -moz-box-shadow:        0 0 10px rgba(0,0,0,0.4);
+    -webkit-box-shadow:     0 0 10px rgba(0,0,0,0.4);
+}
+
+#page-menu.pinned li:hover ul,
+#page-menu.pinned li.sfHover ul {
+    border-left:    1px #aaa solid;
+    border-right:   1px #aaa solid;
+    z-index:        -1 !important; /* relative to current stacking context */
+    box-shadow:     0 0 10px rgba(0,0,0,0.4);
+
+    -moz-box-shadow:    0 0 10px rgba(0,0,0,0.4);
+    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
+}
+
+/* round off the corner of the first menu item so it matches the container */
+#page-menu.pinned > li:first-of-type,
+#page-menu.pinned > li:first-of-type > a {
+    border-radius:          0 0 0 5px;
+    -moz-border-radius:     0 0 0 5px;
+    -webkit-border-radius:  0 0 0 5px;
+}
diff --git a/share/html/Ticket/Elements/Bookmark b/share/html/Ticket/Elements/Bookmark
index c41e481..da6fd69 100644
--- a/share/html/Ticket/Elements/Bookmark
+++ b/share/html/Ticket/Elements/Bookmark
@@ -61,7 +61,7 @@ else {
 $id
 $Toggle => 0
 </%ARGS>
-<span class="toggle-bookmark-<% $id %>">
+<span class="toggle-bookmark toggle-bookmark-<% $id %>">
 % my $url = RT->Config->Get('WebPath') ."/Helpers/Toggle/TicketBookmark?id=". $id;
 <a align="right" href="<% $url %>" onclick="jQuery.get(<% $url |n,j %>, function(data){ jQuery('.toggle-bookmark-'+<% $id |n,j%>).replaceWith(data) }); return false;" >
 % if ( $is_bookmarked ) {

-----------------------------------------------------------------------