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

bitseater · Accepted Answer · 2017-03-12 05:23:11Z

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

edited Mar 12 '17 at 5:23

answered Mar 9 '17 at 21:58

bitseater

2,2581 gold badge7 silver badges13 bronze badges

Thanks for your response. However the code you pointed at is for the forward and backward arrow buttons...I'm interested in the three view mode buttons which allows files to be viewed as list, icons and paths...I was trying to look for the code but it's somewhere in Marlin....using Gtk.STYLE_CLASS_FLAT is not giving the box like look with borders around the box.... – Siddhartha Das Mar 9 '17 at 23:58
Then, that switcher use Granite.Widgets.ModeButton instead Gtk.Button – bitseater Mar 10 '17 at 2:25
Many thanks. You were spot on - Granite.Widgets.ModeButton is indeed the correct widget. I have updated the code in the question – Siddhartha Das Mar 11 '17 at 14:08
You're welcome Siddhartha Das – bitseater Mar 11 '17 at 14:09

add a comment |

Daniel Foré · Accepted Answer · 2017-03-12 16:28:39Z

1

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.

answered Mar 12 '17 at 16:28

Daniel Foré

9,4442 gold badges33 silver badges84 bronze badges

1

Many thanks for pointing us at this issue/fix - I will leave the Linked Buttons on my app as it is and hopefully when the fix is out, I should be able to see the borders and the elliptical shadow fixed – Siddhartha Das Mar 12 '17 at 20:30

add a comment |

Stack Exchange Network

current community

your communities

more stack exchange communities

Use of STYLE_CLASS_LINKED for Linked Buttons

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged vala or ask your own question.

Hot Network Questions

Use of STYLE_CLASS_LINKED for Linked Buttons

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged vala or ask your own question.

Related

Hot Network Questions