Commit 8a2c50d3b16ee81977523fc5299bedfb22884e31 to technoweenie's mephisto

technoweenie / mephisto

Fork of halorgium/mephisto
Description:	A mirror of the mephisto code-base
Homepage:	http://mephistoblog.com/
Clone URL:	git://github.com/technoweenie/mephisto.git Give this clone URL to anyone. `git clone git://github.com/technoweenie/mephisto.git`

Click here to lend your support to: mephisto and make a donation at www.pledgie.com !

Added apple-like dropdown menu.  Other UI cleanups

git-svn-id: http://svn.techno-weenie.net/projects/mephisto/trunk@1242 
567b1171-46fb-0310-a4c9-b4bef9110e78

Caged (author)

Wed Jun 14 15:01:03 -0700 2006

commit 8a2c50d3b16ee81977523fc5299bedfb22884e31
tree aa5fc00e1e8034b721e9dba7b56c620da2b7470f
parent a7b10772d083579d74efb07f1c7388a4040c2903

app/views/admin/overview/_comment_event.rhtml
app/views/admin/overview/index.rhtml
app/views/layouts/application.rhtml
public/images/cog.gif
public/javascripts/application.js
public/javascripts/mephisto.js
public/stylesheets/mephisto.css

app/views/admin/overview/_comment_event.rhtml

0
@@ -5,14 +5,8 @@
0
   <span class="event-time"><%= event_time_for event, later %></span>
0
   <blockquote><p>&quot;<%= truncate strip_tags(event.body), 100 %>&quot;</p></blockquote>
0
   <span class="meta">
0
-    &mdash; <%=h event.author %> | <%= link_to_function 'Respond', %(Element.toggle('respond-#{event.id}')), :class => 'adds' %>
0
+    &mdash; <%=h event.author %>
0
   </span>
0
-  <div id="respond-<%= event.id %>" style="display:none" class="response">
0
-    <blockquote><p>&quot;<%= strip_tags(event.body)%>&quot;</p></blockquote>
0
-    
0
-    <textarea rows="4" cols="50">
0
-    </textarea>
0
-    <p class="btns"><%= submit_tag 'Post comment' %></p>
0
-  </div>
0
+
0
 </li>
0
 <% end -%>

app/views/admin/overview/index.rhtml

0
@@ -5,6 +5,13 @@
0
     <li><%= link_to "Create new article",  :controller => 'articles', :action => "new" %></li>
0
     <li><%= link_to "Create new section",  :controller => 'sections' %></li>
0
     <li><%= link_to "Update your account", :controller => 'users', :action => 'show', :id => current_user %></li>
0
+    <li id="select">
0
+      <a class="trigger" id="cog" href="#">&nbsp;</a>
0
+      <ul id="options" style="display:none;">
0
+        <li><a href="#" title="title">Test option</a></li>
0
+        <li><a href="#" title="title">Other option</a></li>
0
+      </ul>
0
+    </li>
0
   </ul>
0
 </div>
0
 <!-- /end action nav -->

app/views/layouts/application.rhtml

0
@@ -6,7 +6,7 @@
0
     <title>Mephisto: <%= controller.controller_name %> Admin</title>
0
     <%= stylesheet_link_tag 'mephisto' %>
0
     <%= javascript_include_tag :defaults %>
0
-		<%= javascript_include_tag 'logger', 'mephisto' %>
0
+		<%= javascript_include_tag 'mephisto' %>
0
   </head>
0
   <body>
0

public/javascripts/application.js

0
@@ -161,18 +161,3 @@ var SectionForm = {
0
     new Ajax.Request('/admin/sections/order/' + Navigate.currentId(), {asynchronous:true, evalScripts:true, parameters:query});
0
   }
0
 }
0
-
0
-
0
-//Ajax.Responders.register({
0
-//  // log the beginning of the requests
0
-//  onCreate: function(request, transport) {
0
-//    new Insertion.Bottom('debug', '<p><strong>[' + new Date().toString() + '] accessing ' + request.url + '</strong></p>')
0
-//  },
0
-//  
0
-//  // log the completion of the requests
0
-//  onComplete: function(request, transport) {
0
-//    new Insertion.Bottom('debug', 
0
-//      '<p><strong>http status: ' + transport.status + '</strong></p>' +
0
-//      '<pre>' + transport.responseText.escapeHTML() + '</pre>')
0
-//  }
0
-//});
0
\ No newline at end of file

public/javascripts/mephisto.js

0
@@ -1,3 +1,36 @@
0
+// TODO:  Fix buggles
0
+var DropMenu = Class.create();
0
+DropMenu.prototype = {
0
+  initialize: function(element) {
0
+    this.menu = $(element);
0
+    this.trigger = document.getElementsByClassName('trigger', this.menu)[0];
0
+    this.options = $('options');
0
+    this.focused = false;
0
+    
0
+    Event.observe(this.trigger, 'click', this.onTriggerClick.bindAsEventListener(this));
0
+    Event.observe(this.menu, 'mouseover', this.onMenuFocus.bindAsEventListener(this));
0
+    Event.observe(this.menu, 'mouseout', this.onMenuBlur.bindAsEventListener(this));
0
+  },
0
+  
0
+  onTriggerClick: function() {
0
+    Element.toggle(this.options);
0
+  },
0
+  
0
+  onMenuFocus: function() {
0
+    this.focused = true;
0
+  },
0
+  
0
+  onMenuBlur: function() {
0
+    this.focused = false;
0
+    setTimeout(this.fadeMenu.bind(this), 400);
0
+  },
0
+  
0
+  fadeMenu: function() {
0
+    if(!this.focused)
0
+      new Effect.Fade(this.options, {duration: 0.2});
0
+  }
0
+}
0
+
0
 // @name      The Fade Anything Technique
0
 // @namespace http://www.axentric.com/aside/fat/
0
 // @version   1.0-RC1
0
@@ -128,61 +161,7 @@ var Flash = {
0
   }
0
 }
0
 
0
+Event.observe(window, 'load', function() {
0
+  new DropMenu('select');
0
+});
0
 
0
-//
0
-//  Resizer.js
0
-//  Resize two divs proportial to each other
0
-//
0
-//
0
-
0
-/*
0
-if (!window.Control) {
0
-  var Control = new Object();
0
-}
0
-
0
-Control.Resizer = Class.create();
0
-Control.Resizer.prototype = {
0
-  initialize: function(element1, element2, options) {
0
-    // logger.info("Intitialized Resizer");
0
-    
0
-    this.leftElement  = $(element1);
0
-    this.rightElement = $(element2);
0
-    this.dragging     = false;
0
-    this.handle       = $(options.handle);
0
-    if (!this.handle) return;
0
-    Element.makePositioned(this.leftElement);
0
-    Element.makePositioned(this.rightElement);
0
-
0
-    Event.observe(this.handle, 'mousedown', this.onPress.bindAsEventListener(this));
0
-    Event.observe(this.handle, 'mouseover', this.onHover.bindAsEventListener(this));
0
-    Event.observe(document, 'mousemove', this.onDrag.bindAsEventListener(this));
0
-    Event.observe(document, 'mouseup', this.onBlur.bindAsEventListener(this));
0
-  },
0
-  
0
-  onPress: function(event) {
0
-    this.dragging = true;
0
-    var handle = Event.element(event);
0
-    this.initialLeftWidth = Element.getStyle(this.leftElement, 'width');
0
-  },
0
-  
0
-  // Fix dragging to left
0
-  onDrag: function(event) {
0
-    if(this.dragging) {
0
-      document.body.style.cursor = 'move';
0
-      var currentX = Event.pointerX(event);
0
-      var currentY = Event.pointerY(event);
0
-      var offset = currentX - 20;
0
-      Element.setStyle(this.rightElement, {marginLeft: currentX + "px"});
0
-      Element.setStyle(this.leftElement, {width:  offset + "px"});
0
-    }
0
-  },
0
-  
0
-  onBlur: function(event) {
0
-    this.dragging = false;
0
-    document.body.style.cursor = 'auto';
0
-  },
0
-  
0
-  onHover: function(event) {
0
-    Element.setStyle(this.handle, {cursor: 'move'});
0
-  }
0
-}*/

public/stylesheets/mephisto.css

0
@@ -194,7 +194,7 @@ input[type='text']:focus, textarea:focus {
0
 #nav a {
0
   float:left;
0
   display:block;
0
-  background: #3B8100 url(../images/tab-bg.gif) repeat-x left top;
0
+  background: #997 url(../images/tab-bg.gif) repeat-x left top;
0
   padding: 9px 20px;
0
   text-decoration: none;
0
   border: none;
0
@@ -271,8 +271,9 @@ input[type='text']:focus, textarea:focus {
0
 
0
 #act-nav {
0
   list-style: none;
0
-  margin: 0 20px;
0
+  margin: 0 0 0 20px;
0
   border-left: 1px solid #98CED0;
0
+  position: relative;
0
 } 
0
 
0
 #act-nav li a {
0
@@ -291,6 +292,52 @@ input[type='text']:focus, textarea:focus {
0
   background-color: transparent;
0
 }
0
 
0
+#select {
0
+  position: absolute;
0
+  right: 0;
0
+  top: 0;
0
+}
0
+
0
+#select a#cog {
0
+  border-right: none;
0
+  border-left: 1px solid #98CED0;
0
+  display: block;
0
+  background: url(../images/cog.gif) no-repeat;
0
+  padding: 11px 18px;
0
+  outline: none;
0
+}
0
+
0
+#select #options {
0
+  position: absolute;
0
+  top: 38px;
0
+  left: 2px;
0
+  width: 200px;
0
+  background: #eee;
0
+  z-index: 9999;
0
+  padding: 0;
0
+  margin: 0;
0
+  border: 5px solid #fff;
0
+}
0
+
0
+#select #options li {
0
+  display: block;
0
+  margin: 0;
0
+}
0
+
0
+#select #options a {
0
+  float: none !important;
0
+  display: block;
0
+  padding: 5px;
0
+  margin: 0;
0
+  border: none;
0
+  border-bottom: 1px dotted #ccc;
0
+}
0
+
0
+#select #options a:hover {
0
+  background: #E9F7F8;
0
+  color: #333;
0
+  text-shadow: 2px 2px #fff;
0
+}
0
 
0
 
0
 /*

Comments

No one has commented yet.