Modal dialog box, better centering.

diff --git a/experimental/palette/palette.css b/experimental/palette/palette.css
index 7548778..a0c4f1f 100644 (file)
--- a/experimental/palette/palette.css
+++ b/experimental/palette/palette.css
@@ -38,7 +38,7 @@
   width: 280px;
 }
 
-.tooltip .title {
+.tooltip .prompt {
   font-family: Inconsolata, Courier New, Courier;
 }
 
@@ -59,7 +59,20 @@
   z-index: 12;
 }
 
+.new.textArea {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 13;
+  background-color: white;
+  display: none;
+  width: 20em;
+  height: 10em;
+  border: 1px solid blue;
+}
+
 .textarea .prompt {
+  padding-left: 2px;
 }
 
 .textarea .buttons {
@@ -72,3 +85,20 @@
   color: #222222;
 }
 
+.textarea .editor {
+  font-family: Inconsolata, Courier New, Courier;
+  margin: 4px;
+}
+
+#modalBackground {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 11;
+  background-color:#333333;
+  display: none;
+  opacity: 0.40;
+  filter: alpha(opacity=40)
+}

diff --git a/experimental/palette/palette.js b/experimental/palette/palette.js
index 1830315..1e718f4 100644 (file)
--- a/experimental/palette/palette.js
+++ b/experimental/palette/palette.js
@@ -31,24 +31,25 @@ function Palette() {
   this.filterBar = null;
 }
 
-Palette.createChild = function(type, parentElement) {
+Palette.createChild = function(type, parentElement, className) {
   var element = document.createElement(type);
   parentElement.appendChild(element);
+  if (className) {
+    element.className = className;
+  }
   return element;
 };
 
 Palette.prototype.create = function(document, parentElement) {
   var palette = this;
 
-  var table = Palette.createChild("div", parentElement);
-  table.className = "palette";
+  var table = Palette.createChild("div", parentElement, "palette");
   table.width="300px";
 
   this.tooltip = new Tooltip();
 
-  var row = Palette.createChild("div", table);
+  var row = Palette.createChild("div", table, "header");
   row.style.visibility = "visible";
-  row.className = "header";
 
   Palette.createChild("span", row).innerText = "Filter:";
   this.filterBar = Palette.createChild("input", Palette.createChild("span", row));
@@ -85,12 +86,10 @@ Palette.prototype.create = function(document, parentElement) {
         } (row, opt, type, Dygraph.OPTIONS_REFERENCE[opt].description);
         row.onmouseout = function() { palette.tooltip.hide(); };
 
-        var div = Palette.createChild("span", row);
+        var div = Palette.createChild("span", row, "name");
         div.innerText = opt;
-        div.className = "name";
 
-        var value = Palette.createChild("span", row);
-        value.className = "option";
+        var value = Palette.createChild("span", row, "option");
 
         if (isFunction) {
            var input = Palette.createChild("button", value);
@@ -102,7 +101,7 @@ Palette.prototype.create = function(document, parentElement) {
                  inputValue = opts[opt].type + "{\n\n}";
                }
               var textarea = new TextArea();
-              textarea.show("Function for " + opt, inputValue);
+              textarea.show(opt, inputValue);
               textarea.okCallback = function(value) {
                  if (value != inputValue) {
                    entry.functionString = value;