fix: rename/create dialog fixes and refactor (#86)

src/extension/app.ts

@@ -16,7 +16,8 @@ import { Extension, gettext as _ } from 'resource:///org/gnome/shell/extensions/
 import { log } from './logging';
 import { ShellVersion } from './shellversion';
 import { bind as bindHotkeys, unbind as unbindHotkeys, Bindings } from './hotkeys';
-import { ZoneEditor, ZonePreview, TabbedZoneManager, EntryDialog, ZoneManager } from "./editor";
+import { ZoneEditor, ZonePreview, TabbedZoneManager, ZoneManager } from "./editor";
+import { LayoutNameDialog } from "./dialogs";
 
 import {
     Display,
@@ -678,40 +679,40 @@ export default class App extends Extension {
         renameLayoutButton.connect('activate', () => {
             const currentMonitorLayoutIdx = this.currentLayoutIdxPerMonitor[getCurrentMonitorIndex()];
             const currentMonitorLayout = this.layouts.definitions[currentMonitorLayoutIdx];
-            let dialog = new EntryDialog({
-                label: "test"
-            });
-            dialog.label.text = "Rename Layout " + currentMonitorLayout.name;
-            dialog.entry.text = currentMonitorLayout.name;
-            dialog.onOkay = (text: string) => {
-                currentMonitorLayout.name = text;
-                this.saveLayouts();
-                this.reloadMenu();
-            }
-            dialog.open(global.get_current_time());
+
+            let dialog = new LayoutNameDialog(
+                `Rename Layout ${currentMonitorLayout.name}`,
+                currentMonitorLayout.name,
+                (text: string) => {
+                    currentMonitorLayout.name = text;
+                    this.saveLayouts();
+                    this.reloadMenu();
+                });
+            dialog.open();
         });
 
         newLayoutButton.connect('activate', () => {
-            let dialog = new EntryDialog();
-            dialog.label.text = "Create New Layout";
-            dialog.onOkay = (text: string) => {
-                this.layouts.definitions.push({
-                    name: text,
-                    type: 0,
-                    length: 100,
-                    items: [
-                        {
-                            type: 0,
-                            length: 100,
-                            items: []
-                        }
-                    ]
+            let dialog = new LayoutNameDialog(
+                `Create new layout`,
+                'New Layout',
+                (text: string) => {
+                    this.layouts.definitions.push({
+                        name: text,
+                        type: 0,
+                        length: 100,
+                        items: [
+                            {
+                                type: 0,
+                                length: 100,
+                                items: []
+                            }
+                        ]
+                    });
+                    this.setLayout(this.layouts.definitions.length - 1);
+                    this.saveLayouts();
+                    this.reloadMenu();
                 });
-                this.setLayout(this.layouts.definitions.length - 1);
-                this.saveLayouts();
-                this.reloadMenu();
-            }
-            dialog.open(global.get_current_time());
+            dialog.open();
         });
 
         editLayoutButton.connect('activate', () => {

src/extension/dialogs.ts

@@ -0,0 +1,44 @@
+// @ts-ignore
+import * as Dialog from 'resource:///org/gnome/shell/ui/dialog.js';
+// @ts-ignore
+import * as ModalDialog from 'resource:///org/gnome/shell/ui/modalDialog.js';
+// @ts-ignore
+import St from 'gi://St';
+// @ts-ignore
+import Clutter from 'gi://Clutter';
+
+
+export class LayoutNameDialog {
+    private _modalDialog: ModalDialog.ModalDialog;
+    private _okayCallback: (text: string) => void;
+
+    constructor(title: string, layoutName: string, okayCallback: (text: string) => void) {
+        this._modalDialog = new ModalDialog.ModalDialog({});
+        this._okayCallback = okayCallback;
+
+        const listLayout = new Dialog.ListSection({ title });
+        this._modalDialog.contentLayout.add_child(listLayout);
+
+        const entry = new St.Entry({ text: layoutName });
+        listLayout.add_child(entry);
+
+        this._modalDialog.setButtons([
+            {
+                label: "Ok",
+                key: Clutter.Return,
+                action: () => {
+                    this._okayCallback(entry.text);
+                    this._modalDialog.close();
+                },
+            },
+            {
+                label: "Cancel",
+                key: Clutter.Escape,
+                action: () => this._modalDialog.close(),
+            }]);
+    }
+
+    open() {
+        this._modalDialog.open();
+    }
+}

src/extension/editor.ts

@@ -6,11 +6,7 @@ import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 // @ts-ignore
 import GLib from 'gi://GLib';
 // @ts-ignore
-import GObject from 'gi://GObject';
-// @ts-ignore
 import Clutter from 'gi://Clutter';
-// @ts-ignore
-import * as ModalDialog from 'resource:///org/gnome/shell/ui/modalDialog.js';
 
 import { log } from './logging';
 
@@ -1076,51 +1072,3 @@ export class TabbedZoneManager extends ZoneManager {
         return new TabbedZone(layout, parent, this.stage);
     }
 }
-
-class EntryDialogClass extends ModalDialog.ModalDialog {
-
-    public entry: any | null;
-    public label: any | null;
-    public onOkay: any | null;
-
-    public _onClose() {
-
-        try {
-            this.onOkay(this.entry.text);
-        } catch (e) {
-
-            throw e;
-        }
-    }
-
-    constructor(params: any) {
-        super(params);
-        log(JSON.stringify(params));
-    }
-
-    public _init() {
-
-        super._init({});
-        super.setButtons([{
-            label: "OK",
-            action: () => {
-                this.onOkay(this.entry.text);
-                super.close(global.get_current_time());
-            },
-            key: Clutter.Escape
-        }]);
-
-        let box = new St.BoxLayout({ vertical: true });
-        super.contentLayout.add(box);
-
-        this.label = new St.Label({ text: "" });
-        box.add(this.label);
-        box.add(this.entry = new St.Entry({ text: "" }));
-
-    }
-}
-
-export const EntryDialog = GObject.registerClass({
-    GTypeName: 'EntryDialogClass',
-}, EntryDialogClass
-);