[shotwell] Use dark theme



commit 7ecca041fa8640400d834c0c6320809c93a5e2d5
Author: Jens Georg <mail jensge org>
Date:   Sat Apr 21 15:02:29 2018 +0200

    Use dark theme
    
    https://bugzilla.gnome.org/show_bug.cgi?id=718212

 misc/org.yorba.shotwell.gschema.xml     |    8 +-
 src/CheckerboardLayout.vala             |   37 ++++++------
 src/config/Config.vala                  |   93 +------------------------------
 src/config/ConfigurationInterfaces.vala |   20 +++---
 src/config/GSettingsEngine.vala         |    4 +-
 src/dialogs/Preferences.vala            |   12 ++++
 src/main.vala                           |    3 +
 src/util/image.vala                     |    5 --
 ui/preferences_dialog.ui                |   56 +++++++++++++------
 9 files changed, 89 insertions(+), 149 deletions(-)
---
diff --git a/misc/org.yorba.shotwell.gschema.xml b/misc/org.yorba.shotwell.gschema.xml
index 2bd9003..b3f0c1b 100644
--- a/misc/org.yorba.shotwell.gschema.xml
+++ b/misc/org.yorba.shotwell.gschema.xml
@@ -156,10 +156,10 @@
         <description>Pin toolbar in fullscreen, or not.</description>
     </key>
     
-    <key name="background-color" type="s">
-        <default>'#444'</default>
-        <summary>background color</summary>
-        <description>A grayscale color for use as the background color.</description>
+    <key name="use-dark-theme" type="b">
+        <default>true</default>
+        <summary>prefer GTK's dark theme</summary>
+        <description>Whether to use the dark theme of GTK for Shotwell or not.</description>
     </key>
 
     <key name="transparent-background-type" type="s">
diff --git a/src/CheckerboardLayout.vala b/src/CheckerboardLayout.vala
index de5869b..7a1eb4a 100644
--- a/src/CheckerboardLayout.vala
+++ b/src/CheckerboardLayout.vala
@@ -567,7 +567,7 @@ public abstract class CheckerboardItem : ThumbnailView {
     }
 
     private int get_selection_border_width(int scale) {
-        return ((scale <= ((Thumbnail.MIN_SCALE + Thumbnail.MAX_SCALE) / 3)) ? 2 : 3)
+        return ((scale <= ((Thumbnail.MIN_SCALE + Thumbnail.MAX_SCALE) / 3)) ? 5 : 4)
             + BORDER_WIDTH;
     }
     
@@ -588,7 +588,7 @@ public abstract class CheckerboardItem : ThumbnailView {
     }
     
     public void paint(Gtk.StyleContext style_context, Cairo.Context ctx, Gdk.RGBA bg_color, Gdk.RGBA 
selected_color,
-        Gdk.RGBA? border_color) {
+        Gdk.RGBA? border_color, Gdk.RGBA? focus_color) {
         ctx.save();
         ctx.translate(allocation.x + FRAME_WIDTH,
                       allocation.y + FRAME_WIDTH);
@@ -614,8 +614,8 @@ public abstract class CheckerboardItem : ThumbnailView {
         // draw a border for the cursor with the selection width and normal border color
         if (is_cursor) {
             ctx.save();
-            ctx.set_source_rgba(border_color.red, border_color.green, border_color.blue,
-                    border_color.alpha);
+            ctx.set_source_rgba(focus_color.red, focus_color.green, focus_color.blue,
+                    focus_color.alpha);
             paint_border(ctx, pixbuf_dim, pixbuf_origin,
                 get_selection_border_width(int.max(pixbuf_dim.width, pixbuf_dim.height)));
             ctx.restore();
@@ -630,15 +630,6 @@ public abstract class CheckerboardItem : ThumbnailView {
             ctx.restore();
         }
         
-        // draw border
-        if (border_color != null) {
-            ctx.save();
-            ctx.set_source_rgba(border_color.red, border_color.green, border_color.blue,
-                border_color.alpha);
-            paint_border(ctx, pixbuf_dim, pixbuf_origin, BORDER_WIDTH);
-            ctx.restore();
-        }
-        
         if (display_pixbuf != null) {
             ctx.save();
             ctx.set_source_rgba(bg_color.red, bg_color.green, bg_color.blue, bg_color.alpha);
@@ -851,6 +842,7 @@ public class CheckerboardLayout : Gtk.DrawingArea {
     private string message = null;
     private Gdk.RGBA selected_color;
     private Gdk.RGBA unselected_color;
+    private Gdk.RGBA focus_color;
     private Gdk.RGBA border_color;
     private Gdk.RGBA bg_color;
     private Gdk.Rectangle visible_page = Gdk.Rectangle();
@@ -1903,13 +1895,22 @@ public class CheckerboardLayout : Gtk.DrawingArea {
 
     private void set_colors(bool in_focus = true) {
         // set up selected/unselected colors
-        var val = get_style_context().get_property("border-color", Gtk.StateFlags.SELECTED); 
//Config.Facade.get_instance().get_unselected_color();
+        var ctx = get_style_context();
+        ctx.save();
+        ctx.add_class("view");
+        var val = ctx.get_property("border-color", Gtk.StateFlags.NORMAL);
+        focus_color = *(Gdk.RGBA*)val.get_boxed();
+
+        val = ctx.get_property("border-color", Gtk.StateFlags.FOCUSED);
+        border_color = *(Gdk.RGBA*)val.get_boxed();
+
+        // Checked in GtkIconView - The selection is drawn using render_background
+        val = ctx.get_property("background-color", Gtk.StateFlags.FOCUSED | Gtk.StateFlags.SELECTED);
         selected_color = *(Gdk.RGBA*)val.get_boxed();
-        Config.Facade.get_instance().get_selected_color(in_focus);
-        val = get_style_context().get_property("color", Gtk.StateFlags.NORMAL); 
//Config.Facade.get_instance().get_unselected_color();
 
+        val = ctx.get_property("color", Gtk.StateFlags.NORMAL);
         unselected_color = *(Gdk.RGBA*)val.get_boxed();
-        border_color =  Config.Facade.get_instance().get_border_color();
+        ctx.restore();
     }
     
     public override void size_allocate(Gtk.Allocation allocation) {
@@ -1942,7 +1943,7 @@ public class CheckerboardLayout : Gtk.DrawingArea {
             // have all items in the exposed area paint themselves
             foreach (CheckerboardItem item in intersection(visible_page)) {
                 item.paint(get_style_context(), ctx, bg_color, item.is_selected() ? selected_color : 
unselected_color,
-                    border_color);
+                    border_color, focus_color);
             }
         } else {
             // draw the message in the center of the window
diff --git a/src/config/Config.vala b/src/config/Config.vala
index f80bfce..5675567 100644
--- a/src/config/Config.vala
+++ b/src/config/Config.vala
@@ -20,25 +20,9 @@ public class Facade : ConfigurationFacade {
     public const int HEIGHT_DEFAULT = 768;
     public const int SIDEBAR_MIN_POSITION = 180;
     public const int SIDEBAR_MAX_POSITION = 1000;
-    public const string DEFAULT_BG_COLOR = "#444";
     public const int NO_VIDEO_INTERPRETER_STATE = -1;
 
-    private const double BLACK_THRESHOLD = 0.61;
-    private const string DARK_SELECTED_COLOR = "#0AD";
-    private const string LIGHT_SELECTED_COLOR = "#2DF";
-    private const string DARK_UNSELECTED_COLOR = "#000";
-    private const string LIGHT_UNSELECTED_COLOR = "#FFF";
-    private const string DARK_BORDER_COLOR = "#999";
-    private const string LIGHT_BORDER_COLOR = "#AAA";
-    private const string DARK_UNFOCUSED_SELECTED_COLOR = "#6fc4dd";
-    private const string LIGHT_UNFOCUSED_SELECTED_COLOR = "#99efff";
-    
-    private string bg_color = null;
-    private string selected_color = null;
-    private string unselected_color = null;
-    private string unfocused_selected_color = null;
-    private string border_color = null;
-    
+
     private static Facade instance = null;
 
     public signal void colors_changed();
@@ -46,7 +30,6 @@ public class Facade : ConfigurationFacade {
     private Facade() {
         base(new GSettingsConfigurationEngine());
 
-        bg_color_name_changed.connect(on_color_name_changed);
         transparent_background_type_changed.connect(on_color_name_changed);
         transparent_background_color_changed.connect(on_color_name_changed);
     }
@@ -61,80 +44,6 @@ public class Facade : ConfigurationFacade {
     private void on_color_name_changed() {
         colors_changed();
     }
-
-    private void set_text_colors(Gdk.RGBA bg_color) {
-        // since bg color is greyscale, we only need to compare the red value to the threshold,
-        // which determines whether the background is dark enough to need light text and selection
-        // colors or vice versa
-        if (bg_color.red > BLACK_THRESHOLD) {
-            selected_color = DARK_SELECTED_COLOR;
-            unselected_color = DARK_UNSELECTED_COLOR;
-            unfocused_selected_color = DARK_UNFOCUSED_SELECTED_COLOR;
-            border_color = DARK_BORDER_COLOR;
-        } else {
-            selected_color = LIGHT_SELECTED_COLOR;
-            unselected_color = LIGHT_UNSELECTED_COLOR;
-            unfocused_selected_color = LIGHT_UNFOCUSED_SELECTED_COLOR;
-            border_color = LIGHT_BORDER_COLOR;
-        }
-    }
-
-    private void get_colors() {
-        bg_color = base.get_bg_color_name();
-        
-        if (!is_color_parsable(bg_color))
-            bg_color = DEFAULT_BG_COLOR;
-
-        set_text_colors(parse_color(bg_color));
-    }
-
-    public Gdk.RGBA get_bg_color() {
-        if (is_string_empty(bg_color))
-            get_colors();
-
-        return parse_color(bg_color);
-    }
-
-    public Gdk.RGBA get_selected_color(bool in_focus = true) {
-        if (in_focus) {
-            if (is_string_empty(selected_color))
-                get_colors();
-
-            return parse_color(selected_color);
-        } else {
-            if (is_string_empty(unfocused_selected_color))
-                get_colors();
-
-            return parse_color(unfocused_selected_color);
-        }
-    }
-    
-    public Gdk.RGBA get_unselected_color() {
-        if (is_string_empty(unselected_color))
-            get_colors();
-
-        return parse_color(unselected_color);
-    }
-
-    public Gdk.RGBA get_border_color() {
-        if (is_string_empty(border_color))
-            get_colors();
-
-        return parse_color(border_color);
-    }
-    
-    public void set_bg_color(Gdk.RGBA color) {
-        uint8 col_tmp = (uint8) (color.red * 255.0);
-        
-        bg_color = "#%02X%02X%02X".printf(col_tmp, col_tmp, col_tmp);
-        set_bg_color_name(bg_color);
-        
-        set_text_colors(color);
-    }
-    
-    public void commit_bg_color() {
-        base.set_bg_color_name(bg_color);
-    }
 }
 
 // preconfigure may be deleted if not used.
diff --git a/src/config/ConfigurationInterfaces.vala b/src/config/ConfigurationInterfaces.vala
index c785144..8af5a73 100644
--- a/src/config/ConfigurationInterfaces.vala
+++ b/src/config/ConfigurationInterfaces.vala
@@ -21,7 +21,7 @@ public enum FuzzyPropertyState {
 
 public enum ConfigurableProperty {   
     AUTO_IMPORT_FROM_LIBRARY = 0,
-    BG_COLOR_NAME,
+    GTK_THEME_VARIANT,
     TRANSPARENT_BACKGROUND_TYPE,
     TRANSPARENT_BACKGROUND_COLOR,
     COMMIT_METADATA_TO_MASTERS,
@@ -100,8 +100,8 @@ public enum ConfigurableProperty {
             case AUTO_IMPORT_FROM_LIBRARY:
                 return "AUTO_IMPORT_FROM_LIBRARY";
                 
-            case BG_COLOR_NAME:
-                return "BG_COLOR_NAME";
+            case GTK_THEME_VARIANT:
+                return "GTK_THEME_VARIANT";
 
             case TRANSPARENT_BACKGROUND_TYPE:
                 return "TRANSPARENT_BACKGROUND_TYPE";
@@ -376,7 +376,7 @@ public abstract class ConfigurationFacade : Object {
                 auto_import_from_library_changed();
             break;
             
-            case ConfigurableProperty.BG_COLOR_NAME:
+            case ConfigurableProperty.GTK_THEME_VARIANT:
                 bg_color_name_changed();
             break;
 
@@ -449,21 +449,21 @@ public abstract class ConfigurationFacade : Object {
     }
 
     //
-    // bg color name
+    // GTK theme variant
     //
-    public virtual string get_bg_color_name() {
+    public virtual bool get_gtk_theme_variant() {
         try {
-            return get_engine().get_string_property(ConfigurableProperty.BG_COLOR_NAME);
+            return get_engine().get_bool_property(ConfigurableProperty.GTK_THEME_VARIANT);
         } catch (ConfigurationError err) {
             on_configuration_error(err);
 
-            return "";
+            return true;
         }
     }
     
-    public virtual void set_bg_color_name(string color_name) {
+    public virtual void set_gtk_theme_variant(bool dark) {
         try {
-            get_engine().set_string_property(ConfigurableProperty.BG_COLOR_NAME, color_name);
+            get_engine().set_bool_property(ConfigurableProperty.GTK_THEME_VARIANT, dark);
         } catch (ConfigurationError err) {
             on_configuration_error(err);
             return;
diff --git a/src/config/GSettingsEngine.vala b/src/config/GSettingsEngine.vala
index 89116a7..a1b830d 100644
--- a/src/config/GSettingsEngine.vala
+++ b/src/config/GSettingsEngine.vala
@@ -30,7 +30,7 @@ public class GSettingsConfigurationEngine : ConfigurationEngine, GLib.Object {
         schema_names = new string[ConfigurableProperty.NUM_PROPERTIES];
 
         schema_names[ConfigurableProperty.AUTO_IMPORT_FROM_LIBRARY] = FILES_PREFS_SCHEMA_NAME;
-        schema_names[ConfigurableProperty.BG_COLOR_NAME] = UI_PREFS_SCHEMA_NAME;
+        schema_names[ConfigurableProperty.GTK_THEME_VARIANT] = UI_PREFS_SCHEMA_NAME;
         schema_names[ConfigurableProperty.TRANSPARENT_BACKGROUND_TYPE] = UI_PREFS_SCHEMA_NAME;
         schema_names[ConfigurableProperty.TRANSPARENT_BACKGROUND_COLOR] = UI_PREFS_SCHEMA_NAME;
         schema_names[ConfigurableProperty.COMMIT_METADATA_TO_MASTERS] = FILES_PREFS_SCHEMA_NAME;
@@ -104,7 +104,7 @@ public class GSettingsConfigurationEngine : ConfigurationEngine, GLib.Object {
         key_names = new string[ConfigurableProperty.NUM_PROPERTIES];
         
         key_names[ConfigurableProperty.AUTO_IMPORT_FROM_LIBRARY] = "auto-import";
-        key_names[ConfigurableProperty.BG_COLOR_NAME] = "background-color";
+        key_names[ConfigurableProperty.GTK_THEME_VARIANT] = "use-dark-theme";
         key_names[ConfigurableProperty.TRANSPARENT_BACKGROUND_TYPE] = "transparent-background-type";
         key_names[ConfigurableProperty.TRANSPARENT_BACKGROUND_COLOR] = "transparent-background-color";
         key_names[ConfigurableProperty.COMMIT_METADATA_TO_MASTERS] = "commit-metadata";
diff --git a/src/dialogs/Preferences.vala b/src/dialogs/Preferences.vala
index acf53c6..17b16cf 100644
--- a/src/dialogs/Preferences.vala
+++ b/src/dialogs/Preferences.vala
@@ -19,6 +19,9 @@ public class PreferencesDialog : Gtk.Dialog {
     private static PreferencesDialog preferences_dialog;
 
     [GtkChild]
+    private Gtk.Switch switch_dark;
+
+    [GtkChild]
     private Gtk.ComboBox photo_editor_combo;
     [GtkChild]
     private Gtk.ComboBox raw_editor_combo;
@@ -138,6 +141,8 @@ public class PreferencesDialog : Gtk.Dialog {
         default_raw_developer_combo.append_text(RawDeveloper.SHOTWELL.get_label());
         set_raw_developer_combo(Config.Facade.get_instance().get_default_raw_developer());
         default_raw_developer_combo.changed.connect(on_default_raw_developer_changed);
+        switch_dark.active = Gtk.Settings.get_default().gtk_application_prefer_dark_theme;
+        switch_dark.notify["active"].connect(on_theme_variant_changed);
     }
 
     public void populate_preference_options() {
@@ -152,6 +157,13 @@ public class PreferencesDialog : Gtk.Dialog {
         lowercase.set_active(Config.Facade.get_instance().get_use_lowercase_filenames());
     }
 
+    private void on_theme_variant_changed(GLib.Object o, GLib.ParamSpec ps) {
+        var config = Config.Facade.get_instance();
+        config.set_gtk_theme_variant(switch_dark.active);
+
+        Gtk.Settings.get_default().gtk_application_prefer_dark_theme = switch_dark.active;
+    }
+
     private void on_radio_changed() {
         var config = Config.Facade.get_instance();
 
diff --git a/src/main.vala b/src/main.vala
index b25b909..f767872 100644
--- a/src/main.vala
+++ b/src/main.vala
@@ -355,6 +355,9 @@ void main(string[] args) {
     try {
         Gtk.init_with_args(ref args, _("[FILE]"), CommandlineOptions.get_options(),
             Resources.APP_GETTEXT_PACKAGE);
+
+        var use_dark = Config.Facade.get_instance().get_gtk_theme_variant();
+        Gtk.Settings.get_default().gtk_application_prefer_dark_theme = use_dark;
     } catch (Error e) {
         print(e.message + "\n");
         print(_("Run “%s --help” to see a full list of available command line options.\n"), args[0]);
diff --git a/src/util/image.vala b/src/util/image.vala
index 81210df..0a30339 100644
--- a/src/util/image.vala
+++ b/src/util/image.vala
@@ -4,11 +4,6 @@
  * See the COPYING file in this distribution.
  */
 
-bool is_color_parsable(string spec) {
-    var color = Gdk.RGBA ();
-    return color.parse(spec);
-}
-
 Gdk.RGBA parse_color(string spec) {
     return fetch_color(spec);
 }
diff --git a/ui/preferences_dialog.ui b/ui/preferences_dialog.ui
index 4dbaa1f..5dbe765 100644
--- a/ui/preferences_dialog.ui
+++ b/ui/preferences_dialog.ui
@@ -44,7 +44,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">1</property>
-                    <property name="top_attach">3</property>
+                    <property name="top_attach">4</property>
                   </packing>
                 </child>
                 <child>
@@ -54,7 +54,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">1</property>
-                    <property name="top_attach">13</property>
+                    <property name="top_attach">14</property>
                   </packing>
                 </child>
                 <child>
@@ -90,7 +90,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">2</property>
+                    <property name="top_attach">3</property>
                     <property name="width">2</property>
                   </packing>
                 </child>
@@ -106,7 +106,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">3</property>
+                    <property name="top_attach">4</property>
                   </packing>
                 </child>
                 <child>
@@ -122,7 +122,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">4</property>
+                    <property name="top_attach">5</property>
                     <property name="width">2</property>
                   </packing>
                 </child>
@@ -141,7 +141,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">5</property>
+                    <property name="top_attach">6</property>
                     <property name="width">2</property>
                   </packing>
                 </child>
@@ -157,7 +157,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">6</property>
+                    <property name="top_attach">7</property>
                   </packing>
                 </child>
                 <child>
@@ -170,7 +170,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">8</property>
+                    <property name="top_attach">9</property>
                   </packing>
                 </child>
                 <child>
@@ -186,7 +186,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">9</property>
+                    <property name="top_attach">10</property>
                     <property name="width">2</property>
                   </packing>
                 </child>
@@ -204,7 +204,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">10</property>
+                    <property name="top_attach">11</property>
                     <property name="width">2</property>
                   </packing>
                 </child>
@@ -221,7 +221,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">11</property>
+                    <property name="top_attach">12</property>
                     <property name="width">2</property>
                   </packing>
                 </child>
@@ -239,7 +239,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">12</property>
+                    <property name="top_attach">13</property>
                     <property name="width">2</property>
                   </packing>
                 </child>
@@ -255,7 +255,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">13</property>
+                    <property name="top_attach">14</property>
                   </packing>
                 </child>
                 <child>
@@ -265,7 +265,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">1</property>
-                    <property name="top_attach">6</property>
+                    <property name="top_attach">7</property>
                   </packing>
                 </child>
                 <child>
@@ -278,7 +278,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">1</property>
-                    <property name="top_attach">7</property>
+                    <property name="top_attach">8</property>
                   </packing>
                 </child>
                 <child>
@@ -329,7 +329,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">7</property>
+                    <property name="top_attach">8</property>
                   </packing>
                 </child>
                 <child>
@@ -343,7 +343,7 @@
                   </object>
                   <packing>
                     <property name="left_attach">0</property>
-                    <property name="top_attach">1</property>
+                    <property name="top_attach">2</property>
                   </packing>
                 </child>
                 <child>
@@ -428,11 +428,31 @@
                   </object>
                   <packing>
                     <property name="left_attach">1</property>
+                    <property name="top_attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">end</property>
+                    <property name="label" translatable="yes">Use dark theme:</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
                     <property name="top_attach">1</property>
                   </packing>
                 </child>
                 <child>
-                  <placeholder/>
+                  <object class="GtkSwitch" id="switch_dark">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="halign">start</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">1</property>
+                    <property name="top_attach">1</property>
+                  </packing>
                 </child>
               </object>
             </child>


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]