Colour entries: add a dot to select color

data/resources.gresource.xml

@@ -6,5 +6,9 @@
     <file compressed="true" preprocess="xml-stripblanks" alias="menu.ui">resources/ui/menu.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">window.ui</file>
     <file compressed="true" alias="style.css">resources/style.css</file>
+
+  </gresource>
+  <gresource prefix="/org/gnome/design/Contrast/icons">
+      <file compressed="true" alias="circle-symbolic.svg">resources/circle-filled-symbolic.svg</file>
   </gresource>
 </gresources>

data/resources/circle-filled-symbolic.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg7384"
+   height="16">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient7212">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop7214" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-420.00049,-180.00003)"
+     style="display:inline"
+     id="layer1" />
+  <g
+     transform="translate(-661.00069,186.99997)"
+     style="display:inline"
+     id="layer9">
+    <path
+       d="m 669.0002,-186 c -3.85563,0 -7,3.14437 -7,7 0,3.85563 3.14437,7 7,7 3.85563,0 7,-3.14437 7,-7 0,-3.85563 -3.14437,-7 -7,-7 z"
+       id="path6745"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:56;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  </g>
+  <g
+     transform="translate(-661.00069,186.99997)"
+     style="display:inline"
+     id="g7628" />
+  <g
+     transform="translate(-420.00049,-180.00003)"
+     style="display:inline"
+     id="g6387" />
+  <g
+     transform="translate(-420.00049,-180.00003)"
+     style="display:inline"
+     id="layer10" />
+  <g
+     transform="translate(-420.00049,-180.00003)"
+     id="layer12" />
+  <g
+     transform="translate(-420.00049,-180.00003)"
+     style="display:inline"
+     id="layer11" />
+</svg>

data/resources/style.css

@@ -14,6 +14,12 @@ entry selection{
   color: @background_color;
   background-color: @foreground_color;
 }
+.fg-entry image{
+  color: @foreground_color;
+}
+.bg-entry image{
+  color: @background_color;
+}
 /* Preview */
 .preview-head {
   font-size: 60px;
@@ -51,3 +57,14 @@ entry selection{
 .chart-bar-marker separator {
   background-color: @foreground_color;
 }
+
+/* ColorPopover */
+.colour-popover {
+  padding: 10px;
+}
+
+/*Hackish way to remove extra left spacing */
+.colour-popover colorchooser overlay grid{
+  margin-left:-30px;
+}
+

src/application.rs

@@ -101,6 +101,9 @@ impl Application {
     }
 
     pub fn setup_css(&self) {
+        let theme = gtk::IconTheme::get_default().unwrap();
+        theme.add_resource_path("/org/gnome/design/Contrast/icons");
+
         gtk::StyleContext::add_provider_for_screen(&gdk::Screen::get_default().unwrap(), &self.provider, 400);
 
         let p = gtk::CssProvider::new();

src/colour.rs

@@ -20,5 +20,15 @@ pub fn get_luminance(color: &gdk::RGBA) -> f64 {
 }
 
 pub fn rgba_to_hex(rgb: &gdk::RGBA) -> String {
-    format!("#{:X}{:X}{:X}", (rgb.red * 255.0) as i32, (rgb.green * 255.0) as i32, (rgb.blue * 255.0) as i32)
+    format!("#{}{}{}", to_hex(rgb.red * 255.0), to_hex(rgb.green * 255.0), to_hex(rgb.blue * 255.0))
+}
+
+fn to_hex(n: f64) -> String {
+    // Borrowed from https://github.com/emgyrz/colorsys.rs
+    let s = format!("{:X}", n.round() as u32);
+    if s.len() == 1 {
+        "0".to_string() + &s
+    } else {
+        s
+    }
 }

src/colour_entry.rs

 use crate::colour;
+use crate::colour_popover::ColourPopover;
 use crate::dbus::{BusType, Connection, Message};
-use crate::gtk::{BoxExt, ButtonExt, EntryExt, StyleContextExt, WidgetExt};
+use crate::gtk::{BoxExt, ButtonExt, ColorChooserExt, ColorChooserWidgetExt, EntryExt, PopoverExt, StyleContextExt, WidgetExt};
 use std::collections::HashMap;
+use std::str::FromStr;
+
 #[derive(Clone)]
 pub struct ColourEntry {
     pub widget: gtk::Box,
@@ -28,10 +31,35 @@ impl ColourEntry {
         self.entry.set_placeholder_text(Some(label.as_str()));
         self.entry.set_halign(gtk::Align::Center);
         self.entry.set_valign(gtk::Align::Center);
+        self.entry.set_property_primary_icon_name(Some("circle-symbolic"));
+        self.entry.set_property_primary_icon_activatable(true);
         self.entry.get_style_context().add_class("colour-entry");
-        self.entry.set_width_chars(7);
+        self.entry.set_width_chars(9);
         self.entry.show();
 
+        let colour_selector_popover = ColourPopover::new(self.entry.clone());
+
+        let colour_selector_pop = colour_selector_popover.clone();
+        self.entry.connect_icon_press(move |entry, _, _| {
+            let colour = entry.get_text().unwrap();
+            match gdk::RGBA::from_str(&colour) {
+                Ok(rgba) => colour_selector_pop.color_chooser.set_rgba(&rgba),
+                Err(_) => (),
+            }
+            colour_selector_pop.color_chooser.set_property_show_editor(false);
+            colour_selector_pop.widget.popup();
+        });
+
+        let colour_selector_pop = colour_selector_popover.clone();
+        let entry = self.entry.clone();
+        colour_selector_popover.color_chooser.connect_button_press_event(move |_, _| {
+            let colour = colour_selector_pop.color_chooser.get_rgba();
+            let hex_colour = colour::rgba_to_hex(&colour);
+            entry.set_text(&hex_colour);
+            colour_selector_pop.widget.popdown();
+            gtk::Inhibit(false)
+        });
+
         self.widget.pack_start(&self.entry, false, false, 0);
 
         let colour_selector = gtk::Button::new();

src/colour_popover.rs

+use gtk::{BoxExt, ButtonExt, ColorChooserWidgetExt, ContainerExt, IsA, StyleContextExt, WidgetExt};
+
+#[derive(Clone)]
+pub struct ColourPopover {
+    pub widget: gtk::Popover,
+    pub color_chooser: gtk::ColorChooserWidget,
+}
+
+impl ColourPopover {
+    pub fn new<P: IsA<gtk::Widget>>(relative_to: P) -> ColourPopover {
+        let widget = gtk::Popover::new(Some(&relative_to));
+        widget.get_style_context().add_class("colour-popover");
+
+        let color_chooser = gtk::ColorChooserWidget::new();
+
+        let colour_popover = ColourPopover { widget, color_chooser };
+        colour_popover.setup_widget();
+        colour_popover
+    }
+
+    fn setup_widget(&self) {
+        let container = gtk::Box::new(gtk::Orientation::Vertical, 0);
+
+        let back_btn = gtk::Button::new();
+        back_btn.set_halign(gtk::Align::Start);
+        back_btn.set_valign(gtk::Align::Center);
+        let back_img = gtk::Image::new_from_icon_name(Some("go-previous-symbolic"), gtk::IconSize::Button);
+        back_img.show();
+        back_btn.set_image(Some(&back_img));
+        self.color_chooser.set_property_show_editor(false);
+
+        container.pack_start(&back_btn, false, false, 6);
+        container.pack_start(&self.color_chooser, false, false, 0);
+
+        let color_chooser = self.color_chooser.clone();
+        back_btn.connect_clicked(move |_| {
+            color_chooser.set_property_show_editor(false);
+        });
+
+        self.color_chooser.set_halign(gtk::Align::Start);
+        self.color_chooser.set_valign(gtk::Align::Center);
+        self.color_chooser.connect_property_show_editor_notify(move |color_chooser| {
+            back_btn.set_visible(color_chooser.get_property_show_editor());
+        });
+
+        self.color_chooser.show();
+
+        container.show();
+
+        self.widget.add(&container);
+    }
+}

src/main.rs

@@ -14,6 +14,7 @@ use gettextrs::*;
 mod application;
 mod colour;
 mod colour_entry;
+mod colour_popover;
 mod config;
 mod contrast_level;
 mod contrast_preview;

src/meson.build

@@ -39,6 +39,7 @@ sources = files(
     'application.rs',
     'colour.rs',
     'colour_entry.rs',
+    'colour_popover.rs',
     'config.rs',
     'contrast_level.rs',
     'contrast_preview.rs',

src/window.rs

@@ -126,6 +126,9 @@ impl Window {
         container.get_style_context().add_class("main-container");
         container.show();
 
+        self.fg_entry.entry.get_style_context().add_class("fg-entry");
+        self.bg_entry.entry.get_style_context().add_class("bg-entry");
+
         self.reverse_btn.set_halign(gtk::Align::Center);
         let reverse_img = gtk::Image::new_from_icon_name(Some("network-transmit-receive-symbolic"), gtk::IconSize::Button);
         reverse_img.show();