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

Improved overall tab UI design #989

Merged
merged 7 commits into from
Jan 18, 2023
Merged

Improved overall tab UI design #989

merged 7 commits into from
Jan 18, 2023

Conversation

austincondiff
Copy link
Collaborator

@austincondiff austincondiff commented Jan 16, 2023

Description

Made small changes to tab design to get it more consistent with Xcode including the background colors of the following states:

  • Active
  • Active when window is inactive
  • Pressed
  • Pressed while active
  • Dragging
  • Dragging when active

I am also using official materials for the tab bar background and the window background instead of overlaying a transparent black layer as before.

Tabs do not have a background by default which will later allow editor content to show through the material with a window blend mode.

Added a press state to the tab close button.

Progress update:

  1. Currently stuck in getting close button pressing state to work as expected in order to display the more prominent background. The hover state works, but when clicked, the background does not change for whatever reason. 🕵️‍♂️
  2. I got the close button background to change on press, but it also actives the press gesture for the tab.
  3. Everything works as expected, but I had to use several workarounds to get there. Also when clicking and dragging on the close button, it drags the tab and when letting go closes the tab because the cursor is over the close button on release. We need to ignore the drag gesture of the parent.
  4. I figured out how to prevent the parent drag gesture from the close button. Now when you click and move your cursor out of the close button to prevent it from closing, the tab does not drag.

This resolves all known bugs within the scope of this PR.

Checklist

  • I read and understood the contributing guide as well as the code of conduct
  • My changes generate no new warnings
  • My code builds and runs on my machine
  • I documented my code
  • Review requested

Screenshots

Dark Mode

Screen.Recording.2023-01-17.at.10.37.37.AM.mov

Light Mode

Screen.Recording.2023-01-17.at.1.29.06.PM.mov

Parent Drag Gesture Avoidance

Screen.Recording.2023-01-17.at.9.42.50.PM.mov

@austincondiff austincondiff marked this pull request as draft January 16, 2023 21:07
@austincondiff austincondiff marked this pull request as ready for review January 18, 2023 03:47
@austincondiff austincondiff changed the title Tab UI Improvements Improved overall tab UI design Jan 18, 2023
@austincondiff austincondiff added the enhancement New feature or request label Jan 18, 2023
@austincondiff austincondiff self-assigned this Jan 18, 2023
@lukepistrol lukepistrol merged commit 8c88570 into CodeEditApp:main Jan 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants