starred/terminal
1
0
Fork 0
mirror of https://github.com/microsoft/terminal.git synced 2026-09-24 16:05:21 +00:00
Code Issues 19.0k Packages Projects Releases 20 Wiki Activity

Add a UI to indicate a pane is focused. #1335

New Issue
Closed
opened 2026-01-30 22:22:55 +00:00 by claunia · 12 comments
claunia commented 2026-01-30 22:22:55 +00:00
Owner
Copy Link

Originally created by @zadjii-msft on GitHub (May 24, 2019).

Originally assigned to: @zadjii-msft on GitHub.

Misc. ramblings from my notes:

  • IDEA: have the pane call some method on it's child controls to have it indroduce some margin, as opposed to creating some manual seperator. When the control is focused, colorize the margin. When it's unfocused, remove that color. Each pane optionally tells a control should it have margin on top/bottom/left/right, and does it recursively? so

[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?

Originally created by @zadjii-msft on GitHub (May 24, 2019). Originally assigned to: @zadjii-msft on GitHub. Misc. ramblings from my notes: * IDEA: have the pane call some method on it's child controls to have it indroduce some margin, as opposed to creating some manual seperator. When the control is focused, colorize the margin. When it's unfocused, remove that color. Each pane optionally tells a control should it have margin on top/bottom/left/right, and does it recursively? so `[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?
claunia commented 2026-01-30 22:22:56 +00:00
Author
Owner
Copy Link

@mdtauk commented on GitHub (May 24, 2019):

This could use the FocusVisual or add a shadow to elevate the pane?
image
https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus

@mdtauk commented on GitHub (May 24, 2019): This could use the FocusVisual or add a shadow to elevate the pane? ![image](https://user-images.githubusercontent.com/7389110/58352422-64d42e80-7e63-11e9-918e-0afc4b2f853a.png) https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus
claunia commented 2026-01-30 22:22:56 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (May 24, 2019):

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

@zadjii-msft commented on GitHub (May 24, 2019): 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
claunia commented 2026-01-30 22:22:57 +00:00
Author
Owner
Copy Link

@mdtauk commented on GitHub (May 24, 2019):

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

If not the full RevealGlow version, there is
FocusVisualKind.HighVisibility

image

@mdtauk commented on GitHub (May 24, 2019): > 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 If not the full RevealGlow version, there is **FocusVisualKind.HighVisibility** ![image](https://user-images.githubusercontent.com/7389110/58352983-217abf80-7e65-11e9-8212-7e82924d1ace.png)
claunia commented 2026-01-30 22:22:57 +00:00
Author
Owner
Copy Link

@dlong11 commented on GitHub (Jun 2, 2019):

I was also thinking that FocusVisualKind.HighVisibility could be used here. You can set FocusVisualSecondaryThickness, FocusVisualSecondaryBrush, FocusVisualPrimaryThickness, FocusVisualPrimaryBrush.
The margin approach seems like the same thing as this.

@dlong11 commented on GitHub (Jun 2, 2019): I was also thinking that FocusVisualKind.HighVisibility could be used here. You can set FocusVisualSecondaryThickness, FocusVisualSecondaryBrush, FocusVisualPrimaryThickness, FocusVisualPrimaryBrush. The margin approach seems like the same thing as this.
claunia commented 2026-01-30 22:22:57 +00:00
Author
Owner
Copy Link

@seritools commented on GitHub (Jul 2, 2019):

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):
image

@seritools commented on GitHub (Jul 2, 2019): 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): ![image](https://user-images.githubusercontent.com/5844066/60534011-30288200-9d01-11e9-96e0-66e7a060ab79.png)
claunia commented 2026-01-30 22:22:57 +00:00
Author
Owner
Copy Link

@guibirow commented on GitHub (Aug 27, 2019):

Faded option seems a good approach only when one of the panes is active
When all panes are inactive wont take much effect.

image

@guibirow commented on GitHub (Aug 27, 2019): Faded option seems a good approach only when one of the panes is active When all panes are inactive wont take much effect. ![image](https://user-images.githubusercontent.com/943026/63776635-a8628c80-c8d9-11e9-95b5-90337f65154d.png)
claunia commented 2026-01-30 22:22:58 +00:00
Author
Owner
Copy Link

@cdmihai commented on GitHub (Sep 13, 2019):

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.

@cdmihai commented on GitHub (Sep 13, 2019): 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.
claunia commented 2026-01-30 22:22:58 +00:00
Author
Owner
Copy Link

@mdtauk commented on GitHub (Sep 13, 2019):

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

@mdtauk commented on GitHub (Sep 13, 2019): 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
claunia commented 2026-01-30 22:22:58 +00:00
Author
Owner
Copy Link

@cdmihai commented on GitHub (Sep 16, 2019):

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.

@cdmihai commented on GitHub (Sep 16, 2019): 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.
claunia commented 2026-01-30 22:22:58 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Oct 4, 2019):

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 SystemAccentColor to use as the focus highlight color. I'm going to track adding a customizable color in #3061.

@zadjii-msft commented on GitHub (Oct 4, 2019): <!-- ![image](https://user-images.githubusercontent.com/18356694/66218711-560e4b80-e68f-11e9-85b0-1f387d35bb92.png) ![image](https://user-images.githubusercontent.com/18356694/66218757-6f16fc80-e68f-11e9-8d39-db9ab748c4de.png) ![image](https://user-images.githubusercontent.com/18356694/66219194-55c28000-e690-11e9-9835-8b5212e70e8a.png) --> 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: <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"> Right now it'll just pull the `SystemAccentColor` to use as the focus highlight color. I'm going to track adding a customizable color in #3061.
claunia commented 2026-01-30 22:22:59 +00:00
Author
Owner
Copy Link

@mdtauk commented on GitHub (Oct 4, 2019):

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.

@mdtauk commented on GitHub (Oct 4, 2019): 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.
claunia commented 2026-01-30 22:22:59 +00:00
Author
Owner
Copy Link

@ghost commented on GitHub (Nov 26, 2019):

:tada:This issue was addressed in #3060, which has now been successfully released as Windows Terminal Preview v0.7.3291.0.🎉

Handy links:

@ghost commented on GitHub (Nov 26, 2019): :tada:This issue was addressed in #3060, which has now been successfully released as `Windows Terminal Preview v0.7.3291.0`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v0.7.3291.0) * [Store Download](https://www.microsoft.com/store/apps/9n0dx20hk701?cid=storebadge&ocid=badge)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
⛺ Reserved
A11yCO
A11yMAS
A11ySev1
A11ySev2
A11ySev3
A11yTTValidated
A11yUsable
A11yVoiceAccess
A11yWCAG
Area-Accessibility
Area-AtlasEngine
Area-AzureShell
Area-Build
Area-Build
Area-Chat
Area-CmdPal
Area-CodeHealth
Area-Commandline
Area-CookedRead
Area-DefApp
Area-Extensibility
Area-Fonts
Area-GroupPolicy
Area-i18n
Area-Input
Area-Interaction
Area-Interop
Area-Localization
Area-Output
Area-Performance
Area-Portable
Area-Quality
Area-Remoting
Area-Rendering
Area-Schema
Area-Server
Area-Settings
Area-SettingsUI
Area-ShellExtension
Area-ShellExtension
Area-ShellExtension
Area-Suggestions
Area-Suggestions
Area-TerminalConnection
Area-TerminalControl
Area-Theming
Area-UserInterface
Area-VT
Area-Windowing
Area-WPFControl
AutoMerge
Blocking-Ingestion
Culprit-Centennial
Culprit-WinUI
Disability-All
Disability-Blind
Disability-LowVision
Disability-Mobility
External-Blocked-WinUI3
Fixed
Gathering-Data
good first issue
HCL-E+D
HCL-WindowsTerminal
Help Wanted
Impact-Compatibility
Impact-Compliance
Impact-Correctness
Impact-Visual
In-PR
InclusionBacklog
InclusionBacklog-Windows TerminalWin32
InclusionCommitted-202206
Issue-Bug
Issue-Docs
Issue-Feature
Issue-Feature
Issue-Question
Issue-Samples
Issue-Scenario
Issue-Task
Needs-Attention
Needs-Author-Feedback
Needs-Bisect
Needs-Discussion
Needs-Repro
Needs-Tag-Fix
Needs-Tag-Fix
Needs-Triage
No-Recent-Activity
Priority-0
Priority-1
Priority-2
Priority-3
Product-Cmd.exe
Product-Colortool
Product-Colortool
Product-Colortool
Product-Conhost
Product-Conpty
Product-Meta
Product-Powershell
Product-Terminal
Product-WSL
pull-request
Mirrored from GitHub Pull Request
 Resolution-Answered
Resolution-By-Design
Resolution-Duplicate
Resolution-External
Resolution-Fix-Available
Resolution-Fix-Committed
Resolution-No-Repro
Resolution-Won't-Fix
Severity-Blocking
Severity-Crash
Severity-DataLoss
spam
this-will-be-a-breaking-change
Tracking-External
WindowsTerminal_Win32
Work-Item
zAskModeBug
zInbox-Bug
No Label Area-UserInterface Issue-Task Needs-Tag-Fix Product-Terminal Resolution-Fix-Committed
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#1335
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?