Added a dynamic preview of your current color selections to the color picker. Made the color picker stay open after a color is selected.

NEWS

@@ -1,8 +1,15 @@
 1.6.13: 
+ * Added a dynamic preview of your current color selections to the color
+   picker. This lets you see what the selected colors will look like as you
+   are selecting them.
+ * Made the color picker stay open after a color is selected. This makes it
+   easier to set both foreground and background colors.
  * Fixed a Chrome/Safari bug in which popups such as those for export and
    color were not positioned correctly if the page was scrolled past the top.
  * Fixed a bug in which certain popups on the left and right side of the page
    scrolled along with the page instead of staying fixed in place.
+ * Fixed a bug in which detecting or saving colors set on note titles did not
+   work.
 
 1.6.12: May 19, 2009
  * Added a toolbar color button for setting text and background colors.

controller/Html_cleaner.py

@@ -129,6 +129,7 @@ class Html_cleaner(HTMLParser):
       'table': [ 'cellpadding', 'cellspacing', 'border', 'width', 'height' ],
       'font': [ 'size', 'face', 'color', 'style', 'class' ],
       'span': [ 'style' ],
+      'h3': [ 'style' ],
       'td': [ 'rowspan', 'colspan', 'width', 'height' ],
       'th': [ 'rowspan', 'colspan', 'width', 'height' ],
     }

static/css/style.css

@@ -862,6 +862,7 @@ h1 {
   border: none;
   border-collapse: collapse;
   margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 #color_table td {
@@ -898,6 +899,12 @@ h1 {
   color: #000000;
 }
 
+.color_preview_text {
+  text-align: center;
+  margin-right: 1em;
+  padding: 0.25em 1.5em 0.25em 1.5em;
+}
+
 .selected_mark {
   vertical-align: top;
 }

static/js/Editor.js

@@ -1558,7 +1558,7 @@ Editor.prototype.current_colors = function () {
 
     if ( foreground == null && name == "font" && node.getAttribute( "color" ) ) {
       foreground = node.getAttribute( "color" );
-    } else if ( name == "span" || name == "font" ) {
+    } else if ( name == "span" || name == "font" || name == "h3" ) {
       if ( foreground == null ) {
         foreground = getStyle( node, "color" )
         if ( foreground == "transparent" || foreground == DEFAULT_FOREGROUND_CODE ||

static/js/Wiki.js

@@ -4666,7 +4666,19 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
     appendChildNodes( tbody, row_node );
   }
 
-  var div = createDOM( "div", {}, radio_area, this.table );
+  this.done_button = createDOM(
+    "input", {
+      "type": "button",
+      "class": "button",
+      "value": "done",
+      "title": "done changing colors"
+    }
+  );
+
+  this.preview_area = createDOM( "span", { "class": "color_preview_text" }, "Preview" );
+  var bottom_area = createDOM( "div", {}, this.preview_area, this.done_button );
+
+  var div = createDOM( "div", {}, radio_area, this.table, bottom_area );
   appendChildNodes( this.div, div );
 
   this.update_colors();
@@ -4674,10 +4686,13 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
   var self = this;
   connect( this.table, "onmousedown", function ( event ) { self.color_mouse_pressed( event ); } );
   connect( this.table, "onmouseup", function ( event ) { self.color_mouse_released( event ); } );
+  connect( this.table, "onmouseover", function ( event ) { self.color_mouse_hovered( event ); } );
+  connect( this.table, "onmouseout", function ( event ) { self.color_mouse_left( event ); } );
   connect( this.foreground_radio, "onclick", function ( event ) { self.foreground_radio_clicked( event ); } );
   connect( this.foreground_label, "onclick", function ( event ) { self.foreground_radio_clicked( event ); event.stop(); } );
   connect( this.background_radio, "onclick", function ( event ) { self.background_radio_clicked( event ); } );
   connect( this.background_label, "onclick", function ( event ) { self.background_radio_clicked( event ); event.stop(); } );
+  connect( this.done_button, "onclick", function ( event ) { self.shutdown(); } );
 
   Pulldown.prototype.finish_init.call( this );
 }
@@ -4730,27 +4745,38 @@ Color_pulldown.prototype.color_mouse_pressed = function ( event ) {
   this.select_color_box( color_box );
 
   event.stop();
-  this.editor.focus();
-  this.editor.collapse_cursor();
 }
 
 Color_pulldown.prototype.color_mouse_released = function ( event ) {
   event.stop();
+}
 
-  var self = this;
+Color_pulldown.prototype.color_mouse_hovered = function ( event ) {
-  setTimeout( function () {
+  var color_box = event.target();
-    self.shutdown();
+  if ( !hasElementClass( color_box, "color_box" ) )
-  }, 100 );
+    return;
+
+  var color_code = getStyle( color_box, "background-color" );
+
+  if ( this.background_radio.checked )
+    setStyle( this.preview_area, { "background-color": color_code } );
+  else
+    setStyle( this.preview_area, { "color": color_code } );
+}
+
+Color_pulldown.prototype.color_mouse_left = function ( event ) {
+  setStyle( this.preview_area, { "color": this.foreground_code } );
+  setStyle( this.preview_area, { "background-color": this.background_code } );
 }
 
 Color_pulldown.prototype.select_color = function ( color_code, skip_set ) {
   var color_box = getElement( "color_" + color_code.substring( 1 ) );
 
   if ( color_box )
-    this.select_color_box( color_box, color_code, skip_set );
+    this.select_color_box( color_box, color_code );
 }
 
-Color_pulldown.prototype.select_color_box = function ( color_box, color_code, skip_set ) {
+Color_pulldown.prototype.select_color_box = function ( color_box, color_code ) {
   if ( this.selected_color_box ) {
     this.selected_color_box.value = " ";
     removeElementClass( this.selected_color_box, "color_box_light_selected" );
@@ -4770,12 +4796,13 @@ Color_pulldown.prototype.select_color_box = function ( color_box, color_code, sk
   color_box.value = "x";
   this.selected_color_box = color_box;
 
-  if ( skip_set == false || skip_set == undefined || skip_set == null ) {
+  if ( this.background_radio.checked )
-    if ( this.background_radio.checked )
+    this.background_code = color_code;
-      this.editor.set_background_color( color_code );
+  else
-    else
+    this.foreground_code = color_code;
-      this.editor.set_foreground_color( color_code );
+
-  }
+  setStyle( this.preview_area, { "color": this.foreground_code } );
+  setStyle( this.preview_area, { "background-color": this.background_code } );
 }
 
 Color_pulldown.prototype.foreground_radio_clicked = function ( event ) {
@@ -4789,11 +4816,22 @@ Color_pulldown.prototype.background_radio_clicked = function ( event ) {
 }
 
 Color_pulldown.prototype.shutdown = function () {
+  if ( !hasElementClass( this.div, "invisible" ) ) {
+    this.editor.focus();
+    if ( this.foreground_code )
+      this.editor.set_foreground_color( this.foreground_code );
+    if ( this.background_code )
+      this.editor.set_background_color( this.background_code );
+
+    this.editor.collapse_cursor();
+  }
+
   if ( !Pulldown.prototype.shutdown.call( this ) )
-    return; // shutdown vetoed
+    return; // "real" shutdown vetoed
 
   this.anchor.pulldown = null;
   disconnectAll( this.table );
+  disconnectAll( this.done_button );
   disconnectAll( this );
 }