Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 of 5 tasks
TaniaSchlatter opened this issue Feb 25, 2020 · 3 comments · Fixed by #6909
Closed
2 of 5 tasks

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

TaniaSchlatter opened this issue Feb 25, 2020 · 3 comments · Fixed by #6909
Assignees
Milestone

Comments

@TaniaSchlatter
Copy link
Member

TaniaSchlatter commented Feb 25, 2020

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
@djbrooke djbrooke added the Large label Feb 26, 2020
mheppler added a commit that referenced this issue Mar 25, 2020
sekmiller added a commit that referenced this issue Apr 10, 2020
@mheppler
Copy link
Contributor

mheppler commented Apr 13, 2020

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

Action buttons

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.

Can't forget...

@mheppler
Copy link
Contributor

mheppler commented Apr 16, 2020

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.

@pdurbin pdurbin self-assigned this Apr 16, 2020
@landreev landreev self-assigned this Apr 17, 2020
landreev added a commit that referenced this issue Apr 17, 2020
That's seemingly a lot of changes, but it was the assumption throughout the code base that
all the dataset-level thumbnails are always the same size. Removing it now will help with
making all the thumbnails for everything completely variable (as opposed to how they come in
the few pre-defined sizes now), which we are planning to add as well, sometime soon (?)
ref #6684
mheppler added a commit that referenced this issue May 28, 2020
mheppler added a commit that referenced this issue May 29, 2020
mheppler added a commit that referenced this issue Jun 1, 2020
mheppler added a commit that referenced this issue Jun 1, 2020
mheppler added a commit that referenced this issue Jun 4, 2020
sekmiller added a commit that referenced this issue Jun 8, 2020
pdurbin added a commit that referenced this issue Aug 24, 2021
This reverts 95d7e04 which was part of pull request #6909 for #6684.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants