Use of STYLE_CLASS_LINKED for Linked Buttons

Question

Hi I'm trying to get two buttons into a linked style to perform Zoom In and Zoom Out. However, I'm not able to get the look an feel of the linked buttons like the view mode buttons on Files. Here is an MVCE of the code I have. I have attached a picture of how the buttons should look and what they are looking like now. Thanks in advance for any suggestions.

using Gtk;
public class LinkedButtonIssue : Gtk.Window {

  public static int main (string[] args) {
      Gtk.init (ref args);
      LinkedButtonIssue window = new LinkedButtonIssue();
      window.show_all ();
      //Exit Application Event
      window.destroy.connect (() => {

      });
      Gtk.main ();
      return 0;
  }

  public LinkedButtonIssue () {
      this.title = "Linked Button Issue";
      this.window_position = Gtk.WindowPosition.CENTER;
      this.destroy.connect (Gtk.main_quit);
      this.set_default_size (800, 600);
      Gtk.Box uiBox = new Gtk.Box(Orientation.HORIZONTAL, 0);
      uiBox.set_halign(Align.CENTER);
      this.add(uiBox);

      Gtk.HeaderBar headerbar = new Gtk.HeaderBar();
      this.set_titlebar (headerbar);
      headerbar.set_show_close_button(true);

      Gtk.Image menu_icon_text_large = new Gtk.Image.from_icon_name ("format-text-larger-symbolic", IconSize.BUTTON);
      Gtk.Image menu_icon_text_small = new Gtk.Image.from_icon_name ("format-text-smaller-symbolic", IconSize.BUTTON);
      Gtk.Button textLargerButton = new Gtk.Button();
      textLargerButton.set_image (menu_icon_text_large);
      Gtk.Button textSmallerButton = new Gtk.Button();
      textSmallerButton.set_image (menu_icon_text_small);
      Gtk.Box textSizeBox = new Gtk.Box(Orientation.HORIZONTAL, 0);

      textSizeBox.get_style_context().add_class(Gtk.STYLE_CLASS_LINKED);
      textSizeBox.pack_start(textSmallerButton, false, false);
      textSizeBox.pack_start(textLargerButton, false, false);
      headerbar.add(textSizeBox);

  }

}
//valac --pkg gtk+-3.0 LinkedButtonIssue.vala

Here is the code with Granite.Widgets.ModeButton and a screenshot as well.

using Gtk;
using Granite;
public class LinkedButtonIssue : Gtk.Window {

  public static int main (string[] args) {
      Gtk.init (ref args);
      LinkedButtonIssue window = new LinkedButtonIssue();
      window.show_all ();
      //Exit Application Event
      window.destroy.connect (() => {

      });
      Gtk.main ();
      return 0;
  }

  public LinkedButtonIssue () {
      this.title = "Linked Button Issue";
      this.window_position = Gtk.WindowPosition.CENTER;
      this.destroy.connect (Gtk.main_quit);
      this.set_default_size (800, 600);
      Gtk.Box uiBox = new Gtk.Box(Orientation.HORIZONTAL, 0);
      uiBox.set_halign(Align.CENTER);
      this.add(uiBox);

      Gtk.HeaderBar headerbar = new Gtk.HeaderBar();
      this.set_titlebar (headerbar);
      headerbar.set_show_close_button(true);

      Gtk.Image menu_icon_text_large = new Gtk.Image.from_icon_name ("format-text-larger-symbolic", IconSize.BUTTON);
      Gtk.Image menu_icon_text_small = new Gtk.Image.from_icon_name ("format-text-smaller-symbolic", IconSize.BUTTON);
      Gtk.Button textLargerButton = new Gtk.Button();
      textLargerButton.set_image (menu_icon_text_large);
      Gtk.Button textSmallerButton = new Gtk.Button();
      textSmallerButton.set_image (menu_icon_text_small);

      Granite.Widgets.ModeButton modeButton = new Granite.Widgets.ModeButton();
      modeButton.append (textSmallerButton);
      modeButton.append (textLargerButton);

      headerbar.add(modeButton);
  }
}
//valac --pkg gtk+-3.0 --pkg granite LinkedButtonIssue.vala

Answer 1

In Files, view switch use Gtk.STYLE_CLASS_FLAT instead Gtk.STYLE_CLASS_LINKED.

However , you can use Granite.Widgets.ModeButton

You can see the code at :

Files on Launchpad: linked

Files on Launchpad: ModeButton

Answer 2

This is actually a recently closed issue in our system stylesheet. See this issue report on GitHub. An update containing this fix should be available relatively soon.