[prev in list] [next in list] [prev in thread] [next in thread] 

List:       gtk-app-devel
Subject:    Re: How to create a tab bar that imitates the look an feel of a GtkNotebook?
From:       '-' <makepost () firemail ! cc>
Date:       2018-03-31 14:02:36
Message-ID: 7f5bdb6149e6b077f3d929dc87315922 () firemail ! cc
[Download RAW message or body]

Closer to what you wanted, Notebook as just the tab bar:

```js
#!/usr/bin/gjs

const { Box, Label, Notebook, Orientation, Window } = imports.gi.Gtk;

class Tabs {
   /**
    * @param {Notebook} notebook
    */
   constructor(notebook) {
     this.notebook = notebook;
   }

   /**
    * @param {string[]} pages
    */
   set(pages) {
     const count = this.notebook.get_n_pages();

     for (let i = count; i < pages.length; i++) {
       const page = new Box({
         visible: true // See docs for set_current_page.
       });

       this.notebook.append_page(page, null);
     }

     const current = this.notebook.get_current_page();

     for (let i = 0; i < pages.length; i++) {
       const page = this.notebook.get_nth_page(i);

       const isSame = this.notebook.get_tab_label_text(page) === 
pages[i];

       this.notebook.set_tab_label_text(page, pages[i]);

       if (i === current && !isSame) {
         this.notebook.emit("switch-page", page, i);
       }
     }

     for (let i = count - 1; i >= pages.length; i--) {
       this.notebook.remove_page(i);
     }
   }
}

imports.gi.Gtk.init(null);

const win = new Window({ title: "TabsDemo" });

win.connect("destroy", () => imports.gi.Gtk.main_quit());

const box = new Box({
   orientation: Orientation.VERTICAL,
   spacing: 10
});

const notebook = new Notebook({ show_border: false });
box.add(notebook);

const label = new Label({ visible: true });
box.add(label);

notebook.connect("switch-page", (_, page) => {
   label.label = `In tab: ${notebook.get_tab_label_text(page)}`;
});

const tabs = new Tabs(notebook);
tabs.set(["Foo", "Bar", "Baz", "Qux"]);

notebook.set_current_page(3);

imports.gi.GLib.timeout_add(0, 2000, () => {
   tabs.set(["Updated", "Tabs"]);

   imports.gi.GLib.timeout_add(0, 2000, () => {
     tabs.set(["And", "Once", "Again"]);
     notebook.set_current_page(0);

     return false;
   });

   return false;
});

win.add(box);
win.show_all();

imports.gi.Gtk.main();
```

On 2018-03-27 19:28, Bachsau wrote:
> As my last question seems to have been misunderstood, I'm trying to
> ask again with this other subject line:
> 
> "How to create a tab bar that imitates the look an feel of a 
> GtkNotebook?"
> 
> Im developing a GTK+ 3 application that should be able to display
> multiple files in tabs. But a GtkNotebook widget is not suitable for
> this, as it implies a functionality where every single page is a
> separate container. In the case of my application I just need some
> sort of tab bar to connect to application's logic, which will then
> change the data displayed by the ever same set of widgets.
> 
> How can this be achieved without ugly workarounds?
> 
> 
> _______________________________________________
> gtk-app-devel-list mailing list
> gtk-app-devel-list@gnome.org
> https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
_______________________________________________
gtk-app-devel-list mailing list
gtk-app-devel-list@gnome.org
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
[prev in list] [next in list] [prev in thread] [next in thread]