SpringAll
SpringAll copied to clipboard
Use styled modals instead of alert()
Examples:
- Click the "Hide" messages icon
- Click the "Ignore" messages icon
- Click "Stop following #tag"
- Click "delete and block conversation?"
Solution:
Those should behave more like the Invite your friends "By email" button.
Perhaps this can help developers.
Pretty example: https://github.com/diaspora/diaspora/blob/develop/app/views/invitations/new.html.haml Ugly example: https://github.com/diaspora/diaspora/blob/develop/app/views/users/edit.html.haml#L227
Nice!
Thanks for that, hopefully it can be easily implemented now.
The links look old, there is no 227th line in the edit.html.haml file anymore. @fit-bear can you provide screenshots of what you find ugly and what you find nice?
My understanding is that the 'ugly' warnings complained about are instances where Diaspora merely triggers a default dialogue box provided by the browser, with no styling. This means that the dialogue appears in a different form depending which browser you're using, and doesn't always look good.
There is a separate issue with these dialogues, which is that the text shown on the dialogues for ignore user and hide post are minimal at best. 'Ignore this user?' for ignore, and simply 'Are you sure?' for hide post and for stop following a tag. I think these can be improved: perhaps a title, 'Ignore this user', 'Hide this post', 'Stop following this tag' or 'Delete and block this conversation' and then 'Are you sure?' underneath, to make it clear what action will be taken.
Here are some screen shots:
- 'Hide this post' dialogue in Firefox:

- 'Hide this post' dialogue in Opera:

- 'Invite people by email' dialogue - the example fit-bear gives of how dialogues should look:

I don't think the dialogues need to be as styled as the email invite, which is after all a lightbox form rather than a straight dialogue.
However, what we could usefully do is:
- Provide some styling for the warning dialogues used, so that:
- they fit in with Diaspora's design scheme, and
- they look the same no matter which browser you are using;
- Also, make the text in the dialogues a bit more explanatory.
How does that sound?
Another default warning dialogue is 'Hey, you haven't followed any tags! Continue anyway?' during the sign-up process.
I'd say that there shouldn't be any such warning at all in cases of "Hide" and "Ignore", because this requires extra clicks from a user. Instead, the "oops, I didn't want that" option should be introduces like in vk.com: after you hide a post in the stream, there appears a small line (which remains until one refreshes the page) that has an "undo hide" button.
Moreover, for those who like hiding it would be useful to be able to navigate from post to post using keyboard and hide using "delete" or some other button as this reduces time spent for the action as well.
I don't have the rights to edit the title of that issue, but it should be "Use styled modals instead of alert()", if someone wants to rename it (or give me the rights to do so).
For information, outside of the tests, there are 9 alert() still left
~/diaspora/diaspora$ git grep "alert("
app/assets/javascripts/helpers/post_photo_uploader.es6: this.showMessage = (type, text) => (app.flashMessages ? app.flashMessages[type](text) : alert(text));
app/assets/javascripts/helpers/profile_photo_uploader.es6: this.showMessage = (type, text) => (app.flashMessages ? app.flashMessages[type](text) : alert(text));
app/assets/javascripts/mobile/mobile_profile_photo_uploader.js: alert(message);
app/assets/javascripts/mobile/mobile_profile_photo_uploader.js: alert(errorReason);
app/assets/javascripts/mobile/profile_aspects.js: alert(Diaspora.I18n.t('aspect_dropdown.error_remove'));
app/assets/javascripts/mobile/profile_aspects.js: alert(Diaspora.I18n.t('aspect_dropdown.error'));
app/assets/javascripts/mobile/tag_following.js: alert(Diaspora.I18n.t("stream.tags.follow_error", {tag: tagName}));
app/assets/javascripts/mobile/tag_following.js: alert(Diaspora.I18n.t("stream.tags.stop_following_error", {tag: tagName}));
app/assets/javascripts/mobile/tag_following.js: alert(Diaspora.I18n.t("stream.tags.stop_following_error", {tag: tagName}));
9 confirm():
~/diaspora/diaspora$ git grep "confirm("
app/assets/javascripts/app/pages/profile.js: if(!confirm(Diaspora.I18n.t("ignore_user"))){
app/assets/javascripts/app/views.js: if( confirm(_.result(this, "destroyConfirmMsg")) ) {
app/assets/javascripts/app/views/feedback_view.js: if(!window.confirm(Diaspora.I18n.t("reshares.post", {name: this.model.reshareAuthor().name}))) { return }
app/assets/javascripts/app/views/post_controls_view.js: if (!confirm(Diaspora.I18n.t("ignore_user"))) { return; }
app/assets/javascripts/app/views/post_controls_view.js: if (!confirm(Diaspora.I18n.t("confirm_dialog"))) { return; }
app/assets/javascripts/app/views/single-post-viewer/single_post_moderation.js: if (confirm(Diaspora.I18n.t("remove_post"))) {
app/assets/javascripts/mobile/mobile_post_actions.js: if(!link.hasClass("loading") && link.hasClass("inactive") && confirm(confirmText)) {
app/assets/javascripts/mobile/tag_following.js: !confirm(Diaspora.I18n.t("stream.tags.stop_following_confirm", {tag: tagName}))) { return; }
app/assets/javascripts/pages/users-getting-started.js: confirmation = confirm(confirmMessage);
And no prompt() because I'm removing the only one in https://github.com/diaspora/diaspora/pull/8035
Partial contributions are welcomed.