slint icon indicating copy to clipboard operation
slint copied to clipboard
verified publisher icon slint-ui

MacOS Widget issues

Open NigelBreslaw opened this issue 1 year ago • 1 comments

Placeholder mega issue for various MacOS inconsistency issues in look and behaviour. This is based on MacOS Sonoma on a HDR HiDPI screen (P3 color space). MacOS Sequoia comes out in the next couple of months and may change some things. XScope is used to create those zoomed views. It's a UX tool for placing grid lines on screen, zooming, colour picking, etc.

General

Screenshot 2024-08-14 at 13 36 52

  • The image on the right shows the MacOS 'unfocussed' look widgets take. This is when the window no longer has focus. This might be a MacOS only thing? The main difference is the primary 'tint' goes from a colour to grey.

  • Need to check if the components support an easy to change primary tint. This screenshot is from the official Notes app that changes the default primary 'blue' to 'yellow'. So you don't just choose 'cupertino-light' but 'cupertino-light + optional widget primary tint'.

  • Click and drag out does not visually update as expected. If you click and hold on the widgets most correctly have a specific visual state. If you then keep the press down and drag out the component stays in this state. However it should drop back to the non clicked visuals. When you then release outside the component it correctly isn't registered as an attempt to activate the component. But its only this point that the Slint widget goes back to the non pressed state.

Hairline pixel line support
image - Need to research if Slint supports this. The iOS and MacOS UI supports many places where the width of border or line is a single device pixel regardless of DPI. So an old SD screen makes it 1 screen pixel wide and a super HiDPI iPhone 15 makes it 1 screen pixel wide. React Native does this via using StyleSheet.hairlineWidth as a size value. The rendering system then does it's best to ensure this snaps exactly to the screen pixels and is just 1 pixel wide.

Text

image
  • Not sure what is going on with text. It's so jarring to be working on a HiDPI display with such pixelated text. Not sure if Apple are also doing things with subpixel aliasing these days?

Switch issues:

Screenshot 2024-08-14 at 13 29 33
  • General anti aliasing of curved edges in harsher?
  • The 'thumb' isn't quite right. Pretty sure the thumb exists a PNG file that can be used. Need to research what support Slint has for @1x, @2x, @3x images for SD to HiDPI screens.
  • Something is off so the thumb is not snuggly and symmetrically within the containing component and showing a consisten margin between itself and the parent.
  • The colours are not right (need to check if the colours are the same on HDR (P3) screens.
  • There is a whole bunch of inner shadows and gradients going on inside the MacOS thumb.
  • The thumb is not animated on Slint. It just jumps between on or off.

Progress spinner

https://github.com/user-attachments/assets/aee1fbdb-40f3-4e94-be64-b225a569dfe6

  • Is the animation broken? Screenshot 2024-08-14 at 14 39 16

  • The line cap should also be rounded, not flat.

  • I looked at the code and thought it was complex. Then looked at a spinner in my own React Native project and realised it's actually pretty elegant. The React Native example uses SVG and Reanimated and is quite verbose. I'm no reanimated expert so probably could be simpler. But due to using 'rotation' its able to do a similar thing with less fancy math. The animation-tick() function really has me thinking. I don't think you can something like that in React, but it just makes sense within Slint. Really cool.

Combo box

https://github.com/user-attachments/assets/8544f213-b69c-4acf-906f-a77d8b58763a image

  • Not sure if it's a widget issue, or just the gallery. Once the combo box has focus it won't lose focus till something else like another combo box it clicked.
  • When you select an item in a combo box a little pulsing fade animation plays to show its selected.
  • Combo boxes also have a hover state that is missing from the slint version.
  • The double arrow icon looks wrong.
  • The options pop up under the box instead of over it.
  • Shadows and shape are different.

Slider

Screenshot 2024-08-14 at 23 21 59
  • Seems to be a non circular thumb.
  • Might be nice to show how snapping can be done?

https://github.com/user-attachments/assets/2f739319-a6b2-40a3-ad3d-8682853679a5

Nice example of a slider with microanimations on the speakers. Apple have been doing some work with the SwfitUI API to help here https://x.com/sucodeee/status/1821516860728225820

Promotion support

Screenshot 2024-08-14 at 23 18 25
  • Is Slint running at 120fps on Promotion displays? The easings demo looks blurry.

NigelBreslaw avatar Aug 14 '24 11:08 NigelBreslaw

unfocussed' look

We have this concept in Slint and this is used by the Qt style. We'd need to make that available for other styles, but that's doable. (Same trick as the dark style)

primary tint

We talked about that before. This concept also exist on windows and android. We just need to make this available same as dark style. Might need some platform specific native code got query it

border or line is a single device pixel regardless of DPI.

That's why we have the phx unit: border-width: 1phx;

Text

This and other aliasing/rendering issues may be caused by the renderer. Here there is a slight difference between Skia and Femtovg. Might be worth investigating if we can fix them in both, but I'd think Skia will always give better result, but is not the default because it is harder to build.

ogoffart avatar Aug 14 '24 11:08 ogoffart

Switch issues:

If you used the FemtoVG renderer for your screenshot, this has to do with #4831.

Enyium avatar Sep 17 '24 01:09 Enyium