Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Review & fix neumorphic styles #931

Closed
Xiaoy312 opened this issue Aug 30, 2023 · 13 comments · Fixed by #937, #944, #952, #955 or #965
Closed

Review & fix neumorphic styles #931

Xiaoy312 opened this issue Aug 30, 2023 · 13 comments · Fixed by #937, #944, #952, #955 or #965
Assignees
@Xiaoy312 @agneszitte @erikvilima
Labels
project/neumorphism

Comments

@Xiaoy312
Copy link
Contributor

Xiaoy312 commented Aug 30, 2023 •
edited
Loading

For each Neumorphic styles

  • going over figma design for dark/light, to see if a pattern is present to extract reusable color/shadows
  • ensure its ShadowContainer's child doesnt have a background, and is placed on the SC itself (including VisualState.Setter target as well).
  • ensure property surface color, and shadow values are used for every visual state.
@Xiaoy312 Xiaoy312 changed the title Review neumorphic styles Review & fix neumorphic styles Aug 30, 2023
@Xiaoy312
Copy link
Contributor Author

Xiaoy312 commented Aug 30, 2023 •
edited
Loading

related:

@Xiaoy312
Copy link
Contributor Author

Xiaoy312 commented Aug 31, 2023 •
edited
Loading

fixme:

todo:

  • combobox: missing flyout design
  • textbox,passwordbox: improper cursor placement (we should have a branch in toolkit with the proper setup)

@Xiaoy312 Xiaoy312 mentioned this issue Aug 31, 2023
Merged
6 tasks
@agneszitte
Copy link
Contributor

fixme:

  • !~ switching shadows between these that generates different canvas layout can cause shadow to be drawn at incorect location (see checkbox):
    image

    workaround available: transparent shadow to align various states' layout

I have opened an issue for this one -> unoplatform/uno.toolkit.ui#794

@agneszitte
Copy link
Contributor

agneszitte commented Aug 31, 2023 •
edited by Xiaoy312
Loading

    • painted shadow is slightly off in some case:
      image (chip)

    @Xiaoy312 is this something to fix on the ShadowContainer side ? on the Chip Style side ? need a proper issue for tracking ? which platforms ?

    • !! #NeumorphicControlCombo selecting "TabBar" and then selecting any other item cause the app to crash:

      System.NullReferenceException HResult=0x80004003 Message=Object reference not set to an instance of an object. Source=Uno.UI StackTrace: at Microsoft.UI.Xaml.Controls.MenuFlyout.OnClosed() in /__w/1/s/src/Uno.UI/UI/Xaml/Controls/MenuFlyout/MenuFlyout.cs:line 193

    This is related to the Neumorphic style in Gallery right ? or is this something to be fixed in the libs ? which platforms ?

    • !!! with the current impl it is not possible to insert border between background and inset-shadow: (drop-shadow, background, border, inset-shadow)

    Need proper issue for tracking right ? All platforms right ?

    • combobox: missing flyout design

    Neumorphic style for flyout is a "Nice to have" at this moment, so not a priority for today
    @eriklimakc already did some changes for this -> feat: Adding Shadows to Flyouts #905
    But it was blocked by -> [ShadowContainer/Flyout] Shadows and Background color disappearing on Flyout uno.toolkit.ui#760

    • textbox,passwordbox: improper cursor placement (we should have a branch in toolkit with the proper setup)

    This is because of ShadowContainer ? the controls themselves? which platforms ?

@Xiaoy312
Copy link
Contributor Author

they all need separate issues for tracking,
i just dont have time to delve into them yet or to gather info to fill the issue
so i just listed them here

#\2 idk if related for neumorphic or not, that is what im observing

@agneszitte
Copy link
Contributor

they all need separate issues for tracking, i just dont have time to delve into them yet or to gather info to fill the issue so i just listed them here

#\2 idk if related for neumorphic or not, that is what im observing

thanks for the feedback, I will help you open proper issues for them
Regarding the platforms, where do you see them? do you have this info, please?

@Xiaoy312
Copy link
Contributor Author

skia only (it builds the quickest)

@agneszitte
Copy link
Contributor

agneszitte commented Aug 31, 2023 •
edited
Loading

Here are the related issues I have opened @Xiaoy312

  1. fixme:

    • !~ switching shadows between these that generates different canvas layout can cause shadow to be drawn at incorect location (see checkbox):
      image

      workaround available: transparent shadow to align various states' layout

unoplatform/uno.toolkit.ui#794

    • painted shadow is slightly off in some case:
      image (chip)

#938

    • !! #NeumorphicControlCombo selecting "TabBar" and then selecting any other item cause the app to crash:

      System.NullReferenceException HResult=0x80004003 Message=Object reference not set to an instance of an object. Source=Uno.UI StackTrace: at Microsoft.UI.Xaml.Controls.MenuFlyout.OnClosed() in /__w/1/s/src/Uno.UI/UI/Xaml/Controls/MenuFlyout/MenuFlyout.cs:line 193

#939

    • !!! with the current impl it is not possible to insert border between background and inset-shadow: (drop-shadow, background, border, inset-shadow)

unoplatform/uno.toolkit.ui#795

    • combobox: missing flyout design

    Neumorphic style for flyout is a "Nice to have" at this moment, so not a priority for today
    @eriklimakc already did some changes for this -> feat: Adding Shadows to Flyouts #905
    But it was blocked by -> [ShadowContainer/Flyout] Shadows and Background color disappearing on Flyout uno.toolkit.ui#760

    • textbox,passwordbox: improper cursor placement (we should have a branch in toolkit with the proper setup)

    I will test this one before I decide to open an issue for it

@agneszitte
Copy link
Contributor

agneszitte commented Sep 1, 2023 •
edited
Loading

    • textbox,passwordbox: improper cursor placement (we should have a branch in toolkit with the proper setup)

Yes seems a Skia-only issue and can also be reproduced on the Fluent TextBox also
Not related to ShadowContainer, you can see it on the TextBox / PasswordBox sample pages

@agneszitte agneszitte linked a pull request Sep 1, 2023 that will close this issue
style: update neumorphic control styles #937
Merged
6 tasks
@agneszitte agneszitte self-assigned this Sep 1, 2023
@Xiaoy312 Xiaoy312 mentioned this issue Sep 1, 2023
Merged
6 tasks
@agneszitte agneszitte linked a pull request Sep 1, 2023 that will close this issue
neumorphic styles follow up update #944
Merged
6 tasks
@agneszitte
Copy link
Contributor

Re-Open as work ongoing for #944

@agneszitte agneszitte reopened this Sep 1, 2023
@agneszitte
Copy link
Contributor

Re-Open for backport PR

@agneszitte agneszitte reopened this Sep 2, 2023
@agneszitte agneszitte linked a pull request Sep 2, 2023 that will close this issue
neumorphic styles follow up update (backport #944) #952
Merged
@agneszitte
Copy link
Contributor

agneszitte commented Sep 4, 2023 •
edited
Loading

@eriklimakc is currently working today on the last fixes for ToggleSwitch

@erikvilima erikvilima mentioned this issue Sep 4, 2023
Merged
6 tasks
@agneszitte agneszitte linked a pull request Sep 5, 2023 that will close this issue
fix: Adjusting ToggleSwitch shadows details #955
Merged
6 tasks
@agneszitte
Copy link
Contributor

Re-Open for backport PR

@agneszitte agneszitte reopened this Sep 5, 2023
This was linked to pull requests Sep 5, 2023
fix: Adjusting ToggleSwitch shadows details (backport #955) #965
Merged
style: update neumorphic control styles (backport #937) #949
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Xiaoy312 Xiaoy312

@agneszitte agneszitte

@erikvilima erikvilima

Labels
project/neumorphism
Projects
None yet
Milestone
No milestone
4 participants
@Xiaoy312 @kazo0 @agneszitte @erikvilima