Hi all…
I’ve been trying to create a macOS Quicklook style window for my cropping app that I am working on.
For reference - here are the styles of buttons I am looking to re-create. Images below showing a button with a SF Symbol character and another button with the ‘Open with Preview’ button.
The buttons are 22px high.
Both of these buttons react when the mouse moves onto them with an highlight colour - shown.
Note that the ‘Open with Preview’ button has a border.
I’ve managed to recreate the look and feel of the buttons when the mouse enters and exists. See here.
For this I am using;
a) DesktopButton’s - style set to textured. Height 27 (don’t ask me why but a height of 27 rendered on-screen in the running app as 22. I pushed past that for now).
b) Code to mimic the shading via the opening event as follows;
me.NSButtonMBS.showsBorderOnlyWhileMouseInside = true
works great - buttons have that minimal Sonoma look and feel and work with Dark / Light mode.
BUT - I am not quite done. you’ll notice that my ‘Open with Preview’ button doesn’t have a border like the real Quicklook window…
So now I’ve added a new test button that is basically the same as the first one (textured, 27px high)
But in the opening event I’ve put;
me.NSButtonMBS.isBordered = true
me.NSButtonMBS.bezelStyle = 11
Now I get this;
Notice that I have a border now - but the the height has been collapsed down to 20px’s (tricky to see, but trust me they are smaller now).
I also can’t mix it with the code is used before to highlight the button on mouse enter / exit. If I do that I lose the border.
The upshot is that I can’t find a combination that;
a) doesn’t collapse the height to a 20 px button… i.e. doesn’t match the height of the other buttons
b) will allow me to use the showsBorderOnlyWhileMouseInside function
c) will show the border
I know I could put the button inside a 22px high canvas and manually match the background colour and border colour and draw this myself. I’d consider doing that if I could work out also how to use the system provided colours for the button instead of hardcoding them for both light and dark mode.
I am hoping / thinking there should be a way to do this.
Any clues?