Responsive collapsable gutter (side menu)

[fredefox]

It'd be nice if the "gutter" collapsed on narrow viewports. Something like

@media (max-width: 50em) {
  .gutter {
     display: none;
  }
  .conversation-stack {
    padding-left: 0px;
  }
}

This would of course require a replacement drop-down menu. Is this something you'd be interested in?

[scottnonnenberg-signal]

What do you mean by 'gutter' exactly?

[fredefox]

That was probably a bad name to reference it by. It's the css class of the side menu.

[fredefox]

I've uploaded two screenshots here: http://web.student.chalmers.se/~hanghj/signal-screen-dump/

Didn't find a way to attach them to this issue directly, sadly.

The two pictures shows Signal (with the developer console open showing the added css). The first picture shows Signal at screen-width > 50em with the side menu visible. The second one is with a narrower viewport where the menu is not visible.

[scottnonnenberg-signal]

@fredefox You can drag images directly into your comments here. Note also that I don't have permission to view the files on your server.

[fredefox]

[scottnonnenberg-signal]

I think we'll need some sort of affordance for the left conversation list pane when it's collapsed. That second screenshot is really confusing - how would you know to make the window wider?

[GuardianMajor]

Probably making it a thin strip, rather than fully hidden, so when you click on it, it will expand back out to the way it is now. This way there is a quick way to get it back without jumping through a lot of hoops. Think for example the Outlook left panel and how it collapses and comes back quite easily and maybe put a pin icon that will make it stay open or otherwise collapse again when it loses focus. Just my two cents on this.

[fredefox]

This wasn't intended as the final solution. Just an illustration of the problem and my proposed solution. Hence I this issue rather than a PR. Can I take it you'd be interested in this if I implement it?

[scottnonnenberg-signal]

@fredefox Yes, we are interested. But these questions are meant to illustrate that anything UI-centric like this is really visible, with lots of corner cases to consider. We really need it to be right before we merge, and that often means talking quite a bit before any code is written.

[fredefox]

Yeah, I totally agree with you. It's a good point and also why I wanted to float the idea before starting to work on it. I'd add, though, that implementing something that only affects narrow view ports cannot really deteriorate the interface, since, as it stands, the interface is not really usable when it is narrow.

But I'd be very interested in hearing input from the community/maintainers. Let me know when this is something you'd want to move forward with.

[karthanistyr]

I second this proposal. I notice the screenshots show a tiling window manager, which I also use. In such contexts, Signal Desktop is simply too greedy in terms of screen space, with enforced minimum width and height and lack of a "minimised" display mode, which means we have to reserve a full screen for the app to be usable.

Also these screenshots seem to have been taken before the electron update that scales up the UI widgets on high density displays (> 72 dpi, e.g. mine is 166 dpi). Since then the problem has only exacerbated as now all widgets individually take even more space.

[scottnonnenberg-signal]

@karthanistyr Can you provide a screenshot of the scaling up of the widgets under high DPI? I'm not sure I've seen that.

[karthanistyr]

Before it used to open like this:

Now it's like this:

I find the text more legible, but the UI is becoming a bit cumbersome. The contacts sidebar is enormous (and non-collapsible).

Also the UI is such that when I try to allocate less than the minimum width to the Signal window, the part of the window that gets overlapped is the chat zone, leaving the Contacts sidebar intact (hard minimum width issue):

HTH.

[scottnonnenberg-signal]

@karthanistyr Interesting. When did that start happening? Can you tell me about Linux distro and window manager?