eclipse-cdt-cloud / eclipse-cdt-cloud/theia-trace-extension

Make panel titles horizontal

Open
#154 5 comments 0 reactions 0 assignees View on GitHub
Theia UI UX
Dominant language
TypeScript
Stars
50
Forks
60
PR merge metrics
No merged PRs in 30d

Description

Horizontal text is the fastest and most comfortable to read (compared to vertical, diagonal, etc.)

Position the ‘X’ for deleting the chart at the far right (keeps deletion intuitive by following the standard for horizontal windows in VS Code).

![horizontal-panel-title](https://user-images.githubusercontent.com/28311615/95917093-b2627b80-0d77-11eb-969a-49bcd069c21a.PNG)

Other benefits:
* Horizontal titles can structure the layout by doubling as visual dividers between each panel. For example, when scanning quickly, it's difficult to see that there are two separate checklists instead of just one:
![image](https://user-images.githubusercontent.com/28311615/127682870-8b9e60fe-8ebc-4aee-9c81-dd7347675869.png)
* Horizontal orientation leaves room for longer titles

Quick test you can try on yourself to show that horizontal text is significantly faster to read ([Article](https://jov.arvojournals.org/article.aspx?articleid=2121153)).

![horizontal-vertical-text-reading2](https://user-images.githubusercontent.com/28311615/95917612-872c5c00-0d78-11eb-93b2-c25f2d2f132a.PNG)

Contributor guide

Open the contributing guide

Research direction

No file or test is named in the issue. Locate the TypeScript frontend code that renders panel titles and the chart deletion control, then compare it with the screenshots and confirm that titles are horizontal, the delete “X” is at the far right, and separate panels are visually distinguishable.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.