Redesign of the editbar

19 files changed, 98 insertions, 61 deletions

diff --git a/etherpad/src/static/css/pad2_ejs.css b/etherpad/src/static/css/pad2_ejs.css
index 0029e7d..1448070 100644
--- a/etherpad/src/static/css/pad2_ejs.css
+++ b/etherpad/src/static/css/pad2_ejs.css
@@ -141,57 +141,62 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
 .hidesidebar #padeditor { margin-right: 0; }
 
 #editbar { height: 36px;
-  background: #a5bfe2 url(/static/img/jun09/pad/editbar3.gif) repeat-x left -36px; position: relative; }
+  background: #a5bfe2 url(/static/img/jun09/pad/editbar_background.gif) repeat-x; position: relative; }
 
 #editbarleft { float: left; height: 100%; overflow: hidden;
-  background: url(/static/img/jun09/pad/editbar3.gif) no-repeat left top; width: 3px; }
+  background: url(/static/img/jun09/pad/editbar_background_left.gif) no-repeat left top; width: 2px; }
 #editbarright { float: right; height: 100%; overflow: hidden;
-  background: url(/static/img/jun09/pad/editbar3.gif) no-repeat right top; width: 3px; }
+  background: url(/static/img/jun09/pad/editbar_background_right.gif) no-repeat right top; width: 2px; }
 
-#editbar a.editbarbutton {
-  display: block;
-  position: absolute;
-  height: 26px;
-  width: 26px;
-  background-image: url(/static/img/jun09/pad/editbar3.gif);
-  background-color: transparent;
-  background-repeat: no-repeat;
-  text-decoration: none;
-  top: 5px;
-}
-#editbar.disabledtoolbar a.editbarbutton {
-  opacity: 0.5;
-  filter: alpha(opacity = 50); /* IE */
-  zoom: 1;
-  cursor: auto;
-}
-/*#editbar .divider { position: absolute; width: 4px; height: 15px;
-  background-image: url(/static/img/jun09/pad/editbar3.gif);
-  background-color: transparent; background-repeat: no-repeat; }
-#editbar .divider1 { left: 137px; top: 11px; background-position: -137px -11px; }
-#editbar .divider2 { left: 188px; top: 11px; background-position: -188px -11px; }*/
-#editbar a:focus { outline: 0; }
-
-<% function editbarButton(name, pos, width, fromRight) {
-  width = width || 26;
-  var bposX = - (fromRight ? 600-width-pos : pos);
-  return "div#editbar a."+name+" { "+
-    (fromRight?'right':'left')+": "+pos+"px; background-position: "+
-    bposX+"px -5px; width: "+width+"px; }\n"+
-    "div#padeditor div.enabledtoolbar a."+name+":active { background-position: "+
-    bposX+"px -77px; }";
-} %>
-<%= editbarButton('bold', 7, 25) %>
-<%= editbarButton('italic', 32, 23) %>
-<%= editbarButton('underline', 55, 23) %>
-<%= editbarButton('strikethrough', 78, 24) %>
-<%= editbarButton('clearauthorship', 195) %>
-<%= editbarButton('undo', 227, 25) %>
-<%= editbarButton('redo', 252, 24) %>
-<%= editbarButton('insertunorderedlist', 108) %>
-<%= editbarButton('indent', 140, 25) %>
-<%= editbarButton('outdent', 165, 24) %>
-<%= editbarButton('save', 6, null, true) %>
+#editbartable
+{
+  position:absolute;
+  top: 6px;
+  left: 7px;
+  width: 250px;
+  height: 24px;
+  width:520px;
+  border-collapse:collapse
+}
+
+#editbarsavetable
+{
+  position:absolute;
+  top: 6px;
+  right: 7px;
+  width: 50px;
+  height: 24px;
+  width:15px;
+  border-collapse:collapse
+}
+
+.editbarbutton
+{
+  border-top: 1px solid #8b9eba;
+  border-bottom: 1px solid #8b9eba;
+  border-left: 1px solid #758aa9;
+  background-color: white;
+}
+
+.editbarbutton img
+{
+  margin: 1px 2px;
+  border: 0px;
+  width: 16px;
+  height: 16px;
+}
+
+.editbarbutton a:active
+{
+  position: relative;
+  top: 1px;
+  left: 1px;
+}
+
+.editbargroupsfirst
+{
+  border-left-width: 0px !important;
+}
 
 #editbar #syncstatussyncing { position: absolute; height: 26px; width: 26px;
   background: url(/static/img/jun09/pad/syncing2.gif) no-repeat center center;
diff --git a/etherpad/src/static/img/jun09/pad/editbar3.gif b/etherpad/src/static/img/jun09/pad/editbar3.gif
deleted file mode 100644
index e73c505..0000000
--- a/etherpad/src/static/img/jun09/pad/editbar3.gif
+++ /dev/null
diff --git a/etherpad/src/static/img/jun09/pad/editbar_background.gif b/etherpad/src/static/img/jun09/pad/editbar_background.gif
new file mode 100644
index 0000000..54ef6e4
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_background.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_background_left.gif b/etherpad/src/static/img/jun09/pad/editbar_background_left.gif
new file mode 100644
index 0000000..fe8d06e
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_background_left.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_background_right.gif b/etherpad/src/static/img/jun09/pad/editbar_background_right.gif
new file mode 100644
index 0000000..55ab00a
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_background_right.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_bold.gif b/etherpad/src/static/img/jun09/pad/editbar_bold.gif
new file mode 100644
index 0000000..d22bcaf
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_bold.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_clearauthorship.gif b/etherpad/src/static/img/jun09/pad/editbar_clearauthorship.gif
new file mode 100644
index 0000000..2c6d109
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_clearauthorship.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_groupleft.gif b/etherpad/src/static/img/jun09/pad/editbar_groupleft.gif
new file mode 100644
index 0000000..3e18749
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_groupleft.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_groupright.gif b/etherpad/src/static/img/jun09/pad/editbar_groupright.gif
new file mode 100644
index 0000000..bf8b757
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_groupright.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_indent.gif b/etherpad/src/static/img/jun09/pad/editbar_indent.gif
new file mode 100644
index 0000000..989523a
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_indent.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_insertunorderedlist.gif b/etherpad/src/static/img/jun09/pad/editbar_insertunorderedlist.gif
new file mode 100644
index 0000000..b032d59
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_insertunorderedlist.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_italic.gif b/etherpad/src/static/img/jun09/pad/editbar_italic.gif
new file mode 100644
index 0000000..a017402
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_italic.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_outdent.gif b/etherpad/src/static/img/jun09/pad/editbar_outdent.gif
new file mode 100644
index 0000000..4b9bf38
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_outdent.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_redo.gif b/etherpad/src/static/img/jun09/pad/editbar_redo.gif
new file mode 100644
index 0000000..826a254
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_redo.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_save.gif b/etherpad/src/static/img/jun09/pad/editbar_save.gif
new file mode 100644
index 0000000..2ccced6
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_save.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_strikethrough.gif b/etherpad/src/static/img/jun09/pad/editbar_strikethrough.gif
new file mode 100644
index 0000000..92ffa23
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_strikethrough.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_underline.gif b/etherpad/src/static/img/jun09/pad/editbar_underline.gif
new file mode 100644
index 0000000..ec3cc4e
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_underline.gif
diff --git a/etherpad/src/static/img/jun09/pad/editbar_undo.gif b/etherpad/src/static/img/jun09/pad/editbar_undo.gif
new file mode 100644
index 0000000..78ae0be
--- /dev/null
+++ b/etherpad/src/static/img/jun09/pad/editbar_undo.gif
diff --git a/etherpad/src/templates/pad/pad_body2.ejs b/etherpad/src/templates/pad/pad_body2.ejs
index c359b14..4382e8f 100644
--- a/etherpad/src/templates/pad/pad_body2.ejs
+++ b/etherpad/src/templates/pad/pad_body2.ejs
@@ -1,4 +1,6 @@
-<% /* Copyright 2009 Google Inc.
+<% /* 
+Copyright 2009 Google Inc.
+Copyright 2010 Pita, Peter Martischka
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -427,19 +429,49 @@ limitations under the License. */ %>
       <div id="editbarright"><!-- --></div>      
       <% /* non-floated */ %>
       <div id="editbarinner">
-        <a href="javascript:void (window.pad&&pad.editbarClick('bold'));" class="editbarbutton bold" title="Bold (ctrl-B)">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('italic'));" class="editbarbutton italic" title="Italics (ctrl-I)">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('underline'));" class="editbarbutton underline" title="Underline (ctrl-U)">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('strikethrough'));" class="editbarbutton strikethrough" title="Strikethrough">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('clearauthorship'));" class="editbarbutton clearauthorship" title="Clear Authorship Colors">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('undo'));" class="editbarbutton undo" title="Undo (ctrl-Z)">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('redo'));" class="editbarbutton redo" title="Redo (ctrl-Y)">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('insertunorderedlist'));" class="editbarbutton insertunorderedlist" title="Toggle Bullet List">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('indent'));" class="editbarbutton indent" title="Indent List">&nbsp;</a>
-        <a href="javascript:void (window.pad&&pad.editbarClick('outdent'));" class="editbarbutton outdent" title="Unindent List">&nbsp;</a>
-        <div id="syncstatussyncing" title="Syncing..."><!-- --></div>
-        <div id="syncstatusdone" title="Synced."><!-- --></div>
-        <a href="javascript:void (window.pad&&pad.editbarClick('save'));" class="editbarbutton save" title="Save Revision">&nbsp;</a>
+        <table cellpadding="0" cellspacing="0" border = "0" id="editbartable"><tr>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupleft.gif" width="2" height="24"></td>
+          <td nowrap class="editbarbutton editbargroupsfirst"><a href="javascript:void (window.pad&&pad.editbarClick('bold'));" title="Bold (ctrl-B)"><img src="/static/img/jun09/pad/editbar_bold.gif"></a></td>
+          <td nowrap class="editbarbutton"> <a href="javascript:void (window.pad&&pad.editbarClick('italic'));" title="Italics (ctrl-I)"><img src="/static/img/jun09/pad/editbar_italic.gif"></a></td>
+          <td nowrap class="editbarbutton"> <a href="javascript:void (window.pad&&pad.editbarClick('underline'));"  title="Underline (ctrl-U)"><img src="/static/img/jun09/pad/editbar_underline.gif"></a></td>
+          <td nowrap class="editbarbutton"> <a href="javascript:void (window.pad&&pad.editbarClick('strikethrough'));" title="Strikethrough"><img src="/static/img/jun09/pad/editbar_strikethrough.gif"></a></td>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupright.gif" width="2" height="24"></td>
+
+          <td>&nbsp;&nbsp;</td>
+
+	  <td nowrap><img src="/static/img/jun09/pad/editbar_groupleft.gif" width="2" height="24"></td>
+          <td nowrap class="editbarbutton editbargroupsfirst"><a href="javascript:void (window.pad&&pad.editbarClick('insertunorderedlist'));" title="Toggle Bullet List"><img src="/static/img/jun09/pad/editbar_insertunorderedlist.gif"></a></td>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupright.gif" width="2" height="24"></td>
+
+          <td>&nbsp;&nbsp;</td>
+
+	  <td nowrap><img src="/static/img/jun09/pad/editbar_groupleft.gif" width="2" height="24"></td>
+          <td nowrap class="editbarbutton editbargroupsfirst"><a href="javascript:void (window.pad&&pad.editbarClick('indent'));" title="Indent List"><img src="/static/img/jun09/pad/editbar_indent.gif"></a></td>
+          <td nowrap class="editbarbutton"><a href="javascript:void (window.pad&&pad.editbarClick('outdent'));" title="Unindent List"><img src="/static/img/jun09/pad/editbar_outdent.gif"></a></td>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupright.gif" width="2" height="24"></td>
+
+          <td>&nbsp;&nbsp;</td>
+
+	  <td nowrap><img src="/static/img/jun09/pad/editbar_groupleft.gif" width="2" height="24"></td>
+          <td nowrap class="editbarbutton editbargroupsfirst"><a href="javascript:void (window.pad&&pad.editbarClick('clearauthorship'));" title="Clear Authorship Colors"><img src="/static/img/jun09/pad/editbar_clearauthorship.gif"></a></td>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupright.gif" width="2" height="24"></td>
+
+          <td>&nbsp;&nbsp;</td>
+
+	  <td nowrap><img src="/static/img/jun09/pad/editbar_groupleft.gif" width="2" height="24"></td>
+          <td nowrap class="editbarbutton editbargroupsfirst"><a href="javascript:void (window.pad&&pad.editbarClick('undo'));" title="Undo (ctrl-Z)"><img src="/static/img/jun09/pad/editbar_undo.gif"></a></td>
+          <td nowrap  class="editbarbutton"><a href="javascript:void (window.pad&&pad.editbarClick('redo'));" title="Redo (ctrl-Y)"><img src="/static/img/jun09/pad/editbar_redo.gif"></a></td>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupright.gif" width="2" height="24"></td>
+
+          <td width="100%">&nbsp;</td>
+        </tr></table>
+        <table cellpadding="0" cellspacing="0" border = "0" id="editbarsavetable">
+	  <tr>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupleft.gif" width="2" height="24"></td>
+          <td nowrap class="editbarbutton editbargroupsfirst"><a href="javascript:void (window.pad&&pad.editbarClick('save'));" title="Save Revision"><img src="/static/img/jun09/pad/editbar_save.gif"></a></td>
+          <td nowrap><img src="/static/img/jun09/pad/editbar_groupright.gif" width="2" height="24"></td>
+          </tr>
+        </table>
       </div>
     </div>
     <div id="editorcontainerbox">