Create and place auth widget #278

sssoleileraaa · 2019-03-20T16:47:33Z

Description

First iteration of #264

What changed?

13 securedrop_client/gui/main.py

Moved refresh status bar out of main.py into its own StatusBar class inside widgets.py

187 securedrop_client/gui/widgets.py

Added StatusBar class and moved refresh logic into here. Currently the refresh button is on the right side of the status bar. Will need to write our on QStatusBar class in order to have a permanent left-side widget in a status bar. QStatusBar only provldes a way to have a right-side status bar widget that doesn't get replaced by messages. This is work that can be done as part of the Refresh Widget Styles documented here: UX parity between prototypes & coded client #261
Refresh button has moved from next to journalist name to the top status bar
Implemented auth logic documented here: [client styling] Create and place auth widget #264 - sign-in button now takes up the entire width of the left pane when user is logged out and the sign-out option is an option in a menu next to the journalist username
Switched out the dropdown arrow next to the journalist username with the svg from the inventory list
Added JournalistMenu class to provide a sign-out option
Added JournalistMenuButton class to display the journalist menu when clicked

11 securedrop_client/resources/images/dropdown_arrow.svg

Added dropdown arrow svg from inventory list

359 securedrop_client/resources/images/hexes.svg

Added an svg of hexes, because I wanted to learn how to make a gradient fill, but also as a placeholder

BIN +17.7 KB securedrop_client/resources/images/logo.png

Made the logo smaller to fit in the 200px side bar

What's left?

Verify/ update hex, rgb, or rgba colors for left pane - I grabbed colors from the screenshots in [client styling] Create and place auth widget #264 using Gimp, but the light blue journalist name and sign-in button didn't look too great against the light gray background, and I'm not sure if we plan to have a darker background because I believe the branding image is still in progress. I tried searching for rgb values in a ticket somewhere, but I think we haven't decided on the exact color scheme for menus, buttons, etc. yet, or I'm just bad at searching through the ux repo (super likely). This looks promising: Complete branded bits & color schema securedrop-ux#36 but still can't find rgb or hex values
Make clicking on the username also open the sign-out drop-down menu
Make selected state of sign-in button more obvious (right now tabbing to select the button just gives it a slightly darker border)

redshiftzero

this looks amazing! 🚀 just a couple of questions/comments inline

redshiftzero · 2019-03-21T23:41:25Z

securedrop_client/gui/widgets.py

-        self.user_state.setText(_('Signed out.'))
-        self.login.setVisible(True)
-        self.logout.setVisible(False)
-        self.refresh.setVisible(False)


I think when we log out we want the refresh button to be hidden no?

@creviera asked me about where the Offline icon was, yesterday—did you want to put that in on a separate PR or were you waiting for me to respond to your Slack, Allie? All icons are in table on this Issue: freedomofpress/securedrop-ux#17

Oh yeah that's right! The new offline icon will be in the pr for this issue: #279. As I understand it, there will be three icons which are in this inventory list: freedomofpress/securedrop-ux#17. There you'll see an icon labeled "offline", the static refresh icon, and the active refresh icon.

@redshiftzero - Realizing now that when I moved the refresh icon to the StatusBar class, I didn't move this check, so yeah I didn't catch that I changed the behavior. Good catch. However, I'm working on a follow-up PR to change and test the new behavior of refresh, so if you're cool with leaving this as is for now, I'm cool with it. 😎

We discussed this and decided that since the refresh icon appearing when not logged in is a regression it would be good to resolve as part of this PR

redshiftzero · 2019-03-21T23:48:00Z

securedrop_client/gui/widgets.py

+        ''')
+        arrow = load_image("dropdown_arrow.svg")
+        self.setIcon(QIcon(arrow))
+        self.setMinimumSize(20, 20)


is it me or do these pixmaps look kind of blocky? (just for the dropdown SVG and the refresh SVG)

note that it's possible this is a macOS only thing - let me know if so and we can disregard since we're targeting Linux.

Blarg—is that crappy art on my part, @creviera? If so, happy to re-rip another one... 🤢

@ninavizz - Some higher fidelity images would be great! I'm currently using the svgs provided in the inventory list.

@ninavizz and @redshiftzero - In a follow-up PR I was able to improve the look of the refresh icon by changing this (which looked pixely/blocky):

refresh_pixmap = load_image('refresh.svg') self.refresh.setIcon(QIcon(refresh_pixmap))

To the following code:

pixmap = load_image('refresh.svg') scaled = pixmap.scaled(18, 18, Qt.KeepAspectRatio, transformMode=Qt.SmoothTransformation) icon.addPixmap(scaled, QIcon.Normal)

But I think I need to do more research into how to work with SVGs and QIcons. I may need to create a QSvgWidget which are used to display the contents of SVG files: https://doc.qt.io/archives/qt-5.10/qtsvg-module.html

redshiftzero · 2019-03-21T23:49:36Z

tests/gui/test_widgets.py

-    tb.user_state.setText.assert_called_once_with('Signed out.')
-    tb.login.setVisible.assert_called_once_with(True)
-    tb.logout.setVisible.assert_called_once_with(False)
-    tb.refresh.setVisible.assert_called_once_with(False)


(and we should keep this assert in the test once we hide the refresh button after logout)

Same response as my other comment about the upcoming PR. But now that I'm thinking about this more, I can switch the behavior back so this is a completely tested PR, and then just update the tests later.

sssoleileraaa · 2019-03-26T19:59:17Z

@redshiftzero - refresh behavior is the same as it used to be with new tests

Current and old behavior:

When login dialog opens, refresh button shows in the background window
If you click login the refresh button works
If you close login window without logging in, refresh button grays out when you try to use it
If you click logout, refresh button is hidden

redshiftzero

looks good now, thanks!

sssoleileraaa force-pushed the issue-264-auth-widget branch from 9d6e091 to 253ddd9 Compare March 20, 2019 23:26

sssoleileraaa marked this pull request as ready for review March 21, 2019 15:45

sssoleileraaa requested review from heartsucker and redshiftzero as code owners March 21, 2019 15:45

sssoleileraaa force-pushed the issue-264-auth-widget branch 3 times, most recently from d69a0c4 to 5f845dc Compare March 21, 2019 23:16

redshiftzero suggested changes Mar 21, 2019

View reviewed changes

eloquence changed the title ~~Issue 264 auth widget~~ Create and place auth widget Mar 22, 2019

sssoleileraaa force-pushed the issue-264-auth-widget branch from 5f845dc to 229a0d3 Compare March 26, 2019 19:56

sssoleileraaa force-pushed the issue-264-auth-widget branch from 229a0d3 to 2bd3f33 Compare March 26, 2019 20:06

rework user auth ui, add menu, icon, & styling

e2ba31a

sssoleileraaa force-pushed the issue-264-auth-widget branch from 4d53856 to e2ba31a Compare March 26, 2019 20:24

redshiftzero approved these changes Mar 26, 2019

View reviewed changes

redshiftzero merged commit 914b145 into master Mar 26, 2019

redshiftzero deleted the issue-264-auth-widget branch March 26, 2019 23:01

sssoleileraaa mentioned this pull request Mar 27, 2019

[client styling] Create and place auth widget #264

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create and place auth widget #278

Create and place auth widget #278

sssoleileraaa commented Mar 20, 2019 •

edited

Loading

redshiftzero left a comment

redshiftzero Mar 21, 2019

ninavizz Mar 22, 2019

sssoleileraaa Mar 22, 2019 •

edited

Loading

redshiftzero Mar 25, 2019

redshiftzero Mar 21, 2019

ninavizz Mar 22, 2019

sssoleileraaa Mar 22, 2019

sssoleileraaa Apr 4, 2019

redshiftzero Mar 21, 2019

sssoleileraaa Mar 22, 2019

sssoleileraaa commented Mar 26, 2019

redshiftzero left a comment

Create and place auth widget #278

Create and place auth widget #278

Conversation

sssoleileraaa commented Mar 20, 2019 • edited Loading

Description

What changed?

13 securedrop_client/gui/main.py

187 securedrop_client/gui/widgets.py

11 securedrop_client/resources/images/dropdown_arrow.svg

359 securedrop_client/resources/images/hexes.svg

BIN +17.7 KB securedrop_client/resources/images/logo.png

What's left?

redshiftzero left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sssoleileraaa Mar 22, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sssoleileraaa commented Mar 26, 2019

redshiftzero left a comment

Choose a reason for hiding this comment

sssoleileraaa commented Mar 20, 2019 •

edited

Loading

sssoleileraaa Mar 22, 2019 •

edited

Loading