flashcards/resources/ui/window.blp

using Gtk 4.0;
using Adw 1;

template $FlashcardsAppWindow : Adw.ApplicationWindow {
  title: _("Flashcards");
  default-width: 1200;
  default-height: 600;
  show => $on_flashcards_app_window_show();

  Adw.Breakpoint {
    condition ( "max-width: 600" )
    setters {
      split_view.collapsed: true;
    }
  }

  Adw.NavigationSplitView split_view {
    [sidebar]
    Adw.NavigationPage sidebar {
      title: _("Categories");

      Adw.ToolbarView {
        [top]
        Adw.HeaderBar {
          [start]
          Gtk.Button {
            icon-name: "list-add-symbolic";
            clicked => $on_add_category();
            tooltip-text: _("Create category");
          }
          [start]
          Gtk.Button {
            icon-name: "user-trash-symbolic";
            clicked => $on_delete_category();
            tooltip-text: _("Delete category");
          }
          [end]
          Gtk.MenuButton {
            icon-name: "open-menu-symbolic";
            menu-model: primary_menu;
            tooltip-text: _("Menu");
          }
        }

        content: ScrolledWindow {
            ListBox topics {
              valign: start;
              selection-mode: single;
              activate-on-single-click: true;
              row-activated => $on_select_category();
              styles ["navigation-sidebar"]
            }
        };
      }
    }

    [content]
    Adw.NavigationPage content {
      title: _("Flashcards");

      Adw.ToolbarView {
        [top]
        Adw.HeaderBar {
          [start]
          Gtk.Button {
            icon-name: "list-add-symbolic";
            clicked => $on_add_card();
            tooltip-text: _("Add card");
          }
          [start]
          Gtk.Button {
            icon-name: "user-trash-symbolic";
            clicked => $on_delete_card();
            tooltip-text: _("Delete card");
          }
          [title]
          Adw.WindowTitle title {
            title: _("Flashcards");
            subtitle: "Test";
          }
        }

        content: Adw.ViewStack main_view {
          Adw.ViewStackPage {
            child: Adw.StatusPage placeholder_category {
              title: _("Select a category");
              icon-name: "edit-find-symbolic";
            };
          }

          Adw.ViewStackPage {
            child: Adw.StatusPage placeholder_card {
              title: _("Add a card");
              icon-name: "list-add-symbolic";
            };
          }

          Adw.ViewStackPage {
            child: Adw.Clamp flashcard {
              maximum-size: 800;

              Box {
                orientation: vertical;
                spacing: 24;
                margin-top: 12;
                margin-bottom: 12;
                margin-start: 12;
                margin-end: 12;

                Box {
                  styles ["card", "activatable"]
                  halign: center;
                  Label {
                    styles ["title-4"]
                    margin-top: 24;
                    margin-bottom: 24;
                    margin-start: 48;
                    margin-end: 48;
                    hexpand: true;
                    justify: center;
                    label: "Wie viele Bäume sind in einem Wald?";
                    wrap: true;
                    wrap-mode: word_char;
                  }
                }

                Adw.Clamp {
                  maximum-size: 600;
                  Box {
                    styles ["linked"]
                    Button {
                      styles ["pill"]
                      label: _("Easy");
                      hexpand: true;
                      clicked => $on_answer_easy();
                    }
                    Button {
                      styles ["pill"]
                      label: _("Medium");
                      hexpand: true;
                      clicked => $on_answer_medium();
                    }
                    Button {
                      styles ["pill"]
                      label: _("Hard");
                      hexpand: true;
                      clicked => $on_answer_hard();
                    }
                  }
                }
              }
            };
          }
        };
      }
    }
  }
}

menu primary_menu {
  section {
    item {
    	label: _("About Flashcards");
      action: "app.about";
    }
  }
}