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

MEGA THREAD: Design still subject to change, UI is pretty okay though #1375

Closed
24 of 29 tasks
DHowett-MSFT opened this issue Jun 22, 2019 · 312 comments
Closed
24 of 29 tasks
Labels
Area-User Interface Issues pertaining to the user interface of the Console or Terminal Issue-Question For questions or discussion Needs-Tag-Fix Doesn't match tag requirements Product-Terminal The new Windows Terminal.

Comments

@DHowett-MSFT
Copy link
Contributor

DHowett-MSFT commented Jun 22, 2019

I am creating this so I can pin it & to help keep track of several related issues/work-items.

Things we know:

Things related to tabs:

Things that people want, but we won't be able to fix:

Things fixed in v0.6:

Things fixed in v0.5:

Things fixed in v0.3:

@DHowett-MSFT DHowett-MSFT added Issue-Question For questions or discussion Area-User Interface Issues pertaining to the user interface of the Console or Terminal Product-Terminal The new Windows Terminal. labels Jun 22, 2019
@DHowett-MSFT DHowett-MSFT added this to the Terminal v1.0 milestone Jun 22, 2019
@ghost ghost added the Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting label Jun 22, 2019
@DHowett-MSFT DHowett-MSFT pinned this issue Jun 22, 2019
@DHowett-MSFT DHowett-MSFT removed the Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting label Jun 22, 2019
@mdtauk
Copy link

mdtauk commented Jun 22, 2019

The plus glyph will probably shrink, I commented on the TabControl issue, and it seems they will push the change, to match the smaller glyph used by UWP Edge.

image

@Jaykul
Copy link
Contributor

Jaykul commented Jun 22, 2019

Yeah, I think we can all agree "make the tabs like Edge Chrome" is nice, but "make the tabs like the promo video" is even better ... 😣

@mdtauk
Copy link

mdtauk commented Jun 22, 2019

I think the UWP Edge had nicer tabs than Edge Chrome. 🤔

@19lmyers
Copy link

Personally I wish they'd make Edge Chrome's tabs like UWP Edge, but nobody asked me...

@Jaykul
Copy link
Contributor

Jaykul commented Jun 22, 2019

Yeah, yeah, but ... either of them is waaaay ahead of Terminal 🤡
Edgium has almost 20 pixels above the tabs that are ugly ... but ... draggable!
And with both of them, you can at least tell which tab is active 🙄

@3dWrecker
Copy link

3dWrecker commented Jun 22, 2019

There is no PRACTICAL use for acrylic when coding. However transparency is very useful. It means I can view code beneath the Terminal window like this:
Annotation 2019-06-22 154553
Please add an adjustment for the BLUR factor that acrylic uses. I can't read blurred out text.
Annotation 2019-06-22 154657
Also if the Terminal did not go black when inactive like this:

Annotation 2019-06-22 154746
it would be really useful to be able to have a pin button which pinned the terminal above all other windows. This would enable seamless switching between the terminal and whatever code editor you are using (especially if you can read code beneath the Terminal window.)
I suggest that the acrylic theme should stay active instead of "going black" if an "Always on top" feature is added and enabled.

What it could look like:
dhdghjdy
The pin icon, to pin the Terminal above all windows.
@nacorv,

I would like to know if "Always on top" is a feature that would be considered.

@3dWrecker
Copy link

Selecting and dragging anywhere within the tab area currently does not move the window. This makes it necessary to move the mouse to the right of the tab area, which leaves a very small amount of titlebar which can be used to move the window. Please change this. No rush!

@Plasma
Copy link

Plasma commented Jun 22, 2019

  1. Turning on acrylic in Powershell makes the purple parameters like -abc appear near invisible.

@sachinjoseph
Copy link
Member

sachinjoseph commented Jun 22, 2019

Resolution: 4K
Display Scaling: 100%

Light theme:

image

Dark theme:
image

@liamfoneill
Copy link

ezgif-2-9dc95bf607e7

Resizing the window causes the UI to disapper/reappear. I am using the Windows Store Preview Version 0.2.1715.0

@momos11
Copy link

momos11 commented Jun 22, 2019

Fullscreen:
image

Resized:
image

If the window is not big enough, all the other tabs are hidden.

@benc-uk
Copy link

benc-uk commented Jun 22, 2019

If the tab bar can't be acrylic, that's a major shame.
Anything that can be done to make them integrate better would be most welcome

The non drag-able tab/title bar is the #1 complaint I've heard from everyone that has tried the early builds

Split panes need some visual polish, make it clear which is in focus, some animation even as it opens

@thejsa
Copy link

thejsa commented Jun 22, 2019

When maximised on my 2nd monitor (1366x768 laptop built-in display, not set as main), the edges of the app are cut off:
image

@robster2001
Copy link

Tabs show the path to the executable instead of the name of the app; if the path is too long, the "x" to close the tab is pushed off the right side of the tab and is invisible.

Clicking "Settings" attempts to open a JSON file. I'm guessing that the UI for that hasn't been built yet. :)

@allen-chin
Copy link

As an addition to @robster2001's comments, it'd be nice if each tab showed the actual path like Ubuntu and if it was in administrator mode (e.g. Command Prompt (Admin) - C:\current\path\that\you\are\in).

When you don't have terminal maximized, as I usually don't, the issue #857 combined with the long titles allows for much less tabs than what it could be.

@GenesisCraig
Copy link

The tabs are just too wide to be useful. Perhaps just show the executable and give the path/etc information when you hover over the tab in a tooltip or something.

@DHowett-MSFT
Copy link
Contributor Author

Two things:
Panes are not bound by default because they are incomplete. If you enable them yourself, YMMV.

If you want a custom tab title, you should look at how to set that up for your shell. It’ll benefit you everywhere you use your shell. By making powershell set the title, you change the title for Windows Terminal, legacy console, VSCode, ConEmu and a bunch of other things. It can even change in the middle of a session!

@DHowett-MSFT
Copy link
Contributor Author

Panes epic: #1000

@csells
Copy link

csells commented Jun 22, 2019

I couldn't find anywhere along the caption at the top of the window that allowed me to drag and move the window. I had to resort to keyboard shortcuts.

@csells
Copy link

csells commented Jun 22, 2019

two-finger scrolling doesn't work, although it works great on cmd.com and PowerShell.

@thomthom
Copy link

Tabs cannot be moved/rearranged.

@r4dian
Copy link

r4dian commented Apr 11, 2021

If Powerline/ohmyzsh/zpresto, (for example) adds a background on the right of the line, then once you hit the bottom of the window that background appears also in places it shouldn't (to repro, run a command with long output twice, with a similar prompt setup.)

Screenshot 2021-04-11 235044

@ghost
Copy link

ghost commented May 27, 2021

image

The acrylic NavigationView doesn't look that good with tabs.
I think it should either have the same background as the rest of the page, or there should be a header above it.

@ghost
Copy link

ghost commented Jun 8, 2021

image

I suggest having the search menu (Ctrl+Shift+F) be detached from the titlebar for a couple of reasons:

  • the new WinUI TabView style has a border at the bottom and the menu won't be seamlessly connected anymore
  • WinUI now tries to avoid having sharp corners at all
  • other apps with a similar menu have it being detached

Would something like this be good? It has an 8px margin at the top, like the Command Palette.
searchmenu

@ghost ghost mentioned this issue Sep 1, 2021
@Tropix126
Copy link

I've thrown together this quick concept of what Terminal might look like with WinUI 2.6 controls and mica.
image

@Tropix126
Copy link

Tropix126 commented Sep 8, 2021

image
Dark mode

@Tropix126
Copy link

Tropix126 commented Sep 8, 2021

imageSettings

image About dialog + Command palette

@Tropix126
Copy link

image
Finally, here's a concept for the find and replace flyout based on @gabrielconl 's idea

@quietrobot
Copy link

I've thrown together this quick concept of what Terminal might look like with WinUI 2.6 controls and mica.
image

Yes!!!!!!

@miniksa
Copy link
Member

miniksa commented Sep 8, 2021

Thanks @Tropix126. We are trying to move to WinUI 2.6 so we can get their styling work, but we're currently blocked by microsoft/microsoft-ui-xaml#5435. I've engaged with the WinUI team internally to hopefully get us past this.

ghost pushed a commit that referenced this issue Sep 9, 2021
Made some changes to the search box:
* Adjusted spacing inside the box
* Detached the search box from the titlebar (as explained [here](#1375 (comment)))
* The search box is now 8px further to the left, in case the scrollbar is always enabled
* Made some controls use default properties, so that they'll adjust nicely to the 2.6 styles

Other: the search box and command palette now use OverlayCornerRadius

Before/After:
![image](https://user-images.githubusercontent.com/84711285/131888377-513b9de4-a653-4086-9a67-8718c64dc75b.png)
@Tropix126
Copy link

Tropix126 commented Nov 12, 2021

Looks like efforts have started on MUX 2.7 adoption in #11720.

@Shomnipotence

This comment was marked as off-topic.

@mdtauk

This comment was marked as off-topic.

@quietrobot

This comment was marked as off-topic.

@zadjii-msft
Copy link
Member

The above work is something we're tracking in #3327. There's more discussion there, so I'll redirect the above couple comments to that thread instead. Thanks!

@mhtvsSFrpHdE
Copy link

mhtvsSFrpHdE commented Jul 31, 2022

I don't care about the design language battle or something,
but could we just have a "Disable border radius" optional checkbox?

Here is my Firefox customization, I only applied border-radius: 0 CSS to every UI and get this beauty
Every other design was inherited from stock, just removed all the rounded corners

I believe Windows Terminal can get similar looking too if we simply allow user choice to disable corners
image

@KiruyaMomochi
Copy link

Colored tabs feels a little separated.
To make it looks more like a hole, maybe add a colored line below the tab?

image

@tunaflsh
Copy link

Dragging the window above the taps is still not supported yet? I just somehow accidentally moved my window too far to the right and I couldn't reach the draggable zone anymore.

@zadjii-msft
Copy link
Member

Hey all,

I'm gonna finally close this thread out with the release of Windows Terminal 1.17. This release finally adds support for Mica, and with that, I'm gonna call this "done". I think we've settled enough on what the design of the Terminal is going to be going forward, and we've established a mechanism (through Themes) for users to add additional UI customizations as they see fit.

There's been a large number of minor suggestions for changes to the UI that have accumulated in this thread over the years. I'm under the impression that these should all be tracked as sub-points in our "Themes megrathread", #3327, at this point (my apologies if I missed anyone). Obviously, these aren't all done, but the fundamental framework is now in place for storing these Theme settings, so when these features are ever added, exposing them as optional settings should be "easy". There's also other minor functional nits (like #5493) which don't really need this megathread tracking them anymore.

Thanks to the 145 of you who have commented on this thread, and countless more of you following for updates. It's hard to believe how far the Terminal has come over the years, from v0.1 to what's possible today:

I'm really happy with the way this has all come together over the years, and that wouldn't have been possible without the absolute breadth of feedback we've gotten here (and in other threads) ❤️

@ghost ghost added the Needs-Tag-Fix Doesn't match tag requirements label Jan 24, 2023
@zadjii-msft zadjii-msft modified the milestones: Backlog, Terminal v1.17 Jan 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-User Interface Issues pertaining to the user interface of the Console or Terminal Issue-Question For questions or discussion Needs-Tag-Fix Doesn't match tag requirements Product-Terminal The new Windows Terminal.
Projects
None yet
Development

No branches or pull requests