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.

Sign up for GitHub

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

Jump to bottom

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
@mheppler
Projects
IQSS/dataverse (TO BE RETIRED / DELET...
Milestone
Dataverse 5

Comments

@TaniaSchlatter
Copy link
Member

TaniaSchlatter commented Feb 25, 2020 •
edited

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
@djbrooke djbrooke moved this from IQSS Sprint 2/26 - 3/11 to IQSS Team Dev 💻 in IQSS/dataverse (TO BE RETIRED / DELETED in favor of project 34) Mar 3, 2020
mheppler added a commit that referenced this issue Mar 12, 2020
@mheppler
Initial commit for new dataset pg action btn responsive layout [ref #…
f6a38ee 
…6684]
mheppler added a commit that referenced this issue Mar 16, 2020
@mheppler
Added new responsive Publish btn dropdown [ref #6684]
b1d7f7a
mheppler added a commit that referenced this issue Mar 16, 2020
@mheppler
Improve responsive widths of dataset pg btns for sm, xs layouts [ref #…
139e040 
…6684]
mheppler added a commit that referenced this issue Mar 18, 2020
@mheppler
Improved responsive layout of thumbnail and citation on datatset pg […
9d5699d 
…ref #6684]
@TaniaSchlatter TaniaSchlatter mentioned this issue Mar 18, 2020
Closed
mheppler added a commit that referenced this issue Mar 25, 2020
@mheppler
Additional responsive cleanup of action btns, citation, metrics, summ…
959748d 
…ary on dataset pg [ref #6684]
mheppler added a commit that referenced this issue Mar 25, 2020
@mheppler
Intial commit for responsive btns on file pg [ref #6684]
4e2802b
mheppler added a commit that referenced this issue Mar 26, 2020
@mheppler
Additional responsive btn improvements to file pg [ref #6684]
b638760
mheppler added a commit that referenced this issue Mar 30, 2020
@mheppler
Initial file pg responsive btn with duplicate btns on dataset pg file…
f3f36d8 
… table [ref #6684]
mheppler added a commit that referenced this issue Apr 1, 2020
@mheppler
New icon only styling to file table btns on dataset pg [ref #6684]
25a44b8
@mheppler mheppler mentioned this issue Apr 8, 2020
Closed
mheppler added a commit that referenced this issue Apr 9, 2020
@mheppler
Dataset and file pg action btn render logic, accessibility improvemen…
b3e5952 
…ts [ref #6684]
mheppler added a commit that referenced this issue Apr 9, 2020
@mheppler
Added disabled attribute and classes to publish btns on dataset pg [ref
5151b4f 
#6684]
sekmiller added a commit that referenced this issue Apr 10, 2020
@sekmiller
#6684 move publish button group logic
6f61923
mheppler added a commit that referenced this issue Apr 10, 2020
@mheppler
Dataset and file pg btn updates, bundle text, styles [ref #6684]
bf730de
mheppler added a commit that referenced this issue Apr 10, 2020
@mheppler
Dataset/file pg dropdown btn caret icon fix [ref #6684]
21968d8
@mheppler
Copy link
Contributor

mheppler commented Apr 13, 2020 •
edited

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 added a commit that referenced this issue Apr 13, 2020
@mheppler
Fixed dataset and file pg btn dropdown align and margin issues [ref #…
11ddde0 
…6684]
mheppler added a commit that referenced this issue Apr 15, 2020
@mheppler
Fixed edit btn render logic for deaccession datasets [ref #6684]
b268b75
@mheppler mheppler mentioned this issue Apr 16, 2020
Closed
@mheppler
Copy link
Contributor

mheppler commented Apr 16, 2020 •
edited

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
@landreev
Making the size of the dataset thumbnail flexible.
4254a0f 
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 27, 2020
@mheppler
Added new shared text to file pg, added min-height for dataset thumb …
f147041 
…container [ref #6684]
@mheppler mheppler mentioned this issue May 27, 2020
Closed
mheppler added a commit that referenced this issue May 27, 2020
@mheppler
Resolved double cancel btn on dataset form [ref #6684]
3d0043f
mheppler added a commit that referenced this issue May 27, 2020
@mheppler
Fixed spacing issue for caret on configure icon btn in file table on …
4e64507 
…dataset pg [ref #6684]
mheppler added a commit that referenced this issue May 28, 2020
@mheppler
Changed viewParam for fileId on file pg to OmniFaces component to fix…
ae05dde 
… delete [ref #6684 #6230]
mheppler added a commit that referenced this issue May 28, 2020
@mheppler
Restored original background colors to publication status labels on d…
22c9732 
…ataset and file pgs [ref #6684]
mheppler added a commit that referenced this issue May 29, 2020
@mheppler
Moved ingest error popover on file pg to bottom of icon [ref #6684]
c114f51
mheppler added a commit that referenced this issue May 29, 2020
@mheppler
Added render logic to Access Dataset btn and ui:remove to Download pl…
2a95581 
…aceholder on dataset pg [ref #6684]
mheppler added a commit that referenced this issue Jun 1, 2020
@mheppler
Increase font size of learn about citations link on dataset and file …
3d23d75 
…pg citation blocks [ref #6684]
mheppler added a commit that referenced this issue Jun 1, 2020
@mheppler
Removed extra dropdown submen for download and explore options under …
fbd5e8b 
…new access btns on dataset and file pgs [ref #6684]
sekmiller added a commit that referenced this issue Jun 2, 2020
@sekmiller
#6684 get disable publish button from page bean
5110ad7
sekmiller added a commit that referenced this issue Jun 3, 2020
@sekmiller
#6684 make sure lock test catches any new locks added
a8367f5
sekmiller added a commit that referenced this issue Jun 4, 2020
@sekmiller
#6684 update render logic for publish buttons
864ed46
mheppler added a commit that referenced this issue Jun 4, 2020
@mheppler
Cleaned up publish/submit for review/return to author links under new…
e837839 
… publish btn dropdown [ref #6684]
mheppler added a commit that referenced this issue Jun 4, 2020
@mheppler
Added new single-click verion of publish btn to dataset pg, needs ren…
7910d21 
…der logic [ref #6684]
sekmiller added a commit that referenced this issue Jun 4, 2020
@sekmiller
#6684 finalize?! publish button rendering
69e9626
mheppler added a commit that referenced this issue Jun 5, 2020
@mheppler
Swapped two publish btns for one with new components for dynamic attr…
f8cdb17 
…ibutes [ref #6684]
sekmiller added a commit that referenced this issue Jun 5, 2020
@sekmiller
#6684 check for Create mode on showSubmitForReviewLink
2cdedea
mheppler added a commit that referenced this issue Jun 8, 2020
@mheppler
Fixed merge conflict related to request access javascript [ref #6684, #…
a16adff 
…6943]
sekmiller added a commit that referenced this issue Jun 8, 2020
@sekmiller
#6684 consolidate publish popups
e7ebdd6
mheppler added a commit that referenced this issue Jun 8, 2020
@mheppler
Fixed unnecessary duplicate file download javascript [ref #6684, #6943]
90ac3a6
IQSS/dataverse (TO BE RETIRED / DELETED in favor of project 34) automation moved this from IQSS Team - In Progress 💻 to Done 🚀 Jun 11, 2020
@mheppler mheppler mentioned this issue Jun 11, 2020
Closed
4 tasks
This was referenced Jun 22, 2020
Merged
Closed
mheppler added a commit that referenced this issue Jul 1, 2020
@mheppler
UI and accessibility clean up on dataverse, dataset and file pgs [ref #…
18d16f1 
…6684]
@mheppler mheppler mentioned this issue Jul 1, 2020
Merged
pdurbin added a commit that referenced this issue Aug 24, 2021
@pdurbin
show breadcrumbs for direct child of root datasets #7257
4279651 
This reverts 95d7e04 which was part of pull request #6909 for #6684.
@pdurbin pdurbin mentioned this issue Aug 24, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mheppler mheppler

Labels
None yet
Projects
No open projects
IQSS/dataverse (TO BE RETIRED / DELET...
Done 🚀
Milestone
Dataverse 5
Development

Successfully merging a pull request may close this issue.

6684 dataset pg btn responsive IQSS/dataverse
6 participants
@pdurbin @mheppler @landreev @sekmiller @djbrooke @TaniaSchlatter