MBS: OSX Toolbar Icons Mavericks style?

Add-Ons
#1

How can I create this flat style of buttons on a OSX toolbar, using MBS plugins? (Buttons of Xcode 5 on Mavericks)

Now I define the Constructor of a NSButtonMBS like this (and get the old style):

[code]Sub Constructor()
// Calling the overridden superclass constructor.
Super.Constructor( 0,0,40,MainToolbarNSButtonHeight )
Dim f As Double = 1.3
Dim w As Double = f * 21 // width of original picture = 21
Dim h As Double = f * 15 // height = 15

bezelStyle=NSButtonMBS.NSTexturedRoundedBezelStyle

Image=New NSImageMBS( ButtonLink_21x15 )
Image.setSize( w,h )
Image.isTemplate=true

me.toolTip = “Register Relationships”

// Instantiate Action Handler class
Me.imAction = New imMenuToolbarActions
End Sub
[/code]

Result:

#2

so you look for a borderless button?
you could set border to false.

#3

[quote=61420:@Christian Schmitz]so you look for a borderless button?
you could set border to false.[/quote]
Guess what, I tried that already, but the result is not even close to those Xcode buttons … but I keep on searching.

#4

I’m confused: what’s the problem? The Xcode buttons just like normal toolbar buttons.

#5

This seems to be more a design problem than anything else: If you draw the border in your icon images (and maybe add some color transitions), you can surely use them looking absolutely like the Xcode buttons when you set border to false.
If you should be looking for a button method that creates the borders: There is none, so either draw the borders yourself or add a method doing this for you.

#6

Buttons now are ‘flat’, translucent and without borders. It looks like just an image is used which changes color according to the button state.

I use vector graphic pdf files for the image on the button, which scale nicely and display crisp and clear also on a retina display. The button background and border is set by this code:

 bezelStyle=NSButtonMBS.NSTexturedRoundedBezelStyle

And now I am looking for code which allows me to create those new style buttons as, for instance, they are used now on Xcode 5 on Mavericks.

Setting the border to NoBorder is still drawing some kind of 3D button, and not a flat style one:

bezelStyle=NSButtonMBS.NSNoBorder

Result:

#7

I see. Propably Christian can give you a hint on this. I am currently experimenting with Icons only my own and use MacOSLibs’ NSImageview control. When I set its style to “No frame”, it gives me an absolutely transparent button with no bevel, filling or whatever. I don’t know what stand for “No bezel style” in the MBS list, but did you try the other settings instead besides NSTextureRoundedBezelStyle?

#8

I really miss an edit function in this forum, seeing all my typos …

#10

You van use bezelStyle=21

#11

Yes, we’re getting closer. However, bezelStyle=21 draws some kind of DisclosureTriangle to the button. How did you calculate this value?

In the reference I found:

[quote]NSBezelStyle
Define the bezel styles used by bezelStyle and setBezelStyle:.

enum {
NSRoundedBezelStyle = 1,
NSRegularSquareBezelStyle = 2,
NSThickSquareBezelStyle = 3,
NSThickerSquareBezelStyle = 4,
NSDisclosureBezelStyle = 5,
NSShadowlessSquareBezelStyle = 6,
NSCircularBezelStyle = 7,
NSTexturedSquareBezelStyle = 8,
NSHelpButtonBezelStyle = 9,
NSSmallSquareBezelStyle = 10,
NSTexturedRoundedBezelStyle = 11,
NSRoundRectBezelStyle = 12,
NSRecessedBezelStyle = 13,
NSRoundedDisclosureBezelStyle = 14,
NSInlineBezelStyle = 15,
NSSmallIconButtonBezelStyle = 2
}
typedef NSUInteger NSBezelStyle;[/quote]

#12

how about bezel style = 0 resp. NSImageFrameNone?

(see https://developer.apple.com/library/mac/documentation/cocoa/reference/applicationkit/classes/NSImageCell_Class/Reference/Reference.html#//apple_ref/c/tdef/NSImageFrameStyle)

#13

Same as bezelStyle=NSButtonMBS.NSNoBorder, see screenshot above

#14

I dimly remember having had this problem, when trying out an MBS toolbar. Did I have to use a different button altogether? Will try to check tomorrow.

#15

[quote=61489:@Oliver Osswald]Yes, we’re getting closer. However, bezelStyle=21 draws some kind of DisclosureTriangle to the button. How did you calculate this value?

In the reference I found:[/quote]
Sorry, you’re right.

#16

Have you tried the isBordered property?

#17

As simple as that! Yes, looks good to me. (Why didn’t I see that on the first place?)

#18

Oliver I have been following this thread closely :slight_smile: Could you please post your IsBordererd Property=False Screen shot? Thank you! :slight_smile:

#19

does anyone know how to make it so on the mouse down of this toolbar item there is no white square background?
the no border works great, but the button still has a white background on mouse down for me.

#20

@Paul, please start a new thread for a new question.

#21