Browse Source

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

Dan Helfman 9 years ago
parent
commit
5fd918898d
5 changed files with 70 additions and 17 deletions
  1. 7
    0
      NEWS
  2. 1
    0
      controller/Html_cleaner.py
  3. 7
    0
      static/css/style.css
  4. 1
    1
      static/js/Editor.js
  5. 54
    16
      static/js/Wiki.js

+ 7
- 0
NEWS View File

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

+ 1
- 0
controller/Html_cleaner.py View File

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

+ 7
- 0
static/css/style.css View File

@@ -862,6 +862,7 @@ h1 {
862 862
   border: none;
863 863
   border-collapse: collapse;
864 864
   margin-top: 1em;
865
+  margin-bottom: 1em;
865 866
 }
866 867
 
867 868
 #color_table td {
@@ -898,6 +899,12 @@ h1 {
898 899
   color: #000000;
899 900
 }
900 901
 
902
+.color_preview_text {
903
+  text-align: center;
904
+  margin-right: 1em;
905
+  padding: 0.25em 1.5em 0.25em 1.5em;
906
+}
907
+
901 908
 .selected_mark {
902 909
   vertical-align: top;
903 910
 }

+ 1
- 1
static/js/Editor.js View File

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

+ 54
- 16
static/js/Wiki.js View File

@@ -4666,7 +4666,19 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
4666 4666
     appendChildNodes( tbody, row_node );
4667 4667
   }
4668 4668
 
4669
-  var div = createDOM( "div", {}, radio_area, this.table );
4669
+  this.done_button = createDOM(
4670
+    "input", {
4671
+      "type": "button",
4672
+      "class": "button",
4673
+      "value": "done",
4674
+      "title": "done changing colors"
4675
+    }
4676
+  );
4677
+
4678
+  this.preview_area = createDOM( "span", { "class": "color_preview_text" }, "Preview" );
4679
+  var bottom_area = createDOM( "div", {}, this.preview_area, this.done_button );
4680
+
4681
+  var div = createDOM( "div", {}, radio_area, this.table, bottom_area );
4670 4682
   appendChildNodes( this.div, div );
4671 4683
 
4672 4684
   this.update_colors();
@@ -4674,10 +4686,13 @@ function Color_pulldown( wiki, notebook_id, invoker, anchor, editor ) {
4674 4686
   var self = this;
4675 4687
   connect( this.table, "onmousedown", function ( event ) { self.color_mouse_pressed( event ); } );
4676 4688
   connect( this.table, "onmouseup", function ( event ) { self.color_mouse_released( event ); } );
4689
+  connect( this.table, "onmouseover", function ( event ) { self.color_mouse_hovered( event ); } );
4690
+  connect( this.table, "onmouseout", function ( event ) { self.color_mouse_left( event ); } );
4677 4691
   connect( this.foreground_radio, "onclick", function ( event ) { self.foreground_radio_clicked( event ); } );
4678 4692
   connect( this.foreground_label, "onclick", function ( event ) { self.foreground_radio_clicked( event ); event.stop(); } );
4679 4693
   connect( this.background_radio, "onclick", function ( event ) { self.background_radio_clicked( event ); } );
4680 4694
   connect( this.background_label, "onclick", function ( event ) { self.background_radio_clicked( event ); event.stop(); } );
4695
+  connect( this.done_button, "onclick", function ( event ) { self.shutdown(); } );
4681 4696
 
4682 4697
   Pulldown.prototype.finish_init.call( this );
4683 4698
 }
@@ -4730,27 +4745,38 @@ Color_pulldown.prototype.color_mouse_pressed = function ( event ) {
4730 4745
   this.select_color_box( color_box );
4731 4746
 
4732 4747
   event.stop();
4733
-  this.editor.focus();
4734
-  this.editor.collapse_cursor();
4735 4748
 }
4736 4749
 
4737 4750
 Color_pulldown.prototype.color_mouse_released = function ( event ) {
4738 4751
   event.stop();
4752
+}
4739 4753
 
4740
-  var self = this;
4741
-  setTimeout( function () {
4742
-    self.shutdown();
4743
-  }, 100 );
4754
+Color_pulldown.prototype.color_mouse_hovered = function ( event ) {
4755
+  var color_box = event.target();
4756
+  if ( !hasElementClass( color_box, "color_box" ) )
4757
+    return;
4758
+
4759
+  var color_code = getStyle( color_box, "background-color" );
4760
+
4761
+  if ( this.background_radio.checked )
4762
+    setStyle( this.preview_area, { "background-color": color_code } );
4763
+  else
4764
+    setStyle( this.preview_area, { "color": color_code } );
4765
+}
4766
+
4767
+Color_pulldown.prototype.color_mouse_left = function ( event ) {
4768
+  setStyle( this.preview_area, { "color": this.foreground_code } );
4769
+  setStyle( this.preview_area, { "background-color": this.background_code } );
4744 4770
 }
4745 4771
 
4746 4772
 Color_pulldown.prototype.select_color = function ( color_code, skip_set ) {
4747 4773
   var color_box = getElement( "color_" + color_code.substring( 1 ) );
4748 4774
 
4749 4775
   if ( color_box )
4750
-    this.select_color_box( color_box, color_code, skip_set );
4776
+    this.select_color_box( color_box, color_code );
4751 4777
 }
4752 4778
 
4753
-Color_pulldown.prototype.select_color_box = function ( color_box, color_code, skip_set ) {
4779
+Color_pulldown.prototype.select_color_box = function ( color_box, color_code ) {
4754 4780
   if ( this.selected_color_box ) {
4755 4781
     this.selected_color_box.value = " ";
4756 4782
     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
4770 4796
   color_box.value = "x";
4771 4797
   this.selected_color_box = color_box;
4772 4798
 
4773
-  if ( skip_set == false || skip_set == undefined || skip_set == null ) {
4774
-    if ( this.background_radio.checked )
4775
-      this.editor.set_background_color( color_code );
4776
-    else
4777
-      this.editor.set_foreground_color( color_code );
4778
-  }
4799
+  if ( this.background_radio.checked )
4800
+    this.background_code = color_code;
4801
+  else
4802
+    this.foreground_code = color_code;
4803
+
4804
+  setStyle( this.preview_area, { "color": this.foreground_code } );
4805
+  setStyle( this.preview_area, { "background-color": this.background_code } );
4779 4806
 }
4780 4807
 
4781 4808
 Color_pulldown.prototype.foreground_radio_clicked = function ( event ) {
@@ -4789,11 +4816,22 @@ Color_pulldown.prototype.background_radio_clicked = function ( event ) {
4789 4816
 }
4790 4817
 
4791 4818
 Color_pulldown.prototype.shutdown = function () {
4819
+  if ( !hasElementClass( this.div, "invisible" ) ) {
4820
+    this.editor.focus();
4821
+    if ( this.foreground_code )
4822
+      this.editor.set_foreground_color( this.foreground_code );
4823
+    if ( this.background_code )
4824
+      this.editor.set_background_color( this.background_code );
4825
+
4826
+    this.editor.collapse_cursor();
4827
+  }
4828
+
4792 4829
   if ( !Pulldown.prototype.shutdown.call( this ) )
4793
-    return; // shutdown vetoed
4830
+    return; // "real" shutdown vetoed
4794 4831
 
4795 4832
   this.anchor.pulldown = null;
4796 4833
   disconnectAll( this.table );
4834
+  disconnectAll( this.done_button );
4797 4835
   disconnectAll( this );
4798 4836
 }
4799 4837
 

Loading…
Cancel
Save