From d95f08536bba6d375f2a8328040cdbf42e9b7b84 Mon Sep 17 00:00:00 2001
From: Jean-Tiare Le Bigot <jtlebi@gmail.com>
Date: Fri, 2 Mar 2012 22:20:56 +0100
Subject: [PATCH] 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       | 119 ++++++++++++++++++++++++++-------------
 static/js/domline.js     |   2 +-
 static/js/pad_editbar.js |   4 +-
 static/pad.html          |   9 +--
 4 files changed, 88 insertions(+), 46 deletions(-)

diff --git a/static/css/pad.css b/static/css/pad.css
index a711e070b..3fcf35012 100644
--- a/static/css/pad.css
+++ b/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;
-}
-
-#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
+  height: 18px;
+  padding: 4px 5px;
 }
 
 #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;
-}
-#editbar ul li a
-{
-  display: block;
-}
-#editbar ul li a img
-{
-  padding: 1px;
+  padding: 4px 5px;
 }
 
-
-#editbar ul
-{
-  float: left;
+#editbar ul select{
+  background: #fff;
+  background: linear-gradient(#fff, #f0f0f0);
+  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;
diff --git a/static/js/domline.js b/static/js/domline.js
index 88d430cfc..ad430e138 100644
--- a/static/js/domline.js
+++ b/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
diff --git a/static/js/pad_editbar.js b/static/js/pad_editbar.js
index 3bc521f6e..72307e044 100644
--- a/static/js/pad_editbar.js
+++ b/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')
             {
diff --git a/static/pad.html b/static/pad.html
index c63275d4c..e9ad93962 100644
--- a/static/pad.html
+++ b/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-2">Second level title</option>
-                      <option value="title-3">Third level title</option>
-                      <option value="title-4">Fourth level title</option>
+                      <option value="title-1" class="list-title1">First level title</option>
+                      <option value="title-2" class="list-title2">Second level title</option>
+                      <option value="title-3" class="list-title3">Third level title</option>
+                      <option value="title-4" class="list-title4">Fourth level title</option>
                     </select> 
                 </li>
                 <li class="separator"></li>