Finished rough draft of contacts index page redesign

app/assets/stylesheets/advanced_search.css.scss

@@ -0,0 +1,89 @@
+#search {
+
+  margin-top: 15px;
+
+	.tabs {  
+		background: none;
+
+		li {
+			a:link, a:visited {
+				background-color: #ddd;
+				color: #222;
+				font-weight: normal;
+			  font-size: 11px;
+			}
+			a:hover {
+				background-color: #ccc;
+			}
+			a:active {
+				background-color: #aaa;
+				color: white;
+			}
+			a.active {
+				background-color: #eee;
+        color: black;
+			}
+		}
+	}
+
+	.remote {
+		border: none;
+		background-color: #eee;
+		padding: 10px;
+	}
+
+  .options {
+    float: right;
+    padding-top: 10px;
+    margin-right: 30px;
+  }
+  .options a {
+    border-bottom: 1px dotted darkCyan;
+    color: darkCyan;
+    text-decoration: none;
+  }
+
+  #query {
+    margin-top: 6px;
+  }
+} 
+
+.defaultTextActive { color: #a1a1a1; }
+
+#buttons {
+  float: right;
+  padding: 7px;
+
+  .create_asset, ul { display: inline; }
+  .create_asset {
+    margin-left: 24px;
+    display: inline-block;
+    vertical-align: top;
+    padding-top: 1px;
+    span.arrow {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+
+
+ul.format-buttons li {
+  display: inline;
+  margin: 0 5px;
+
+  a { 
+    display: inline-block;
+    width: 16px; 
+    height: 16px; 
+    opacity: 0.3;
+  }
+  a.active { opacity: 1; }
+  a:hover { opacity: 0.6; }
+  a:active { opacity: 1; }
+
+  a.brief-button { background: url('brief.png'); }
+  a.long-button { background: url('long.png'); }
+  a.full-button { background: url('full.png'); }
+
+}

app/assets/stylesheets/application.css.erb

@@ -31,6 +31,7 @@
  *= require fields
  *= require textarea_autocomplete
  *= require admin/fields
+ *= require advanced_search
  *= require_self
  */
 

app/assets/stylesheets/header.scss

@@ -82,7 +82,7 @@ $color_footer: grey;
     input {
       margin: 2px 0px 0px 0px; } } }
 
-#tabs {
+.tabs {
   background: $color_header_background;
   height: $size_tab_height;
   padding: 0px;

app/controllers/entities/contacts_controller.rb

@@ -22,9 +22,9 @@ class ContactsController < EntitiesController
   # GET /contacts
   #----------------------------------------------------------------------------
   def index
-    @contacts = get_contacts(:page     => params[:page],
-                             :per_page => params[:per_page])
-    
+    options  # Set options instance variables
+    @contacts = get_contacts(:page => params[:page], :per_page => params[:per_page])
+
     respond_with @contacts do |format|
       format.xls { render :layout => 'header' }
     end

app/views/contacts/_sidebar_index.html.haml

@@ -1,3 +0,0 @@
-.filters#filters
-  = render "shared/search"
-  = hook(:index_contact_sidebar_bottom, self)

app/views/contacts/index.html.haml

@@ -1,24 +1,31 @@
 = styles_for :contact
 
-.title
-  %span#create_contact_title #{t :contacts}
-  = image_tag("loading.gif", :size => :thumb, :id => "loading", :style => "display: none;")
+= image_tag("loading.gif", :size => :thumb, :id => "loading", :style => "display: none;")
 
-#search_bar
-  #search_tabs
+#buttons
+  = render 'format_buttons'
+  .create_asset
+    = link_to_inline(:create_contact, new_contact_path, :text => t(:create_contact))
+
+#search
+  .tabs
     %ul
       %li
-        = link_to 'Basic Search', '#'
+        = link_to 'Basic Search', '#', :class => (params[:q] ? "" : "active")
       %li
-        = link_to 'Advanced Search', '#'
+        = link_to 'Advanced Search', '#', :class => (params[:q] ? "active" : "")
+
+  .remote#basic_search{ hidden_if(params[:q]) }
+    = render "basic_search"
+
+  .remote#advanced_search{ hidden_if(!params[:q]) }
+    - if params[:q]
+      = render :partial => "advanced_search"
+
 
 .remote#create_contact{ hidden }
 
 .remote#options{ hidden }
-.remote#advanced_search{ hidden_if(!params[:q]) }
-  - if params[:q]
-    = render :partial => "advanced_search"
-
 
 .list#contacts
   - if @contacts.any?
@@ -28,3 +35,5 @@
 
 #paginate= render "shared/paginate"
 #export= render "shared/export"
+
+

app/views/contacts/new.js.rjs

@@ -1,13 +1,9 @@
 page.call "crm.flick", :empty, :toggle
-page.call "crm.hide_form", :options if called_from_index_page?
 page.call "crm.flip_form", :create_contact
 
 unless params[:cancel].true?
   page[:create_contact].replace_html :partial => "new"
   page.call "crm.init_chosen_fields"
-  page.call "crm.set_title", :create_contact, t(:create_contact)
   page.call "crm.create_or_select_account", request.referer =~ /\/accounts\// || @account.id.blank?
   hook(:new_contact_rjs, self, :page => page)
-else
-  page.call "crm.set_title", :create_contact, t(:contacts)
 end

app/views/entities/_basic_search.html.haml

@@ -0,0 +1,25 @@
+- path = controller.controller_name
+- path = "admin/#{path}" if controller.class.to_s.starts_with?("Admin::")
+- current_sort_by = t("option_" + Contact.sort_by_map.invert[@sort_by])
+- current_naming  = t("option_#{@naming}")
+
+%div{ :style => "margin: 0px 0px 6px 0px" }
+  = text_field_tag('query', @current_query, :size => 23, :onfocus => "if (this.value == 'Search #{path}') { this.value = ''; jQuery(this).removeClass('defaultTextActive'); }", :onblur => "if (this.value == '' ) { this.value = 'Search #{path}'; jQuery(this).addClass('defaultTextActive'); }")
+
+  .sorting.options
+    -# sort_by_displaying: Sort {{models}} by {{field}} displaying first name {{position}} last name.
+    = t(:sort_by, :models => t(:contacts_small), :field => link_to(current_sort_by, "#", :id => :sort_by)).html_safe
+
+%script
+  = render "shared/sort_by"
+
+
+:javascript
+  var defaultText = 'Search #{path}';
+  previous_#{path}_search_value = defaultText;
+  new Form.Element.Observer('query', 1.5, function(element, value) {
+  	if (value != defaultText && previous_#{path}_search_value != '') {
+  		crm.search(value, '#{path}');
+  	}
+  	previous_#{path}_search_value = value;
+  });

app/views/entities/_format_buttons.html.haml

@@ -0,0 +1,17 @@
+- current_outline = t("option_#{@outline}")
+
+%ul.format-buttons
+  %li= link_to '', '#', :title => "Brief format", :"data-outline" => "brief", :class => ["brief-button", ("active" if current_outline == "brief")].compact.join(" ")
+  %li= link_to '', '#', :title => "Long format", :"data-outline" => "long", :class => ["long-button", ("active" if current_outline == "long")].compact.join(" ")
+  %li= link_to '', '#', :title => "Full format", :"data-outline" => "full", :class => ["full-button", ("active" if current_outline == "full")].compact.join(" ")
+
+
+:javascript
+  jQuery('a[data-outline]').click(function(){
+
+    #{remote_function(:url => send("redraw_#{controller.controller_name}_path"), :with => "'outline=' + jQuery(this).data('outline')",:loading => "$('loading').show()", :complete => "$('loading').hide()")}
+
+    jQuery('a[data-outline]').removeClass('active');
+    jQuery(this).addClass('active');
+  });
+

app/views/layouts/_tabbed.html.haml

@@ -1,4 +1,4 @@
-#tabs
+.tabs
   %ul
     - tabs.each do |tab|
       %li
@@ -16,4 +16,3 @@
       = render "layouts/sidebar"
     %td{ :class => :main, :id => :main, :valign => :top }
       = yield
-

config/locales/en-US_fat_free_crm.yml

@@ -227,7 +227,7 @@ en-US:
   option_target_revenue: target revenue
   option_updated_at: date updated
   show_per_page: Show %{number} %{models} per page using %{fmt} format.
-  sort_by: Sort %{models} by %{field}.
+  sort_by: Sort by %{field}
   sort_by_displaying: Sort %{models} by %{field} displaying first name %{position} last name.
 
   # Views -> Profile.