From c23515d2490725828b32d1830543b92b687bc815 Mon Sep 17 00:00:00 2001
From: Dan Helfman
To make a new wiki note, click the "+" button on the left. Start by -typing a title for your new note and then press enter. Next, type the contents -of your new note, using the formatting buttons on the left for things like -bold, italics, or lists.
+To make a new wiki note, click the new note button on the left. +Start by typing a title for your new note and then press enter. Next, type the +contents of your new note, using the formatting buttons on the left for things +like bold, italics, or lists.
To link one note to another, click the "link" button on the -left, type a note title, and then click the button again.
+left, type a note title, and then click the button again. Or, you can just +highlight some text and click the "link" button.To follow a link to another note, just click on the link and the note will open up for you to view or edit. You can switch between notes simply diff --git a/static/js/Wiki.js b/static/js/Wiki.js index 5fc3d0b..dc97476 100644 --- a/static/js/Wiki.js +++ b/static/js/Wiki.js @@ -142,15 +142,23 @@ Wiki.prototype.populate = function ( startup_notes, note, note_read_write ) { if ( this.notebook.read_write ) { 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( "italic", "onclick", function ( event ) { self.toggle_button( event, "italic" ); } ); connect( "underline", "onclick", function ( event ) { self.toggle_button( event, "underline" ); } ); connect( "title", "onclick", function ( event ) { self.toggle_button( event, "title", "h3" ); } ); connect( "insertUnorderedList", "onclick", function ( event ) { self.toggle_button( event, "insertUnorderedList" ); } ); 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" ); } ); - connect( "newNote", "onmouseup", this, "create_blank_editor" ); + + this.make_image_button( "newNote", "new_note", true ); + 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 this.invoker.invoke( "/next_id", "POST", null, @@ -182,8 +190,6 @@ Wiki.prototype.background_clicked = function ( event ) { Wiki.prototype.create_blank_editor = function ( event ) { if ( event ) event.stop(); - removeElementClass( "newNote", "button_down" ); - // if we're within the trash, don't allow new note creation if ( this.notebook.name == "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 ) { this.clear_messages(); 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 ) { if ( this.focused_editor.state_enabled( state_name || button_id ) ) - addElementClass( button_id, "button_down" ); + this.down_image_button( button_id ); else - removeElementClass( button_id, "button_down" ); + this.up_image_button( button_id ); } 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 ) { this.focused_editor.focus(); - toggleElementClass( "button_down", "createLink" ); - if ( hasElementClass( "createLink", "button_down" ) ) + if ( this.toggle_image_button( "createLink" ) ) this.focused_editor.start_link(); else link = this.focused_editor.end_link(); diff --git a/view/Toolbar.py b/view/Toolbar.py index 7c8508d..7c82fdf 100644 --- a/view/Toolbar.py +++ b/view/Toolbar.py @@ -7,45 +7,97 @@ class Toolbar( Div ): self, Div( P( - Div( Div( Span( u"+", class_ = u"toolbar_text" ), id = u"newNote", title = u"new note [ctrl-N]", class_ = u"button" ) ), - Div( Div( - Span( - u"link", - class_ = u"toolbar_text toolbar_link_text", - ), - id = u"createLink", title = u"link [ctrl-L]", class_ = u"button" + Div( Input( + type = u"image", + id = u"newNote", title = u"new note [ctrl-N]", + src = u"/static/images/new_note_button.png", + width = u"40", height = u"40", + class_ = "image_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( - Div( Div( Span( u"B", class_ = u"toolbar_text" ), id = u"bold", title = u"bold [ctrl-B]", class_ = u"button" ) ), - Div( Div( Span( u"I", class_ = u"toolbar_text" ), id = u"italic", title = u"italic [ctrl-I]", class_ = u"button" ) ), - Div( Div( Span( u"U", class_ = u"toolbar_text" ), id = u"underline", title = u"underline [ctrl-U]", class_ = u"button" ) ), - Div( Div( Span( u"T", class_ = u"toolbar_text" ), id = u"title", title = u"title [ctrl-T]", class_ = u"button" ) ), + Div( Input( + type = u"image", + id = u"bold", title = u"bold [ctrl-B]", + 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( - Div( Div( - Span( - u" ―", Br(), - u" ―", Br(), - u" ―", Br(), - Br( class_ = "undisplayed" ), # to make IE 6 happy. without this, the last list element is truncated - class_ = u"toolbar_list_text", - ), - id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", class_ = u"button", + Div( Input( + type = u"image", + id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", + src = u"/static/images/bullet_list_button.png", + width = u"40", height = u"40", + class_ = "image_button", ) ), - Div( Div( - Span( - u"1.―", Br(), - u"2.―", Br(), - u"3.―", Br(), - Br( class_ = "undisplayed" ), - class_ = u"toolbar_list_text", - ), - id = u"insertOrderedList", title = u"numbered list [ctrl-1]", class_ = u"button", + Div( Input( + type = u"image", + id = u"insertOrderedList", title = u"numbered list [ctrl-1]", + src = u"/static/images/numbered_list_button.png", + width = u"40", height = u"40", + class_ = "image_button", ) ), ), 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", class_ = hide_toolbar and u"undisplayed" or None, )