From 628958fc2d19639db37be51ce89ec3300db03b6e Mon Sep 17 00:00:00 2001
From: bsag <bsag@a4c988fc-2ded-0310-b66e-134b36920a42>
Date: Mon, 4 Jun 2007 18:59:56 +0000
Subject: [PATCH] Added styled submit and cancel buttons to the new action and
 edit action form, thanks to a great tutorial at Particletree:

http://particletree.com/features/rediscovering-the-button-element/

I'll style the other submit buttons like this in due course for consistency.



git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@551 a4c988fc-2ded-0310-b66e-134b36920a42
---
 .../app/views/shared/_add_new_item_form.rhtml |  10 +-
 tracks/app/views/todos/_edit_form.rhtml       |  13 +-
 tracks/public/images/accept.png               | Bin 0 -> 781 bytes
 tracks/public/images/cancel.png               | Bin 0 -> 587 bytes
 tracks/public/stylesheets/standard.css        | 168 +++++++++++++-----
 5 files changed, 139 insertions(+), 52 deletions(-)
 create mode 100755 tracks/public/images/accept.png
 create mode 100755 tracks/public/images/cancel.png

diff --git a/tracks/app/views/shared/_add_new_item_form.rhtml b/tracks/app/views/shared/_add_new_item_form.rhtml
index def1d9b6..a59ea796 100644
--- a/tracks/app/views/shared/_add_new_item_form.rhtml
+++ b/tracks/app/views/shared/_add_new_item_form.rhtml
@@ -76,9 +76,15 @@ Event.observe($('todo_context_name'), "click", contextAutoCompleter.activate.bin
   <%= text_field("todo", "show_from", "size" => 12, "class" => "Date", "onfocus" => "Calendar.setup", "tabindex" => 7, "autocomplete" => "off") %>
 </div>
 
+<div class="submit_box">
+  <div class="widgets">
+    <button type="submit" class="positive">
+        <img src="/images/accept.png" alt=""/> 
+        Add action
+    </button>
+  </div>
 
-<%= source_view_tag( @source_view ) %>
-<div class="submit_box"><input type="submit" value="Add action" tabindex="8" /></div>
+</div>
 <% end -%><!--[eoform:todo]-->
 
                   
diff --git a/tracks/app/views/todos/_edit_form.rhtml b/tracks/app/views/todos/_edit_form.rhtml
index 0df216af..ff6e7e70 100644
--- a/tracks/app/views/todos/_edit_form.rhtml
+++ b/tracks/app/views/todos/_edit_form.rhtml
@@ -59,8 +59,17 @@ Event.observe($('<%= dom_id(@todo, 'context_name') %>'), "click", <%= dom_id(@to
   <input type="hidden" name="on_project_page" value="true" />
 <% end -%>
 
-<div class="submit_box"><input id="<%= dom_id(@todo, 'submit') %>" type="submit" value="Update" tabindex="15" />
-<a href="javascript:void(0);" onclick="Element.toggle('<%= dom_id(@todo, 'line') %>');Element.toggle('<%= dom_id(@todo, 'edit') %>');">Cancel</a>
+<div class="submit_box">
+  <div class="widgets">
+    <button type="submit" class="positive" id="<%= dom_id(@todo, 'submit') %>" tabindex="15">
+        <img src="/images/accept.png" alt=""/> 
+        Update
+    </button>
+    <a href="javascript:void(0);" onclick="Element.toggle('<%= dom_id(@todo, 'line') %>');Element.toggle('<%= dom_id(@todo, 'edit') %>');" class="negative">
+        <img src="/images/cancel.png" alt=""/>
+        Cancel
+    </a>
+  </div>
 </div>
         
 <%= calendar_setup( dom_id(@todo, 'due') ) %>
diff --git a/tracks/public/images/accept.png b/tracks/public/images/accept.png
new file mode 100755
index 0000000000000000000000000000000000000000..89c8129a490b329f3165f32fa0781701aab417ea
GIT binary patch
literal 781
zcmV+o1M>WdP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!pGibPR5;6}
zlj}=UVI0T(J9f@?Yy$~oL?MENP<s_55<8j=#k?#_)7`z&He=XKi!yRv#z-kGv(##H
zPHpPc=GK%laoJHq%)RMCwPAFzZ|CgAOcEn{;0q5A&*$@du5ke3{wIG76!;E_a;FdK
zvpp$H#^e2A>4-QibtN)VXQDpczE`xXAkUjh%RI>;okxb7K@0kpyQ1k_Y(|Oe7$m(^
zNYX>mI||sUbmn+c<m#Le&eeX{US5M~t}+^~?^x|a<4hF}*!YoT8=u}L$nm5IGu=t+
z9L!Cu36!D2Ujog{8R*!Qv#Iu-h5hwCT%4+a*g~$0uam-<K;}*|sK&CQl{uILRo+uj
zOcz2iRRHx=A>3<&FnE=4u#()KBS^SH8e)Qs5i!#lY=$-1gbH6VluzU=m=EP78&5vQ
z-?+fFP-G2l&l_QzYealK$;1Rl?FkzXR&Jv<pn=v~#I9rjiy!8pnkdBB+E5h!vH2Zs
z&o03*QH;J|Cj>@fBPNjCr#AYRyJ7UJQ0v#?)7Ott=>3<sG1xL&549^BdiQDc2Rk6B
z`CZUMF*oL$(7tdPx=A_AzG_6ieU8GLKR01{dI4q5ENECkOP~(zUNfjFVrvVjw*&_H
zKpN~TcTqhdhuVD-b<^codbfbK*#?vj9*4ql0y<|7?610!ZaoaDlGr-LWGi2|kG&eR
zM}vpV9aN6yK|7oS)sPHI2Nw>`#-pV!7>9}>Q1jL)H6h&gkP@3nI=+F3nA~M>u#(n*
z8T!#8oEw&-mED4!h4s!N@Jo3S7N&Q6%6l3}nlcd~X@>;uelvPsSkXIgg~e+^T1zSf
z3SNj(5%jK~i8@b;C<CFVY6wQ4<%I<*UYM=Ou+dYcgy^ro@n7=`XV9$WdAihN00000
LNkvXXu0mjf{u*Ke

literal 0
HcmV?d00001

diff --git a/tracks/public/images/cancel.png b/tracks/public/images/cancel.png
new file mode 100755
index 0000000000000000000000000000000000000000..c149c2bc017d5ce5a8ae9330dd7dbd012482e0f4
GIT binary patch
literal 587
zcmV-R0<`^!P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz-AP12R5;6}
zlWS`lK@^7fYe*m=DW)`pmR@6<ps1n7m=rW+jY^x^OQdNiz0u46%!gbcf1|{ept8=c
zyE{*3RyS3YmeLO|3&Xz8nfIJC24MV;#t#j{3Xca0MrHjOU>FS^-G}e*;M)Q6>s#cP
zI`Y#S<cC-I4{qZbMtd?KGXFRPvxv-Okf{_wGD)zuhM&*kA3mpd?<PY3I|3LsAJpOe
z99gRoBoYLxtN4`)^6U(+TEg4k#l5qPJ%B`j{*_f_ZKl(KW)r_!#V?n^QqkLO<jD!W
z#6x;73Uos25FpH(P800yh2{tnN}Cm=x4n(CxQP4g39Vs(?y&s4|2wa`a%2pp%<k3}
zPArC4Siq^|CjdUa?&poi@k^x<fUfT5a)|kPy0f!5rR+E$cwfU`S;05WtIYbV&9qv`
ziwlIBj6FS#^K_ldVSuLrYDC`S6!P@6U$xP|-Q2|4*a*#1L4u<ry35xQ#q=n^RU4+~
z>($G6W`W@NI5g|L-MKl0Zmu$m^(0~^Lwo5OO~d#(vPfz<EIr@e%N^YK-K)Iz%nbI_
z6!uaqtlSzhkFBy=4$HoE1Gk#T+0EgY*)XptW)Owcn0ex3Qr)$5ha+7M)a<MI_t*H3
Z`UU5exP$$k-M;_;002ovPDHLkV1l3E9Q*(P

literal 0
HcmV?d00001

diff --git a/tracks/public/stylesheets/standard.css b/tracks/public/stylesheets/standard.css
index 8c1262a7..35e3e032 100644
--- a/tracks/public/stylesheets/standard.css
+++ b/tracks/public/stylesheets/standard.css
@@ -1,3 +1,5 @@
+/* @override http://0.0.0.0:3000/stylesheets/standard.css?1180885851 */
+
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 	margin:0;
 	padding:0;
@@ -257,15 +259,6 @@ div#input_box {
 	float:left;
 }
 
-#input_box .submit_box {
-	width:50%;
-	text-align:center;
-}
-
-#input_box .submit_box input {
-	margin-top:10px;
-}
-
 .box {
       float: left;
       width: 20px;
@@ -557,7 +550,7 @@ li {
 
 .edit-form {
       background: #ccc;
-      padding: 5px;
+      padding: 0 10px;
       border-top: 1px solid #999;
       border-bottom: 1px solid #999;
       }
@@ -668,54 +661,48 @@ form {
 	opacity: .75;
 	color: #eee;
 }
-.edit_todo_form {
-	padding: 5px;
-	width: 100%;	
-}
-.edit_todo_form input, .edit_todo_form textarea {
-	width:95%;
-}
+
 #todo_new_action_container input, #todo_new_action_container textarea {
-	width:260px;
-}
-#todo_new_action_container .show_from_input input {
-	width:120px;
-}
-.edit_todo_form .show_from_input input, .edit_todo_form .context_input input {
-	width:45%;
-}
-.edit_todo_form .show_from_input, .edit_todo_form .context_input {
-	margin-left:5%;
-}
-#todo_new_action_container .show_from_input {
-	margin-left:15px;
+	width: 100%;
 }
 
-#todo_new_action_container .due_input input {
-	width:120px;
+#todo_new_action_container .show_from_input, #todo_new_action_container .due_input {
+	width: 45%;
 }
+
+#todo_new_action_container .show_from_input {
+	float: right;
+}
+
+#todo-form-new-action .submit_box {
+	height: 30px;
+	padding: 5px 0;
+	text-align: center;
+	clear: right;
+}
+
+.edit_todo_form .submit_box {
+	height: 30px;
+	padding: 5px 0;
+	text-align: center;
+	clear: right;
+}
+
+.edit_todo_form input, .edit_todo_form textarea {
+	width:100%;
+}
+
 .edit_todo_form .tag_list_label {
 	clear:both;
 }
 .edit_todo_form .due_input, .edit_todo_form .show_from_input, .edit_todo_form .project_input, .edit_todo_form .context_input {
-	width:45%;
-}
-.edit_todo_form .due_input input, .edit_todo_form .show_from_input input, .edit_todo_form .project_input input, .edit_todo_form .context_input input {
-	width:100%;
-}
-.edit_todo_form .submit_box {
-	width: 95%;
-	text-align: center;	
-	margin-top: 40px;
+	width:48%;
 }
 
-#todo-form-new-action .submit_box {
-	width:260px;
-	text-align:center;
-}
-#todo-form-new-action .submit_box input {
-	width:50%;
+.edit_todo_form .show_from_input, .edit_todo_form .context_input {
+	float: right;
 }
+
 .edit_todo_form .submit_box input {
 	width:120px;
 }
@@ -926,4 +913,89 @@ table.users_table {
 }
 
 .users_table th {color: #fff; background-color: #000;}
-.users_table td {border: none;}
\ No newline at end of file
+.users_table td {border: none;}
+
+/* Submit button styling from ParticleTree
+    http://particletree.com/features/rediscovering-the-button-element/ */
+
+.widgets a, .widgets button{
+    display:block;
+    float: left;
+    margin:0px 7px 0 0;
+    background-color:#f5f5f5;
+    border:1px solid #dedede;
+    border-top:1px solid #eee;
+    border-left:1px solid #eee;
+
+    font-family:"Lucida Grande", Verdana, Geneva, Arial, sans-serif;
+    font-size:100%;
+    line-height:130%;
+    text-decoration:none;
+    font-weight:bold;
+    color:#565656;
+    cursor:pointer;
+    padding:5px 10px 6px 7px; /* Links */
+}
+
+.widgets button{
+    width:auto;
+    overflow:visible;
+    padding:4px 10px 3px 7px; /* IE6 */
+}
+
+.widgets button[type]{
+    padding:5px 10px 5px 7px; /* Firefox */
+    line-height:17px; /* Safari */
+}
+.widgets button img, .widgets a img{
+    margin:0 3px -3px 0 !important;
+    padding:0;
+    border:none;
+    width:16px;
+    height:16px;
+}
+
+/* STANDARD */
+
+button:hover, .widgets a:hover{
+    background-color:#dff4ff;
+    border:1px solid #c2e1ef;
+    color:#336699;
+}
+.widgets a:active{
+    background-color:#6299c5;
+    border:1px solid #6299c5;
+    color:#fff;
+}
+
+/* POSITIVE */
+
+button.positive, .widgets a.positive{
+    color: #498111;
+}
+.widgets a.positive:hover, button.positive:hover{
+    background-color:#E6EFC2;
+    border:1px solid #C6D880;
+    color:#529214;
+}
+.widgets a.positive:active{
+    background-color:#529214;
+    border:1px solid #529214;
+    color:#fff;
+}
+
+/* NEGATIVE */
+
+.widgets a.negative, button.negative{
+    color:#d12f19;
+}
+.widgets a.negative:hover, button.negative:hover{
+    background:#fbe3e4;
+    border:1px solid #fbc2c4;
+    color:#d12f19;
+}
+.widgets a.negative:active{
+    background-color:#d12f19;
+    border:1px solid #d12f19;
+    color:#fff;
+}
\ No newline at end of file