Add a UI to indicate a pane is focused. #994
Comments
zadjii-msft
added
the
Issue-Feature
ghost
added
Needs-Triage
zadjii-msft
added
Area-User Interface
|
This could use the FocusVisual or add a shadow to elevate the pane? |
|
So, I considered FocusVisual, but all that documentation seems to suggest that it should be used for apps for 10-foot experiences, such as Xbox. Considering we're not planning on shipping on xbox any time soon, I assumed this wasn't the right effect to use. I was definitely considering some sort of drop-shadow effect on panes in general. This might be a good conversation for @cinnamon-msft to have with our UI person |
DHowett-MSFT
removed
Needs-Triage
If not the full RevealGlow version, there is
|
|
I was also thinking that FocusVisualKind.HighVisibility could be used here. You can set FocusVisualSecondaryThickness, FocusVisualSecondaryBrush, FocusVisualPrimaryThickness, FocusVisualPrimaryBrush. |
|
Maybe something like ConEmu's "fade when inactive" feature would be an elegant solution? This should work for both panes and the terminal itself not being focused, i.e. only the tab/pane that has keyboard focus would be not faded, even across multiple windows. The box-border thingie replacing the cursor if not focussed is a nice indicator as well. Example of both (left is focussed): |
|
Faded option seems a good approach only when one of the panes is active
|
|
Hyper changes the text color. The focused pane uses a saturated, bright version of the font color, the out of focus panes use a desaturated, dark version of the font. I found that this makes it quite visually intuitive to instantly notice which pane is active. Yet the other panes are still quite readable. |
|
Fading or De-saturating the pane is a neat idea, but there are other considerations to take account of. Microsoft's Contrast Ratios for Accessibility. High Contrast theming. Hololens uses |
|
Sounds like the holy grail would be to have a configuration object for pane switching features (text fonts, background colors, borders, cursor, etc) with some sensible accessible defaults. |
|
So I'll say, I really love the whole "Configuration object for unfocused vs focused state" idea. However, that's a bit bigger of an ask, so I'm going to give that its own issue: #3062 What I have done is played a bit with just adding a simple border to the focused pane, and I'm really quite happy with it:
Right now it'll just pull the |
|
You could mimic the System Focus Rectangle, with the white and black inner and outer borders. Based on Light or Dark theme - just in case the Accent colour clashes with the coloured Terminal panes. |
## Summary of the Pull Request Adds a small border with the accent color to indicate a pane is focused <img src="https://user-images.githubusercontent.com/18356694/66218711-560e4b80-e68f-11e9-85b0-1f387d35bb92.png" width="480"> <img src="https://user-images.githubusercontent.com/18356694/66218757-6f16fc80-e68f-11e9-8d39-db9ab748c4de.png" width="480"> <img src="https://user-images.githubusercontent.com/18356694/66219194-55c28000-e690-11e9-9835-8b5212e70e8a.png" width="480"> ## PR Checklist * [x] Closes #994 * [x] I work here * [😢] Tests added/passed * [n/a] Requires documentation to be updated ## Detailed Description of the Pull Request / Additional comments I've removed the simple Grid we were using as the pane separator, and replaced it with a Border that might appear on any side of a pane. When we add a split, we'll create each child with one of the `Border` flags set (each child with one of a pair of flags). E.g. creating a horizontal split creates one child with the `Top` border, and another with the `Bottom`. Then, if one of those panes is split, it will pass it's border flag to is new children, with the additional flag set. So adding another Vertical split to the above scenario would create a set of panes with either (`Top|Left`, `Top|Right`) or (`Bottom|Left`, `Bottom|Right`) borders set, depending on which pane was split. <hr> * start work on this by tracking border state * Colorize the border * Use the accent color for highlighting * Cleanup the accent color code * Don't buy any rural real estate when closing a pane * Closing panes works well now too * Cleanup for review * Update src/cascadia/TerminalApp/Pane.cpp * try some things that don't work to fix the resizing crash * Revert "try some things that don't work to fix the resizing crash" This reverts commit 3fc14da. * this _does_ work, but I think it's not semantically correct * This doesn't seem to work either. I tried adding the pane seperators to the Pane::_GetMinWidth calculation. That works for prevent the crash, but the resizing is wonky now. If you add a Vertical split, then a second, then resize the middle pane really small, you'll see that the _last_ resize doesn't work properly. The text seems to overhand into the border. Additionally, there's really weird behavior resizing panes to be small. They don't always seem to be resizable to the smallest size. * Revert "This doesn't seem to work either." This reverts commit 2fd8323. * Merge the changes from the "this is the one" branch Again, no idea what I really did that worked, but it does * Cleanup from my mess of a commit This makes so much more sense now * Other PR feedback from @carlos-zamora * Fix a typo
ghost
added
Resolution-Fix-Committed
|
🎉This issue was addressed in #3060, which has now been successfully released as Handy links: |
Misc. ramblings from my notes:
[A|B]A should have a right margin, b should have a left.
[A|[B-C]]A has right
B has left, bottom
C has left, top
[A|[[B-D]-C]]A has right
B has left, bottom(with D), bottom(with C)
C has left, top(with B-D)
D has left, top(with B), bottom(with C)
Margin doesn't stack, just is there or isn't
Margin color should be either null, accent, or a color (Global, Control)
Margin should have configurable width (Global, Control)
How does this interact with #992? Can we detect a click is in the margin, and surface that up? or can the terminal app listen to the control's click/drag, and handle it somehow?
The text was updated successfully, but these errors were encountered: