From 5b1e88c9955dd512ad9209453c9082b6e33de2c3 Mon Sep 17 00:00:00 2001 From: Cassidy James Blaede Date: Mon, 17 Dec 2018 12:08:10 -0700 Subject: [PATCH] Initial ModeSwitch work --- src/Widgets/ModeSwitch.vala | 157 ++++++++++++++++++++++++++++++++++++ src/meson.build | 1 + src/window.vala | 27 +++---- 3 files changed, 169 insertions(+), 16 deletions(-) create mode 100644 src/Widgets/ModeSwitch.vala diff --git a/src/Widgets/ModeSwitch.vala b/src/Widgets/ModeSwitch.vala new file mode 100644 index 0000000..98d99f2 --- /dev/null +++ b/src/Widgets/ModeSwitch.vala @@ -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''<
> + * {{{ + * 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; + }); + } +} + diff --git a/src/meson.build b/src/meson.build index 6503a1e..146b85c 100644 --- a/src/meson.build +++ b/src/meson.build @@ -1,6 +1,7 @@ executable('writeas-gtk', 'application.vala', 'window.vala', + 'Widgets/ModeSwitch.vala', c_args: ['-include', 'config.h'], link_args: '-lm', diff --git a/src/window.vala b/src/window.vala index 58fb7ad..b897fb1 100644 --- a/src/window.vala +++ b/src/window.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.SMALL_TOOLBAR); - darkmode_button.draw_indicator = false; + var 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; });