witten/luminotes
Archived
1
0
Fork 0
Code Releases Activity

Switching to new image-based buttons on the toolbar. Also preloading those images for great premature optimization.

Browse Source
This commit is contained in:
Dan Helfman 2007-10-25 23:19:57 +00:00
parent 1c4223d1e2
commit c23515d249
6 changed files with 359 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
static/css/note.css
View File

@ -1,3 +1,51 @@
#new_note_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/new_note_button.png);
}
#link_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/link_button.png);
}
#bold_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/bold_button.png);
}
#italic_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/italic_button.png);
}
#underline_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/underline_button.png);
}
#title_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/title_button.png);
}
#bullet_list_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/bullet_list_button.png);
}
#numbered_list_button_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/numbered_list_button.png);
}
body { body {
padding: 1em; padding: 1em;
line-height: 140%; line-height: 140%;

166
static/css/style.css
View File

@ -47,72 +47,156 @@ ol li {
float: right; float: right;
} }
#toolbar .button { #toolbar .image_button {
border-color: #d0e0f0;
border-style: solid;
border-width: 2px;
background-color: #d0e0f0;
height: 2em;
width: 2em;
font-size: 125%;
text-align: center;
vertical-align: middle;
display: table-cell;
outline: none; outline: none;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
} }
#toolbar div { #toolbar div {
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
#toolbar .button:hover { #new_note_button_hover_preload {
border-color: #ffcc66; height: 0;
background-color: #ffcc66; overflow: hidden;
background-image: url(/static/images/new_note_button_hover.png);
} }
#toolbar .button_down { #link_button_hover_preload {
border-color: #c0d0e0; height: 0;
border-style: inset; overflow: hidden;
border-width: 2px; background-image: url(/static/images/link_button_hover.png);
background-color: #c0d0e0;
} }
#toolbar .button_down:hover { #bold_button_hover_preload {
border-color: #ffbb55; height: 0;
background-color: #ffbb55; overflow: hidden;
background-image: url(/static/images/bold_button_hover.png);
} }
.toolbar_link_text { #italic_button_hover_preload {
font-size: 60%; height: 0;
overflow: hidden;
background-image: url(/static/images/italic_button_hover.png);
} }
.toolbar_list_text { #underline_button_hover_preload {
font-size: 50%; height: 0;
line-height: 90%; overflow: hidden;
background-image: url(/static/images/underline_button_hover.png);
} }
#createLink { #title_button_hover_preload {
color: blue; height: 0;
font-weight: bold; overflow: hidden;
text-decoration: underline; background-image: url(/static/images/title_button_hover.png);
} }
#bold { #bullet_list_button_hover_preload {
font-weight: bold; height: 0;
overflow: hidden;
background-image: url(/static/images/bullet_list_button_hover.png);
} }
#italic { #numbered_list_button_hover_preload {
font-style: italic; height: 0;
overflow: hidden;
background-image: url(/static/images/numbered_list_button_hover.png);
} }
#underline { #new_note_button_down_hover_preload {
text-decoration: underline; height: 0;
overflow: hidden;
background-image: url(/static/images/new_note_button_down_hover.png);
} }
#title { #link_button_down_hover_preload {
font-weight: bold; height: 0;
overflow: hidden;
background-image: url(/static/images/link_button_down_hover.png);
}
#bold_button_down_hover_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/bold_button_down_hover.png);
}
#italic_button_down_hover_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/italic_button_down_hover.png);
}
#underline_button_down_hover_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/underline_button_down_hover.png);
}
#title_button_down_hover_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/title_button_down_hover.png);
}
#bullet_list_button_down_hover_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/bullet_list_button_down_hover.png);
}
#numbered_list_button_down_hover_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/numbered_list_button_down_hover.png);
}
#new_note_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/new_note_button_down.png);
}
#link_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/link_button_down.png);
}
#bold_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/bold_button_down.png);
}
#italic_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/italic_button_down.png);
}
#underline_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/underline_button_down.png);
}
#title_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/title_button_down.png);
}
#bullet_list_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/bullet_list_button_down.png);
}
#numbered_list_button_down_preload {
height: 0;
overflow: hidden;
background-image: url(/static/images/numbered_list_button_down.png);
} }
#link_area { #link_area {

9
static/html/features.html
View File

@ -39,3 +39,12 @@ Sound interesting? Then
<a href="/users/demo" target="_top">try the demo</a>, or <a href="/users/demo" target="_top">try the demo</a>, or
<a href="/notebooks/%s?note_id=new" target="_top">sign up</a> for a free account. <a href="/notebooks/%s?note_id=new" target="_top">sign up</a> for a free account.
</p> </p>
<span id="new_note_button_preload"></span>
<span id="link_button_preload"></span>
<span id="bold_button_preload"></span>
<span id="italic_button_preload"></span>
<span id="underline_button_preload"></span>
<span id="title_button_preload"></span>
<span id="bullet_list_button_preload"></span>
<span id="numbered_list_button_preload"></span>

11
static/html/welcome to your wiki.html
View File

@ -6,13 +6,14 @@
notes, each with a unique title. Right now you're reading a note titled notes, each with a unique title. Right now you're reading a note titled
"welcome to your wiki".</p> "welcome to your wiki".</p>
<p><b>To make a new wiki note</b>, click the "+" button on the left. Start by <p><b>To make a new wiki note</b>, click the new note button on the left.
typing a title for your new note and then press enter. Next, type the contents Start by typing a title for your new note and then press enter. Next, type the
of your new note, using the formatting buttons on the left for things like contents of your new note, using the formatting buttons on the left for things
bold, italics, or lists.</p> like bold, italics, or lists.</p>
<p><b>To link one note to another</b>, click the "<u>link</u>" button on the <p><b>To link one note to another</b>, click the "<u>link</u>" button on the
left, type a note title, and then click the button again.</p> left, type a note title, and then click the button again. Or, you can just
highlight some text and click the "<u>link</u>" button.</p>
<p><b>To follow a link to another note</b>, just click on the link and the <p><b>To follow a link to another note</b>, just click on the link and the
note will open up for you to view or edit. You can switch between notes simply note will open up for you to view or edit. You can switch between notes simply

99
static/js/Wiki.js
View File

@ -142,15 +142,23 @@ Wiki.prototype.populate = function ( startup_notes, note, note_read_write ) {
if ( this.notebook.read_write ) { if ( this.notebook.read_write ) {
connect( window, "onunload", function ( event ) { self.editor_focused( null, true ); } ); connect( window, "onunload", function ( event ) { self.editor_focused( null, true ); } );
connect( "newNote", "onclick", this, "create_blank_editor" );
connect( "createLink", "onclick", this, "toggle_link_button" );
connect( "bold", "onclick", function ( event ) { self.toggle_button( event, "bold" ); } ); connect( "bold", "onclick", function ( event ) { self.toggle_button( event, "bold" ); } );
connect( "italic", "onclick", function ( event ) { self.toggle_button( event, "italic" ); } ); connect( "italic", "onclick", function ( event ) { self.toggle_button( event, "italic" ); } );
connect( "underline", "onclick", function ( event ) { self.toggle_button( event, "underline" ); } ); connect( "underline", "onclick", function ( event ) { self.toggle_button( event, "underline" ); } );
connect( "title", "onclick", function ( event ) { self.toggle_button( event, "title", "h3" ); } ); connect( "title", "onclick", function ( event ) { self.toggle_button( event, "title", "h3" ); } );
connect( "insertUnorderedList", "onclick", function ( event ) { self.toggle_button( event, "insertUnorderedList" ); } ); connect( "insertUnorderedList", "onclick", function ( event ) { self.toggle_button( event, "insertUnorderedList" ); } );
connect( "insertOrderedList", "onclick", function ( event ) { self.toggle_button( event, "insertOrderedList" ); } ); connect( "insertOrderedList", "onclick", function ( event ) { self.toggle_button( event, "insertOrderedList" ); } );
connect( "createLink", "onclick", this, "toggle_link_button" );
connect( "newNote", "onmousedown", function ( event ) { addElementClass( "newNote", "button_down" ); } ); this.make_image_button( "newNote", "new_note", true );
connect( "newNote", "onmouseup", this, "create_blank_editor" ); this.make_image_button( "createLink", "link" );
this.make_image_button( "bold" );
this.make_image_button( "italic" );
this.make_image_button( "underline" );
this.make_image_button( "title" );
this.make_image_button( "insertUnorderedList", "bullet_list" );
this.make_image_button( "insertOrderedList", "numbered_list" );
// grab the next available object id // grab the next available object id
this.invoker.invoke( "/next_id", "POST", null, this.invoker.invoke( "/next_id", "POST", null,
@ -182,8 +190,6 @@ Wiki.prototype.background_clicked = function ( event ) {
Wiki.prototype.create_blank_editor = function ( event ) { Wiki.prototype.create_blank_editor = function ( event ) {
if ( event ) event.stop(); if ( event ) event.stop();
removeElementClass( "newNote", "button_down" );
// if we're within the trash, don't allow new note creation // if we're within the trash, don't allow new note creation
if ( this.notebook.name == "trash" ) { if ( this.notebook.name == "trash" ) {
this.display_error( "You can't create notes in the trash." ); this.display_error( "You can't create notes in the trash." );
@ -574,6 +580,82 @@ Wiki.prototype.editor_key_pressed = function ( editor, event ) {
} }
} }
IMAGE_DIR = "/static/images/";
Wiki.prototype.make_image_button = function ( name, filename_prefix, handle_mouse_up_and_down ) {
var button = getElement( name );
if ( !filename_prefix )
filename_prefix = name;
button.filename_prefix = filename_prefix;
connect( button, "onmouseover", function ( event ) {
if ( /_down/.test( button.src ) )
button.src = IMAGE_DIR + filename_prefix + "_button_down_hover.png";
else
button.src = IMAGE_DIR + filename_prefix + "_button_hover.png";
} );
connect( button, "onmouseout", function ( event ) {
if ( /_down/.test( button.src ) )
button.src = IMAGE_DIR + filename_prefix + "_button_down.png";
else
button.src = IMAGE_DIR + filename_prefix + "_button.png";
} );
if ( handle_mouse_up_and_down ) {
connect( button, "onmousedown", function ( event ) {
if ( /_hover/.test( button.src ) )
button.src = IMAGE_DIR + filename_prefix + "_button_down_hover.png";
else
button.src = IMAGE_DIR + filename_prefix + "_button_down.png";
} );
connect( button, "onmouseup", function ( event ) {
if ( /_hover/.test( button.src ) )
button.src = IMAGE_DIR + filename_prefix + "_button_hover.png";
else
button.src = IMAGE_DIR + filename_prefix + "_button.png";
} );
}
}
Wiki.prototype.down_image_button = function ( name ) {
var button = getElement( name );
if ( /_hover/.test( button.src ) )
button.src = IMAGE_DIR + button.filename_prefix + "_button_down_hover.png";
else
button.src = IMAGE_DIR + button.filename_prefix + "_button_down.png";
}
Wiki.prototype.up_image_button = function ( name ) {
var button = getElement( name );
if ( /_hover/.test( button.src ) )
button.src = IMAGE_DIR + button.filename_prefix + "_button_hover.png";
else
button.src = IMAGE_DIR + button.filename_prefix + "_button.png";
}
Wiki.prototype.toggle_image_button = function ( name ) {
var button = getElement( name );
if ( /_down/.test( button.src ) ) {
if ( /_hover/.test( button.src ) )
button.src = IMAGE_DIR + button.filename_prefix + "_button_hover.png";
else
button.src = IMAGE_DIR + button.filename_prefix + "_button.png";
return false;
} else {
if ( /_hover/.test( button.src ) )
button.src = IMAGE_DIR + button.filename_prefix + "_button_down_hover.png";
else
button.src = IMAGE_DIR + button.filename_prefix + "_button_down.png";
return true;
}
}
Wiki.prototype.toggle_button = function ( event, button_id, state_name ) { Wiki.prototype.toggle_button = function ( event, button_id, state_name ) {
this.clear_messages(); this.clear_messages();
this.clear_pulldowns(); this.clear_pulldowns();
@ -590,9 +672,9 @@ Wiki.prototype.toggle_button = function ( event, button_id, state_name ) {
Wiki.prototype.update_button = function ( button_id, state_name ) { Wiki.prototype.update_button = function ( button_id, state_name ) {
if ( this.focused_editor.state_enabled( state_name || button_id ) ) if ( this.focused_editor.state_enabled( state_name || button_id ) )
addElementClass( button_id, "button_down" ); this.down_image_button( button_id );
else else
removeElementClass( button_id, "button_down" ); this.up_image_button( button_id );
} }
Wiki.prototype.update_toolbar = function() { Wiki.prototype.update_toolbar = function() {
@ -614,8 +696,7 @@ Wiki.prototype.toggle_link_button = function ( event ) {
if ( this.focused_editor && this.focused_editor.read_write ) { if ( this.focused_editor && this.focused_editor.read_write ) {
this.focused_editor.focus(); this.focused_editor.focus();
toggleElementClass( "button_down", "createLink" ); if ( this.toggle_image_button( "createLink" ) )
if ( hasElementClass( "createLink", "button_down" ) )
this.focused_editor.start_link(); this.focused_editor.start_link();
else else
link = this.focused_editor.end_link(); link = this.focused_editor.end_link();

110
view/Toolbar.py
View File

@ -7,45 +7,97 @@ class Toolbar( Div ):
self, self,
Div( Div(
P( P(
Div( Div( Span( u"+", class_ = u"toolbar_text" ), id = u"newNote", title = u"new note [ctrl-N]", class_ = u"button" ) ), Div( Input(
Div( Div( type = u"image",
Span( id = u"newNote", title = u"new note [ctrl-N]",
u"link", src = u"/static/images/new_note_button.png",
class_ = u"toolbar_text toolbar_link_text", width = u"40", height = u"40",
), class_ = "image_button",
id = u"createLink", title = u"link [ctrl-L]", class_ = u"button" ) ),
Div( Input(
type = u"image",
id = u"createLink", title = u"link [ctrl-L]",
src = u"/static/images/link_button.png",
width = u"40", height = u"40",
class_ = "image_button",
) ), ) ),
), ),
P( P(
Div( Div( Span( u"B", class_ = u"toolbar_text" ), id = u"bold", title = u"bold [ctrl-B]", class_ = u"button" ) ), Div( Input(
Div( Div( Span( u"I", class_ = u"toolbar_text" ), id = u"italic", title = u"italic [ctrl-I]", class_ = u"button" ) ), type = u"image",
Div( Div( Span( u"U", class_ = u"toolbar_text" ), id = u"underline", title = u"underline [ctrl-U]", class_ = u"button" ) ), id = u"bold", title = u"bold [ctrl-B]",
Div( Div( Span( u"T", class_ = u"toolbar_text" ), id = u"title", title = u"title [ctrl-T]", class_ = u"button" ) ), src = u"/static/images/bold_button.png",
width = u"40", height = u"40",
class_ = "image_button",
) ),
Div( Input(
type = u"image",
id = u"italic", title = u"italic [ctrl-I]",
src = u"/static/images/italic_button.png",
width = u"40", height = u"40",
class_ = "image_button",
) ),
Div( Input(
type = u"image",
id = u"underline", title = u"underline [ctrl-U]",
src = u"/static/images/underline_button.png",
width = u"40", height = u"40",
class_ = "image_button",
) ),
Div( Input(
type = u"image",
id = u"title", title = u"title [ctrl-T]",
src = u"/static/images/title_button.png",
width = u"40", height = u"40",
class_ = "image_button",
) ),
), ),
P( P(
Div( Div( Div( Input(
Span( type = u"image",
u"&#149; &#8213;", Br(), id = u"insertUnorderedList", title = u"bullet list [ctrl-period]",
u"&#149; &#8213;", Br(), src = u"/static/images/bullet_list_button.png",
u"&#149; &#8213;", Br(), width = u"40", height = u"40",
Br( class_ = "undisplayed" ), # to make IE 6 happy. without this, the last list element is truncated class_ = "image_button",
class_ = u"toolbar_list_text",
),
id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", class_ = u"button",
) ), ) ),
Div( Div( Div( Input(
Span( type = u"image",
u"1.&#8213;", Br(), id = u"insertOrderedList", title = u"numbered list [ctrl-1]",
u"2.&#8213;", Br(), src = u"/static/images/numbered_list_button.png",
u"3.&#8213;", Br(), width = u"40", height = u"40",
Br( class_ = "undisplayed" ), class_ = "image_button",
class_ = u"toolbar_list_text",
),
id = u"insertOrderedList", title = u"numbered list [ctrl-1]", class_ = u"button",
) ), ) ),
), ),
class_ = u"button_wrapper", class_ = u"button_wrapper",
), ),
Span( id = "new_note_button_hover_preload" ),
Span( id = "link_button_hover_preload" ),
Span( id = "bold_button_hover_preload" ),
Span( id = "italic_button_hover_preload" ),
Span( id = "underline_button_hover_preload" ),
Span( id = "title_button_hover_preload" ),
Span( id = "bullet_list_button_hover_preload" ),
Span( id = "numbered_list_button_hover_preload" ),
Span( id = "new_note_button_down_hover_preload" ),
Span( id = "link_button_down_hover_preload" ),
Span( id = "bold_button_down_hover_preload" ),
Span( id = "italic_button_down_hover_preload" ),
Span( id = "underline_button_down_hover_preload" ),
Span( id = "title_button_down_hover_preload" ),
Span( id = "bullet_list_button_down_hover_preload" ),
Span( id = "numbered_list_button_down_hover_preload" ),
Span( id = "new_note_button_down_preload" ),
Span( id = "link_button_down_preload" ),
Span( id = "bold_button_down_preload" ),
Span( id = "italic_button_down_preload" ),
Span( id = "underline_button_down_preload" ),
Span( id = "title_button_down_preload" ),
Span( id = "bullet_list_button_down_preload" ),
Span( id = "numbered_list_button_down_preload" ),
id = u"toolbar", id = u"toolbar",
class_ = hide_toolbar and u"undisplayed" or None, class_ = hide_toolbar and u"undisplayed" or None,
) )