From 98a0ee228a10f42937fcfea293ae15f0ed6a9d3f Mon Sep 17 00:00:00 2001 From: Dan Helfman Date: Wed, 31 Oct 2007 07:46:02 +0000 Subject: [PATCH] No more rounded corners on many UI elements, since the rounding was done by a browser-specific CSS hack and looked crappy. Those elements that are still rounded are now implemented with nice smooth images instead. Also changed downloaded HTML generation to specify sans-serif for the font. --- static/css/download.css | 7 +- static/css/note.css | 4 - static/css/style.css | 95 +++++++++++--------- static/images/current_notebook_bl.png | Bin 0 -> 118 bytes static/images/current_notebook_br.png | Bin 0 -> 118 bytes static/images/current_notebook_inner_tl.png | Bin 0 -> 130 bytes static/images/current_notebook_tl.png | Bin 0 -> 130 bytes static/images/current_notebook_tr.png | Bin 0 -> 119 bytes static/images/{buttons.txt => images.txt} | 8 ++ static/images/trash_notebook_bl.png | Bin 0 -> 117 bytes static/images/trash_notebook_br.png | Bin 0 -> 116 bytes static/images/trash_notebook_inner_tl.png | Bin 0 -> 123 bytes static/images/trash_notebook_tl.png | Bin 0 -> 123 bytes static/images/trash_notebook_tr.png | Bin 0 -> 117 bytes view/Link_area.py | 22 +++-- view/Main_page.py | 12 ++- view/Rounded_div.py | 26 ++++++ 17 files changed, 113 insertions(+), 61 deletions(-) create mode 100644 static/images/current_notebook_bl.png create mode 100644 static/images/current_notebook_br.png create mode 100644 static/images/current_notebook_inner_tl.png create mode 100644 static/images/current_notebook_tl.png create mode 100644 static/images/current_notebook_tr.png rename static/images/{buttons.txt => images.txt} (76%) create mode 100644 static/images/trash_notebook_bl.png create mode 100644 static/images/trash_notebook_br.png create mode 100644 static/images/trash_notebook_inner_tl.png create mode 100644 static/images/trash_notebook_tl.png create mode 100644 static/images/trash_notebook_tr.png create mode 100644 view/Rounded_div.py diff --git a/static/css/download.css b/static/css/download.css index d87ac9c..5e4cb0a 100644 --- a/static/css/download.css +++ b/static/css/download.css @@ -2,6 +2,7 @@ body { padding: 1em; background-color: #fafafa; line-height: 140%; + font-family: sans-serif; } #center_area { @@ -18,8 +19,6 @@ body { border: 1px solid #999999; margin-bottom: 0.75em; background-color: #ffffff; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } h1 { @@ -37,8 +36,6 @@ h3 { border-width: 0px; background-color: #d0e0f0; outline: none; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .button:hover { @@ -49,8 +46,6 @@ h3 { margin-top: 0.25em; padding: 0.25em; border: #999999 1px solid; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } ul li { diff --git a/static/css/note.css b/static/css/note.css index 9305f6d..c3ab0dd 100644 --- a/static/css/note.css +++ b/static/css/note.css @@ -67,8 +67,6 @@ h3 { font-size: 100%; outline: none; cursor: pointer; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .button:hover { @@ -79,8 +77,6 @@ h3 { margin-top: 0.25em; padding: 0.25em; border: #999999 1px solid; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } ul { diff --git a/static/css/style.css b/static/css/style.css index 0065f8e..310a3a5 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -251,8 +251,6 @@ ol li { #search_text { padding: 0.25em; border: #999999 1px solid; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } #user_area { @@ -265,21 +263,15 @@ ol li { } #notebook_header_area { - -moz-border-radius: 0.5em 0.5em 0.5em 0; - -webkit-border-radius: 0.5em 0.5em 0.5em 0; + padding: 0.2em; } #notebook_border { - padding: 0 0 0 0.3em; - -moz-border-radius: 0 0 0 1px; - -webkit-border-radius: 0 0 0 1px; + padding: 0 0 0 0.4em; } #notebook_background { padding: 0.25em 0.5em 0 1em; - background-color: #fafafa; - -moz-border-radius: 0.5em 0 0 0; - -webkit-border-radius: 0.5em 0 0 0; } #static_notes { @@ -301,8 +293,6 @@ ol li { text-align: left; padding: 0.5em; background-color: #fafafa; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .blank_note_stub_hidden_border { @@ -330,8 +320,6 @@ ol li { font-size: 100%; outline: none; cursor: pointer; - -moz-border-radius: 0.25em; - -webkit-border-radius: 0.25em; } .note_button:hover { @@ -347,8 +335,6 @@ ol li { border: 1px solid #999999; margin-bottom: 0.75em; background-color: #ffffff; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .focused_note_frame { @@ -382,8 +368,6 @@ ol li { padding: 0.5em; border: 1px solid #000000; background: #ffff99; - -moz-border-radius: 0.25em; - -webkit-border-radius: 0.25em; } .pulldown_link { @@ -401,16 +385,12 @@ ol li { margin-bottom: 0.5em; font-weight: bold; background-color: #ffcc66; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .message_inner { padding: 0.5em; line-height: 140%; background-color: #ffaa44; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .error { @@ -420,8 +400,6 @@ ol li { font-weight: bold; color: #ffffff; background-color: #ff3333; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .error_inner { @@ -429,8 +407,6 @@ ol li { line-height: 140%; color: #ffffff; background-color: #dd1111; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .message_button { @@ -441,8 +417,6 @@ ol li { font-size: 100%; outline: none; cursor: pointer; - -moz-border-radius: 0.25em; - -webkit-border-radius: 0.25em; } .message_button:hover { @@ -454,8 +428,6 @@ ol li { color: #ffffff; border: 1px solid #005500; background-color: #11bb11; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .error_box { @@ -472,8 +444,6 @@ ol li { margin-right: 0.5em; padding: 0.25em; border: #999999 1px solid; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .link_area_item { @@ -481,7 +451,8 @@ ol li { padding: 0.25em 0.25em 0.25em 0.5em; } -.storage_usage_area { +#storage_usage_area { + padding-top: 0.1em; } .storage_usage_low { @@ -502,16 +473,60 @@ ol li { margin-top: 1.5em; } -.current_notebook_name { +.current_notebook_color { background-color: #b0d0ff; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } -.current_trash_notebook_name { +.current_notebook_tl { + background: url(/static/images/current_notebook_tl.png) no-repeat top left; +} + +.current_notebook_tr { + background: url(/static/images/current_notebook_tr.png) no-repeat top right; +} + +.current_notebook_bl { + background: url(/static/images/current_notebook_bl.png) no-repeat bottom left; +} + +.current_notebook_br { + background: url(/static/images/current_notebook_br.png) no-repeat bottom right; +} + +.current_notebook_inner_color { + background-color: #fafafa; +} + +.current_notebook_inner_tl { + background: url(/static/images/current_notebook_inner_tl.png) no-repeat top left; +} + +.trash_notebook_color { background-color: #d0d0d0; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; +} + +.trash_notebook_tl { + background: url(/static/images/trash_notebook_tl.png) no-repeat top left; +} + +.trash_notebook_tr { + background: url(/static/images/trash_notebook_tr.png) no-repeat top right; +} + +.trash_notebook_bl { + background: url(/static/images/trash_notebook_bl.png) no-repeat bottom left; +} + +.trash_notebook_br { + background: url(/static/images/trash_notebook_br.png) no-repeat bottom right; +} + +.trash_notebook_inner_color { + background-color: #fafafa; +} + +.trash_notebook_inner_tl { + background: url(/static/images/trash_notebook_inner_tl.png) no-repeat top left; } .button { @@ -521,8 +536,6 @@ ol li { font-size: 100%; outline: none; cursor: pointer; - -moz-border-radius: 0.5em; - -webkit-border-radius: 0.5em; } .button:hover { diff --git a/static/images/current_notebook_bl.png b/static/images/current_notebook_bl.png new file mode 100644 index 0000000000000000000000000000000000000000..f65831eed9a3872edc5aa046e17fb3a3aee68ed9 GIT binary patch literal 118 zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XK2JzX3_DsCm;sQCE*Kd-of;o*O? z|8MZVQ~8s9_mTej`~SV)*S50z;q~?L|LyDk_9}8tV@RCfH({fKwId%BL(t7ev1x3( R?*I*A@O1TaS?83{1OQqaEe-$x literal 0 HcmV?d00001 diff --git a/static/images/current_notebook_br.png b/static/images/current_notebook_br.png new file mode 100644 index 0000000000000000000000000000000000000000..1bc556c253e939008865c9722988b1d8cbb23014 GIT binary patch literal 118 zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XK2JzX3_DsCm;D0uk4K4%8w><9N= z|KH$!r{*7faMJay_5b(({n4t$DD>yY*YE%1_b(9I-N*8TbQ`~SP_|NruLe30*xbkMrUdQeE=?Te;_&cEjW6Q|#( d_-G%-$&eV^D6z}gb{f!722WQ%mvv4FO#rrTHs1gM literal 0 HcmV?d00001 diff --git a/static/images/current_notebook_tr.png b/static/images/current_notebook_tr.png new file mode 100644 index 0000000000000000000000000000000000000000..d2d428bb8425f4d79e8809f23b6929161555ddba GIT binary patch literal 119 zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XLjJY5_^DsCm;D0uk)|K98W|L*_! z=luVC`?|mXzj8N8ItUr;d3|gDfBF6Yj!kLsY${3eXfQYtu|`P2dZSl^0fUxv!;e*R St0jRZF?hQAxvX-2Eg}E0!O4r_HgLeSFqj(V(ajO3w>p#b#*qZ TTP@!RG>yU2)z4*}Q$iB}cA+Ta literal 0 HcmV?d00001 diff --git a/static/images/trash_notebook_tl.png b/static/images/trash_notebook_tl.png new file mode 100644 index 0000000000000000000000000000000000000000..602d60c404012eb6499fd51fe6f57180bdde38d5 GIT binary patch literal 123 zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XKoJY5_^DsJWWD)KQHa4`S;|N6j$ z4=i#G440P*3v(}e#uqhH(%^3I85frWXB1jOSm|uVB3o#Ma>l7y8OD)z%kH T<652rG>yU2)z4*}Q$iB}Vnruo literal 0 HcmV?d00001 diff --git a/static/images/trash_notebook_tr.png b/static/images/trash_notebook_tr.png new file mode 100644 index 0000000000000000000000000000000000000000..d6d2aa85515ff9fed0f37db9664fa5821ab66557 GIT binary patch literal 117 zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XK2JY5_^DsJVT-N?z{z~LPDef~Kw z_W~xzoT4WOyt?CUdls!KD0g95#dY_u@S&8n6K8mv_rx5qsAj64cR=pQ+bP0l+XkK)7mIn literal 0 HcmV?d00001 diff --git a/view/Link_area.py b/view/Link_area.py index 03f15b1..d1926f8 100644 --- a/view/Link_area.py +++ b/view/Link_area.py @@ -1,4 +1,5 @@ from Tags import Div, Span, H4, A +from Rounded_div import Rounded_div class Link_area( Div ): @@ -44,14 +45,15 @@ class Link_area( Div ): class_ = u"link_area_item", ) or None, - ( notebook.name == u"trash" ) and Div( + ( notebook.name == u"trash" ) and Rounded_div( + u"trash_notebook", A( u"trash", href = u"#", id = u"trash_link", title = u"Look here for notes you've deleted.", ), - class_ = u"link_area_item current_trash_notebook_name", + class_ = u"link_area_item", ) or None, ) or None, @@ -60,15 +62,23 @@ class Link_area( Div ): Div( ( len( linked_notebooks ) > 0 ) and H4( u"notebooks" ) or None, - [ Span( - Div( + [ ( nb.object_id == notebook.object_id ) and Rounded_div( + u"current_notebook", A( nb.name, href = u"/notebooks/%s" % nb.object_id, id = u"notebook_%s" % nb.object_id, ), - class_ = ( nb.object_id == notebook.object_id ) and u"link_area_item current_notebook_name" or u"link_area_item", - ) ) for nb in linked_notebooks ], + class_ = u"link_area_item", + ) or + Div( + A( + nb.name, + href = u"/notebooks/%s" % nb.object_id, + id = u"notebook_%s" % nb.object_id, + ), + class_ = u"link_area_item", + ) for nb in linked_notebooks ], id = u"notebooks_area" ), diff --git a/view/Main_page.py b/view/Main_page.py index 35b4d97..2f4655d 100644 --- a/view/Main_page.py +++ b/view/Main_page.py @@ -6,6 +6,7 @@ from User_area import User_area from Link_area import Link_area from Toolbar import Toolbar from Json import Json +from Rounded_div import Rounded_div class Main_page( Page ): @@ -95,7 +96,8 @@ class Main_page( Page ): ), id = u"top_area", ), - Div( + Rounded_div( + ( notebook.name == u"trash" ) and u"trash_notebook" or u"current_notebook", Strong( notebook.name ), parent_id and Span( u" | ", @@ -104,10 +106,11 @@ class Main_page( Page ): A( u"return to notebook", href = u"/notebooks/%s" % parent_id ), ) or None, id = u"notebook_header_area", - class_ = ( notebook.name == u"trash" ) and u"current_trash_notebook_name" or u"current_notebook_name", + corners = ( u"tl", u"tr", u"br" ), ), Div( - Div( + Rounded_div( + ( notebook.name == u"trash" ) and u"trash_notebook_inner" or u"current_notebook_inner", Div( id = u"notes", ), @@ -125,9 +128,10 @@ class Main_page( Page ): type = u"text/javascript", ), id = u"notebook_background", + corners = ( u"tl", ), ), id = u"notebook_border", - class_ = ( notebook.name == u"trash" ) and u"current_trash_notebook_name" or u"current_notebook_name", + class_ = ( notebook.name == u"trash" ) and u"trash_notebook_color" or u"current_notebook_color", ), id = u"center_area", ), diff --git a/view/Rounded_div.py b/view/Rounded_div.py new file mode 100644 index 0000000..fc6fff5 --- /dev/null +++ b/view/Rounded_div.py @@ -0,0 +1,26 @@ +from Tags import Div + + +class Rounded_div( Div ): + def __init__( self, image_name, *args, **kwargs ): + # if no corners were specified, assumed all corners should be rounded + corners = kwargs.pop( "corners", [] ) + if len( corners ) == 0: + corners = ( u"tl", u"tr", u"bl", u"br" ) + + div = Div( + *args, + **kwargs + ) + + for corner in corners: + div = Div( + div, + class_ = u"%s_%s" % ( image_name, corner ), + ) + + Div.__init__( + self, + div, + class_ = u"%s_color" % image_name, + )