Fixing issues with ColorPicker.

Author: phase1geo

meson.build

@@ -1,5 +1,5 @@
 project('io.github.phase1geo.annotator', ['vala', 'c'],
-    version : '2.0.3',
+    version : '2.1.0',
     license: 'GPL-2.0-or-later',
 )
 

src/Application.vala

@@ -36,9 +36,9 @@ public class Annotator : Gtk.Application {
   public Annotator () {
 
     Object(
-      application_id: "com.github.phase1geo.annotator",
+      application_id: "io.github.phase1geo.annotator",
       flags: ApplicationFlags.HANDLES_OPEN,
-      version: "2.0.3"
+      version: "2.1.0"
     );
 
     Intl.setlocale( LocaleCategory.ALL, "" );

src/ColorPicker.vala

@@ -1,5 +1,5 @@
 /*
-* Copyright (c) 2020-2026 (https://github.com/phase1geo/Annotator)
+* Copyright (c) 2020-2026 (https://github.com/phase1geo/Outliner)
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public
@@ -37,13 +37,16 @@ public enum ColorPickerType {
   public void set_image( ToggleButton btn ) {
     switch( this ) {
       case HCOLOR :
-        btn.icon_name = "format-text-highlight";
-        btn.child     = null;
+        var lbl = new Label( "<span size=\"large\">\u25c9</span>" ) {
+          use_markup = true
+        };
+        btn.child = lbl;
         break;
       case FCOLOR : {
-        var lbl = new Label( "<span size=\"large\">A</span>" );
-        lbl.use_markup = true;
-        btn.child      = lbl;
+        var lbl = new Label( "<span size=\"large\">A</span>" ) {
+          use_markup = true
+        };
+        btn.child = lbl;
         break;
       }
       default :  assert_not_reached();
@@ -54,56 +57,59 @@ public enum ColorPickerType {
 
 public class ColorPicker : Box {
 
-  private ColorPickerType    _type;
-  private ToggleButton       _toggle;
-  private ColorChooserWidget _chooser;
-  private MenuButton         _select;
-  private bool               _ignore_active;
+  private ColorPickerType _type;
+  private ToggleButton    _toggle;
+  private Button          _select;
+  private bool            _ignore_active;
+  private RGBA            _color;
 
   public signal void color_changed( RGBA? color );
 
-  public ColorPicker( RGBA init_color, ColorPickerType type ) {
+  public ColorPicker( MainWindow win, RGBA init_color, ColorPickerType type ) {
 
-    _type = type;
+    Object( orientation: Orientation.HORIZONTAL );
+
+    _type  = type;
+    _color = init_color.copy();
 
     homogeneous = true;
 
     _toggle = new ToggleButton() {
       has_frame = false
     };
-    _toggle.toggled.connect( handle_toggle );
     _toggle.add_css_class( type.get_css_class() );
+    _toggle.toggled.connect( handle_toggle );
     type.set_image( _toggle );
 
-    _chooser = new ColorChooserWidget();
-    _chooser.rgba = init_color;
-
-    var btn_controller = new GestureClick();
-    var overlay = new Overlay() {
-      margin_start  = 10,
-      margin_end    = 10,
-      margin_top    = 10,
-      margin_bottom = 10,
-      child         = _chooser
+    var chooser = new ColorDialog() {
+      modal = true,
+      with_alpha = true
     };
-    overlay.add_controller( btn_controller );
-    btn_controller.pressed.connect((n_press, x, y) => {
-      handle_chooser();
-    });
 
-    _select = new MenuButton() {
+    _select = new Button.from_icon_name( "view-more-symbolic" ) {
       has_frame = false
     };
-    _select.add_css_class( "color_chooser" );
-
-    _select.popover = new Popover() {
-      child = overlay
-    };
+    _select.clicked.connect(() => {
+      chooser.choose_rgba.begin( win, _color, null, (obj, res) => {
+        try {
+          var rgba = chooser.choose_rgba.end( res );
+          if( rgba != null ) {
+            _color.free();
+            _color = rgba.copy();
+            update_css( rgba );
+            set_active( true );
+            color_changed( rgba );
+          }
+        } catch( Error e ) {}
+      });
+    });
 
     append( _toggle );
     append( _select );
 
-    update_css( init_color );
+    add_css_class( Granite.STYLE_CLASS_LINKED );
+
+    update_css( _color );
 
   }
 
@@ -123,8 +129,8 @@ public class ColorPicker : Box {
 
   private void update_css( RGBA rgba ) {
     var provider = new CssProvider();
-    var color    = Utils.color_to_string( rgba );
-    var css_data = ".%s { background: %s; }".printf( _type.get_css_class(), color );
+    var fg       = Granite.contrasting_foreground_color( rgba );
+    var css_data = ".%s { background: %s; color: %s; }".printf( _type.get_css_class(), rgba.to_string(), fg.to_string() );
     provider.load_from_string( css_data );
     StyleContext.add_provider_for_display(
       Display.get_default(),
@@ -136,19 +142,11 @@ public class ColorPicker : Box {
   private void handle_toggle() {
     if( !_ignore_active ) {
       if( _toggle.active ) {
-        color_changed( _chooser.rgba );
+        color_changed( _color );
       } else {
         color_changed( null );
       }
     }
   }
 
-  private bool handle_chooser() {
-    update_css( _chooser.rgba );
-    set_active( true );
-    color_changed( _chooser.rgba );
-    _select.popover.popdown();
-    return( true );
-  }
-
 }

src/FormatBar.vala

@@ -129,12 +129,12 @@ public class FormatBar : Gtk.Popover {
       header_menu.append( label, "formatbar.action_header(%d)".printf( i ) );
     }
 
-    _hilite = new ColorPicker( Utils.color_from_string( _canvas.items.hilite_color ), ColorPickerType.HCOLOR );
+    _hilite = new ColorPicker( canvas.win, Utils.color_from_string( _canvas.items.hilite_color ), ColorPickerType.HCOLOR );
     _hilite.set_toggle_tooltip( _( "Apply Highlight Color" ) );
     _hilite.set_select_tooltip( _( "Change Highlight Color" ) );
     _hilite.color_changed.connect( handle_hilite );
 
-    _color = new ColorPicker( Utils.color_from_string( _canvas.items.font_color ), ColorPickerType.FCOLOR );
+    _color = new ColorPicker( canvas.win, Utils.color_from_string( _canvas.items.font_color ), ColorPickerType.FCOLOR );
     _color.set_toggle_tooltip( _( "Apply Font Color" ) );
     _color.set_select_tooltip( _( "Change Font Color" ) );
     _color.color_changed.connect( handle_color );