Refactored toolbar code and images. Now buttons come from a single composite / sprited image.
Remaining things to complete: * In WebKit, the button images are offset +5 pixels down. They shouldn't be. * Small "+" buttons under notebooks and the note tree are broken. * Toolbar resizing doesn't work anymore (TODO comment).
2
setup.py
|
@ -258,6 +258,8 @@ data_files = [
|
|||
] ) ),
|
||||
( "static/images/toolbar", files( "static/images/toolbar/*.*", excludes = [ "static/images/toolbar/*.xcf" ] ) ),
|
||||
( "static/images/toolbar/small", files( "static/images/toolbar/small/*.*", excludes = [ "static/images/toolbar/small/*.xcf" ] ) ),
|
||||
( "static/images/toolbar/themes/*", files( "static/images/toolbar/themes/*/*.*", excludes = [ "static/images/toolbar//themes/*/*.xcf" ] ) ),
|
||||
( "static/images/toolbar/themes/*/small", files( "static/images/toolbar/themes/*/small/*.*", excludes = [ "static/images/toolbar/themes/*/small/*.xcf" ] ) ),
|
||||
( "static/js", files( "static/js/*.*" ) ),
|
||||
( "static/js", files( "static/js/*_LICENSE" ) ),
|
||||
( "model/delta", files( "model/delta/*.sqlite" ) ),
|
||||
|
|
|
@ -58,203 +58,79 @@ h1 {
|
|||
}
|
||||
|
||||
#toolbar .image_button {
|
||||
background: transparent url(/static/images/toolbar/buttons.png);
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 0px;
|
||||
border-style: none;
|
||||
outline: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#toolbar div {
|
||||
margin-bottom: 0.1em;
|
||||
#toolbar .button_background {
|
||||
background: transparent url(/static/images/toolbar/themes/default/buttons.png);
|
||||
background-position: 40px 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 0px;
|
||||
border-style: none;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
#new_note_button_hover_preload {
|
||||
#toolbar #newNote {
|
||||
background-position: 200px 0;
|
||||
}
|
||||
|
||||
#toolbar #createLink {
|
||||
background-position: 240px 0;
|
||||
}
|
||||
|
||||
#toolbar #attachFile {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#toolbar #bold {
|
||||
background-position: 440px 0;
|
||||
}
|
||||
|
||||
#toolbar #italic {
|
||||
background-position: 280px 0;
|
||||
}
|
||||
|
||||
#toolbar #underline {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
|
||||
#toolbar #strikethrough {
|
||||
background-position: 120px 0;
|
||||
}
|
||||
|
||||
#toolbar #font {
|
||||
background-position: 360px 0;
|
||||
}
|
||||
|
||||
#toolbar #title {
|
||||
background-position: 80px 0;
|
||||
}
|
||||
|
||||
#toolbar #insertUnorderedList {
|
||||
background-position: 400px 0;
|
||||
}
|
||||
|
||||
#toolbar #insertOrderedList {
|
||||
background-position: 160px 0;
|
||||
}
|
||||
|
||||
#buttons_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/new_note_button_hover.png);
|
||||
background-image: url(/static/images/toolbar/buttons.png);
|
||||
}
|
||||
|
||||
#link_button_hover_preload {
|
||||
#theme_default_buttons_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/link_button_hover.png);
|
||||
}
|
||||
|
||||
#attach_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/attach_button_hover.png);
|
||||
}
|
||||
|
||||
#bold_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/bold_button_hover.png);
|
||||
}
|
||||
|
||||
#italic_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/italic_button_hover.png);
|
||||
}
|
||||
|
||||
#underline_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/underline_button_hover.png);
|
||||
}
|
||||
|
||||
#strikethrough_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/strikethrough_button_hover.png);
|
||||
}
|
||||
|
||||
#font_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/font_button_hover.png);
|
||||
}
|
||||
|
||||
#bullet_list_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/bullet_list_button_hover.png);
|
||||
}
|
||||
|
||||
#numbered_list_button_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/numbered_list_button_hover.png);
|
||||
}
|
||||
|
||||
#new_note_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/new_note_button_down_hover.png);
|
||||
}
|
||||
|
||||
#link_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/link_button_down_hover.png);
|
||||
}
|
||||
|
||||
#attach_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/attach_button_down_hover.png);
|
||||
}
|
||||
|
||||
#bold_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/bold_button_down_hover.png);
|
||||
}
|
||||
|
||||
#italic_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/italic_button_down_hover.png);
|
||||
}
|
||||
|
||||
#underline_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/underline_button_down_hover.png);
|
||||
}
|
||||
|
||||
#strikethrough_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/strikethrough_button_down_hover.png);
|
||||
}
|
||||
|
||||
#font_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/font_button_down_hover.png);
|
||||
}
|
||||
|
||||
#bullet_list_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/bullet_list_button_down_hover.png);
|
||||
}
|
||||
|
||||
#numbered_list_button_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/numbered_list_button_down_hover.png);
|
||||
}
|
||||
|
||||
#new_note_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/new_note_button_down.png);
|
||||
}
|
||||
|
||||
#link_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/link_button_down.png);
|
||||
}
|
||||
|
||||
#attach_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/attach_button_down.png);
|
||||
}
|
||||
|
||||
#bold_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/bold_button_down.png);
|
||||
}
|
||||
|
||||
#italic_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/italic_button_down.png);
|
||||
}
|
||||
|
||||
#underline_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/underline_button_down.png);
|
||||
}
|
||||
|
||||
#strikethrough_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/strikethrough_button_down.png);
|
||||
}
|
||||
|
||||
#font_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/font_button_down.png);
|
||||
}
|
||||
|
||||
#bullet_list_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/bullet_list_button_down.png);
|
||||
}
|
||||
|
||||
#numbered_list_button_down_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/toolbar/numbered_list_button_down.png);
|
||||
}
|
||||
|
||||
#current_notebook_up_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/up_arrow_hover.png);
|
||||
}
|
||||
|
||||
#current_notebook_down_hover_preload {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-image: url(/static/images/down_arrow_hover.png);
|
||||
background-image: url(/static/images/toolbar/themes/default/buttons.png);
|
||||
}
|
||||
|
||||
#tree_arrow_hover_preload {
|
||||
|
|
|
@ -10,6 +10,9 @@ buttons are at 14 pt. The link button is at 8 pt. The list buttons are at 6
|
|||
pt with a -3 pixel line spacing. Down (pressed) buttons have their text offset
|
||||
by one pixel down and one pixel right.
|
||||
|
||||
The combined toolbar buttons image is created with the "montage" ImageMagick
|
||||
command. Use tools/tile_images.sh to do this.
|
||||
|
||||
To make the white glowing effect (which isn't present on any buttons
|
||||
currently), start with black text on a transparent background in the Gimp.
|
||||
Duplicate the layer, and move that duplicate underneath the original layer.
|
||||
|
|
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 714 B |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 716 B |
Before Width: | Height: | Size: 502 B |
Before Width: | Height: | Size: 950 B |
Before Width: | Height: | Size: 913 B |
Before Width: | Height: | Size: 496 B |
After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 963 B |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 954 B |
Before Width: | Height: | Size: 473 B |
Before Width: | Height: | Size: 901 B |
Before Width: | Height: | Size: 871 B |
Before Width: | Height: | Size: 472 B |
Before Width: | Height: | Size: 634 B |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 634 B |
Before Width: | Height: | Size: 673 B |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 689 B |
Before Width: | Height: | Size: 452 B |
Before Width: | Height: | Size: 880 B |
Before Width: | Height: | Size: 853 B |
Before Width: | Height: | Size: 451 B |
Before Width: | Height: | Size: 750 B |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 751 B |
Before Width: | Height: | Size: 743 B |
Before Width: | Height: | Size: 656 B |
Before Width: | Height: | Size: 750 B |
Before Width: | Height: | Size: 734 B |
Before Width: | Height: | Size: 641 B |
Before Width: | Height: | Size: 517 B |
Before Width: | Height: | Size: 634 B |
Before Width: | Height: | Size: 618 B |
Before Width: | Height: | Size: 505 B |
Before Width: | Height: | Size: 362 B |
Before Width: | Height: | Size: 496 B |
Before Width: | Height: | Size: 490 B |
Before Width: | Height: | Size: 361 B |