ui: add monitor preview to settings page

data/ui/pages/monitor-settings-content.blp

@@ -8,6 +8,12 @@ Tuner.Page monitor_settings_content_page {
     id: "display-monitor-settings-content";
 
     Tuner.Group {
+        id: "preview";
+
+        $TunerDisplaysMonitorSettingsPreviewWidget {}
+    }
+
+    Tuner.Group {
         title: _("Display");
         id: "display";
 

src/meson.build

@@ -26,6 +26,7 @@ sources = files(
     'ui/widgets/monitor-list-widget.vala',
     'ui/widgets/monitor-layout.vala',
     'ui/widgets/monitor-layout-widget.vala',
+    'ui/widgets/monitor-settings-preview-widget.vala',
     'ui/widgets/monitor-row.vala',
     'ui/widgets/primary-display-widget.vala',
     'ui/widgets/single-monitor-widget.vala',

src/plugin.vala

@@ -23,6 +23,7 @@ namespace TunerDisplays {
             typeof(DisplaysVisibilityValidator).ensure();
             typeof(MonitorLayout).ensure();
             typeof(MonitorLayoutWidget).ensure();
+            typeof(MonitorSettingsPreviewWidget).ensure();
             typeof(MirrorSettingsWidget).ensure();
             typeof(PrimaryDisplayWidget).ensure();
             typeof(MonitorListWidget).ensure();

src/ui/widgets/monitor-layout.vala

@@ -20,6 +20,8 @@ namespace TunerDisplays {
         private int drag_start_y = 0;
         private bool drag_active;
         private bool needs_recenter = true;
+        private MonitorConfig? highlighted_monitor = null;
+        public bool interactive { get; set; default = true; }
         public bool require_connected { get; set; }
 
         public signal void layout_changed();
@@ -30,6 +32,9 @@ namespace TunerDisplays {
 
             var drag = new Gtk.GestureDrag();
             drag.drag_begin.connect((x, y) => {
+                if (!interactive)
+                    return;
+
                 dragged = hit_test(x, y);
                 if (dragged >= 0) {
                     drag_active = true;
@@ -39,6 +44,9 @@ namespace TunerDisplays {
                 queue_draw();
             });
             drag.drag_update.connect((dx, dy) => {
+                if (!interactive)
+                    return;
+
                 if (dragged < 0)
                     return;
 
@@ -60,6 +68,9 @@ namespace TunerDisplays {
                 queue_draw();
             });
             drag.drag_end.connect((dx, dy) => {
+                if (!interactive)
+                    return;
+
                 drag_active = false;
                 dragged = -1;
                 normalize_positions();
@@ -90,6 +101,11 @@ namespace TunerDisplays {
             queue_draw();
         }
 
+        public void set_highlighted_monitor(MonitorConfig? monitor) {
+            highlighted_monitor = monitor;
+            queue_draw();
+        }
+
         private void draw(Gtk.DrawingArea area, Cairo.Context cr, int width, int height) {
             if (!drag_active && (needs_recenter || width != view_width || height != view_height)) {
                 view_width = width;
@@ -125,6 +141,9 @@ namespace TunerDisplays {
                 rounded_rectangle(cr, x + 0.5, y + 0.5, w - 1, h - 1, 5);
                 cr.stroke();
 
+                if (monitor == highlighted_monitor)
+                    draw_monitor_highlight(cr, x, y, w, h);
+
                 draw_monitor_badge(cr, i + 1, x + w / 2, y + h / 2, dark, monitor.enabled);
 
                 if (drag_active && dragged == i)
@@ -151,6 +170,16 @@ namespace TunerDisplays {
             cr.show_text(label);
         }
 
+        private void draw_monitor_highlight(Cairo.Context cr, double x, double y, double w, double h) {
+            var style = Adw.StyleManager.get_default();
+            var accent = style.accent_color.to_rgba();
+
+            cr.set_line_width(3);
+            cr.set_source_rgba(accent.red, accent.green, accent.blue, 0.95);
+            rounded_rectangle(cr, x + 1.5, y + 1.5, w - 3, h - 3, 5);
+            cr.stroke();
+        }
+
         private void draw_position_overlay(Cairo.Context cr, string label, double cx, double top_y, int view_width, bool dark) {
             cr.select_font_face("Sans", Cairo.FontSlant.NORMAL, Cairo.FontWeight.BOLD);
             cr.set_font_size(16);

src/ui/widgets/monitor-settings-preview-widget.vala

+namespace TunerDisplays {
+
+    public class MonitorSettingsPreviewWidget : Tuner.Widget {
+        public override Gtk.Widget? create() {
+            var context = MonitorSettingsState.current;
+            var row = new Adw.PreferencesRow() {
+                activatable = false,
+                selectable = false,
+                can_focus = false,
+                focusable = false
+            };
+
+            var layout = new MonitorLayout() {
+                height_request = 150,
+                hexpand = true,
+                vexpand = false,
+                can_focus = false,
+                focusable = false,
+                can_target = false,
+                interactive = false,
+                require_connected = context.backend.requires_connected_layout
+            };
+            layout.set_highlighted_monitor(context.monitor);
+            layout.set_monitors(context.all_monitors);
+            context.changed.connect(() => layout.set_monitors(context.all_monitors));
+
+            row.child = layout;
+            return row;
+        }
+    }
+}