big CSS improvement in the dropdown of the editbar + fixed a bug in the header DOM generation that caused breakage in the authorship highlighting code

static/css/pad.css

@@ -46,41 +46,28 @@ a img
   width: 100%;
 }
 
+#editbar ul
+{
+  float: left;
+}
+
 #editbar ul li 
+{
+  cursor: pointer;
+  float: left;
+  margin-left: 2px;
+  overflow: hidden;
+}
+
+#editbar ul li.button
 {
   background: #fff;
   background: linear-gradient(#fff, #f0f0f0);
   border: 1px solid #ccc;
   border-radius: 4px;
-  cursor: pointer;
-  float: left;
-  height: 18px;
-  margin-left: 2px;
-  overflow: hidden;
-  padding: 4px 5px;
-}
-
-#editbar ul li.button
-{
   width: 18px;
-}
+  height: 18px;
-
+  padding: 4px 5px;
-#editbar ul li.dropdown
-{
-  padding: 2px 0 8px;
-}
-
-#editbar ul li a
-{
-  text-decoration: none;
-  color: #ccc;
-  position: absolute;
-}
-
-#editbar ul li a span
-{
-  position: relative;
-  top:-2px
 }
 
 #editbar ul li:hover {
@@ -94,32 +81,84 @@ a img
   box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
 }
 
+#editbar ul li a
+{
+  display: block;
+  text-decoration: none;
+  color: #ccc;
+  position: absolute;
+}
+
+#editbar ul li a img
+{
+  padding: 1px;
+}
+
+#editbar ul li a span
+{
+  position: relative;
+  top:-2px
+}
+
 #editbar ul li.separator
 {
   border: inherit;
   background: inherit;
   visibility:hidden;
   width: 0px;
-}
+  padding: 4px 5px;
-#editbar ul li a
-{
-  display: block;
-}
-#editbar ul li a img
-{
-  padding: 1px;
 }
 
-
+#editbar ul select{
-#editbar ul
+  background: #fff;
-{
+  background: linear-gradient(#fff, #f0f0f0);
-  float: left;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  text-align: center;
+  padding: 4px;
+  margin: 0;
+  height: 28px;
+  width: 120px;
 }
+
+#editbar ul select:hover {
+  background: #fff;
+  background: linear-gradient(#f4f4f4, #e4e4e4);
+}
+
+#editbar ul select option{
+  text-align: left;
+}
+
+#editbar ul select .dummy {
+  text-align: center;
+}
+
 #editbar ul#menu_right
 {
   float: right;
 }
 
+.list-title1{
+  font-size: 30px;
+  line-height: 30px;  
+}
+
+.list-title2{
+  font-size: 25px;
+  line-height: 25px;
+}
+
+.list-title3{
+  font-size: 20px;
+  line-height: 20px;
+}
+
+.list-title4{
+  font-size: 15px;
+  line-height: 15px;
+}
+
 #users
 {
   display: none;

static/js/domline.js

@@ -115,7 +115,7 @@ domline.createDomLine = function(nonEmpty, doesWrap, optBrowser, optDocument)
           else if(details[1] == "title")
           {
             markup = 'h'+Number(details[2]);
-            preHtml = '<'+markup+' class="list-' + Security.escapeHTMLAttribute(listType) +' >';
+            preHtml = '<'+markup+' class="list-' + Security.escapeHTMLAttribute(listType) +'" >';
             postHtml = '</'+markup+'>';
           }
           //handle bullet lists and indentations

static/js/pad_editbar.js

@@ -156,7 +156,8 @@ var padeditbar = (function()
             }
             else if (cmd == "style")
             {
-              var value = document.getElementById("style-select").value;
+              dropdown = document.getElementById("style-select");
+              var value = dropdown.value;
               var style = value.split('-');
               if(style[0]=="title")
               {
@@ -166,6 +167,7 @@ var padeditbar = (function()
               {
                 ace.ace_doRevertBlockStyle();
               }
+              dropdown.selectedIndex = 0;
             }
             else if (cmd == 'clearauthorship')
             {

static/pad.html

@@ -30,11 +30,12 @@
                 <li class="separator"></li>
                 <li class="dropdown" id="style">
                     <select id="style-select" onchange="window.pad&amp;&amp;pad.editbarClick('style');return false;">
+                      <option value="dummy" class="dummy" selected="selected">--Style--</option>
                       <option value="normal">Normal</option>
-                      <option value="title-1">First level title</option>
+                      <option value="title-1" class="list-title1">First level title</option>
-                      <option value="title-2">Second level title</option>
+                      <option value="title-2" class="list-title2">Second level title</option>
-                      <option value="title-3">Third level title</option>
+                      <option value="title-3" class="list-title3">Third level title</option>
-                      <option value="title-4">Fourth level title</option>
+                      <option value="title-4" class="list-title4">Fourth level title</option>
                     </select> 
                 </li>
                 <li class="separator"></li>