Styles: support more PopoverMenu features

demo/GraniteDemo.vala

@@ -48,40 +48,61 @@ public class Granite.Demo : Gtk.Application {
         main_stack.add_titled (dialogs_view, "dialogs", "Dialogs");
         main_stack.add_titled (application_view, "application", "Application");
 
-        var stack_sidebar = new Gtk.StackSidebar ();
-        stack_sidebar.stack = main_stack;
+        var gtk_settings = Gtk.Settings.get_default ();
+
+        var mode_switch = new Granite.ModeSwitch.from_icon_name (
+            "display-brightness-symbolic",
+            "weather-clear-night-symbolic"
+        ) {
+            primary_icon_tooltip_text = ("Light background"),
+            secondary_icon_tooltip_text = ("Dark background"),
+            valign = CENTER
+        };
+        mode_switch.bind_property ("active", gtk_settings, "gtk-application-prefer-dark-theme", BIDIRECTIONAL);
+
+        var end_header = new Gtk.HeaderBar () {
+            show_title_buttons = false
+        };
+        end_header.add_css_class (Granite.STYLE_CLASS_FLAT);
+        end_header.pack_end (new Gtk.WindowControls (END));
+        end_header.pack_end (mode_switch);
+
+        var end_box = new Gtk.Box (VERTICAL, 0);
+        end_box.append (end_header);
+        end_box.append (main_stack);
+
+        var start_header = new Gtk.HeaderBar () {
+            show_title_buttons = false,
+            title_widget = new Gtk.Label ("")
+        };
+        start_header.add_css_class (Granite.STYLE_CLASS_FLAT);
+        start_header.pack_start (new Gtk.WindowControls (START));
+
+        var stack_sidebar = new Gtk.StackSidebar () {
+            stack = main_stack,
+            vexpand = true
+        };
+
+        var start_box = new Gtk.Box (VERTICAL, 0);
+        start_box.append (start_header);
+        start_box.append (stack_sidebar);
+        start_box.add_css_class (Granite.STYLE_CLASS_SIDEBAR);
 
         var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL) {
-            start_child = stack_sidebar,
-            end_child = main_stack,
+            start_child = start_box,
+            end_child = end_box,
             resize_start_child = false,
             shrink_end_child = false,
             shrink_start_child = false
         };
 
-        var gtk_settings = Gtk.Settings.get_default ();
-
-        var mode_switch = new Granite.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.valign = Gtk.Align.CENTER;
-        mode_switch.bind_property ("active", gtk_settings, "gtk-application-prefer-dark-theme", GLib.BindingFlags.BIDIRECTIONAL);
-
         var granite_settings = Granite.Settings.get_default ();
         gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == Granite.Settings.ColorScheme.DARK;
 
-        var headerbar = new Gtk.HeaderBar ();
-        headerbar.add_css_class ("default-decoration");
-        headerbar.show_title_buttons = true;
-        headerbar.pack_end (mode_switch);
-
         window.child = paned;
         window.set_default_size (900, 600);
         window.set_size_request (750, 500);
-        window.set_titlebar (headerbar);
+        window.titlebar = new Gtk.Grid () { visible = false };
         window.title = "Granite Demo";
 
         add_window (window);

lib/Icons/icons.gresource.xml

@@ -25,8 +25,8 @@
     <file alias="scalable/status/adw-tab-icon-missing-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/adw-tab-icon-missing-symbolic.svg</file>
     <file alias="scalable/status/adw-tab-overflow-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/adw-tab-overflow-symbolic.svg</file>
 
-    <file alias="scalable/status/check-active-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-active-symbolic.svg</file>
-    <file alias="scalable/status/check-mixed-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-mixed-symbolic.svg</file>
+    <file alias="scalable/status/check-checked-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-checked.svg</file>
+    <file alias="scalable/status/check-indeterminated-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-indeterminate.svg</file>
 
     <file alias="scalable/status/pager-checked-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/pager-checked-symbolic.svg</file>
 

lib/Styles/Gtk/Arrow.scss

@@ -0,0 +1,21 @@
+arrow {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+    min-height: rem(16px);
+    min-width: rem(16px);
+
+    &.down {
+        -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+    }
+
+    &.left {
+        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
+    }
+
+    &.right {
+        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+    }
+
+    &.up {
+        -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+    }
+}

lib/Styles/Gtk/CheckRadio.scss

@@ -0,0 +1,40 @@
+check,
+radio {
+    background-color: scale-color($toplevel-border-color, $alpha: -50%); // FIXME: abstract as trough color?
+    -gtk-icon-size: 1em;
+    min-height: 1em;
+    min-width: 1em;
+    padding: 1px;
+
+    &:checked {
+        background-color: $BLUEBERRY_500; // FIXME: use accent color
+        color: white;
+        -gtk-icon-source: -gtk-icontheme("check-checked-symbolic");
+    }
+
+    &:indeterminate {
+        color: rgba($fg-color, 0.5);
+        -gtk-icon-source: -gtk-icontheme("check-indeterminate-symbolic");
+    }
+}
+
+check {
+    border-radius: rem($window_radius / 3);
+
+    &:checked {
+        -gtk-icon-source: -gtk-icontheme("check-checked-symbolic");
+    }
+}
+
+radio {
+    border-radius: 50%;
+
+    &:checked {
+        -gtk-icon-source: -gtk-icontheme("pager-checked-symbolic");
+    }
+}
+
+radiobutton,
+checkbutton {
+    border-spacing: 0.5em; // FIXME: abstract button spacing?
+}

lib/Styles/Gtk/Index.scss

@@ -1,4 +1,6 @@
+@import 'Arrow.scss';
 @import 'Button.scss';
+@import 'CheckRadio.scss';
 @import 'HeaderBar.scss';
 @import 'Image.scss';
 @import 'Popover.scss';

lib/Styles/Gtk/Popover.scss

@@ -21,31 +21,70 @@ popover {
             highlight(),
             0 0 0 1px $toplevel-border-color,
             shadow(2);
-        padding: rem(6px);
+        padding: rem(6px); // FIXME: abstract button spacing?
     }
 }
 
-.menuitem,
-modelbutton {
+.model {
     border-radius: rem($window_radius / 2);
-    border-spacing: rem(6px);
-    min-width: rem(150px);
+    padding: rem(6px); // FIXME: abstract button spacing?
     transition:
         background duration("expand") easing(),
         transform duration("expand") easing("ease-out-back");
-    padding: rem(6px);
 
-    &:hover {
+    &.image-button {
+        background: rgba($fg_color, 0.05);
+    }
+
+    &.circular {
+        padding: rem(9px);
+    }
+
+    // Focus and hover are synonymous in Popovers
+    &:hover,
+    &:focus {
         background: rgba($fg_color, 0.1);
     }
 
     &:active {
         background: rgba($fg-color, 0.15);
-        // There's an optical illusion because items are wider than
-        // they are tall, so compensate by scaling y a little extra
-        transform: scale(0.98, 0.96);
+        transform: scale(0.95);
         transition:
             background duration("collapse") easing(),
             transform duration("collapse") easing();
     }
 }
+
+.menuitem,
+modelbutton {
+    @extend .model;
+
+    border-spacing: rem(6px); // FIXME: abstract button spacing?
+    min-width: rem(150px);
+
+    &:active {
+        // There's an optical illusion because items are wider than
+        // they are tall, so compensate by scaling y a little extra
+        transform: scale(0.98, 0.96);
+    }
+}
+
+.menu {
+    .circular-buttons,
+    .inline-buttons {
+        border-spacing: rem(6px); // FIXME: abstract button spacing?
+        padding: rem(6px);
+
+        > box {
+            border-spacing: rem(6px); // FIXME: abstract button spacing?
+        }
+    }
+
+    .title {
+        @extend .title-4;
+
+        &.separator {
+            padding: rem(6px); // FIXME: abstract button spacing?
+        }
+    }
+}