Use buttons instead of links for Cancel and Delete actions. Include b…

…utton styles for the main actions.
jwood · Mar 4, 2012 · 0e7c7be · 0e7c7be
1 parent c3ad3ce
commit 0e7c7be
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 16 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -11,11 +11,10 @@ def create_cancel_delete_links(object)
         confirm = "Are you sure you would like to delete group #{object.name}?"
       end
 
-      html =  '<p>'
-      html << link_to("Cancel", object, :method => :get, :remote => true, :class => 'ajax_request')
-      html << ' | '
-      html << link_to("Delete", object, :method => :delete, :remote => true, :confirm => confirm, :class => 'ajax_request')
-      html << '</p>'
+      html = "<div class='buttons'>"
+      html << button_to("Cancel", object, :method => :get, :remote => true, :class => 'ajax_request regular')
+      html << button_to("Delete", object, :method => :delete, :remote => true, :confirm => confirm, :class => 'ajax_request negative')
+      html << "</div>"
       html.html_safe
     end
   end

diff --git a/app/views/addresses/_address.html.erb b/app/views/addresses/_address.html.erb
@@ -54,7 +54,9 @@
   <% end %>
 
   <br />
-  <%= submit_tag "Save" %>
+  <div class="buttons">
+    <%= submit_tag "Save", :class => "positive" %>
+  </div>
 <% end %>
 
 <%= create_cancel_delete_links(@address) %>
diff --git a/app/views/contacts/_contact.html.erb b/app/views/contacts/_contact.html.erb
@@ -101,7 +101,9 @@
   </div>
 
   <br />
-  <%= submit_tag "Save" %>
+  <div class="buttons">
+    <%= submit_tag "Save", :class => "positive" %>
+  </div>
 <% end %>
 
 <%= create_cancel_delete_links(@contact) %>

diff --git a/app/views/groups/_group.html.erb b/app/views/groups/_group.html.erb
@@ -46,7 +46,9 @@
   <% end %>
 
   <br />
-  <%= submit_tag 'Save', :onclick => 'selectAllIncludedGroupMembers();' %>
+  <div class="buttons">
+    <%= submit_tag 'Save', :class => 'positive', :onclick => 'selectAllIncludedGroupMembers();' %>
+  </div>
 <% end %>
 
 <%= create_cancel_delete_links(@group) %>
diff --git a/app/views/settings/_address.html.erb b/app/views/settings/_address.html.erb
@@ -10,9 +10,12 @@
     <%= render :partial => 'shared/address_fields', :locals => { :address => @address, :disable_address2 => true } %>
   </div>
 
-  <p><%= submit_tag 'Save' %></p>  
+  <br />
+  <div class="buttons">
+    <%= submit_tag "Save", :class => "positive" %>
+  </div>
 <% end %>
 
-<p>
-  <%= link_to('Cancel', settings_edit_address_path, :method => :get, :remote => true, :class => 'ajax_request') %>
-</p>
+<div class="buttons">
+  <%= button_to("Cancel", settings_edit_address_path, :method => :get, :remote => true, :class => 'ajax_request regular') %>
+</div>
diff --git a/app/views/settings/_login_credentials.html.erb b/app/views/settings/_login_credentials.html.erb
@@ -35,10 +35,13 @@
       </table>
     </div>
 
-    <p><%= submit_tag 'Save' %></p>
+    <br />
+    <div class="buttons">
+      <%= submit_tag "Save", :class => "positive" %>
+    </div>
   <% end %>
 
-  <p>
-    <%= link_to('Cancel', settings_edit_login_credentials_path, :method => :get, :remote => true, :class => 'ajax_request') %>
-  </p>
+  <div class="buttons">
+    <%= button_to("Cancel", settings_edit_login_credentials_path, :method => :get, :remote => true, :class => 'ajax_request regular') %>
+  </div>
 <% end %>
diff --git a/public/stylesheets/stylesheet.css b/public/stylesheets/stylesheet.css
@@ -190,3 +190,116 @@ a:hover {
   text-align: center;
   vertical-align: middle;
 }
+
+/* START: button styles */
+
+.buttons a, .buttons button, .buttons input[type="submit"] {
+  display:table-cell;
+  float:left;
+  margin:0 7px 0 0;
+  background-color:#f5f5f5;
+  border:1px solid #dedede;
+  border-top:1px solid #eee;
+  border-left:1px solid #eee;
+
+  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
+  font-size:12px;
+  line-height:130%;
+  text-decoration:none;
+  font-weight:bold;
+  color:#565656;
+  cursor:pointer;
+  padding:5px 10px 6px 7px; /* Links */
+}
+
+.buttons button, .buttons input[type="submit"] {
+  width:auto;
+  overflow:visible;
+  padding:4px 10px 3px 7px; /* IE6 */
+}
+
+.buttons button[type], .buttons input[type="submit"] {
+  padding:5px 10px 5px 7px; /* Firefox */
+  line-height:17px; /* Safari */
+}
+
+*:first-child+html button[type], *:first-child+html input[type="submit"] {
+  padding:4px 10px 3px 7px; /* IE7 */
+}
+
+.buttons button img, .buttons a img, .buttons input[type="submit"] img {
+  margin:0 3px -3px 0 !important;
+  padding:0;
+  border:none;
+  width:16px;
+  height:16px;
+}
+
+/* STANDARD */
+
+button:hover, .buttons a:hover, input[type="submit"]:hover {
+  background-color:#dff4ff;
+  border:1px solid #c2e1ef;
+  color:#336699;
+}
+
+.buttons a:active {
+  background-color:#6299c5;
+  border:1px solid #6299c5;
+  color:#fff;
+}
+
+/* POSITIVE */
+
+button.positive, .buttons a.positive, input[type="submit"].positive {
+  color:#529214;
+}
+
+.buttons a.positive:hover, button.positive:hover, input[type="submit"].positive:hover {
+  background-color:#E6EFC2;
+  border:1px solid #C6D880;
+  color:#529214;
+}
+
+.buttons a.positive:active {
+  background-color:#529214;
+  border:1px solid #529214;
+  color:#fff;
+}
+
+/* NEGATIVE */
+
+.buttons a.negative, button.negative, input[type="submit"].negative {
+  color:#d12f19;
+}
+
+.buttons a.negative:hover, button.negative:hover, input[type="submit"].negative:hover {
+  background:#fbe3e4;
+  border:1px solid #fbc2c4;
+  color:#d12f19;
+}
+
+.buttons a.negative:active {
+  background-color:#d12f19;
+  border:1px solid #d12f19;
+  color:#fff;
+}
+
+/* REGULAR */
+
+button.regular, .buttons a.regular, input[type="submit"].regular {
+  color:#336699;
+}
+
+.buttons a.regular:hover, button.regular:hover, input[type="submit"].regular:hover {
+  background-color:#dff4ff;
+  border:1px solid #c2e1ef;
+  color:#336699;
+}
+
+.buttons a.regular:active {
+  background-color:#6299c5;
+  border:1px solid #6299c5;
+  color:#fff;
+}
+/* END: button styles */