group names are now editable

app/controllers/groups_controller.rb

@@ -42,7 +42,7 @@ class GroupsController < ApplicationController
   def update
     @group = Group.first(:id => params[:id])
     if @group.update_attributes(params[:group])
-      flash[:notice] = "Successfully updated group."
+      #flash[:notice] = "Successfully updated group."
       redirect_to @group
     else
       render :action => 'edit'

app/views/shared/_group_nav.haml

@@ -4,7 +4,8 @@
       = link_to "All Groups", root_url
     - for group in @groups
       %li{:id => group.id, :class => ("selected" if current_group?(group))}
-        = link_for_group group
+        %span.group_name
+          = link_for_group group
         %span{:class => '⚙'}
           = link_to "⚙", "#", :class => "edit_group_button"
 

public/javascripts/view.js

@@ -8,8 +8,6 @@ $(document).ready(function(){
 	
   $('#flash_notice, #flash_error, #flash_alert').delay(2500).slideUp(130);
   
-
-  
   $("div.image_cycle").cycle({
     fx: 'fade',
     random: 1,
@@ -18,24 +16,60 @@ $(document).ready(function(){
   });
 
   //buttons//////
-  
-
   $("#add_group_button").fancybox();
   $("#add_request_button").fancybox({ 'titleShow': false });
 
-
- 
-  //pane_toggler_button("photo");
-
   $("input[type='submit']").addClass("button");
 
-
-
   $(".image_cycle img").load( function() {
     $(this).fadeIn("slow");
   });
 
 
+  $(".edit_group_button").click(function() {
+
+    var element = $(this).closest("li").children(".group_name").children("a");
+    var oldHTML = element.html();
+
+    var link = element.attr("href");
+
+    element.toggleClass("editing");
+
+    if( element.hasClass("editing") ) {
+
+      element.attr("contentEditable", true);
+      element.focus();
+
+
+  
+      //remove newline action
+      $(element).keypress(function(e) {
+        if (e.which == 13) {
+          e.preventDefault();
+          element.attr("contentEditable", false);
+          element.toggleClass("editing");
+          element.blur();
+
+          //save changes
+          $.ajax({
+            type: "PUT",
+            url: link,
+            data: {"group" : {"name" : element.text() }}
+          });
+        }
+      });
+
+      //update all other group links
+      $(element).keyup(function(e) {
+        $("a[href='"+link+"']").not(element).text(element.text());
+      });
+
+    } else {
+      element.attr("contentEditable", false);
+    }
+
+  });
+
 
 });//end document ready
 

public/stylesheets/application.css

@@ -11,12 +11,10 @@ body {
   margin: 0; }
 
 a {
-  color: #018790;
   color: #556270;
   text-decoration: none; }
   a:hover {
     color: white;
-    background-color: #018790;
     background-color: #556270; }
 
 .avatar {
@@ -473,6 +471,8 @@ h1.big_text {
         color: #999999; }
         #group_nav ul > li a:hover {
           background: none; }
+        #group_nav ul > li a.editable:hover {
+          background: yellow; }
     #group_nav ul .⚙ {
       margin-left: 4px; }
       #group_nav ul .⚙ a {
@@ -569,3 +569,7 @@ h1.big_text {
     #global_search form label {
       font-size: 12px;
       margin-top: -3px; }
+
+.editing, .editing:hover {
+  background-color: yellow;
+  border: 1px #666666 solid; }

public/stylesheets/sass/application.sass

@@ -10,14 +10,12 @@ body
   :padding 2em
   :margin 0
 a
-  :color #018790
   :color #556270
   :text
     :decoration none
   &:hover
     :color #fff
     :background
-      :color #018790
       :color #556270
 
 .avatar
@@ -601,6 +599,8 @@ h1.big_text
         :color #999
         &:hover
           :background none
+        &.editable:hover
+          :background yellow
 
     .⚙
       :margin
@@ -738,4 +738,7 @@ h1.big_text
       :margin
         :top -3px
 
-
+.editing, .editing:hover
+  :background
+    :color yellow
+  :border 1px #666 solid