Switching to new image-based buttons on the toolbar. Also preloading those images for great premature optimization.
This commit is contained in:
Dan Helfman
parent
1c4223d1e2
commit
c23515d249
|
|
@ -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 {
|
||||
padding: 1em;
|
||||
line-height: 140%;
|
||||
|
|
|
|||
|
|
@ -47,72 +47,156 @@ ol li {
|
|||
float: right;
|
||||
}
|
||||
|
||||
#toolbar .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;
|
||||
#toolbar .image_button {
|
||||
outline: none;
|
||||
-moz-border-radius: 0.5em;
|
||||
-webkit-border-radius: 0.5em;
|
||||
}
|
||||
|
||||
#toolbar div {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
#toolbar .button:hover {
|
||||
border-color: #ffcc66;
|
||||
background-color: #ffcc66;
|
||||
#new_note_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/new_note_button_hover.png);
|
||||
}
|
||||
|
||||
#toolbar .button_down {
|
||||
border-color: #c0d0e0;
|
||||
border-style: inset;
|
||||
border-width: 2px;
|
||||
background-color: #c0d0e0;
|
||||
#link_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/link_button_hover.png);
|
||||
}
|
||||
|
||||
#toolbar .button_down:hover {
|
||||
border-color: #ffbb55;
|
||||
background-color: #ffbb55;
|
||||
#bold_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/bold_button_hover.png);
|
||||
}
|
||||
|
||||
.toolbar_link_text {
|
||||
font-size: 60%;
|
||||
#italic_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/italic_button_hover.png);
|
||||
}
|
||||
|
||||
.toolbar_list_text {
|
||||
font-size: 50%;
|
||||
line-height: 90%;
|
||||
#underline_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/underline_button_hover.png);
|
||||
}
|
||||
|
||||
#createLink {
|
||||
color: blue;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
#title_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/title_button_hover.png);
|
||||
}
|
||||
|
||||
#bold {
|
||||
font-weight: bold;
|
||||
#bullet_list_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/bullet_list_button_hover.png);
|
||||
}
|
||||
|
||||
#italic {
|
||||
font-style: italic;
|
||||
#numbered_list_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/numbered_list_button_hover.png);
|
||||
}
|
||||
|
||||
#underline {
|
||||
text-decoration: underline;
|
||||
#new_note_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/new_note_button_down_hover.png);
|
||||
}
|
||||
|
||||
#title {
|
||||
font-weight: bold;
|
||||
#link_button_down_hover_preload {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -39,3 +39,12 @@ Sound interesting? Then
|
|||
<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.
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@
|
|||
notes, each with a unique title. Right now you're reading a note titled
|
||||
"welcome to your wiki".</p>
|
||||
|
||||
<p><b>To make a new wiki note</b>, 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.</p>
|
||||
<p><b>To make a new wiki note</b>, 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.</p>
|
||||
|
||||
<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
|
||||
note will open up for you to view or edit. You can switch between notes simply
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
110
view/Toolbar.py
110
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,
|
||||
)
|
||||
|
|
|
|||
Reference in New Issue