0

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

enter image description here

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

enter image description here

|improve this question
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

|improve this answer
  • 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
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.

|improve this answer
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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