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.

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

Ensures all modals have the same buttons styles and orders #2012

Merged
merged 2 commits into from Feb 1, 2019

Conversation

@noirbizarre
Copy link
Member

commented Jan 31, 2019

This PR ensures all modals have the same buttons styles and orders, same color code...

Delete modals

screenshot-data xps-2019 01 31-15-15-28
screenshot-data xps-2019 01 31-15-14-31

Edit modals

Cancel/Close button on the left, smaller, same color as the modal
Action buttons on the right, outlined, red and smaller if dangerous

screenshot-data xps-2019 01 31-15-39-36
screenshot-data xps-2019 01 31-15-15-57

Badges

Before

screenshot-www data gouv fr-2019 01 31-16-41-34

After

screenshot-data xps-2019 01 31-16-42-14

Issues

Before

screenshot-data xps-2019 01 31-16-04-59

After

screenshot-data xps-2019 01 31-16-10-22

Discussions

Before

screenshot-data xps-2019 01 31-15-48-13

After

screenshot-data xps-2019 01 31-16-03-13

Yes/No modals

  • No/Refuse in red, on the left side
  • Yes/Accept in green, on the right side

screenshot-data xps-2019 01 31-16-39-21

@noirbizarre noirbizarre added this to the 1.6.3 milestone Jan 31, 2019
@noirbizarre noirbizarre requested a review from opendatateam/etalab Jan 31, 2019
@noirbizarre noirbizarre force-pushed the noirbizarre:modal-consistency branch from ca98bdd to ccabd1c Jan 31, 2019
@abulte

This comment has been minimized.

Copy link
Member

commented Jan 31, 2019

Button placement consistency is awesome 👏 .

I wonder about some button colors though 🤔. The yes/no modal with green/red is very legible I think. It's not the case for the badges one. Maybe we can consider it a yes/no since there's only two choices?

@noirbizarre

This comment has been minimized.

Copy link
Member Author

commented Jan 31, 2019

I was wondering and I chosed to be consitent accross all modals.

Some of the possibilities I thinked about are:

  • change the color of actions buttons from btn-outlined to something else (green for every actions, red for dangerous ?)
  • drop the size changes between cancel/close buttons, danger buttons and actions buttons
@abulte

This comment has been minimized.

Copy link
Member

commented Jan 31, 2019

@taniki we need your thoughts on this ;-)

@taniki

This comment has been minimized.

Copy link
Member

commented Feb 1, 2019

  • drop the different button sizes. it bugged me a lot.
  • I would switch the style of normal and off. the flat style looks like a button contrary to the simple outline but the whiteness make more contrast so maybe we should get a pale blue as outline.
  • overall green/red is more legible but there is too much color already. In fact the white modal (discussions) is more clean/clear than blue ones. It also makes other colors more efficient.
  • I won't use a button for "cancel" or "close" actions. More likely a simple link.
  • I won't use "delete" button in "comment" or "edit" workflows. It should be in a different path in order to avoid mistakes, decision overload, path depths.
@noirbizarre

This comment has been minimized.

Copy link
Member Author

commented Feb 1, 2019

OK I hear the comments and I agree but this PR was only meant to align existing styles.

Can I implement the overall style change in another PR ? It needs to go over all modals to change them, and the last point in particular needs some major rewrite of some admin modals/edit/display views

@taniki

This comment has been minimized.

Copy link
Member

commented Feb 1, 2019

Yep mainly drop the different button sizes to have a complete alignement (: the overall consistency improvement provided by this PR is already a great thing (:

@noirbizarre noirbizarre force-pushed the noirbizarre:modal-consistency branch from ccabd1c to f9fc667 Feb 1, 2019
@noirbizarre

This comment has been minimized.

Copy link
Member Author

commented Feb 1, 2019

Thanks 👍

Done for the size change.

@taniki
taniki approved these changes Feb 1, 2019
@noirbizarre noirbizarre merged commit 5d79273 into opendatateam:master Feb 1, 2019
3 checks passed
3 checks passed
ci/circleci: assets Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: python Your tests passed on CircleCI!
Details
@noirbizarre noirbizarre deleted the noirbizarre:modal-consistency branch Feb 1, 2019
@bboulesteix

This comment has been minimized.

Copy link

commented on 10460d6 Feb 1, 2019

🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.