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

Implement concept for Modal windows #1681

Closed
12 tasks done
barmac opened this issue Feb 6, 2020 · 3 comments · Fixed by #1686
Closed
12 tasks done

Implement concept for Modal windows #1681

barmac opened this issue Feb 6, 2020 · 3 comments · Fixed by #1686
Assignees
@barmac
Labels
a11y ux
Milestone
M34

Comments

@barmac
Copy link
Contributor

barmac commented Feb 6, 2020 •
edited
Loading

This is a status issue for what I am working on at the moment.

What should we do?

  • Location: It needs to appear upper half of the screen, 110px from the top and 60px from the bottom per default in a 1440x1024 screen. As the size of the viewport changes, the modal window will be centered in the viewport accordingly and the top position of the modal will be relocated.
  • Resizing: If the modal window needs to grow for adding more elements, then the modal window height will be increased from the bottom. Top position of the modal window will not change by adding more elements in the modal.
  • Scrolling: When the modal window hit the maximum distance to the bottom of the viewport then the content will be scrollable. The modal window itself should be visible all the time (header, content and buttons area).
  • Size: Width of the window will be static and be 636px [this is not a final value yet]. Height of the window will be dynamic.
  • Closing: User can close the window by clicking Close icon (X), Close / Cancel button and pressing ESC key. Dismissible modals (click on background closes modal) should not be allowed.
  • Submitting: Primary action should be triggered by Enter key if the focus in on the button.
  • Buttons: If only one option exists, this option should be primary button ("Close") and can be triggered by ESC / Enter buttons.
  • Focus:
    • Trap: Keyboard focus needs to stay in the modal window, focus should not reach elements behind the modal window.
    • Background: While modal window is visible, darken the background with a transparent overlay to help user to concentrate on modal.
  • Implement new look
    • layout

Some of the items are already implemented.

Why should we do it?

We want modals to look and feel good.

Child of #1609
@barmac barmac self-assigned this Feb 6, 2020
@barmac barmac added in progress Currently worked on a11y ux labels Feb 6, 2020
@nikku nikku added this to the M34 milestone Feb 10, 2020
barmac added a commit that referenced this issue Feb 10, 2020
@barmac
feat(client/modal): improve look and responsiveness
f403f7b 
* Header, body and footer are now visibly separated.
* Modal keeps responsiveness for smaller screens.
* In case of content being higher than maximum height,
  modal body is scrollable.

Closes #1681
@barmac barmac mentioned this issue Feb 10, 2020
Merged
@bpmn-io-tasks bpmn-io-tasks bot added needs review Review pending and removed in progress Currently worked on labels Feb 10, 2020
barmac added a commit that referenced this issue Feb 10, 2020
@barmac
feat(client/modal): improve look and responsiveness
eb0cefa 
* Header, body and footer are now visibly separated.
* Modal keeps responsiveness for smaller screens.
* In case of content being higher than maximum height,
  modal body is scrollable.

Closes #1681
@nikku
Copy link
Member

nikku commented Feb 11, 2020

Could you link the design screens for reference?

@barmac
Copy link
Contributor Author

barmac commented Feb 11, 2020

Could you link the design screens for reference?

Links are available here: https://confluence.camunda.com/pages/viewpage.action?spaceKey=PD&title=Modal+Windows+in+Modeler

@barmac
Copy link
Contributor Author

barmac commented Feb 11, 2020

Closed via #1686

@barmac barmac closed this as completed Feb 11, 2020
@bpmn-io-tasks bpmn-io-tasks bot removed the needs review Review pending label Feb 11, 2020
barmac added a commit that referenced this issue Feb 25, 2020
@barmac @merge-me
feat(client/modal): improve look and responsiveness
34dea98 
* Header, body and footer are now visibly separated.
* Modal keeps responsiveness for smaller screens.
* In case of content being higher than maximum height,
  modal body is scrollable.

Closes #1681
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@barmac barmac

Labels
a11y ux
Projects
None yet
Milestone
M34
Development

Successfully merging a pull request may close this issue.

Implement concept for modal windows camunda/camunda-modeler
2 participants
@nikku @barmac