[Jifty-commit] r1097 - in jifty/branches/jifty-jsan: lib/Jifty/Web share/web/static/css share/web/static/images/silk share/web/static/js share/web/templates/_elements

jifty-commit at lists.jifty.org jifty-commit at lists.jifty.org
Mon May 22 23:32:15 EDT 2006


Author: trs
Date: Mon May 22 23:32:14 2006
New Revision: 1097

Added:
   jifty/branches/jifty-jsan/share/web/static/css/context-menus.css
   jifty/branches/jifty-jsan/share/web/static/images/silk/bullet_arrow_down.png   (contents, props changed)
   jifty/branches/jifty-jsan/share/web/static/images/silk/bullet_arrow_up.png   (contents, props changed)
   jifty/branches/jifty-jsan/share/web/static/js/context_menu.js
Modified:
   jifty/branches/jifty-jsan/   (props changed)
   jifty/branches/jifty-jsan/lib/Jifty/Web/Menu.pm
   jifty/branches/jifty-jsan/share/web/static/css/main.css
   jifty/branches/jifty-jsan/share/web/templates/_elements/javascript

Log:
 r12463 at zot:  tom | 2006-05-22 23:24:39 -0400
 Contextual menu support


Modified: jifty/branches/jifty-jsan/lib/Jifty/Web/Menu.pm
==============================================================================
--- jifty/branches/jifty-jsan/lib/Jifty/Web/Menu.pm	(original)
+++ jifty/branches/jifty-jsan/lib/Jifty/Web/Menu.pm	Mon May 22 23:32:14 2006
@@ -168,10 +168,10 @@
     my @kids = $self->children;
     my $id = Jifty->web->serial;
     Jifty->web->out(
-        qq{<ul class="menu">} .qq{<li class="closed contextual">}.  qq{<span class="title">} . $self->label() . qq{</span>}
+        qq{<ul class="context_menu">} .qq{<li class="closed toplevel">}.  qq{<span class="title">} . $self->label() . qq{</span>}
             . (
             @kids
-            ? qq{<span class="expand"><a href="#" onClick="Jifty.ContextMenu.hideshow('}.$id.qq{'; return false;">+</a></span>}
+            ? qq{<span class="expand"><a href="#" onClick="Jifty.ContextMenu.hideshow('}.$id.qq{'); return false;">+</a></span>}
             : ''
             )
             . qq{<ul id="}.$id.  qq{">}

Added: jifty/branches/jifty-jsan/share/web/static/css/context-menus.css
==============================================================================
--- (empty file)
+++ jifty/branches/jifty-jsan/share/web/static/css/context-menus.css	Mon May 22 23:32:14 2006
@@ -0,0 +1,85 @@
+ul.context_menu {
+    clear: none;
+    float: left;
+}
+
+ul.context_menu, ul.context_menu ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.context_menu li.toplevel {
+    float: left;
+    margin: 0 0.5em 0 0;
+    padding: 0.2em;
+
+    border: 1px solid #ccc;
+    border-top-color: white;
+    border-left-color: white;
+
+    color: #793300;
+}
+
+.context_menu li.toplevel ul li {
+    color: gray;
+}
+
+.context_menu li.toplevel .title {
+    font-weight: bold;
+}
+
+.context_menu li.toplevel ul {
+    font-size: 0.9em;
+    display: none;
+}
+
+.context_menu .open span.expand a {
+    background-image: url(/static/images/silk/bullet_arrow_up.png);
+}
+
+.context_menu span.expand a {
+    background: url(/static/images/silk/bullet_arrow_down.png) no-repeat center center;
+    padding-left: 16px;
+    border: 1px solid transparent;
+    color: white;
+    margin-left: 0.3em;
+}
+
+.context_menu li.toplevel:hover .expand a {
+    border-top: 1px solid grey;
+    border-left: 1px solid grey;
+    border-right: 1px solid lightgrey;
+    border-bottom: 1px solid lightgrey;
+}
+
+.context_menu li.open a {
+    border-bottom-color: transparent;
+}
+
+.context_menu li.open, .context_menu li.closed:hover {
+    border-top: 1px solid lightgrey;
+    border-left: 1px solid lightgrey;
+    border-right: 1px solid grey;
+    border-bottom: 1px solid grey;
+}
+
+.context_menu li.toplevel span.expand a:active {
+    border-top: 1px solid white;
+    border-left: 1px solid white;
+    border-right: 1px solid grey;
+    border-bottom: 1px solid grey;
+
+    position: relative;
+    top: 1px;
+    left: 1px;
+}
+
+.context_menu li ul li {
+    padding: 0.2em;
+}
+
+.context_menu li.open ul li:hover {
+    background: #eee;
+}
+

Modified: jifty/branches/jifty-jsan/share/web/static/css/main.css
==============================================================================
--- jifty/branches/jifty-jsan/share/web/static/css/main.css	(original)
+++ jifty/branches/jifty-jsan/share/web/static/css/main.css	Mon May 22 23:32:14 2006
@@ -1,6 +1,7 @@
 @import "app-base.css";
 @import "base.css";
 @import "nav.css";
+ at import "context-menus.css";
 @import "calendar.css";
 @import "combobox.css";
 @import "keybindings.css";

Added: jifty/branches/jifty-jsan/share/web/static/images/silk/bullet_arrow_down.png
==============================================================================
Binary file. No diff available.

Added: jifty/branches/jifty-jsan/share/web/static/images/silk/bullet_arrow_up.png
==============================================================================
Binary file. No diff available.

Added: jifty/branches/jifty-jsan/share/web/static/js/context_menu.js
==============================================================================
--- (empty file)
+++ jifty/branches/jifty-jsan/share/web/static/js/context_menu.js	Mon May 22 23:32:14 2006
@@ -0,0 +1,75 @@
+JSAN.use("DOM.Events");
+
+if (typeof Jifty == "undefined") Jifty = { };
+
+Jifty.ContextMenu = {
+    currently_open:  "",
+    prevent_stutter: "",
+
+    getParentListItem: function(ul) {
+        /* XXX TODO: Put this in the onclick handler? */
+        return ul.parentNode;
+    },
+
+    hideshow: function(id) {
+        var ul = document.getElementById(id);
+
+        Jifty.ContextMenu.prevent_stutter = id;
+
+        if ( ul.style.display == "block" )
+            Jifty.ContextMenu.hide(id);
+        else
+            Jifty.ContextMenu.show(id);
+    },
+
+    hide: function(id) {
+        var ul = document.getElementById(id);
+
+        var li = Jifty.ContextMenu.getParentListItem(ul);
+        Element.removeClassName(li, "open");
+        Element.addClassName(li, "closed");
+                             
+        ul.style.display = "none";
+        Jifty.ContextMenu.currently_open = "";
+    },
+
+    show: function(id) {
+        var ul = document.getElementById(id);
+        
+        if (   Jifty.ContextMenu.currently_open
+            && Jifty.ContextMenu.currently_open != ul.id )
+        {
+            Jifty.ContextMenu.hide(Jifty.ContextMenu.currently_open);
+        }
+    
+        var li = Jifty.ContextMenu.getParentListItem(ul);
+        Element.removeClassName(li, "closed");
+        Element.addClassName(li, "open");
+                             
+        ul.style.display = "block";
+        Jifty.ContextMenu.currently_open = ul.id;
+    },
+
+    hideOpenMenu: function(event) {
+        /* This is a bloody hack to deal with the Document based listener
+           firing just before our listener on the link.
+           If both fire, the window closes and then opens again.
+         */
+        if (   Jifty.ContextMenu.prevent_stutter
+            && Jifty.ContextMenu.prevent_stutter == Jifty.ContextMenu.currently_open)
+        {
+            Jifty.ContextMenu.prevent_stutter = "";
+            return;
+        }
+        else {
+            Jifty.ContextMenu.prevent_stutter = "";
+        }
+        
+        if (Jifty.ContextMenu.currently_open) {
+            Jifty.ContextMenu.hide(Jifty.ContextMenu.currently_open);
+        }
+    }
+};
+
+DOM.Events.addListener( window, "click", Jifty.ContextMenu.hideOpenMenu );
+

Modified: jifty/branches/jifty-jsan/share/web/templates/_elements/javascript
==============================================================================
--- jifty/branches/jifty-jsan/share/web/templates/_elements/javascript	(original)
+++ jifty/branches/jifty-jsan/share/web/templates/_elements/javascript	Mon May 22 23:32:14 2006
@@ -17,6 +17,7 @@
   /static/js/halo.js
   /static/js/combobox.js
   /static/js/key_bindings.js
+  /static/js/context_menu.js
   /static/js/bps_util.js
   /static/js/rico.js
   /static/js/app_behaviour.js


More information about the Jifty-commit mailing list