CSS based modals

[dachary]

Followup of a conversation that started as part of comments in a pull request but turns out to have a wider scope. @toast wrote:

@dachary Yes we could try to convert this into a no JS modal dialog.

Step 1:

Step 2:

Step 3:

In theory it’s possible to do this client side with no JS by following a similar pattern to the menu.sass module; using a checkbox to toggle a modal dialog that interrupts the journalist.

But it’ll be a bit more complicated because:
When the modal opens, the checkbox’s label would need to become an invisible overlay similar to menu.sass that closes the modal when the user clicks outside of it. However, to allow for a CANCEL action and the ‘X’ with no JS in the window, the close overlay would actually need to cover those two areas of the modal as well (see the blue area in image below). But the DELETE action would need to be placed above the content area to still allow for interaction - this could be done with z-index. Ideally the title and content text would also be placed above the cancel overlay to allow interaction:

Note that the blue area (close overlay) needs to extend to the edges of the screen, I just left it smaller here to see the difference between this and the semi-transparent gray overlay that is behind the entire modal.

All this will also all need to be kept inside the <form> so the post still works when the DELETE inside the modal is clicked (the other DELETE becomes the checkbox label).

I’m not sure if all this will work together neatly in the HTML structure, I haven’t made a modal without JS before. Once created though, it could be useful for other dangerous actions elsewhere.

[dachary]

I’m not sure if all this will work together neatly in the HTML structure, I haven’t made a modal without JS before.

It would be really nice if it did though. Using the z-index so the action is on top is a clever trick. But, as you point out, I can’t imaging how the HTML structure should look like for all this to work together…

[ei8fdb]

Hi @dachary,

Just to make sure I understand: this modal is to confirm the user “really wants to delete these files”, correct?

And the implementation of the modal is not straight forward, or in someway complicated?

Can I maybe offer an alternative? I’ve not got a design for it yet, but it would work like this:

• the user selects the message(s) they want to delete

• they click the delete button

• in the UI the message(s) are deleted

• the UI displays a “delete confirmation” notification to the user
  however

• the “delete” button function changes to “undelete” to allow the user recover if they’ve made a error.

• if the user clicks “undelete” the message(s) are recovered if not, the message(s) are deleted

Allowing a user to recover from a possible mistake is a good usability heuristic to use. (Number 9 of the list - recover from errors)

Modals can achieve this also, but “confirmation blindness” has become a user behaviour- to the point a user will click OK/confirm/yes without actually reading the content.

Maybe a few other possible options (please criticise as applicable! ):

• an archive option where messages are archived to an archive folder?
• a trash folder (to follow the email analogy?)

Sorry for the more ideas. I thought some of these options might be worth discussing.

[dachary]

@saptaks implemented CSS based modals and it turns out to be straightforward (easy to say after the fact, for an elegant solution). You can see how it looks here: https://github.com/freedomofpress/securedrop/pull/2946

[ei8fdb]

Ah, I didn’t see that. In which case please forget I wrote that message