xverizex/RetroSpriteEditor

[Feature Request / Enhancement] AdwDialog & AdwAlertDialog

Opened this issue ยท 5 comments

Warning

AdwDialog, AdwAlertDialog & AdwAboutDialog are still in libadwaita 1.5.alpha, and are not stable yet, if you are going to implement them, don't put it on a stable version.

AdwDialog (Adw.Dialog) is an adaptive dialog container, which is used for AdwAlertDialog (NEW) which is basically identical to the old AdwMessageDialog, but uses AdwDialog instead. AdwDialog supports showing as a bottom sheet, therefore being more adaptive for smaller window sizes and possibly mobile phones (if the app adapts).

image

image

Taken from Adw.Dialog Documentation

xverizex said:
Yes, I know that adw dialog is available, but why the fix window to add dialog if this look identically.

I'm guessing that you were saying the AdwMessageDialog looked identical to the GtkWindow New NES Project Dialog, if so, not really...

image
image

AdwAlertDialog (and prev. AdwMessageDialog) looks a lot more up-to-date with the modern Adwaita style, and doesn't look as squished and quickly put together.

image

Also using the extra-child property, you could use Adw.ComboRow for the Sprite mode dropdown and Adw.EntryRow for the Project Location & Name input


I have had a go implementing it, but haven't been that successful, mainly because I can't understand a lot of the code, which is why I am here.

Home Page

In the mean time, I have implemented a welcome/home page in Blueprint, also moving the menu entries to it.

using Gtk 4.0;
using Adw 1;

template $MainWindow : Adw.ApplicationWindow {
  default-width: 1280;
  default-height: 720;
  width-request: 360;
  height-request: 600;
  Adw.Breakpoint main_breakpoint {
    condition ("max-width: 500px")
  }
  content:
  Adw.ToolbarView {
          [top]
          Adw.HeaderBar header_bar {
            [end]
            MenuButton {
              primary: true;
              icon-name: "open-menu-symbolic";
              tooltip-text: _("Menu");
              menu-model: menu_root;
            }
          }
    content:

      Adw.StatusPage home_page {
        vexpand: true;
        hexpand: true;
        icon-name: "io.github.xverizex.RetroSpriteEditor";
        title: "Welcome!";
        description: "Create a New Project to get started";
      };
};
}

menu menu_root {
  section {
    submenu {
      label: _("_New");
      section {
        item {
          label: _("NES Project");
          action: "win.new_project_nes";
        }
      }
    }

    submenu {
      label: _("_Open");
      section {
        item {
          label: _("NES Project");
          action: "win.open_project_nes";
        }
      }
    }

    // CHR Import didn't seem to work in the code before this, so not an issue with my code. -sungsphinx
    submenu {
      label: _("_Import");
      section {
        item {
          label: _("NES CHR");
          action: "win.import_nes_chr";
        }
      }
    }

    item {
      label: _("_Save");
      action: "win.save_project";
    }

    item {
      label: _("_Export");
      action: "win.export";
    }

    // item {
    //   label: _("_Keyboard Shortcuts");
    //   action: "win.show-help-overlay";
    // }

    item {
      label: _("_About Retro Sprite");
      action: "app.about";
    }
  }
}

It currently looks like this:

image

Now, if you REALLY don't want to do this, please at least try migrating to Adw.Dialog: https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/migrating-to-adaptive-dialogs.html

I will think about it.

I'm a little busy right now. I'm learning electronics. I don't want to distract myself.

I'm a little busy right now. I'm learning electronics. I don't want to distract myself.

All good, take your time! ๐Ÿ˜„

@xverizex I have a rough, not really functioning prototype (it does create the project though, ignore missing icons as that is just GNOME Builder I think)

image

See how other icons are used in the project. And make sure that they are displayed correctly.