Better support for touch interfaces · eclipse-theia/theia#3557

(19 comments) (23 reactions) (0 assignees)TypeScript (18,676 stars) (2,478 forks)batch import

help wantedipad

Description

Hi there! I'm a big fan of Theia and it's potential, especially as a powerful IDE replacement for tablets (such as my iPad Pro). After using Theia on my iPad for a day, I can already see some weak points in terms of usability with a touch interface and mobile accessories.

Arrows on my iPad Smart Keyboard do not work at all in neither the Terminal nor the Monaco shell. (https://www.grapecity.com/en/forums/wijmo/arrow-keys-dont-work-on-ip)
Scrolling is a mess due to overscrolling. I had to lightly mod my Theia instance to disable overscrolling.
Context menus are not dismissible without reloading the page.
There is no way to resize panels in the IDE from a touch interface.
The page is very zoomed in because there is no meta-tag controlling the viewport initials size (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)

Theia already serves as an excellent IDE on tablets, and I would love to see it get even better. I would love to contribute to the project and help improve usability on touch interfaces after I get more acquainted with the codebase and guidelines.

Patch List

Contributor guide

Tech stack: typescripthtmlcss
Domain: frontend
Issue type: feature
Difficulty: 3
Estimated time: 1-2 days
Activity status: stale
Clarity: mostly clear
Prerequisites: basic knowledge of Theia's frontendfamiliarity with CSS and HTML viewport
Newbie friendliness: 50
Research direction: Investigate the sub items listed in the issue: arrow keys on iPad Smart Keyboard not working in Terminal/Monaco shell, overscrolling issue, dismissible context menus, panel resizing for touch, and viewport meta tag. Look at the linked patches for viewport tag (commit b84bd68fcfe4fe7d23ad4cba0f9d5784f965c537) and overscroll (commit 8e7ca286a798b415c72a825b19d4dc65bab1c040) to understand potential fixes. Check the Theia codebase for relevant CSS and JavaScript handling touch events, particularly in the shell and Monaco editor areas. Consult comments for any additional context or solution proposals.