From 239ae048ccd48cf1c9e11f5ee5e4ab79948cb03d Mon Sep 17 00:00:00 2001 From: danielvincent Date: Thu, 26 Aug 2010 15:02:13 -0700 Subject: [PATCH] group names are now editable --- app/controllers/groups_controller.rb | 2 +- app/views/shared/_group_nav.haml | 3 +- public/javascripts/view.js | 54 +++++++++++++++++++----- public/stylesheets/application.css | 8 +++- public/stylesheets/sass/application.sass | 9 ++-- 5 files changed, 59 insertions(+), 17 deletions(-) diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb index b3abcf607..8b1cd73af 100644 --- a/app/controllers/groups_controller.rb +++ b/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' diff --git a/app/views/shared/_group_nav.haml b/app/views/shared/_group_nav.haml index 2d959b70b..88995f9b5 100644 --- a/app/views/shared/_group_nav.haml +++ b/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" diff --git a/public/javascripts/view.js b/public/javascripts/view.js index f9fa6d194..782a1bdad 100644 --- a/public/javascripts/view.js +++ b/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 diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 18c040055..3b9b768f5 100644 --- a/public/stylesheets/application.css +++ b/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; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 6c5c0c117..9ac21c096 100644 --- a/public/stylesheets/sass/application.sass +++ b/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