46

When reviewing, I flag. And when I do, I was happy that all my mouse-clicks could be done all on the right side:

  1. One click for the flag-type, all the way on the right side.
  2. One click to submit.
  3. One click for "I'm done".

When the flag window is open, I've already done all the commenting, editing and/or voting.

Now a change has just been introduced that forces me to zig-zag in the menu. The submit button has been moved to the left side. For comparison, see the Flag posts as of April 3rd. I fear it's making my future mouse-injury getting ahead of time. The cute little blue box with the numbers of remaining flag is also gone:

enter image description here

I've heard rumours that a similar change has also happened to the close-vote menu. (Anyone with details of the close-vote menu is welcome to add it.)

Please explain why. Better yet, please change it back.

12
  • 1
    For consistency apparently. Sometimes buttons were on the left, othertimes on the right. Now they are all on the left. Apr 13, 2020 at 16:35
  • 3
    @RobertLongson Well.. apparently not, as you can see from the screenshot just above the flag-menu. Thank you for the link :)
    – Scratte
    Apr 13, 2020 at 16:38
  • I see the screenshot shows things on the left. Is there somewhere you think that the button is still on the right, other than the help centre which is now out of date. Apr 13, 2020 at 16:40
  • @RobertLongson The "No actions needed", "I'm Done" and "Skip" are on the right side.
    – Scratte
    Apr 13, 2020 at 16:41
  • 1
    They aren't part of a dialog though, they are on the main page. Apr 13, 2020 at 16:43
  • As for the request in the link. I find it very disappointing that the moved the post flag-dialog button to the left, and not the comment dialog flag-button to the right, as was requested. I tried to explain that flagging is a part of reviewing, and it was very nice that all the buttons were on the right side. Pop-up or not.
    – Scratte
    Apr 13, 2020 at 16:45
  • 21
    I'm not a UX expert or anything but in my experience dialog buttons are usually either on the right or in the center. This new change is pretty much counter-intuitive. Plus, I think we flag/VTC posts way more than we flag comments.
    – 41686d6564
    Apr 13, 2020 at 17:44
  • @Scratte Mouse Shoulder. A resistance band has worked for me, although I use a Wacom tablet and pen in the office, left-handed, which has also helped. Apr 13, 2020 at 18:22
  • 1
    A little bit of warning, was in order, i voted dayly on 20 Questions to be closed, and was first at a loss, also the design is quite confusing, i have to look hard to find what fellow memebers did voted on, occasionally it is hard to decide on mor eofocussed or more deatils and anotgher opinion helps to decide
    – nbk
    Apr 13, 2020 at 18:35
  • 4
    another step to make curaiton difficult for us ... Now I need to click twice to close a question: first time nowhere and then on the button. Apr 13, 2020 at 19:35
  • Also related, and IMHO more crucial; keyboard shortcuts in the close (but not the flag) dialog are broken. meta.stackexchange.com/questions/346451/…
    – tripleee
    Apr 14, 2020 at 7:56
  • 1
    Wow. I just noticed that this is annoying.
    – S.S. Anne
    Apr 14, 2020 at 23:38

4 Answers 4

6

For those who want to return to the previous flag and vote modals, use these styles in a user styles browser addon such as Stylus:

/* revert close votes remaining and submit vote/cancel button position*/
div#popup-close-question form div.popup-actions span {
    order: 1;
    flex: 1 1 auto;
    text-align: left;
}
div#popup-close-question form div.popup-actions button.js-popup-submit {
    order: 2;
}
div#popup-close-question form div.popup-actions button.js-popup-close {
    order: 3;
}
/* revert the removal of color from number of existing close votes per reason */
div#popup-close-question form span[title="number of votes already cast"] {
    background-color: var(--blue-500);
    color: white;
    font-weight: bold;
    border: none;
}
div#popup-close-question form ul.action-list li:nth-child(2) .grid--cell:not(.fl1) label::before {
    content: "Off-Topic";
    visibility: visible;
}
div#popup-close-question form ul.action-list li:nth-child(2) .grid--cell:not(.fl1) label p, div#popup-close-question form ul.action-list li:nth-child(2) .grid--cell:not(.fl1) label span {
    visibility: visible;
}
div#popup-close-question form ul.action-list li:nth-child(2) .grid--cell:not(.fl1) label span {
    position: relative;
    left: -205px;
}
div#popup-close-question form ul.action-list li:nth-child(2) .grid--cell:not(.fl1) label {
    visibility: hidden;
}

/* revert the flags remaining and the submit flag/cancel button position */
div#popup-flag-post form div.popup-actions span {
    order: 1;
    flex: 1 1 auto;
}
div#popup-flag-post form div.popup-actions button.js-popup-submit {
    order: 2;
}
div#popup-flag-post form div.popup-actions button.js-popup-close {
    order: 3;
}

/* revert the flag modal "needs improvement" message */
div#question div#popup-flag-post form ul.action-list li:nth-child(3) span.action-name::before {
    visibility: visible;
    content: "should be closed";
}
div#question div#popup-flag-post form ul.action-list li:nth-child(3) span.action-name {
    visibility: hidden;
}
div#question div#popup-flag-post form ul.action-list li:nth-child(3) span.action-desc::before {
    visibility: visible;
    content: "This question should be closed in its current state for one reason or another.";
}
div#question div#popup-flag-post form ul.action-list li:nth-child(3) span.action-desc {
    visibility: hidden;
}

(Note that some changes can't easily be managed by CSS, like moving some of the flag/vote options to a different step in the entire process).

You can see images (in dark mode) of what the modals look like with these styles applied at this Readme.md on my GitHub repo for SO scripts.

6
  • The spacing for off-topic is a little off.
    – S.S. Anne
    Apr 13, 2020 at 19:28
  • 1
    @S.S.Anne Yes, it's just a first pass of styles; the spacing was set for two lines of description but my replacement text only has one line. All in all not something I felt was necessary to spend time fixing at this point in time, considering the styles are a quick response in general to an unexpected, unannounced change. It's likely the design will change again soon without us being notified as the dev team continues to tweak the site.
    – TylerH
    Apr 13, 2020 at 19:35
  • div#popup-close-question form div.popup-actions button.js-popup-close isn't working for me. But div#popup-close-question form div.popup-actions button.js-popup-back is.
    – Scratte
    Apr 13, 2020 at 21:21
  • @Scratte .js-popup-close applies specifically to the 'cancel' link that closes the modal. The .js-popup-back link is a separate link with a separate function (it doesn't close the modal, just takes you back a step). "Back" buttons are also usually the furthest left because English is a LTR language so when you are on a page you "go left" to go back. For these reasons I didn't mess with .js-popup-back. I may in the future, though.
    – TylerH
    Apr 13, 2020 at 21:29
  • Ok. I got confused when the submit button moved :) So I've made it steady.
    – Scratte
    Apr 13, 2020 at 21:31
  • Note to readers - I've got to adjust these styles a bit for the "off-topic" reason -- my first pass positioned it from the left but the length of the text to the left varies depending on whether the question is too old for migration or not. The next revision to the post by me should address that concern.
    – TylerH
    Apr 20, 2020 at 13:26
5

Partially related, since we are on the topic of having to click less -

My ReviewQueueHelper userscript:

  1. adds numeric keyboard shortcuts (1-7) to the flag/delete/reject/close dialog options (even outside of review queues), and

  2. focuses the submit button whenever an option is selected so you can simply press Enter (or spacebar) to submit instead of clicking on the button


Screenshots

enter image description here

enter image description here

enter image description here

4

This is a modification of TylerH's styles in the previous answer, but aimed at low reputation users that do not have close vote dialogs. I consider it a workaround.

It addresses the dialog size, font size, and consistency of radio buttons. This makes the Close Question dialog appear like the Flag Post dialog. It also places the "Back" button in the lower right corner, which gives the feel that "Back" just replaces the "Cancel" button, making the placement of the "Flag Question" button consistent too.

It adds in ellipsis, so there's no confusion as to which choice leads to a new dialog and it doesn't remove text, but only adds in the old "Off-topic" and "Should be closed" along with the new text.

I did not attempt to bring the cute little blue number box back, but just put a blue border around the "You have X flags left today".

Before:

After:

Disclaimer: I'm not a web developer and I have no clue what I'm doing. It just seems to work:

/* fix the size of the close-question pop-up dialog to be identical to the flag-post pop-up dialog*/
div#popup-close-question {
    max-width: 694px;
}

/* fix the element font size of the close-question pop-up dialog to be identical to the flag-post*/
div#popup-close-question form ul.action-list li .grid--cell label{
    font-size: 105%;
}


/* fix the title font size of the close-question pop-up to be identical to the flag-post*/
div#popup-close-question span.popup-title{
    font-size: 90%;
}


/* fix the radio of the close-question pop-up to be identical to the flag-post */
/* note: they are still not properly aligned, but their apperance is the same */
div#popup-close-question form .s-radio{
    -webkit-appearance: radio;
}

/* ... */

/* Add " (should be closed) ..." to the new "needs improvement" text */
/* note: modification of TylerH's "revert the flag modal "needs improvement" message" */
div#question div#popup-flag-post form ul.action-list li:nth-child(3) span.action-name::after {
    visibility: visible;
    content: " (should be closed) ...";
}

/* Add "Off-Topic ... /" to the new "A community-specific reason" text */
/* If you find a way to make this appear after the reason, but before the description, let me know! :) */
/* note: modification of TylerH's original */
div#popup-close-question form ul.action-list li:nth-child(2) .grid--cell:not(.fl1) label::before {
    visibility: visible;
    content: "Off-Topic ... /";
}

/* Add "..." to "This question belongs on another site in the Stack Exchange network" text */
div#popup-close-question form ul.action-list li:nth-child(7) .grid--cell.fl1 label::after {
    visibility: visible;
    content: "...";
    font-weight: bold;
}


/* revert the flags remaining and the submit flag/cancel button position */
/* note: modification of TylerH's original */
div#popup-flag-post form div.popup-actions span {
    order: 1;
    margin: 0px 45px 0 0;
    padding: 5px;
    border: 1px solid var(--blue-600);
    font-weight: bold;
}
div#popup-flag-post form div.popup-actions button.js-popup-submit {
    order: 2;
}
div#popup-flag-post form div.popup-actions button.js-popup-close {
    order: 3;
}

/* revert close question/votes remaining and submit vote/cancel button position*/
/* note: modification of TylerH's original */
div#popup-close-question form div.popup-actions span {
    order: 1;
    margin: 0px 45px 0 0;
    padding: 5px;
    border: 1px solid var(--blue-600);
    font-weight: bold;
}
div#popup-close-question form div.popup-actions button.js-popup-submit {
    order: 2;
}
div#popup-close-question form div.popup-actions button.js-popup-back {
    order: 3;
}
/*  no idea what this is :)
div#popup-close-question form div.popup-actions button.js-popup-close {
    order: 3;
}
*/
4

If it was moved for consistency, then all buttons everywhere in the interface should be moved to the left, including the review buttons. I'm not a fan of having to retrain myself to look in new places, but I will do it for better consistency and less mouse waggling.

The "Post Your Answer" button is on the left side. Voting buttons are on the left side. Flags are on the left side. The "Ask Question" button and all the main stuff I use in the toolbar is on the right side though, so I don't really understand why things are where they are on the page.

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .