Layout and styling of action buttons on the dataset and file page

[TaniaSchlatter]

Related issues: #3341 #3404 #3815 #6072 #6605 #6604 #6085 #6450

Design to address the addition of action buttons at the dataset level (scaleability), improve the visibility of edit button, and prepare for responsive design.

Changes to the dataset action buttons apply to the File page action buttons

Implementing a new design will provide the opportunity to address accessibility issues found on buttons

Link to mockups: https://sketch.cloud/s/mWGQJ/a/4KZgLZ

Dynamic "run in..." link under the Download/Access button functionality is out of scope for this effort

Design to dos:

• inventory: list of all button options, conditions for appearance, and behavior of states for both dataset and file actions – version 1 | version 2
• review the inventory and designs to determine if all situations/configurations are planned for, or needed additions
• mock up any common configurations and/or states that are missing if needed
• map buttons to bootstrap styles (create custom bootstrap theme if needed)
• update style guide with new styles

[mheppler]

Lots and lots has been moving and changing in order to deliver the improved button style and responsiveness of page layout. Here is a detailed outline of completed improvements and remaining to-do's.

TEMPLATE

Content Container

• fix layering issue with footer vs dropdown menus

Breadcrumbs

• removed highlighted/bold current page
• added render logic to hide on root datasets

Dataverse Footer

• fixed problem with widgetView render logic for dataset citation widget

FILE PG

Responsive layout

• moved citation, button, metrics, deaccession reason
• improved responsive grid col widths
• added Bootstrap 3 layout order hack (ref)

File Name header

• increased font size

Ingest Error icon

• moved next to file name, removed from file-download-buttons fragment, popover display also moved to bottom of icon

Restricted Access/Lock icon

• moved next to version, publication status labels

Publication Status labels

• removed colors, switched to default reverted change, restored original 4.20 background colors

Citations

• added new button styles
• improve responsive col widths
• CSS word-wrap: break-word for xs viewport + DOI link (ref)

Action buttons

• added new layout, larger, added "File" to text labels
• added new Access File btn, and btn-primary style
• added new and improved render logic for Access File btn based on code from @sekmiller on datatset pg
• moved Download, Request Access, Explore, Compute as dropdown options under Access File btn (NOTE this breaks the analytics event tracking code)
• added rel=noopener to external tool links with target=blank (Code Cleanup - better handling of external links #4717)
• moved Configure btn as dropdown option under Edit File brn
• fixed Configure>Map unpublished popup
• improved render logic
• fixed deaccession render logic for Access Dataset pg to check workingVersion and canUpdateDataset
• removed deaccession render logic for Edit Dataset pg
• fixed missing disabled Edit Files btn on dataset lock (see render logic on Add + Edit Metadata btn in Metadata tab)
• fixed download deaccession render logic
• fixed download submenu float layering
• fix overlap/width issue in access>download submenu (see originalFormatLabel "Comma Separated Values" pushes submenu width to cover first-level dropdown menu)

Metrics

• added new style

Deaccession Reason

• improved render logic, added new styles

Share File popup

• added file specific text and url, no longer using "share dataset" on file pg

Access tab

• fix reference to DatasetPage bean in ui:param passed to file-data-access-fragment (systemConfig.rsyncDownload)

DATASET PG

Responsive layout

• added Bootstrap 3 layout order hack (ref)

Dataset Title header

• increased font size

Publication Status labels

• removed colors, switched to default reverted change, restored original 4.20 background colors

Citation

• added new button styles
• improve responsive col widths
• CSS word-break: break-all; for xs viewport + DOI link (ref)

Thumbnail/Icon

• moved to citation block
• increased font size of icon
• increased thumbnail size 140 px (Change default thumbnail size #6769, merged PR 6684 thumbnails #6830 into this branch)
• added thumbnail container min-height of 140px to hold responsive layout hack
• hide thumbnail image on deaccession (Deaccessioning: What should show in search card? #1221)

Action buttons

• added new layout, larger, added "Dataset" to text labels
• added new Access Dataset btn, and btn-primary style
• moved Download, Explore, Compute as dropdown options under Access Dataset btn
• added new and improved render logic for Access Dataset btn (thank you, @sekmiller)
• added new and improved render logic for Publish btn (Dataset Publish/Submit for Review - Optimize Button/Popup Code #1664 THANK YOU AGAIN, @sekmiller)
• added rel=noopener to external tool links with target=blank (Code Cleanup - better handling of external links #4717)
• improved render logic
• removed deaccession render logic to be consistent with Upload Files and Edit Files btn (see Deaccessioning: What should show in search card? #1221, Deaccession: deaccessioner can not see metadata nor perform many actions #1267, Deaccession latest published version prevents further edits, deaccession or create draft #1308 for backstory)
• fixed publish btn render logic for deaccession (thank you, @sekmiller)
• add download dataset option under Access Dataset btn dropdown (Optimize Zipping Process on the backend #6505, No Option to download all file formats. #3513, Make download all files feature more prominent #6118)
• fix submitted for review/publish btn disable state

Metrics

• added new style

Summary

• moved, improved responsive layout, removed containers

Deaccession Reason

• improved render logic, added new styles

Metadata Tab > Add + Edit Metadata btn

• improved render logic for dataset lock
• removed deaccession render logic
• change disabled DatasetPage.locked logic to DatasetPage.lockedFromEdits on Add + Edit Metadata btn to display when dataset is In Review

Metadata Tab > Export Metadata btn

• fixed deaccession render logic to check workingVersion and canUpdateDataset

DATASET PG FILE TABLE

Ingest Error icon

• moved ingest icon/msg

Actions

• converted default button style to icon text link style
• added title tooltip
• added aria-label to btn-group containers
• fix tooltip disabled btn state

DATASET THUMBNAIL + WIDGETS PG

• fix thumbnail size, alignment in the Thumbnail Image section as well as in the
  Select Available File popup

---

Here are the remaining high-level to-do's to be addressed here or spun off into other issues.

• deaccession check (dataset level edit btn should be shown)
• responsive check
• widgets view check
• analytics check (Analytics - Event tracking code not capture all the btn clicks #6938)
• accessibility check
• misc (e.g. provenance, geoconnet, rsync, et al) check

Can't forget...

• code clean up, move inline CSS to stylesheet, text to bundle, etc
• user guide check to update screenshots, references to button locations on pg (Style Guide - Review and update UI references for new btn's on dataset and file pgs #6940)
• style guide changes to reflect new layout, styles, colors, et al (Style Guide - Review and update UI references for new btn's on dataset and file pgs #6940)

[mheppler]

Wanted to add a note here that the PR #6830 for issue Change default thumbnail size #6769 was merged into the 6684-dataset-pg-btn-responsive branch for this issue. It added a new DEFAULT_DATASET_THUMBNAIL_SIZE 140px image size to ImageThumbConverter.java, which is now being used to deliver a larger dataset thumbnail image to the new layout for the dataset pg.

Additional revisions to this thumbnail code from @landreev in 4254a0f. More to follow.