gtk-adwaita: Render action list as menu button It was hard-to-grasp albeit not usable.

Changes

5 changed files (+166/-5)

• gtk-adwaita/data/gresource.xml
  • @@ -37,6 +37,7 @@ <file preprocess="xml-stripblanks">icons/scalable/actions/play-large-symbolic.svg</file>
    <file preprocess="xml-stripblanks">icons/scalable/actions/skip-backward-large-symbolic.svg</file> <file preprocess="xml-stripblanks">icons/scalable/actions/skip-forward-large-symbolic.svg</file> <file preprocess="xml-stripblanks">icons/scalable/actions/sound-symbolic.svg</file> + <file preprocess="xml-stripblanks">icons/scalable/actions/view-more-symbolic.svg</file> <file preprocess="xml-stripblanks" alias="icons/hicolor/16x16/apps/jp.pocka.plac.gtk-adwaita.svg">app-icon.svg</file> <file preprocess="xml-stripblanks" alias="icons/hicolor/24x24/apps/jp.pocka.plac.gtk-adwaita.svg">app-icon.svg</file> <file preprocess="xml-stripblanks" alias="icons/hicolor/32x32/apps/jp.pocka.plac.gtk-adwaita.svg">app-icon.svg</file>
• gtk-adwaita/data/icons/scalable/actions/view-more-symbolic.svg (new)
  • @@ -0,0 +1,8 @@
    + <?xml version="1.0" encoding="UTF-8"?> + <!-- + SPDX-FileCopyrightText: Gnome Developers + SPDX-License-Identifier: CC0-1.0 + --> + <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg"> + <path d="m 7.996094 0 c -1.105469 0 -2 0.894531 -2 2 s 0.894531 2 2 2 c 1.101562 0 2 -0.894531 2 -2 s -0.898438 -2 -2 -2 z m 0 6 c -1.105469 0 -2 0.894531 -2 2 s 0.894531 2 2 2 c 1.101562 0 2 -0.894531 2 -2 s -0.898438 -2 -2 -2 z m 0 6 c -1.105469 0 -2 0.894531 -2 2 s 0.894531 2 2 2 c 1.101562 0 2 -0.894531 2 -2 s -0.898438 -2 -2 -2 z m 0 0" fill="#2e3436"/> + </svg>
• gtk-adwaita/data/ui/browse-item-navigation.ui
  • @@ -42,6 +42,7 @@ <object class="GtkBox">
    <property name="orientation">vertical</property> <property name="spacing">2</property> <property name="hexpand">true</property> + <property name="valign">center</property> <child> <object class="GtkLabel" id="title"> <property name="ellipsize">end</property>
  • @@ -64,9 +65,27 @@ </child>
    </object> </child> <child> - <object class="GtkImage"> + <object class="GtkImage" id="icon"> <property name="accessible-role">presentation</property> <property name="icon-name">go-next-symbolic</property> + </object> + </child> + <child> + <object class="GtkMenuButton" id="action_menu"> + <property name="visible">false</property> + <property name="valign">center</property> + <property name="icon-name">view-more-symbolic</property> + <property name="popover"> + <object class="GtkPopover" id="action_menu_popover"> + <child> + <object class="GtkListBox" id="action_menu_list"> + <style> + <class name="navigation-sidebar" /> + </style> + </object> + </child> + </object> + </property> </object> </child> </template>
• gtk-adwaita/src/Widgets/Browse.vala
  • @@ -73,12 +73,20 @@ construct {
    items.row_activated.connect((row) => { var item_row = (BrowseItem.Row) row; item = item_row.item; - load(); + + switch (item.hint) { + case ACTION_LIST: + var nav = (BrowseItem.Navigation) item_row.child; + nav.open_actions(); + break; + default: + load(); + break; + } }); back.clicked.connect(() => { - item = null; - load(true); + pop(); }); }
  • @@ -101,6 +109,11 @@ loading.visible = false;
    this.sensitive = true; } + private void pop() { + this.item = null; + this.load(true); + } + private void load(bool pop = false) { if (conn == null || _hierarchy == null || is_loading) { return;
  • @@ -135,11 +148,49 @@
    items.remove_all(); scroller.vadjustment.value = scroller.vadjustment.lower; foreach (var item in action.items) { - items.append(new BrowseItem.Row(item, conn)); + var row = new BrowseItem.Row(item, conn); + var nav = (BrowseItem.Navigation) row.child; + nav.action_selected.connect((selected_item) => { + this.item = selected_item; + load(); + }); + nav.actions_open.connect(() => { + load_actions(nav, item); + }); + nav.actions_close.connect(() => { + this.pop(); + }); + items.append(row); } back.visible = action.level > 0; end_loading(); + }); + } + + private void load_actions(BrowseItem.Navigation target, Plac.Browse.Item item) { + if (conn == null || _hierarchy == null || is_loading) { + return; + } + + conn.browse.begin(_hierarchy, _zone, item, false, (obj, res) => { + var result = conn.browse.end(res); + + if (result.code != OK) { + GLib.log("Plac", LEVEL_WARNING, "Browse request failed: %s", result.code.to_string()); + loading.visible = false; + return; + } + + if (result.action != LIST) { + GLib.log("Plac", LEVEL_WARNING, "Unexpected result action: %s", result.action.to_string()); + loading.visible = false; + return; + } + + var action = result.get_list_action(); + + target.set_action_items(action); }); } }
• gtk-adwaita/src/Widgets/BrowseItem/Navigation.vala
  • @@ -18,6 +18,10 @@ namespace PlacGtkAdwaita {
    namespace BrowseItem { [GtkTemplate(ui = "/jp/pocka/plac/gtk-adwaita/ui/browse-item-navigation.ui")] class Navigation : Gtk.Box { + public signal void action_selected(Plac.Browse.Item item); + public signal void actions_open(); + public signal void actions_close(); + [GtkChild] private unowned Gtk.Label title;
  • @@ -27,6 +31,20 @@
    [GtkChild] private unowned Artwork artwork; + [GtkChild] + private unowned Gtk.Image icon; + + [GtkChild] + private unowned Gtk.MenuButton action_menu; + + [GtkChild] + private unowned Gtk.Popover action_menu_popover; + + [GtkChild] + private unowned Gtk.ListBox action_menu_list; + + private bool is_popover_closed_by_submission = false; + public Plac.Browse.Item item { get; construct; } public Plac.AsyncConnection? conn {
  • @@ -50,6 +68,70 @@ artwork.conn = conn;
    artwork.image_key = item.image_key; artwork.visible = true; } + + switch (item.hint) { + case LIST: + icon.icon_name = "go-next-symbolic"; + break; + case ACTION_LIST: + icon.visible = false; + action_menu.visible = true; + break; + default: + icon.visible = false; + break; + } + + action_menu_list.row_activated.connect((row) => { + is_popover_closed_by_submission = true; + var action_row = (ActionRow) row; + item = action_row.item; + action_selected(item); + }); + + action_menu_popover.show.connect(() => { + is_popover_closed_by_submission = false; + actions_open(); + }); + + action_menu_popover.closed.connect(() => { + if (!is_popover_closed_by_submission) { + actions_close(); + } + }); + } + + public void open_actions() { + action_menu.popup(); + } + + public void set_action_items(Plac.Browse.ListAction list) { + action_menu_list.remove_all(); + bool set_focus = false; + foreach (var item in list.items) { + var row = new ActionRow(item); + action_menu_list.append(row); + if (!set_focus) { + row.grab_focus(); + set_focus = true; + } + } + } + } + + class ActionRow : Gtk.ListBoxRow { + private Gtk.Label label; + + public Plac.Browse.Item item { get; construct set; } + + public ActionRow(Plac.Browse.Item item) { + Object(item: item); + } + + construct { + label = new Gtk.Label(item.title); + this.child = label; + this.activatable = true; } } }