Terminal.Gui icon indicating copy to clipboard operation
Terminal.Gui copied to clipboard

Refactor `Border` to use subviews for title, lines, and close button

Open tig opened this issue 1 year ago • 12 comments

Related:

  • #2814

Requires

  • #2995
  • #3014
  • #2114
  • #2814

Will enable

  • #2537

Design

Subviews

public Label TitleLabel { get; set; };
public Button CloseButton { get ; set; }
public Line Top { get; set; }
public Line Left { get; set; }
public Line Right{ get; set; }
public Line Bottom{ get; set; }

Layout

This also indicates the order the views should be added; The label & button must be added after the lines so that they occlude them.

Top.X = Pos.Function (Thickness.Left/ 2);
Top.Y = Pos.Function (Thickness.Top / 2);
Top.Width = Dim.Fill () - Dim.Function (Thickness.Right / 2);

Left.X = Pos.Left (Top);
Left.Y = Pos.Top (Top);
Left.Height = Dim.Fill () - Dim.Function (Thickness.Bottom / 2);

Right.X = Pos.Right (Top);
Right.Y = Pos.Top (Top);
Right.Height = Dim.Fill () - Dim.Function (Thickness.Bottom / 2);

Bottom.X = Pos.Left (Top);
Bottom.Y= Pos.Bottom (Left);
Bottom.Width = Dim.Fill () - Dim.Function (Thickness.Right / 2);

TitleLabel.X = Pos.Right (Left) + 1;
TitleLabelY = Pos.Top (Top);

CloseButton .X = Pos.Left (Right) - 1;
CloseButton .Y = Pos.Top (Top);

Example usage:

view.Border.TitleLabel.X = Pos.Center (); // centers title (default is X = 1)
view.Border.TitleLabel.Visible = false; // Turn off the Title.

tig avatar Apr 15 '24 13:04 tig

From #2814 which I just closed:

Mini-Spec

Three scenarios so far:

  • User clicks on a button in the Border (top/right) that causes a Modal to quit.
  • User clicks on a button in the Border (top/right) that causes an Overlapped to close/hide.
  • User clicks on a button in the Border (top/right) that causes the view to collapse/expand.

We will create 3 new View subclasses, one for each of these:

  • ApplicationQuitter - Glyph is an X. MouseClick, and KeyBinding (Space) invoke Command.QuitToplevel (to be renamed to Command.Close). The command handler simply calls Application.RequestStop().
  • ViewHider -  Glyph is an X. MouseClick, and KeyBinding (Space) invoke Command.Close. The command handler simply calls SuperView.Parent.Visible = false. (or perhaps we add Close() as a verb on View?).
  • ViewExpander - Glyph is a up/down arrow. MouseClick, and KeyBinding (Space) invoke Command.ToggleExpandCollapse. Command hander
    • Disables/Hides/Enables/Shows SuperView.Parent's subviews
    • Sets the Height of the SuperView.Parent to 3 or Dim.Auto

Devs will add these views via view.Border.Add.

This is what ViewExpander will look like/do:

9rGXIUs 1

I've built a POC of ViewExpander in #3376

Background

This is a sub-issue of:

  • #2994

Will be fixed in this PR as a proof:

  • #3278

Background

Is your feature request related to a problem? Please describe. I want user to be able to close button by [X] button near dialog title from top right side. And I want them to be shown in Query dialogs by default. Because when you pass no button its not clear, that you need Escape button to be pressed to close it.

Describe the solution you'd like For dialogs and querries to have [x] button: Dialog Title [x]

Describe alternatives you've considered Have close button as now.

tig avatar Aug 13 '24 21:08 tig

This is what I have achieved so far. Clicking the close button works. The problem is that the border is not drawn at the end. But I haven't addressed that issue yet either.

Image

BDisp avatar Jul 07 '25 16:07 BDisp

I got this effect. Do you think we need to worry about the border?

Image

BDisp avatar Jul 07 '25 17:07 BDisp

I have already managed to solve the problem of the top border. Now I wonder if it makes sense to add a line below the system menu. I think this would be wasting available space for other views. I would appreciate if you give your opinion on whether or not to add the line. Thanks.

Image

BDisp avatar Jul 08 '25 10:07 BDisp

I think the controls should be on the top line. Don't waste a line.

tig avatar Jul 08 '25 12:07 tig

So you prefer the look of this case?

https://github.com/gui-cs/Terminal.Gui/issues/3407#issuecomment-3046011729

BDisp avatar Jul 08 '25 13:07 BDisp

So you prefer the look of this case?

#3407 (comment)

No. Needs the border line.

tig avatar Jul 08 '25 15:07 tig

Did you read this?

https://github.com/gui-cs/Terminal.Gui/issues/3407#issuecomment-2287149580

tig avatar Jul 08 '25 15:07 tig

I read it, but I don't know if I can process all of this. I'm trying to do my best by providing controls for close, maximize/restore, minimize, help, and a context menu with all of these actions, depending on the ViewArrangement. Sorry but I'm already confused. So do you prefer https://github.com/gui-cs/Terminal.Gui/issues/3407#issuecomment-3048346605 with a horizontal border above the controls or a horizontal border below the controls? If you don't want me to go ahead with this work, please say so now, so as not to waste time.

BDisp avatar Jul 08 '25 15:07 BDisp

This one: Image

Or this one: Image

BDisp avatar Jul 08 '25 16:07 BDisp

You read the spec I wrote, but choose to completely ignore it?

There is no requirement for a context menu. There is no requirement for help. I do not want either of those as I do not think they are necessary (at this point). Keep it simple.

I prefer neither of the images you shared. I prefer a border that goes all the way around, and has the buttons overlayed on it, as the arrangement buttons and ExpanderButton work today.

I do not like the idea of a dedicated "title bar" that spans the entire Frame of the View. I think it adds too much complexity for now.

Where to put the buttons, and how to style them can be easily changed over time. Keep it simple for now and minimal.

tig avatar Jul 08 '25 16:07 tig

I was developing a system menu for toplevels. I can't guess what your tastes are regarding the images and glyphs I used. So, and to avoid further annoyance, I'll end here my intention of continuing with this PR of mine. I'm too old to put up with certain things anymore.

BDisp avatar Jul 08 '25 16:07 BDisp