Browse Source

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).
Dan Helfman 9 years ago
parent
commit
f46e2a8fec
100 changed files with 45 additions and 164 deletions
  1. 2
    0
      setup.py
  2. 40
    164
      static/css/style.css
  3. 3
    0
      static/images/images.txt
  4. BIN
      static/images/toolbar/attach_button.png
  5. BIN
      static/images/toolbar/attach_button.xcf
  6. BIN
      static/images/toolbar/attach_button_down.png
  7. BIN
      static/images/toolbar/attach_button_down.xcf
  8. BIN
      static/images/toolbar/attach_button_down_hover.png
  9. BIN
      static/images/toolbar/attach_button_down_hover.xcf
  10. BIN
      static/images/toolbar/attach_button_hover.png
  11. BIN
      static/images/toolbar/attach_button_hover.xcf
  12. BIN
      static/images/toolbar/bold_button.png
  13. BIN
      static/images/toolbar/bold_button.xcf
  14. BIN
      static/images/toolbar/bold_button_down.png
  15. BIN
      static/images/toolbar/bold_button_down.xcf
  16. BIN
      static/images/toolbar/bold_button_down_hover.png
  17. BIN
      static/images/toolbar/bold_button_down_hover.xcf
  18. BIN
      static/images/toolbar/bold_button_hover.png
  19. BIN
      static/images/toolbar/bold_button_hover.xcf
  20. BIN
      static/images/toolbar/bullet_list_button.png
  21. BIN
      static/images/toolbar/bullet_list_button.xcf
  22. BIN
      static/images/toolbar/bullet_list_button_down.png
  23. BIN
      static/images/toolbar/bullet_list_button_down.xcf
  24. BIN
      static/images/toolbar/bullet_list_button_down_hover.png
  25. BIN
      static/images/toolbar/bullet_list_button_down_hover.xcf
  26. BIN
      static/images/toolbar/bullet_list_button_hover.png
  27. BIN
      static/images/toolbar/bullet_list_button_hover.xcf
  28. BIN
      static/images/toolbar/buttons.png
  29. BIN
      static/images/toolbar/font_button.png
  30. BIN
      static/images/toolbar/font_button.xcf
  31. BIN
      static/images/toolbar/font_button_down.png
  32. BIN
      static/images/toolbar/font_button_down.xcf
  33. BIN
      static/images/toolbar/font_button_down_hover.png
  34. BIN
      static/images/toolbar/font_button_down_hover.xcf
  35. BIN
      static/images/toolbar/font_button_hover.png
  36. BIN
      static/images/toolbar/font_button_hover.xcf
  37. BIN
      static/images/toolbar/insert_button.png
  38. BIN
      static/images/toolbar/insert_button.xcf
  39. BIN
      static/images/toolbar/insert_button_down.png
  40. BIN
      static/images/toolbar/insert_button_down.xcf
  41. BIN
      static/images/toolbar/insert_button_down_hover.png
  42. BIN
      static/images/toolbar/insert_button_down_hover.xcf
  43. BIN
      static/images/toolbar/insert_button_hover.png
  44. BIN
      static/images/toolbar/insert_button_hover.xcf
  45. BIN
      static/images/toolbar/italic_button.png
  46. BIN
      static/images/toolbar/italic_button.xcf
  47. BIN
      static/images/toolbar/italic_button_down.png
  48. BIN
      static/images/toolbar/italic_button_down.xcf
  49. BIN
      static/images/toolbar/italic_button_down_hover.png
  50. BIN
      static/images/toolbar/italic_button_down_hover.xcf
  51. BIN
      static/images/toolbar/italic_button_hover.png
  52. BIN
      static/images/toolbar/italic_button_hover.xcf
  53. BIN
      static/images/toolbar/link_button.png
  54. BIN
      static/images/toolbar/link_button.xcf
  55. BIN
      static/images/toolbar/link_button_down.png
  56. BIN
      static/images/toolbar/link_button_down.xcf
  57. BIN
      static/images/toolbar/link_button_down_hover.png
  58. BIN
      static/images/toolbar/link_button_down_hover.xcf
  59. BIN
      static/images/toolbar/link_button_hover.png
  60. BIN
      static/images/toolbar/link_button_hover.xcf
  61. BIN
      static/images/toolbar/new_note_button.png
  62. BIN
      static/images/toolbar/new_note_button.xcf
  63. BIN
      static/images/toolbar/new_note_button_down.png
  64. BIN
      static/images/toolbar/new_note_button_down.xcf
  65. BIN
      static/images/toolbar/new_note_button_down_hover.png
  66. BIN
      static/images/toolbar/new_note_button_down_hover.xcf
  67. BIN
      static/images/toolbar/new_note_button_hover.png
  68. BIN
      static/images/toolbar/new_note_button_hover.xcf
  69. BIN
      static/images/toolbar/numbered_list_button.png
  70. BIN
      static/images/toolbar/numbered_list_button.xcf
  71. BIN
      static/images/toolbar/numbered_list_button_down.png
  72. BIN
      static/images/toolbar/numbered_list_button_down.xcf
  73. BIN
      static/images/toolbar/numbered_list_button_down_hover.png
  74. BIN
      static/images/toolbar/numbered_list_button_down_hover.xcf
  75. BIN
      static/images/toolbar/numbered_list_button_hover.png
  76. BIN
      static/images/toolbar/numbered_list_button_hover.xcf
  77. BIN
      static/images/toolbar/paperclip.png
  78. BIN
      static/images/toolbar/small/attach_button.png
  79. BIN
      static/images/toolbar/small/attach_button.xcf
  80. BIN
      static/images/toolbar/small/attach_button_down.png
  81. BIN
      static/images/toolbar/small/attach_button_down.xcf
  82. BIN
      static/images/toolbar/small/attach_button_down_hover.png
  83. BIN
      static/images/toolbar/small/attach_button_down_hover.xcf
  84. BIN
      static/images/toolbar/small/attach_button_hover.png
  85. BIN
      static/images/toolbar/small/attach_button_hover.xcf
  86. BIN
      static/images/toolbar/small/bold_button.png
  87. BIN
      static/images/toolbar/small/bold_button.xcf
  88. BIN
      static/images/toolbar/small/bold_button_down.png
  89. BIN
      static/images/toolbar/small/bold_button_down.xcf
  90. BIN
      static/images/toolbar/small/bold_button_down_hover.png
  91. BIN
      static/images/toolbar/small/bold_button_down_hover.xcf
  92. BIN
      static/images/toolbar/small/bold_button_hover.png
  93. BIN
      static/images/toolbar/small/bold_button_hover.xcf
  94. BIN
      static/images/toolbar/small/bullet_list_button.png
  95. BIN
      static/images/toolbar/small/bullet_list_button.xcf
  96. BIN
      static/images/toolbar/small/bullet_list_button_down.png
  97. BIN
      static/images/toolbar/small/bullet_list_button_down.xcf
  98. BIN
      static/images/toolbar/small/bullet_list_button_down_hover.png
  99. BIN
      static/images/toolbar/small/bullet_list_button_down_hover.xcf
  100. 0
    0
      static/images/toolbar/small/bullet_list_button_hover.png

+ 2
- 0
setup.py View File

@@ -258,6 +258,8 @@ data_files = [
258 258
   ] ) ),
259 259
   ( "static/images/toolbar", files( "static/images/toolbar/*.*", excludes = [ "static/images/toolbar/*.xcf" ] ) ),
260 260
   ( "static/images/toolbar/small", files( "static/images/toolbar/small/*.*", excludes = [ "static/images/toolbar/small/*.xcf" ]  ) ),
261
+  ( "static/images/toolbar/themes/*", files( "static/images/toolbar/themes/*/*.*", excludes = [ "static/images/toolbar//themes/*/*.xcf" ] ) ),
262
+  ( "static/images/toolbar/themes/*/small", files( "static/images/toolbar/themes/*/small/*.*", excludes = [ "static/images/toolbar/themes/*/small/*.xcf" ]  ) ),
261 263
   ( "static/js", files( "static/js/*.*" ) ),
262 264
   ( "static/js", files( "static/js/*_LICENSE" ) ),
263 265
   ( "model/delta", files( "model/delta/*.sqlite" ) ),

+ 40
- 164
static/css/style.css View File

@@ -58,203 +58,79 @@ h1 {
58 58
 }
59 59
 
60 60
 #toolbar .image_button {
61
+  background: transparent url(/static/images/toolbar/buttons.png);
62
+  height: 40px;
63
+  width: 40px;
64
+  padding: 0px;
65
+  border-style: none;
61 66
   outline: none;
67
+  position: relative;
62 68
 }
63 69
 
64
-#toolbar div {
65
-  margin-bottom: 0.1em;
66
-}
67
-
68
-#new_note_button_hover_preload {
69
-  height: 0;
70
-  overflow: hidden;
71
-  background-image: url(/static/images/toolbar/new_note_button_hover.png);
72
-}
73
-
74
-#link_button_hover_preload {
75
-  height: 0;
76
-  overflow: hidden;
77
-  background-image: url(/static/images/toolbar/link_button_hover.png);
78
-}
79
-
80
-#attach_button_hover_preload {
81
-  height: 0;
82
-  overflow: hidden;
83
-  background-image: url(/static/images/toolbar/attach_button_hover.png);
84
-}
85
-
86
-#bold_button_hover_preload {
87
-  height: 0;
88
-  overflow: hidden;
89
-  background-image: url(/static/images/toolbar/bold_button_hover.png);
90
-}
91
-
92
-#italic_button_hover_preload {
93
-  height: 0;
94
-  overflow: hidden;
95
-  background-image: url(/static/images/toolbar/italic_button_hover.png);
96
-}
97
-
98
-#underline_button_hover_preload {
99
-  height: 0;
100
-  overflow: hidden;
101
-  background-image: url(/static/images/toolbar/underline_button_hover.png);
102
-}
103
-
104
-#strikethrough_button_hover_preload {
105
-  height: 0;
106
-  overflow: hidden;
107
-  background-image: url(/static/images/toolbar/strikethrough_button_hover.png);
108
-}
109
-
110
-#font_button_hover_preload {
111
-  height: 0;
112
-  overflow: hidden;
113
-  background-image: url(/static/images/toolbar/font_button_hover.png);
114
-}
115
-
116
-#bullet_list_button_hover_preload {
117
-  height: 0;
118
-  overflow: hidden;
119
-  background-image: url(/static/images/toolbar/bullet_list_button_hover.png);
120
-}
121
-
122
-#numbered_list_button_hover_preload {
123
-  height: 0;
124
-  overflow: hidden;
125
-  background-image: url(/static/images/toolbar/numbered_list_button_hover.png);
126
-}
127
-
128
-#new_note_button_down_hover_preload {
129
-  height: 0;
130
-  overflow: hidden;
131
-  background-image: url(/static/images/toolbar/new_note_button_down_hover.png);
132
-}
133
-
134
-#link_button_down_hover_preload {
135
-  height: 0;
136
-  overflow: hidden;
137
-  background-image: url(/static/images/toolbar/link_button_down_hover.png);
138
-}
139
-
140
-#attach_button_down_hover_preload {
141
-  height: 0;
142
-  overflow: hidden;
143
-  background-image: url(/static/images/toolbar/attach_button_down_hover.png);
144
-}
145
-
146
-#bold_button_down_hover_preload {
147
-  height: 0;
148
-  overflow: hidden;
149
-  background-image: url(/static/images/toolbar/bold_button_down_hover.png);
150
-}
151
-
152
-#italic_button_down_hover_preload {
153
-  height: 0;
154
-  overflow: hidden;
155
-  background-image: url(/static/images/toolbar/italic_button_down_hover.png);
156
-}
157
-
158
-#underline_button_down_hover_preload {
159
-  height: 0;
160
-  overflow: hidden;
161
-  background-image: url(/static/images/toolbar/underline_button_down_hover.png);
162
-}
163
-
164
-#strikethrough_button_down_hover_preload {
165
-  height: 0;
166
-  overflow: hidden;
167
-  background-image: url(/static/images/toolbar/strikethrough_button_down_hover.png);
168
-}
169
-
170
-#font_button_down_hover_preload {
171
-  height: 0;
172
-  overflow: hidden;
173
-  background-image: url(/static/images/toolbar/font_button_down_hover.png);
174
-}
175
-
176
-#bullet_list_button_down_hover_preload {
177
-  height: 0;
178
-  overflow: hidden;
179
-  background-image: url(/static/images/toolbar/bullet_list_button_down_hover.png);
70
+#toolbar .button_background {
71
+  background: transparent url(/static/images/toolbar/themes/default/buttons.png);
72
+  background-position: 40px 0;
73
+  height: 40px;
74
+  width: 40px;
75
+  padding: 0px;
76
+  border-style: none;
77
+  margin-bottom: 0.25em;
180 78
 }
181 79
 
182
-#numbered_list_button_down_hover_preload {
183
-  height: 0;
184
-  overflow: hidden;
185
-  background-image: url(/static/images/toolbar/numbered_list_button_down_hover.png);
80
+#toolbar #newNote {
81
+  background-position: 200px 0;
186 82
 }
187 83
 
188
-#new_note_button_down_preload {
189
-  height: 0;
190
-  overflow: hidden;
191
-  background-image: url(/static/images/toolbar/new_note_button_down.png);
84
+#toolbar #createLink {
85
+  background-position: 240px 0;
192 86
 }
193 87
 
194
-#link_button_down_preload {
195
-  height: 0;
196
-  overflow: hidden;
197
-  background-image: url(/static/images/toolbar/link_button_down.png);
88
+#toolbar #attachFile {
89
+  background-position: 0 0;
198 90
 }
199 91
 
200
-#attach_button_down_preload {
201
-  height: 0;
202
-  overflow: hidden;
203
-  background-image: url(/static/images/toolbar/attach_button_down.png);
92
+#toolbar #bold {
93
+  background-position: 440px 0;
204 94
 }
205 95
 
206
-#bold_button_down_preload {
207
-  height: 0;
208
-  overflow: hidden;
209
-  background-image: url(/static/images/toolbar/bold_button_down.png);
96
+#toolbar #italic {
97
+  background-position: 280px 0;
210 98
 }
211 99
 
212
-#italic_button_down_preload {
213
-  height: 0;
214
-  overflow: hidden;
215
-  background-image: url(/static/images/toolbar/italic_button_down.png);
100
+#toolbar #underline {
101
+  background-position: 40px 0;
216 102
 }
217 103
 
218
-#underline_button_down_preload {
219
-  height: 0;
220
-  overflow: hidden;
221
-  background-image: url(/static/images/toolbar/underline_button_down.png);
104
+#toolbar #strikethrough {
105
+  background-position: 120px 0;
222 106
 }
223 107
 
224
-#strikethrough_button_down_preload {
225
-  height: 0;
226
-  overflow: hidden;
227
-  background-image: url(/static/images/toolbar/strikethrough_button_down.png);
108
+#toolbar #font {
109
+  background-position: 360px 0;
228 110
 }
229 111
 
230
-#font_button_down_preload {
231
-  height: 0;
232
-  overflow: hidden;
233
-  background-image: url(/static/images/toolbar/font_button_down.png);
112
+#toolbar #title {
113
+  background-position: 80px 0;
234 114
 }
235 115
 
236
-#bullet_list_button_down_preload {
237
-  height: 0;
238
-  overflow: hidden;
239
-  background-image: url(/static/images/toolbar/bullet_list_button_down.png);
116
+#toolbar #insertUnorderedList {
117
+  background-position: 400px 0;
240 118
 }
241 119
 
242
-#numbered_list_button_down_preload {
243
-  height: 0;
244
-  overflow: hidden;
245
-  background-image: url(/static/images/toolbar/numbered_list_button_down.png);
120
+#toolbar #insertOrderedList {
121
+  background-position: 160px 0;
246 122
 }
247 123
 
248
-#current_notebook_up_hover_preload {
124
+#buttons_preload {
249 125
   height: 0;
250 126
   overflow: hidden;
251
-  background-image: url(/static/images/up_arrow_hover.png);
127
+  background-image: url(/static/images/toolbar/buttons.png);
252 128
 }
253 129
 
254
-#current_notebook_down_hover_preload {
130
+#theme_default_buttons_preload {
255 131
   height: 0;
256 132
   overflow: hidden;
257
-  background-image: url(/static/images/down_arrow_hover.png);
133
+  background-image: url(/static/images/toolbar/themes/default/buttons.png);
258 134
 }
259 135
 
260 136
 #tree_arrow_hover_preload {

+ 3
- 0
static/images/images.txt View File

@@ -10,6 +10,9 @@ buttons are at 14 pt. The link button is at 8 pt. The list buttons are at 6
10 10
 pt with a -3 pixel line spacing. Down (pressed) buttons have their text offset
11 11
 by one pixel down and one pixel right.
12 12
 
13
+The combined toolbar buttons image is created with the "montage" ImageMagick
14
+command. Use tools/tile_images.sh to do this.
15
+
13 16
 To make the white glowing effect (which isn't present on any buttons
14 17
 currently), start with black text on a transparent background in the Gimp.
15 18
 Duplicate the layer, and move that duplicate underneath the original layer.

BIN
static/images/toolbar/attach_button.png View File


BIN
static/images/toolbar/attach_button.xcf View File


BIN
static/images/toolbar/attach_button_down.png View File


BIN
static/images/toolbar/attach_button_down.xcf View File


BIN
static/images/toolbar/attach_button_down_hover.png View File


BIN
static/images/toolbar/attach_button_down_hover.xcf View File


BIN
static/images/toolbar/attach_button_hover.png View File


BIN
static/images/toolbar/attach_button_hover.xcf View File


BIN
static/images/toolbar/bold_button.png View File


BIN
static/images/toolbar/bold_button.xcf View File


BIN
static/images/toolbar/bold_button_down.png View File


BIN
static/images/toolbar/bold_button_down.xcf View File


BIN
static/images/toolbar/bold_button_down_hover.png View File


BIN
static/images/toolbar/bold_button_down_hover.xcf View File


BIN
static/images/toolbar/bold_button_hover.png View File


BIN
static/images/toolbar/bold_button_hover.xcf View File


BIN
static/images/toolbar/bullet_list_button.png View File


BIN
static/images/toolbar/bullet_list_button.xcf View File


BIN
static/images/toolbar/bullet_list_button_down.png View File


BIN
static/images/toolbar/bullet_list_button_down.xcf View File


BIN
static/images/toolbar/bullet_list_button_down_hover.png View File


BIN
static/images/toolbar/bullet_list_button_down_hover.xcf View File


BIN
static/images/toolbar/bullet_list_button_hover.png View File


BIN
static/images/toolbar/bullet_list_button_hover.xcf View File


BIN
static/images/toolbar/buttons.png View File


BIN
static/images/toolbar/font_button.png View File


BIN
static/images/toolbar/font_button.xcf View File


BIN
static/images/toolbar/font_button_down.png View File


BIN
static/images/toolbar/font_button_down.xcf View File


BIN
static/images/toolbar/font_button_down_hover.png View File


BIN
static/images/toolbar/font_button_down_hover.xcf View File


BIN
static/images/toolbar/font_button_hover.png View File


BIN
static/images/toolbar/font_button_hover.xcf View File


BIN
static/images/toolbar/insert_button.png View File


BIN
static/images/toolbar/insert_button.xcf View File


BIN
static/images/toolbar/insert_button_down.png View File


BIN
static/images/toolbar/insert_button_down.xcf View File


BIN
static/images/toolbar/insert_button_down_hover.png View File


BIN
static/images/toolbar/insert_button_down_hover.xcf View File


BIN
static/images/toolbar/insert_button_hover.png View File


BIN
static/images/toolbar/insert_button_hover.xcf View File


BIN
static/images/toolbar/italic_button.png View File


BIN
static/images/toolbar/italic_button.xcf View File


BIN
static/images/toolbar/italic_button_down.png View File


BIN
static/images/toolbar/italic_button_down.xcf View File


BIN
static/images/toolbar/italic_button_down_hover.png View File


BIN
static/images/toolbar/italic_button_down_hover.xcf View File


BIN
static/images/toolbar/italic_button_hover.png View File


BIN
static/images/toolbar/italic_button_hover.xcf View File


BIN
static/images/toolbar/link_button.png View File


BIN
static/images/toolbar/link_button.xcf View File


BIN
static/images/toolbar/link_button_down.png View File


BIN
static/images/toolbar/link_button_down.xcf View File


BIN
static/images/toolbar/link_button_down_hover.png View File


BIN
static/images/toolbar/link_button_down_hover.xcf View File


BIN
static/images/toolbar/link_button_hover.png View File


BIN
static/images/toolbar/link_button_hover.xcf View File


BIN
static/images/toolbar/new_note_button.png View File


BIN
static/images/toolbar/new_note_button.xcf View File


BIN
static/images/toolbar/new_note_button_down.png View File


BIN
static/images/toolbar/new_note_button_down.xcf View File


BIN
static/images/toolbar/new_note_button_down_hover.png View File


BIN
static/images/toolbar/new_note_button_down_hover.xcf View File


BIN
static/images/toolbar/new_note_button_hover.png View File


BIN
static/images/toolbar/new_note_button_hover.xcf View File


BIN
static/images/toolbar/numbered_list_button.png View File


BIN
static/images/toolbar/numbered_list_button.xcf View File


BIN
static/images/toolbar/numbered_list_button_down.png View File


BIN
static/images/toolbar/numbered_list_button_down.xcf View File


BIN
static/images/toolbar/numbered_list_button_down_hover.png View File


BIN
static/images/toolbar/numbered_list_button_down_hover.xcf View File


BIN
static/images/toolbar/numbered_list_button_hover.png View File


BIN
static/images/toolbar/numbered_list_button_hover.xcf View File


BIN
static/images/toolbar/paperclip.png View File


BIN
static/images/toolbar/small/attach_button.png View File


BIN
static/images/toolbar/small/attach_button.xcf View File


BIN
static/images/toolbar/small/attach_button_down.png View File


BIN
static/images/toolbar/small/attach_button_down.xcf View File


BIN
static/images/toolbar/small/attach_button_down_hover.png View File


BIN
static/images/toolbar/small/attach_button_down_hover.xcf View File


BIN
static/images/toolbar/small/attach_button_hover.png View File


BIN
static/images/toolbar/small/attach_button_hover.xcf View File


BIN
static/images/toolbar/small/bold_button.png View File


BIN
static/images/toolbar/small/bold_button.xcf View File


BIN
static/images/toolbar/small/bold_button_down.png View File


BIN
static/images/toolbar/small/bold_button_down.xcf View File


BIN
static/images/toolbar/small/bold_button_down_hover.png View File


BIN
static/images/toolbar/small/bold_button_down_hover.xcf View File


BIN
static/images/toolbar/small/bold_button_hover.png View File


BIN
static/images/toolbar/small/bold_button_hover.xcf View File


BIN
static/images/toolbar/small/bullet_list_button.png View File


BIN
static/images/toolbar/small/bullet_list_button.xcf View File


BIN
static/images/toolbar/small/bullet_list_button_down.png View File


BIN
static/images/toolbar/small/bullet_list_button_down.xcf View File


BIN
static/images/toolbar/small/bullet_list_button_down_hover.png View File


BIN
static/images/toolbar/small/bullet_list_button_down_hover.xcf View File


+ 0
- 0
static/images/toolbar/small/bullet_list_button_hover.png View File


Some files were not shown because too many files changed in this diff