Unable to move Hdy.ApplicationWindow by dragging Hdy.HeaderBar in Vala

Question

Trying to use libhandy and Hdy.ApplicationWindow instead of Gtk.ApplicationWindow in my vala based application made for elementary OS.

---

My Problem

• While using Hdy.ApplicationWindow and Hdy.HeaderBar instead of Gtk.ApplicationWindow and Gtk.HeaderBar, I am unable to make the application window move by dragging the HeaderBar.
• I can move the window in my workspace by dragging the Gtk.HeaderBar but not in case of Hdy.HeaderBar
• In Hdy.HeaderBar I am forced to press the super key and drag to make the window move.

---

Source Code of the Application

public class Application : Gtk.Application {
    protected override void activate () {   
        //Gtk.ApplicationWindow app_window = new Gtk.ApplicationWindow (this);
             
        var gtk_settings = Gtk.Settings.get_default ();
        var hdy_window = new Hdy.ApplicationWindow ();
        var header_bar = new Hdy.HeaderBar ();
        var overlaybar = new Granite.Widgets.OverlayBar ();
        
        hdy_window.application = this;

        var dark_mode_switch = new Granite.ModeSwitch.from_icon_name (
            "display-brightness-symbolic",
            "weather-clear-night-symbolic"
        );
        
        //New Document
        var welcome_page = new Granite.Widgets.Welcome ("Ordne", "A simple Pomodoro Timer.");
        welcome_page.append ("document-open-recent", "Start Working", "Begin the Working Countdown.");
        welcome_page.append ("preferences-system", "Pomodoro Preferences", "Change Break and Working Duration");
        
        var grid_welcome = new Gtk.Grid () {
            orientation = Gtk.Orientation.VERTICAL
        };  

        dark_mode_switch.primary_icon_tooltip_text = ("Light background");
        dark_mode_switch.secondary_icon_tooltip_text = ("Dark background");
        dark_mode_switch.valign = Gtk.Align.CENTER;
        dark_mode_switch.bind_property ("active", gtk_settings, "gtk-application-prefer-dark-theme", GLib.BindingFlags.BIDIRECTIONAL);

        header_bar.show_close_button = true;
        header_bar.title = "Ordne";
        header_bar.pack_end(dark_mode_switch);  
        
        grid_welcome.add(header_bar);
        grid_welcome.add(welcome_page);       
        
        hdy_window.window_position = Gtk.WindowPosition.CENTER;
        hdy_window.set_default_size(1200, 700);
        hdy_window.add(grid_welcome);
        //main_window.set_titlebar(header_bar);
        //main_window.add(grid_welcome); //Adds the welcome grid to the window
        
        //hdy_window.add (main_window);
        hdy_window.show_all();
        //main_window.show_all();
    }

    public static int main (string[] args) {
        return new Application ().run (args);
    }    
}

---

How does it look?

---

What did I try?

• Referring to Vala Documentation, more focused at Docs related to Hdy.HeaderBar and Hdy.ApplicationWindow
• Understanding the way libhandy has been used to implement rounded corners in Elementary OS by referring to -

1. Round all Corners in Elementary OS Project
2. Understanding code changes in pull requests related to Rounding corners (implementing LibHandy) in Elementary OS AppCenter, Camera and Calendar

---

Looking forward to publish this application with an MIT License to the Elementary AppCenter. This Application's GitHub Repo is at https://github.com/candiedoperation/ordne

I have made an Electron Based Launcher For Linux (Like macOS Spotlight). Despite being electron it integrates really well and follows the Elementary OS Human Interface Guidelines. You can know more at https://gitlab.com/candiedoperation/fliger

P.S. AppCenter publishes only native apps, unable to share it with the Elementary OS Community.

Answer 1

You need to initialize libhany by invoking Hdy.init() function. You can actually see examples of this in all three pull requests to the 1st party elementary apps you linked to in the question.