Change Preview and Code buttons to text based and move Table of content dropdown
What does this MR do and why?
This MR is a part of a bigger effort that aims to rearrange controls for w blob viewer.
The breakdown of #450774 (closed) MRs:
| step | status |
|---|---|
| Change Preview and Code buttons to text based and move Table of content dropdown | |
| Change BlobHeaderDefaultActions into dropdown items | |
| Change BlobButtonGroup into a dropdown | |
| Move Permalink button and add copy functionality |
References
Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
- Rearrange and introduce overflow menu to single file page
- Change Preview and Code buttons to text based and move Table of content dropdown
- Add title and icon to directory/file pages
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
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Viewport size | Before | After |
|---|---|---|
xs (<576px) |
 |
 |
sm (>=576px) |
 |
 |
md (>=768px) |
 |
 |
lg (>=992px) |
 |
 |
Note: You can see at the md screenshots that there's a certain range, where the file name doesn't have enough space, both before and after the changes. But we don't need to worry about it that much. The other MRs solving the issue will move the majority of controls into an overflow menu. And the filename itself will be soon moved up the page in Add title and icon to directory/file pages (planned still for this milestone).
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Enable the feature flag
Feature.enable(:blob_overflow_menu)- Go to a project
- Navigate to a markdown file in your repository.
- Adjust the width of the browser window to test different breakpoints.
Related to #450774 (closed)
Closes #508312 (closed)