Skip to content
Snippets Groups Projects

Improvements to markdown "Exit full screen" button

Merged Chad Lavimoniere requested to merge 20240911-clavimoniere-markdown-fullscreen-exit into master
All threads resolved!

What does this MR do and why?

Improvements to markdown "Exit full screen" button

  • Align copy with normal markdown editing experience: The button to enter full screen says "Go full screen." The button to exit full screen has been changed from "Leave zen mode" to "Exit full screen". Zen mode is not a term that is presented to the user otherwise.
  • Align button style with normal markdown experience. The button should be styled like an icon button.
  • Use a tooltip. The button to enter full screen mode uses a tooltip, and this button should use one as well -- especially since this button is the only clickable affordance in the entire UI that the user can use to escape this focus mode.
  • Fix alignment. The button was made too tall because it inherited a line height from a parent.
  • Increase size. The button was too small compared to the larger text editor in full screen mode.
  • Make the button more comfortable on mobile by selectively applying the btn-sm class when the viewport is in the xs breakpoint range

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

State Before After
At rest gdk.test_3000_free-tier-group_free-tier-project_-issues_1__4 gdk.test_3000_free-tier-group_free-tier-project_-issues_1__9
At rest when viewport is xs (<576px) gdk.test_3000_free-tier-group_free-tier-project_-issues_1__5 gdk.test_3000_free-tier-group_free-tier-project_-issues_1__7
Hovering gdk.test_3000_free-tier-group_free-tier-project_-issues_1__3 gdk.test_3000_free-tier-group_free-tier-project_-_issues_1
Hovering when viewport is xs (<576px)
(obviously this only applies to desktop environments, no hover on mobile)
gdk.test_3000_free-tier-group_free-tier-project_-issues_1__6 image

How to set up and validate locally

  1. Check out this branch
  2. Edit markdown anywhere in the GDK (an issue description, comment, MR description, etc)
  3. Click the "Go full screen" button at the top right of the markdown editor
  4. You will see the larger exit button at the top right, and hovering or focusing it will show a tooltip with "Exit full screen". On hover or focus, the button will have the usual default tertiary button hover/focus styles.

Related to #474921 (closed)

Edited by Chad Lavimoniere

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Paul Slaughter removed review request for @pslaughter

    removed review request for @pslaughter

  • added 1 commit

    Compare with previous version

  • added 1 commit

    Compare with previous version

  • A deleted user added backend label

    added backend label

  • requested review from @pslaughter

  • Looking at this now! :eyes:

  • Thanks for working on this @clavimoniere! Changes LGTM :thumbsup:

    lgtm

    Approving and merging...

  • Paul Slaughter approved this merge request

    approved this merge request

  • Paul Slaughter enabled automatic add to merge train when checks pass

    enabled automatic add to merge train when checks pass

  • Paul Slaughter resolved all threads

    resolved all threads

  • Paul Slaughter mentioned in commit cf662c6e

    mentioned in commit cf662c6e

  • added workflowstaging label and removed workflowcanary label

  • Chad Lavimoniere resolved all threads

    resolved all threads

  • mentioned in issue #474921 (closed)

  • Please register or sign in to reply
    Loading