element-hq / element-hq/element-web

IRC-style layout should have a more "rigid grid"

Open
#14,940 4 comments 0 reactions 0 assignees View on GitHub
A-IRC-Layout T-Defect X-Needs-Design
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

# Description

In the Appearance settings, we can choose an "IRC style layout". This is an improvement, but it's really not there yet:

* More, if not all, of the main part of the Element window should be aligned to a 2D grid: Rows and columns - like on a terminal, corresponding to the (obviously monospace) font used.
* Speaking of which, you should suggest a Monospace font for this layout.
* Visual elements/decorations should respect the character grid layout. Specifically:
* No emojis - at all, or at least - not that exceed full character height
* balloons around names - certainly not above line height. Perhaps just rectangular backgrounds for nicknames; perhaps a font color change; perhaps just a :hover effect.
* The message "viewport" must not be able to display a non-integral number of lines, i.e. must not be able to cut lines in the middle at the top or bottom of the viewport.
* Timestamps should have the same size as the message text, and be aligned with the grid rows. What sets them apart is possible color (closer to the background), transparency (often amounting to about the same thing), positioning - beyond the nickname column, perhaps some space and perhaps some other visual separator. Some of the above, but not size.
* A better separation of the nicknames and the messages right after them. Either more space (a full character-block's width), or a colon (`:`), or something else.
* Consider making the nicknames just bold, without changing their color from the message color.
* Consider dropping the circular image per-each-message-of-each-user; it's too small to be useful.
* Consider marking each user's _last_ message (or last-read message or whatever it is) with a larger icon, and perhaps some smaller indicator that respects the character block grid. The current smaller icon is insufficient for understanding whom its supposed to be.

### Version information

Desktop.

For the desktop app:

- **OS**: Devuan GNU/Linux 3 (Beowulf)
- **Version**: 1.7.1

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.