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 0000000..f65831e Binary files /dev/null and b/static/images/current_notebook_bl.png differ diff --git a/static/images/current_notebook_br.png b/static/images/current_notebook_br.png new file mode 100644 index 0000000..1bc556c Binary files /dev/null and b/static/images/current_notebook_br.png differ diff --git a/static/images/current_notebook_inner_tl.png b/static/images/current_notebook_inner_tl.png new file mode 100644 index 0000000..01321b3 Binary files /dev/null and b/static/images/current_notebook_inner_tl.png differ diff --git a/static/images/current_notebook_tl.png b/static/images/current_notebook_tl.png new file mode 100644 index 0000000..b3ff4ba Binary files /dev/null and b/static/images/current_notebook_tl.png differ diff --git a/static/images/current_notebook_tr.png b/static/images/current_notebook_tr.png new file mode 100644 index 0000000..d2d428b Binary files /dev/null and b/static/images/current_notebook_tr.png differ diff --git a/static/images/buttons.txt b/static/images/images.txt similarity index 76% rename from static/images/buttons.txt rename to static/images/images.txt index edf4ff7..ede73c5 100644 --- a/static/images/buttons.txt +++ b/static/images/images.txt @@ -11,3 +11,11 @@ Switch to the duplicate. Enable the "select contiguous regions" tool. Click on the duplicate layer's background. Invert selection. Grow selection by two pixels. Fill the entire selection with white (or whatever glow color you want). Select none. Gaussian blur the layer with a 5x5 pixel radius. + +To make round corner images, use Google's Rounded Corner Generator: + +http://ajaxian.com/archives/googles-rounded-corner-generator + +For instance: + +http://groups-beta.google.com/groups/roundedcorners?c=b0d0ff&bc=fafafa&w=6&h=6&a=tl diff --git a/static/images/trash_notebook_bl.png b/static/images/trash_notebook_bl.png new file mode 100644 index 0000000..a71eaf8 Binary files /dev/null and b/static/images/trash_notebook_bl.png differ diff --git a/static/images/trash_notebook_br.png b/static/images/trash_notebook_br.png new file mode 100644 index 0000000..5c66eae Binary files /dev/null and b/static/images/trash_notebook_br.png differ diff --git a/static/images/trash_notebook_inner_tl.png b/static/images/trash_notebook_inner_tl.png new file mode 100644 index 0000000..c6fb780 Binary files /dev/null and b/static/images/trash_notebook_inner_tl.png differ diff --git a/static/images/trash_notebook_tl.png b/static/images/trash_notebook_tl.png new file mode 100644 index 0000000..602d60c Binary files /dev/null and b/static/images/trash_notebook_tl.png differ diff --git a/static/images/trash_notebook_tr.png b/static/images/trash_notebook_tr.png new file mode 100644 index 0000000..d6d2aa8 Binary files /dev/null and b/static/images/trash_notebook_tr.png differ 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, + )