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.

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

Finalize v2 Default Visual Style #3493

Open
tig opened this issue May 21, 2024 · 6 comments
Open

Finalize v2 Default Visual Style #3493

tig opened this issue May 21, 2024 · 6 comments
Assignees
Milestone

Comments

@tig
Copy link
Collaborator

tig commented May 21, 2024

I'd like apps built with V2 to be visually distinct from v1. Right now, there are some subtle differences. I'd like this Issue to drive discussion on what we want the default look & feel to be.

Here's my current vision:

Colors

So-far:

What's needed:

I really hope we can figure out these issues for V2 beta. They will be "Right" and will drive obvious visual distinction:

We will then need to pick great default colorschemes.

View Adornments

So-far:

  • LineCanvas & Adornments enables more effective screen real estate management.
  • Default glyphs for Button/Checkbox etc... (still needs work)

What's needed:

Styling

What's needed

  • Shadow
    • Button.ShadowStyle = ShadowStyle.Opaque should be default.
    • Only overlapped Views should get ShadowStyle.Transparent
  • Button alignment in MessageBox, Dialog, and Wizard
    • Default should be Center
    • MessageBox should be Center
    • Dialog should be End
    • Wizard should be End | IgnoreFirst
  • Menu border or no-border?

Views

So-Far

  • FileDialog is radically different
  • Slider, ColorPicker are new

What are other's thoughts?

@dodexahedron
Copy link
Collaborator

Good goals.

I'll more specifically sit down to think about the specifics of this issue and chime in with suggestions after some of my pipeline clears.

@tig tig added this to the V2 Beta milestone May 25, 2024
@tig tig moved this to 📋 Approved - Need Owner in Terminal.Gui V2 Initial Release Jul 11, 2024
@tig tig self-assigned this Aug 6, 2024
@tig tig modified the milestones: V2 Beta, V2 Release Aug 6, 2024
@tig tig moved this from 📋 Approved - Need Owner to 🏗 Approved - In progress in Terminal.Gui V2 Initial Release Aug 14, 2024
@tig tig mentioned this issue Sep 23, 2024
37 tasks
@BDisp
Copy link
Collaborator

BDisp commented Sep 23, 2024

The reason why I prefer only the button shadow is hidden when pressed is because the original location of the button pressed is the same as the button released.

@tig
Copy link
Collaborator Author

tig commented Sep 23, 2024

The reason why I prefer only the button shadow is hidden when pressed is because the original location of the button pressed is the same as the button released.

I think we have these choices when there's a shadow on a button:

  1. Move nothing. Don't hide shadow.
  2. Hide the shadow., but don't move the button
  3. Hide the shadow, move the button one cell to right.
  4. Hide the shadow, move the button one cell to right and one cell down.

The current design (as of #3750) is 3 above:

iViR1ra 1

If I understand you correctly you are saying you prefer 2.

In

it was discussed and suggested that another system did 3 instead of 4, which was how I originally had it.

I felt 3 was best because with 4 the button moved way too much. 3 has nice motion but is sublte.

What do others think?

@tig
Copy link
Collaborator Author

tig commented Sep 23, 2024

This is 1. Move nothing. Don't hide shadow:

9Wc1VCu 1

This is 2. Hide the shadow., but don't move the button:

mb9qwse 1

This is 3. Hide the shadow, move the button one cell to right.:

iViR1ra 1

This is 4. Hide the shadow, move the button one cell to right and one cell down.:

y2Z7K6j 1

@tig
Copy link
Collaborator Author

tig commented Sep 23, 2024

Everyone note that in #3751 I've

  • Changed the Default theme to enable button style 3 above.
  • Changed the Default theme colors to be more distinct/vibrant
  • Changed the Light theme colors to be more distinct/vibrant
  • Changed the Dark theme colors to be more distinct/vibrant
  • Added several new themes:
    • Black & White - uses only Color.Black and Color.White
    • Gray Scale - uses only shades of gray

FWIW, the other two themes are specified by UI Catalog as a way of testing that app-level themes work.

dLNOLyc 1

@BDisp
Copy link
Collaborator

BDisp commented Sep 23, 2024

I vote for 2. In the reality what happens is when the button isn't pressed it's away from the surface but in the same position with a light over him at some angle. When is pressed it's stuck to the surface eliminating the shadow.
If the option 2 isn't accepted by the majority then the option 3 is a good choice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 🏗 Approved - In progress
Status: No status
Development

No branches or pull requests

3 participants