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

Fixes #2114. 3D Effect #3376

Draft
wants to merge 196 commits into
base: v2_develop
Choose a base branch
from
Draft

Fixes #2114. 3D Effect #3376

wants to merge 196 commits into from

Conversation

tig
Copy link
Collaborator

@tig tig commented Apr 2, 2024

Fixes

Todo

  • Extend Margin to have a "Shadow" Style - When enabled draws the correct half-height block glyphs in the right places
  • Extend HighlightStyle to support shadow animation on Pressed
  • Enable Button to use Margin.EnableShadow
  • Figure out how to make Button with shadow work reliably and automatically.
  • Test & Enable EnableShadow on other Views where it may make sense visually.

Background

When I created Frames (now Adornments) i had a vision that Margin could be used to enable the 3D effect that we had mostly working in v1, but got negated with all the changes to v2.

I had a shower thought recently on this and decided to quickly code a prototype up to see if my instincts were right.

This PR demonstrates that I was. The concept is leveraging Margin like this:

 var button = new Button
 {
     X = Pos.Center (),
     Y = Pos.Center (), Text = "Press me!"
 };
 button.Margin.Thickness = new Thickness (0, 0, 1, 1);
 button.Margin.Add (
                    new View ()
                    {
                        X = Pos.AnchorEnd (1),
                        Y = 1,
                        Width = 1,
                        Height = Dim.Fill (),
                        ColorScheme = new ColorScheme (new Attribute (ColorName.DarkGray))
                    },
                    new View ()
                    {
                        X = 1,
                        Y = Pos.AnchorEnd (1),
                        Width = Dim.Fill(),
                        Height = 1,
                        ColorScheme = new ColorScheme (new Attribute (ColorName.DarkGray))
                    }
                    );

 bool pressed = false;
 button.Accept += (s, e) =>
                  {
                      pressed = !pressed;

                      if (pressed)
                      {
                          button.Margin.Thickness = new Thickness (1, 1, 0, 0);
                      }
                      else
                      {
                          button.Margin.Thickness = new Thickness (0, 0, 1, 1);
                      }
                  };

XZjxkvE 1

Pull Request checklist:

  • I've named my PR in the form of "Fixes #issue. Terse description."
  • My code follows the style guidelines of Terminal.Gui - if you use Visual Studio, hit CTRL-K-D to automatically reformat your files before committing.
  • My code follows the Terminal.Gui library design guidelines
  • I ran dotnet test before commit
  • I have made corresponding changes to the API documentation (using /// style comments)
  • My changes generate no new warnings
  • I have checked my code and corrected any poor grammar or misspellings
  • I conducted basic QA to assure all features are working

@tig
Copy link
Collaborator Author

tig commented May 21, 2024

Latest:

Vqghso7 1

It's this easy:

        var button = new Button
        {
            X = Pos.Center (),
            Y = Pos.Center (), Text = "Press me!",
        };
        button.Margin.Shadow = true;

Of course, the animation will only work on WindowsDriver, because it's the only one that supports distinct mouse up/down events.

Button sets true in cases where it makes sense. This mostly works.
Needs more work.
@tig tig changed the title 3D Effect Prototype (may Fix #2144). Fixes #2114. 3D Effect May 21, 2024
@tig
Copy link
Collaborator Author

tig commented May 22, 2024

Latest

  • Enables Window.DefaultShadow and Button.DefaultShadow to be configured via Config Manager.
  • The UI Catalog theme sets both to true.
  • AdornmentsEditor now has a Shadow checkbox

xT7e2hE 1

(Since the Default theme doesn't explicitly set either they stay set even after changing back to the Default theme).

…d via Config Manager.

The UI Catalog theme sets both to true.
AdornmentsEditor now has a Shadow checkbox
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants