Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Admin payments UI cleanup #3101

Merged
merged 11 commits into from
Mar 1, 2019
Merged

Admin payments UI cleanup #3101

merged 11 commits into from
Mar 1, 2019

Conversation

tvdeyen
Copy link
Member

@tvdeyen tvdeyen commented Feb 15, 2019 •
edited
Loading

Description

Removes a lot of confusion and UI misconceptions from the order payments screens

  1. Changes icons of payment capture and save actions
  2. Moves the payment logs buttons into context
  3. Fixes navigation issues on payment log entries screen

Checklist

Screenshots

Payment save button before

payment save before

Payment save button after

payment save after

Payment capture before

payment capture before

Payment capture after

payment capture after

Payment details before

credit card void - payments - r987654321 - orders 2019-02-27 21-28-37

Log entries before

log entries before

Payment details with integrated log entries after

payment details after

@tvdeyen tvdeyen added UI changelog:solidus_backend Changes to the solidus_backend gem labels Feb 15, 2019
@kennyadsl
Copy link
Member

Thanks, @tvdeyen! I'm just not sure about the Logs button at the end of the payment page. It could look like it's related to the capture events only, but it refers to all events type logs of the payment if I get it correctly, right?

@aitbw
Copy link
Contributor

aitbw commented Feb 19, 2019

Great work as usual, @tvdeyen ! Just one question:

On Payment capture, on the after screen —the icon in the middle shouldn't be a blue check mark? Same as Payment save, on the after screen.

@tvdeyen tvdeyen self-assigned this Feb 27, 2019
@tvdeyen
Use checkmark icon to save payment edits
cea87d2 
Everywhere we use the checkmark as save/store/ok icon. Besides on the order payments edit screen. Probably because the "capture" action already has a checkmark. We should change that icon instead to avoid confusion.
@tvdeyen
Use thumbs up as "capture" payment icon
e1cc77f 
As the checkmark is already used as save/store icon everywhere we should use another icon for "capture" action. Thumbsup should be a well known gesture for ok/approved
@tvdeyen
Remove overflow hidden from content wrapper
120cf0e 
This cuts off focus state from form buttons. The case described in the comment is not true anymore. The tabs resize very well without that.
@tvdeyen
Wrap capture events in fieldset
6975040 
We use fieldsets for grouping everywhere. Why not here as well?

Also one does not render a partial and ask the necessity of that in the partial itself.
@tvdeyen
Move log entries table into partial
3fd5bcc 
We want to render them on tha payment details page as well
@tvdeyen tvdeyen force-pushed the admin-payments-ui-cleanup branch from d92cb7d to efdb608 Compare February 27, 2019 18:16
@tvdeyen
Show the log entries on the payment detail screen
1819f81 
Instead of having a dedicated route and controller we just display this under the payment info
@tvdeyen tvdeyen force-pushed the admin-payments-ui-cleanup branch from efdb608 to d4c818d Compare February 27, 2019 20:23
@tvdeyen
Restyle payment log entries
366c4b7 
The old style does not fit into the new admin layout
@tvdeyen
Align the payment capture events table
a588fd6
@tvdeyen
Normalize font size in dt elements
a3b54e9 
We use these elements in the order summary sidebar and payment source details

The font size was not like the rest of the admin
@tvdeyen tvdeyen force-pushed the admin-payments-ui-cleanup branch from d4c818d to a3b54e9 Compare February 27, 2019 20:46
@tvdeyen
Restyle pre tags in table contexts
b1f31c0 
The payment log entries use pre tags nested inside a table. Normalizing the font-size and removing the bottom margin in this case.
@tvdeyen
Deprecate log_entries controller
1e73cb0 
The payments log entries are now displayed on the payment itself.
@tvdeyen
Copy link
Member Author

tvdeyen commented Feb 27, 2019

On Payment capture, on the after screen —the icon in the middle shouldn't be a blue check mark? Same as Payment save, on the after screen.

@aitbw no, I changed that on purpose. Having a checkmark could be confused with save and I thought a commonly understood icon would fit perfectly here for the task of "ok, collect the money". We already use the thumbs down icon for rejecting failed payments.

kennyadsl
kennyadsl approved these changes Feb 28, 2019
View reviewed changes
Copy link
Member

@kennyadsl kennyadsl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tvdeyen This change is so great, thanks! 🎉

jacobherrington
jacobherrington approved these changes Mar 1, 2019
View reviewed changes
Copy link
Contributor

@jacobherrington jacobherrington left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good UI improvement. Definitely an area we can show some ❤️. Thanks, @tvdeyen!

@jacobherrington jacobherrington merged commit 5c2e4a6 into solidusio:master Mar 1, 2019
@tvdeyen tvdeyen deleted the admin-payments-ui-cleanup branch December 2, 2021 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@houndci-bot houndci-bot houndci-bot left review comments

@jacobherrington jacobherrington jacobherrington approved these changes

@kennyadsl kennyadsl kennyadsl approved these changes

Assignees

@tvdeyen tvdeyen

Labels
changelog:solidus_backend Changes to the solidus_backend gem
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@tvdeyen @kennyadsl @aitbw @houndci-bot @jacobherrington