Page MenuHomePhabricator

Publication modal should publish on Ctrl+Enter / Cmd+Enter
Closed, ResolvedPublic

Assigned To
Authored By
DVrandecic
Oct 4 2023, 6:18 PM
Referenced Files
F56120266: Screenshot 2024-07-01 at 13.23.12.png
Jul 1 2024, 11:25 AM
F56116386: CleanShot 2024-07-01 at 11.10.14@2x.png
Jul 1 2024, 9:13 AM
F56116406: CleanShot 2024-07-01 at 11.09.29@2x.png
Jul 1 2024, 9:13 AM
Restricted File
Jul 1 2024, 8:55 AM
F56115758: Screenshot from 2024-07-01 10-41-44.png
Jul 1 2024, 8:43 AM
F43319417: image.png
Mar 25 2024, 11:29 AM
F43318472: image.png
Mar 25 2024, 11:29 AM

Description

  • create an object (besides a function)
  • click on Publish
  • the modal titled "Publish your changes" appears, and the focus is on the diff comment
  • enter a comment or not
  • press return
  • nothing happens

I first have to tab to the Publish button, or click on the Publish button.

Pressing return should trigger the Publish action.

Event Timeline

Should this be on Ctrl+Enter / Apple+Enter instead?

DVrandecic triaged this task as Low priority.
DVrandecic moved this task from Needs Product/Design to Backlog on the Abstract Wikipedia team board.
AAlhazwani-WMF removed a project: Design.
AAlhazwani-WMF subscribed.

Should this be on Ctrl+Enter / Apple+Enter instead?

agreed! as discussed during triage let's build on top of what we have in VE.

given that we use the codex field component in the publish dialog, we can use the status prop to display a warning message. why warning? because we'll "block" the editors' action (pressing return/enter), so we'll then explicit what to do to proceed.

image.png (1×3 px, 357 KB)

for apple machines the copy could be "You can press ⌘↵ to publish your changes."
for non-apple machines, the copy could be "You can press Ctrl↵ to publish your changes"

  • ⌘ is U+2318
  • ↵ is U+21B5

we could style the hotkey/shortcut with <kbd>. the styles that i used are the following codex tokens:

  • font-size @font-size-x-small
  • font-color @color-base
  • background-color @background-color-interactive-subtle
  • border @border-width-base + @border-style-base + @border-color-muted
  • border-radius @border-radius-base
  • horizontal padding @spacing-12
  • vertical padding 1px, or set the line-height to @line-height-xx-small so that it shares the same line-height of the inline message text
  • box-shadow @box-shadow-drop-small

image.png (154×436 px, 13 KB)

a figma file is also available at this URL https://www.figma.com/file/IzHf9jo46suf7RvSySVMzK/Untitled?type=design&node-id=12%3A658&mode=design&t=h79gj0kkUu5mEkXm-1

Jdforrester-WMF renamed this task from Publication modal should publish on enter to Publication modal should publish on Ctrl+Enter / Cmd+Enter.Mar 25 2024, 12:21 PM
DSmit-WMF changed the task status from Open to In Progress.Jun 26 2024, 12:37 PM

Change #1050290 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] PublishDialog.vue: Publication modal should publish on Ctr/Cmdl+Enter

https://gerrit.wikimedia.org/r/1050290

Current patch looks great. Only needs a couple of style improvements:

Screenshot from 2024-07-01 10-41-44.png (352×534 px, 38 KB)

  • We should add the 4px margin-top to the message to space it a little from the field.
  • The key blocks are vertically misaligned by 1px (non-apple version, Browser: Firefox)
    • The alignment is good in Chrome: {F56116041}

Change #1050290 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] PublishDialog.vue: Publication modal should publish on Ctr/Cmdl+Enter

https://gerrit.wikimedia.org/r/1050290

looks good to me too! only one last minor note. if an editor has the input tools active, they are displayed right under the input text field

CleanShot 2024-07-01 at 11.09.29@2x.png (648×1 px, 81 KB)

but if the warning message is being displayed, they are displayed detached from the text field (sort of floating)

CleanShot 2024-07-01 at 11.10.14@2x.png (762×1 px, 95 KB)

Yeah that will happen with anything appended in that page. thats due to probably how that widget positions itself; if you wait a bit you see it re-evaluates its position after x secs again.

the positioning is not something I can change I think.

Only way would be making the text 'position absolute'. but I don't know if thats desirable since thats a hack because the library of the input tools should actually be fixed... Or is there an event they have I can fire to make them re-adjust positioning?

If we make it absolute, the text is going to go outside the DOM-flow and wont take up space and be like this:

Screenshot 2024-07-01 at 13.23.12.png (648×1 px, 85 KB)
.

understood, thanks @DSmit-WMF! given that this is a (hopefully) small edge case, i'd say we leave this as is. no need to change things to be positioned absolutely. thank you!