witten
/
luminotes
Archived
1
0
Fork 0

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

This commit is contained in:
Dan Helfman 2009-05-20 17:46:24 -07:00
parent 592f148410
commit 5fd918898d
5 changed files with 70 additions and 17 deletions

7
NEWS
View File

@ -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.

View File

@ -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' ],
}

View File

@ -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;
}

View File

@ -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 ||

View File

@ -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;
setTimeout( function () {
self.shutdown();
}, 100 );
Color_pulldown.prototype.color_mouse_hovered = function ( event ) {
var color_box = event.target();
if ( !hasElementClass( color_box, "color_box" ) )
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 )
this.editor.set_background_color( color_code );
else
this.editor.set_foreground_color( color_code );
}
if ( this.background_radio.checked )
this.background_code = color_code;
else
this.foreground_code = 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 );
}