buttons: Create a SplitButton

This is inspired by the Adw.SplitButton, except it allows for
configuring the secondary button so we can show the current autopause
count.

Signed-off-by: Anna Schumaker <Anna@NoWheyCreamery.com>

emmental/buttons.py

@@ -39,3 +39,42 @@ class PopoverButton(Gtk.MenuButton):
     def popdown(self):
         """Close the popover."""
         self.get_popover().popdown()
+
+
+class SplitButton(Gtk.Box):
+    """A Button and secondary widget packed together."""
+
+    icon_name = GObject.Property(type=str)
+    icon_size = GObject.Property(type=Gtk.IconSize,
+                                 default=Gtk.IconSize.NORMAL)
+
+    def __init__(self, secondary: Gtk.Button, **kwargs):
+        """Initialize a Split Button."""
+        super().__init__(**kwargs)
+        self._primary = Button(hexpand=True, icon_name=self.icon_name,
+                               icon_size=self.icon_size)
+        self._separator = Gtk.Separator(orientation=Gtk.Orientation.VERTICAL,
+                                        margin_top=12, margin_bottom=12)
+        self._secondary = secondary
+
+        self.bind_property("icon-name", self._primary, "icon-name")
+        self.bind_property("icon-size", self._primary, "icon-size")
+        self._primary.connect("clicked", self.__clicked)
+
+        self.append(self._primary)
+        self.append(self._separator)
+        self.append(secondary)
+
+        self.add_css_class("emmental-splitbutton")
+
+    def __clicked(self, button: Button) -> None:
+        self.emit("clicked")
+
+    @GObject.Property(type=Gtk.Button, flags=GObject.ParamFlags.READABLE)
+    def secondary(self) -> Gtk.Button:
+        """Get the secondary button attached to the SplitButton."""
+        return self._secondary
+
+    @GObject.Signal
+    def clicked(self) -> None:
+        """Signal that the primary button has been clicked."""

emmental/emmental.css

@@ -9,3 +9,14 @@ paned.emmental-pane>separator {
 *.emmental-padding {
 	padding: 8px;
 }
+
+box.emmental-splitbutton>button {
+	border-radius: 0%;
+	margin-left: -1px;
+}
+
+box.emmental-splitbutton>menubutton>button {
+	border-radius: 0%;
+	margin-left: -1px;
+	padding: 6px;
+}

tests/test_buttons.py

@@ -1,6 +1,7 @@
 # Copyright 2022 (c) Anna Schumaker.
 """Test our button helper classes."""
 import unittest
+import unittest.mock
 import emmental.buttons
 from gi.repository import Gtk
 
@@ -79,3 +80,70 @@ class TestPopoverButton(unittest.TestCase):
     def test_popdown(self):
         """Test the popdown() function."""
         self.button.popdown()
+
+
+class TestSplitButton(unittest.TestCase):
+    """Test a Split Button."""
+
+    def setUp(self):
+        """Set up common variables."""
+        self.secondary = Gtk.Button()
+        self.button = emmental.buttons.SplitButton(secondary=self.secondary)
+
+    def test_button(self):
+        """Test that the split button is configured correctly."""
+        self.assertIsInstance(self.button, Gtk.Box)
+        self.assertIsInstance(self.button._primary, emmental.buttons.Button)
+        self.assertIsInstance(self.button._separator, Gtk.Separator)
+        self.assertEqual(self.button._secondary, self.secondary)
+
+        self.assertTrue(self.button._primary.get_hexpand())
+
+        self.assertEqual(self.button._separator.get_orientation(),
+                         Gtk.Orientation.VERTICAL)
+        self.assertEqual(self.button._separator.get_margin_top(), 12)
+        self.assertEqual(self.button._separator.get_margin_bottom(), 12)
+
+        self.assertEqual(self.button.get_first_child(), self.button._primary)
+        self.assertEqual(self.button._primary.get_next_sibling(),
+                         self.button._separator)
+        self.assertEqual(self.button._separator.get_next_sibling(),
+                         self.secondary)
+
+        self.assertTrue(self.button.has_css_class("emmental-splitbutton"))
+
+    def test_icon_name(self):
+        """Test the icon name property."""
+        self.assertEqual(self.button.icon_name, "")
+        self.button.icon_name = "icon-name"
+        self.assertEqual(self.button._primary.icon_name, "icon-name")
+
+        button2 = emmental.buttons.SplitButton(icon_name="icon-name",
+                                               secondary=Gtk.Button())
+        self.assertEqual(button2.icon_name, "icon-name")
+        self.assertEqual(button2._primary.icon_name, "icon-name")
+
+    def test_icon_size(self):
+        """Test the icon size property."""
+        self.assertEqual(self.button.icon_size, Gtk.IconSize.NORMAL)
+        self.button.icon_size = Gtk.IconSize.LARGE
+        self.assertEqual(self.button._primary.icon_size, Gtk.IconSize.LARGE)
+
+        button2 = emmental.buttons.SplitButton(icon_size=Gtk.IconSize.LARGE,
+                                               secondary=Gtk.Button())
+        self.assertEqual(button2.icon_size, Gtk.IconSize.LARGE)
+        self.assertEqual(button2._primary.icon_size, Gtk.IconSize.LARGE)
+
+    def test_secondary(self):
+        """Test the secondary property."""
+        self.assertEqual(self.button.secondary, self.secondary)
+        with self.assertRaises(TypeError):
+            self.button.secondary = Gtk.Button()
+        self.assertEqual(self.button.secondary, self.secondary)
+
+    def test_clicked(self):
+        """Test the clicked signal."""
+        on_click = unittest.mock.Mock()
+        self.button.connect("clicked", on_click)
+        self.button._primary.emit("clicked")
+        on_click.assert_called_with(self.button)