search

freedomofpress / securedrop-client

a Qt-based GUI for SecureDrop journalists 📰🗞️
GNU Affero General Public License v3.0
41 stars 39 forks source link

Restyle pane scrollbars to be more subtle and auto-hide #474

Open ninavizz opened 5 years ago

ninavizz commented 5 years ago

This is (kinda) part of the epic #471

Problem

When more content exists than can be shown in a visible pane, client currently employs an OEM QT scrolling widget to facilitate scrolling. The ConversationPane,SourceList and ReplyPane are the three panes this impacts. A future HelpPane may need to scroll, too.

This Issue is to request a more elegant styling of the scrolling; partially so it is simply more elegant, but also to leave room for other UI elements that the bulky/visually-omnipresent OEM scrolling widget obfuscates.

Solution

I captured a screen recording of how Slack's Mac client works. I really like how its scrollbars are hidden until the user mouses over an area that has overflow content. The scrollbars also have rounded terminals.

I have also captured a screen recording of how Signal's Mac client works. Its scrollbars are always visible, and have squared terminals.

My preference would be for the scrollbars' visibility to mimic Slack's, both in their hide/show capabilities and with the rounded terminals. Both clients have their scrollbars at black @ ~60% opacity over lighter backgrounds, and white over Slack's eggplant background on its Team pane. This mockup is the one I have that shows the client w/ a scrollbar, and it uses #514D6E at 80% opacity (alpha .8).

sssoleileraaa commented 3 years ago

See https://github.com/freedomofpress/securedrop-client/issues/868#issuecomment-819866095

My preference would be for the scrollbars' visibility to mimic Slack's, both in their hide/show capabilities and with the rounded terminals. Both clients have their scrollbars at black @ ~60% opacity over lighter backgrounds, and white over Slack's eggplant background on its Team pane. This mockup is the one I have that shows the client w/ a scrollbar, and it uses #514D6E at 80% opacity (alpha .8).

This all sounds good. @ninavizz and I also discussed how the scrollbar size should be relative to the amount of scrolling one has to do, and this is default behavior for Qt scrollbars.

The current scrollbar mockup hides the right border of the selected source, which we agreed not to implement. There may need to be some back and forth during implementation to demo how the new scrollbar, along with the new verticle line in #868, look and feel with different sets of data in the client. Right now, the mockup doesn't include the scrollbar for the conversation view, so @ninavizz agreed to mock something here to help us make sure we're getting the details right.

ninavizz commented 3 years ago

@creviera Excellent notes, thank you for the recap of our convo!

The Zeplin mockup you linked to above, is quite out of date—so pls do not reference. I will "update" it accordingly, with a note. The two current Zeplin mockups showing the Conversation Pane and the Sourcelist each vertically scrollable. Please ignore the alpha/hex specs from my earlier comment that you quoted, above. :)

Per our convo, I also created this basic diagram, just to ensure we're all on the same page wrt terminology of ye scrollbar's anatomy. Per the below, our end-result/polished scrollbar will...

scrollbar

eloquence commented 3 years ago

@creviera has committed to a time-boxed investigation during the 4/15 sprint (max. 8 hours); we're not planning to merge any changes during this sprint yet.

ninavizz commented 3 years ago

@gonzalo-bulnes @creviera @eloquence This feels like the sort of thing it'd be nice to ask the QT consultant about, and to consider in how the code is refactored. Also... this feels like a painfully tangential priority, respective to so many others, r/n. I really want our baby to be pretty, but ugly scrollbars neither hinder usability, nor keep essential functionality from users.

ninavizz commented 3 years ago

All Zeplin references have been depreciated from this issue.

If I missed any, please see this page in Figma which has all production-ready still screens for spec examination (eg: all screens formerly exported to Zeplin) on it. The page's name (viewable in the Figma UI in a module to the top-left of one's screen) as ••• Production Reference Screens (formerly Zeplin)