Merge pull request #10 from cassidyjames/modeswitch

Use ModeSwitch

Author: thebaer

data/icons/writeas-bright-dark.png

@@ -8,9 +8,6 @@ foreach i : icon_sizes
     )
 endforeach
 
-install_data('icons/writeas-bright-dark.png',
-    install_dir: join_paths(get_option('datadir'), 'icons', 'hicolor', '16x16', 'actions'))
-
 install_data('com.github.writeas.writeas-gtk.desktop',
     install_dir: join_paths(get_option('datadir'), 'applications'))
 install_data('com.github.writeas.writeas-gtk.appdata.xml',

data/icons/[email protected]

@@ -0,0 +1,157 @@
+/*
+* Copyright (c) 2018 elementary, Inc. (https://elementary.io)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public
+* License as published by the Free Software Foundation; either
+* version 2 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+* Boston, MA 02110-1301 USA
+*/
+
+// From https://github.com/elementary/granite/blob/2066b377226cf327cb2d5399b6b40a2d36d47b11/lib/Widgets/ModeSwitch.vala
+
+/**
+ * ModeSwitch is a selection control for choosing between two options that can be described with an icon.
+ *
+ * ''Example''<<BR>>
+ * {{{
+ *   var gtk_settings = Gtk.Settings.get_default ();
+ *
+ *   var mode_switch = new ModeSwitch.from_icon_name ("display-brightness-symbolic", "weather-clear-night-symbolic");
+ *   mode_switch.primary_icon_tooltip_text = _("Light background");
+ *   mode_switch.secondary_icon_tooltip_text = _("Dark background");
+ *   mode_switch.bind_property ("active", gtk_settings, "gtk_application_prefer_dark_theme");
+ * }}}
+ */
+public class Granite.ModeSwitch : Gtk.Grid {
+    /**
+     * Whether the {@link Gtk.Switch} widget is pointing to the secondary icon or not.
+     */
+    public bool active { get; set; }
+
+    /**
+     * The {@link GLib.Icon} to use for the primary icon for the switch.
+     */
+    public GLib.Icon primary_icon_gicon { get; construct set; }
+
+    /**
+     * The icon name to use for the primary icon for the switch.
+     */
+    public string primary_icon_name { get; construct set; }
+
+    /**
+     * The contents of the tooltip on the primary icon.
+     */
+    public string primary_icon_tooltip_text { get; set; }
+
+    /**
+     * The {@link GLib.Icon} to use for the secondary icon for the switch.
+     */
+    public GLib.Icon secondary_icon_gicon { get; construct set; }
+
+    /**
+     * The icon name to use for the secondary icon for the switch.
+     */
+    public string secondary_icon_name { get; construct set; }
+
+    /**
+     * The contents of the tooltip on the secondary icon.
+     */
+    public string secondary_icon_tooltip_text { get; set; }
+
+    /**
+     * Constructs a new {@link Granite.ModeSwitch} using {@link GLib.Icon}s.
+     *
+     * @param primary_icon_gicon The {@link GLib.Icon} to use for the primary icon for the switch.
+     * @param secondary_icon_gicon The {@link GLib.Icon} to use for the secondary icon for the switch.
+     */
+    public ModeSwitch (GLib.Icon primary_icon_gicon, GLib.Icon secondary_icon_gicon) {
+        Object (
+            primary_icon_gicon: primary_icon_gicon,
+            secondary_icon_gicon: secondary_icon_gicon
+        );
+    }
+
+    /**
+     * Constructs a new {@link Granite.ModeSwitch} from icon names.
+     *
+     * @param primary_icon_name The icon name to use for the primary icon for the switch.
+     * @param secondary_icon_name The icon name to use for the secondary icon for the switch.
+     */
+    public ModeSwitch.from_icon_name (string primary_icon_name, string secondary_icon_name) {
+        Object (
+            primary_icon_gicon: new ThemedIcon (primary_icon_name),
+            secondary_icon_gicon: new ThemedIcon (secondary_icon_name),
+            primary_icon_name: primary_icon_name,
+            secondary_icon_name: secondary_icon_name
+        );
+    }
+
+    construct {
+        var primary_image = new Gtk.Image ();
+        primary_image.pixel_size = 16;
+
+        var primary_icon_box = new Gtk.EventBox ();
+        primary_icon_box.add_events (Gdk.EventMask.BUTTON_RELEASE_MASK);
+        primary_icon_box.add (primary_image);
+
+        var mode_switch = new Gtk.Switch ();
+        mode_switch.valign = Gtk.Align.CENTER;
+        mode_switch.get_style_context ().add_class ("mode-switch");
+
+        var secondary_icon = new Gtk.Image ();
+        secondary_icon.pixel_size = 16;
+
+        var secondary_icon_box = new Gtk.EventBox ();
+        secondary_icon_box.add_events (Gdk.EventMask.BUTTON_RELEASE_MASK);
+        secondary_icon_box.add (secondary_icon);
+
+        column_spacing = 6;
+        add (primary_icon_box);
+        add (mode_switch);
+        add (secondary_icon_box);
+
+        bind_property ("primary-icon-gicon", primary_image, "gicon", GLib.BindingFlags.SYNC_CREATE);
+        bind_property ("primary-icon-name", primary_image, "icon-name", GLib.BindingFlags.SYNC_CREATE);
+        bind_property ("primary-icon-tooltip-text", primary_image, "tooltip-text");
+        bind_property ("secondary-icon-gicon", secondary_icon, "gicon", GLib.BindingFlags.SYNC_CREATE);
+        bind_property ("secondary-icon-name", secondary_icon, "icon_name", GLib.BindingFlags.SYNC_CREATE);
+        bind_property ("secondary-icon-tooltip-text", secondary_icon, "tooltip-text");
+
+        this.notify["active"].connect (() => {
+            if (Gtk.StateFlags.DIR_RTL in get_state_flags ()) {
+                mode_switch.active = !active;
+            } else {
+                mode_switch.active = active;
+            }
+        });
+
+        mode_switch.notify["active"].connect (() => {
+            if (Gtk.StateFlags.DIR_RTL in get_state_flags ()) {
+                active = !mode_switch.active;
+            } else {
+                active = mode_switch.active;
+            }
+        });
+
+        primary_icon_box.button_release_event.connect (() => {
+            active = false;
+            return Gdk.EVENT_STOP;
+        });
+
+        secondary_icon_box.button_release_event.connect (() => {
+            active = true;
+            return Gdk.EVENT_STOP;
+        });
+    }
+}
+

data/meson.build

@@ -1,6 +1,7 @@
 executable('com.github.writeas.writeas-gtk',
     'application.vala',
     'window.vala',
+    'Widgets/ModeSwitch.vala',
 
     c_args: ['-include', 'config.h'],
     link_args: '-lm',

src/Widgets/ModeSwitch.vala

@@ -19,7 +19,7 @@
 public class WriteAs.MainWindow : Gtk.ApplicationWindow {
     private Gtk.TextView canvas;
     private Gtk.HeaderBar header;
-    private Gtk.ToggleButton darkmode_button;
+    private Granite.ModeSwitch darkmode_switch;
 
     private static string data_dir = ".writeas";
     private static string version = "1.0.1";
@@ -142,24 +142,19 @@ public class WriteAs.MainWindow : Gtk.ApplicationWindow {
         });
         header.pack_end(publish_button);
 
-        darkmode_button = new Gtk.ToggleButton();
-        darkmode_button.tooltip_text = _("Toggle dark theme");
-        // NOTE the fallback icon is a bit of a meaning stretch, but it works.
-        var icon_theme = Gtk.IconTheme.get_default();
-        darkmode_button.image = new Gtk.Image.from_icon_name(
-                icon_theme.has_icon("writeas-bright-dark") ?
-                    "writeas-bright-dark" : "weather-clear-night",
-                Gtk.IconSize.LARGE_TOOLBAR);
-        darkmode_button.draw_indicator = false;
+        darkmode_switch = new Granite.ModeSwitch.from_icon_name ("display-brightness-symbolic", "weather-clear-night-symbolic");
+        darkmode_switch.primary_icon_tooltip_text = ("Light theme");
+        darkmode_switch.secondary_icon_tooltip_text = ("Dark theme");
+        darkmode_switch.valign = Gtk.Align.CENTER;
         var settings = Gtk.Settings.get_default();
-        darkmode_button.toggled.connect(() => {
-            settings.gtk_application_prefer_dark_theme = darkmode_button.active;
-            dark_mode = darkmode_button.active;
+        darkmode_switch.notify["active"].connect(() => {
+            settings.gtk_application_prefer_dark_theme = darkmode_switch.active;
+            dark_mode = darkmode_switch.active;
             if (!is_initializing) theme_save();
 
             canvas.grab_focus();
         });
-        if (supports_dark_theme()) header.pack_end(darkmode_button);
+        if (supports_dark_theme()) header.pack_end(darkmode_switch);
 
         var fonts = new Gtk.MenuButton();
         fonts.tooltip_text = _("Change document font");
@@ -212,7 +207,7 @@ public class WriteAs.MainWindow : Gtk.ApplicationWindow {
             theme.load_from_file(get_data_dir() + "/prefs.ini", KeyFileFlags.NONE);
 
             dark_mode = theme.get_boolean("Theme", "darkmode");
-            darkmode_button.set_active(dark_mode);
+            darkmode_switch.active = dark_mode;
             Gtk.Settings.get_default().gtk_application_prefer_dark_theme = dark_mode;
             font_size = theme.get_integer("Theme", "fontsize");
             font = theme.get_string("Post", "font");
@@ -338,7 +333,7 @@ public class WriteAs.MainWindow : Gtk.ApplicationWindow {
 
         // Toggle theme with Ctrl+T
         accels.connect(Gdk.Key.T, Gdk.ModifierType.CONTROL_MASK, Gtk.AccelFlags.VISIBLE | Gtk.AccelFlags.LOCKED, (g,a,k,m) => {
-            darkmode_button.set_active(!darkmode_button.get_active());
+            darkmode_switch.active = !darkmode_switch.active;
             return true;
         });