Modified the style of the new action form. Now uses Nifty Corners Cube [1] to round the corners of the box, which is styled the same as the navigation bar. This gives it a more distinctive appearance, and a more 'widgetty' feel.

[1] http://www.html.it/articoli/niftycube/index.html


git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@549 a4c988fc-2ded-0310-b66e-134b36920a42
This commit is contained in:
bsag 2007-06-03 15:09:16 +00:00
parent 71db7bc25a
commit 47abca3034
5 changed files with 376 additions and 101 deletions

View file

@ -13,10 +13,17 @@
<%= javascript_include_tag 'calendar', 'calendar-en', 'calendar-setup' %>
<%= javascript_include_tag "accesskey-hints" %>
<%= javascript_include_tag "todo-items" %>
<%= javascript_include_tag "niftycube" %>
<link rel="shortcut icon" href="<%= url_for(:controller => 'favicon.ico') %>" />
<%= auto_discovery_link_tag(:rss,{:controller => "feed", :action => "na_feed", :name => "#{@user.login}", :token => "#{@user.word}"}, {:title => "RSS feed of next actions"}) %>
<script type="text/javascript">
window.onload=function(){
Nifty("div#todo_new_action_container","normal");
}
</script>
<title><%= @page_title %></title>
</head>

View file

@ -2,26 +2,13 @@
# migrations feature of ActiveRecord to incrementally modify your database, and
# then regenerate this schema definition.
ActiveRecord::Schema.define(:version => 0) do
create_table "bow_wows", :force => true do |t|
t.column "name", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "cats", :force => true do |t|
t.column "name", :string
t.column "cat_type", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
ActiveRecord::Schema.define(:version => 32) do
create_table "contexts", :force => true do |t|
t.column "name", :string, :default => "", :null => false
t.column "hide", :integer, :limit => 4, :default => 0, :null => false
t.column "position", :integer, :default => 0, :null => false
t.column "user_id", :integer, :default => 0, :null => false
t.column "name", :string, :default => "", :null => false
t.column "position", :integer, :null => false
t.column "hide", :boolean, :default => false
t.column "user_id", :integer, :default => 1
t.column "created_at", :datetime
t.column "updated_at", :datetime
end
@ -29,48 +16,9 @@ ActiveRecord::Schema.define(:version => 0) do
add_index "contexts", ["user_id"], :name => "index_contexts_on_user_id"
add_index "contexts", ["user_id", "name"], :name => "index_contexts_on_user_id_and_name"
create_table "eaters_foodstuffs", :force => true do |t|
t.column "foodstuff_id", :integer
t.column "eater_id", :integer
t.column "some_attribute", :integer, :default => 0
t.column "eater_type", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "fish", :force => true do |t|
t.column "name", :string
t.column "speed", :integer
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "frogs", :force => true do |t|
t.column "name", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "keep_your_enemies_close", :force => true do |t|
t.column "enemy_id", :integer
t.column "enemy_type", :string
t.column "protector_id", :integer
t.column "protector_type", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "little_whale_pupils", :force => true do |t|
t.column "whale_id", :integer
t.column "aquatic_pupil_id", :integer
t.column "aquatic_pupil_type", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "notes", :force => true do |t|
t.column "user_id", :integer, :default => 0, :null => false
t.column "project_id", :integer, :default => 0, :null => false
t.column "user_id", :integer, :null => false
t.column "project_id", :integer, :null => false
t.column "body", :text
t.column "created_at", :datetime
t.column "updated_at", :datetime
@ -95,15 +43,8 @@ ActiveRecord::Schema.define(:version => 0) do
t.column "value", :binary
end
create_table "petfoods", :id => false, :force => true do |t|
t.column "the_petfood_primary_key", :integer, :null => false
t.column "name", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "preferences", :force => true do |t|
t.column "user_id", :integer, :default => 0, :null => false
t.column "user_id", :integer, :null => false
t.column "date_format", :string, :limit => 40, :default => "%d/%m/%Y", :null => false
t.column "week_starts", :integer, :default => 0, :null => false
t.column "show_number_completed", :integer, :default => 5, :null => false
@ -125,8 +66,8 @@ ActiveRecord::Schema.define(:version => 0) do
create_table "projects", :force => true do |t|
t.column "name", :string, :default => "", :null => false
t.column "position", :integer, :default => 0, :null => false
t.column "user_id", :integer, :default => 0, :null => false
t.column "position", :integer, :null => false
t.column "user_id", :integer, :default => 1
t.column "description", :text
t.column "state", :string, :limit => 20, :default => "active", :null => false
t.column "created_at", :datetime
@ -143,7 +84,7 @@ ActiveRecord::Schema.define(:version => 0) do
t.column "updated_at", :datetime
end
add_index "sessions", ["session_id"], :name => "sessions_session_id_index"
add_index "sessions", ["session_id"], :name => "index_sessions_on_session_id"
create_table "taggings", :force => true do |t|
t.column "taggable_id", :integer
@ -163,16 +104,16 @@ ActiveRecord::Schema.define(:version => 0) do
add_index "tags", ["name"], :name => "index_tags_on_name"
create_table "todos", :force => true do |t|
t.column "context_id", :integer, :default => 0, :null => false
t.column "description", :string, :limit => 100, :default => "", :null => false
t.column "context_id", :integer, :null => false
t.column "project_id", :integer
t.column "description", :string, :default => "", :null => false
t.column "notes", :text
t.column "created_at", :datetime
t.column "due", :date
t.column "completed_at", :datetime
t.column "project_id", :integer
t.column "user_id", :integer, :default => 0, :null => false
t.column "user_id", :integer, :default => 1
t.column "show_from", :date
t.column "state", :string, :limit => 20, :default => "immediate", :null => false
t.column "state", :string, :limit => 20, :default => "immediate", :null => false
end
add_index "todos", ["user_id", "state"], :name => "index_todos_on_user_id_and_state"
@ -182,10 +123,10 @@ ActiveRecord::Schema.define(:version => 0) do
add_index "todos", ["user_id", "context_id"], :name => "index_todos_on_user_id_and_context_id"
create_table "users", :force => true do |t|
t.column "login", :string, :limit => 80
t.column "password", :string, :limit => 40
t.column "login", :string, :limit => 80, :default => "", :null => false
t.column "password", :string, :limit => 40, :default => "", :null => false
t.column "word", :string
t.column "is_admin", :integer, :limit => 4, :default => 0, :null => false
t.column "is_admin", :boolean, :default => false, :null => false
t.column "first_name", :string
t.column "last_name", :string
t.column "auth_type", :string, :default => "database", :null => false
@ -194,16 +135,4 @@ ActiveRecord::Schema.define(:version => 0) do
add_index "users", ["login"], :name => "index_users_on_login"
create_table "whales", :force => true do |t|
t.column "name", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
create_table "wild_boars", :force => true do |t|
t.column "name", :string
t.column "created_at", :datetime, :null => false
t.column "updated_at", :datetime, :null => false
end
end

View file

@ -0,0 +1,298 @@
/* Nifty Corners Cube - rounded corners with CSS and Javascript
Copyright 2006 Alessandro Fulciniti (a.fulciniti@html.it)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
var niftyOk=(document.getElementById && document.createElement && Array.prototype.push);
var niftyCss=false;
String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}
var oldonload=window.onload;
if(typeof(NiftyLoad)!='function') NiftyLoad=function(){};
if(typeof(oldonload)=='function')
window.onload=function(){oldonload();AddCss();NiftyLoad()};
else window.onload=function(){AddCss();NiftyLoad()};
function AddCss(){
niftyCss=true;
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","/stylesheets/niftyCorners.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}
function Nifty(selector,options){
if(niftyOk==false) return;
if(niftyCss==false) AddCss();
var i,v=selector.split(","),h=0;
if(options==null) options="";
if(options.find("fixed-height"))
h=getElementsBySelector(v[0])[0].offsetHeight;
for(i=0;i<v.length;i++)
Rounded(v[i],options);
if(options.find("height")) SameHeight(selector,h);
}
function Rounded(selector,options){
var i,top="",bottom="",v=new Array();
if(options!=""){
options=options.replace("left","tl bl");
options=options.replace("right","tr br");
options=options.replace("top","tr tl");
options=options.replace("bottom","br bl");
options=options.replace("transparent","alias");
if(options.find("tl")){
top="both";
if(!options.find("tr")) top="left";
}
else if(options.find("tr")) top="right";
if(options.find("bl")){
bottom="both";
if(!options.find("br")) bottom="left";
}
else if(options.find("br")) bottom="right";
}
if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}
v=getElementsBySelector(selector);
for(i=0;i<v.length;i++){
FixIE(v[i]);
if(top!="") AddTop(v[i],top,options);
if(bottom!="") AddBottom(v[i],bottom,options);
}
}
function AddTop(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
}
else{
bk=getParentBk(el); border=Mix(color,bk);
}
d.style.background=bk;
d.className="niftycorners";
p=getPadding(el,"Top");
if(options.find("small")){
d.style.marginBottom=(p-2)+"px";
btype+="s"; lim=2;
}
else if(options.find("big")){
d.style.marginBottom=(p-10)+"px";
btype+="b"; lim=8;
}
else d.style.marginBottom=(p-5)+"px";
for(i=1;i<=lim;i++)
d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingTop="0";
el.insertBefore(d,el.firstChild);
}
function AddBottom(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
}
else{
bk=getParentBk(el); border=Mix(color,bk);
}
d.style.background=bk;
d.className="niftycorners";
p=getPadding(el,"Bottom");
if(options.find("small")){
d.style.marginTop=(p-2)+"px";
btype+="s"; lim=2;
}
else if(options.find("big")){
d.style.marginTop=(p-10)+"px";
btype+="b"; lim=8;
}
else d.style.marginTop=(p-5)+"px";
for(i=lim;i>0;i--)
d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingBottom=0;
el.appendChild(d);
}
function CreateStrip(index,side,color,border,btype){
var x=CreateEl("b");
x.className=btype+index;
x.style.backgroundColor=color;
x.style.borderColor=border;
if(side=="left"){
x.style.borderRightWidth="0";
x.style.marginRight="0";
}
else if(side=="right"){
x.style.borderLeftWidth="0";
x.style.marginLeft="0";
}
return(x);
}
function CreateEl(x){
return(document.createElement(x));
}
function FixIE(el){
if(el.currentStyle!=null && el.currentStyle.hasLayout!=null && el.currentStyle.hasLayout==false)
el.style.display="inline-block";
}
function SameHeight(selector,maxh){
var i,v=selector.split(","),t,j,els=[],gap;
for(i=0;i<v.length;i++){
t=getElementsBySelector(v[i]);
els=els.concat(t);
}
for(i=0;i<els.length;i++){
if(els[i].offsetHeight>maxh) maxh=els[i].offsetHeight;
els[i].style.height="auto";
}
for(i=0;i<els.length;i++){
gap=maxh-els[i].offsetHeight;
if(gap>0){
t=CreateEl("b");t.className="niftyfill";t.style.height=gap+"px";
nc=els[i].lastChild;
if(nc.className=="niftycorners")
els[i].insertBefore(t,nc);
else els[i].appendChild(t);
}
}
}
function getElementsBySelector(selector){
var i,j,selid="",selclass="",tag=selector,tag2="",v2,k,f,a,s=[],objlist=[],c;
if(selector.find("#")){ //id selector like "tag#id"
if(selector.find(" ")){ //descendant selector like "tag#id tag"
s=selector.split(" ");
var fs=s[0].split("#");
if(fs.length==1) return(objlist);
f=document.getElementById(fs[1]);
if(f){
v=f.getElementsByTagName(s[1]);
for(i=0;i<v.length;i++) objlist.push(v[i]);
}
return(objlist);
}
else{
s=selector.split("#");
tag=s[0];
selid=s[1];
if(selid!=""){
f=document.getElementById(selid);
if(f) objlist.push(f);
return(objlist);
}
}
}
if(selector.find(".")){ //class selector like "tag.class"
s=selector.split(".");
tag=s[0];
selclass=s[1];
if(selclass.find(" ")){ //descendant selector like tag1.classname tag2
s=selclass.split(" ");
selclass=s[0];
tag2=s[1];
}
}
var v=document.getElementsByTagName(tag); // tag selector like "tag"
if(selclass==""){
for(i=0;i<v.length;i++) objlist.push(v[i]);
return(objlist);
}
for(i=0;i<v.length;i++){
c=v[i].className.split(" ");
for(j=0;j<c.length;j++){
if(c[j]==selclass){
if(tag2=="") objlist.push(v[i]);
else{
v2=v[i].getElementsByTagName(tag2);
for(k=0;k<v2.length;k++) objlist.push(v2[k]);
}
}
}
}
return(objlist);
}
function getParentBk(x){
var el=x.parentNode,c;
while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent")
el=el.parentNode;
if(c=="transparent") c="#FFFFFF";
return(c);
}
function getBk(x){
var c=getStyleProp(x,"backgroundColor");
if(c==null || c=="transparent" || c.find("rgba(0, 0, 0, 0)"))
return("transparent");
if(c.find("rgb")) c=rgb2hex(c);
return(c);
}
function getPadding(x,side){
var p=getStyleProp(x,"padding"+side);
if(p==null || !p.find("px")) return(0);
return(parseInt(p));
}
function getStyleProp(x,prop){
if(x.currentStyle)
return(x.currentStyle[prop]);
if(document.defaultView.getComputedStyle)
return(document.defaultView.getComputedStyle(x,'')[prop]);
return(null);
}
function rgb2hex(value){
var hex="",v,h,i;
var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
var h=regexp.exec(value);
for(i=1;i<4;i++){
v=parseInt(h[i]).toString(16);
if(v.length==1) hex+="0"+v;
else hex+=v;
}
return("#"+hex);
}
function Mix(c1,c2){
var i,step1,step2,x,y,r=new Array(3);
if(c1.length==4)step1=1;
else step1=2;
if(c2.length==4) step2=1;
else step2=2;
for(i=0;i<3;i++){
x=parseInt(c1.substr(1+step1*i,step1),16);
if(step1==1) x=16*x+x;
y=parseInt(c2.substr(1+step2*i,step2),16);
if(step2==1) y=16*y+y;
r[i]=Math.floor((x*50+y*50)/100);
r[i]=r[i].toString(16);
if(r[i].length==1) r[i]="0"+r[i];
}
return("#"+r[0]+r[1]+r[2]);
}

View file

@ -0,0 +1,35 @@
/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dinamically by javascript,
and their use should be avoided in the markup */
b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
overflow:hidden;border-style:solid;border-width: 0 1px}
/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

View file

@ -659,16 +659,18 @@ form {
width: 13ex;
}
#todo_new_action_container {
background:#ddd;
width:270px;
padding:5px;
background-image: url('/images/new-action-gradient.png');
background-repeat: repeat-x;
background-position: top;
background: #ddd;
width: 270px;
padding: 5px 10px;
background-color: #000;
filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
color: #eee;
}
.edit_todo_form {
padding:5px;
width:100%;
padding: 5px;
width: 100%;
}
.edit_todo_form input, .edit_todo_form textarea {
width:95%;
@ -702,9 +704,11 @@ form {
width:100%;
}
.edit_todo_form .submit_box {
width:95%;
text-align:center;
width: 95%;
text-align: center;
margin-top: 40px;
}
#todo-form-new-action .submit_box {
width:260px;
text-align:center;
@ -719,7 +723,8 @@ form {
text-align:right;
}
#todo-form-new-action label, .edit_todo_form label {
display:block;
display: block;
padding-bottom: 3px;
}
form.button-to {
@ -895,6 +900,7 @@ div.page_name_auto_complete ul li {
padding: 2px;
font-weight:bold;
list-style-type: none;
color: #000;
}
div.page_name_auto_complete ul li.selected {