Various UI Improvements

traviscollins commented 3 years ago

home page (latest) and recently viewed pages

[x] both the collections and packages sections show loading spinners. Change to one spinner for the page. Wait until both are loaded
[x] Add margin below the collections section, for spacing

Login & sign up modal

[x] The close button is greyed on opening. I believe because it has focus. Set focs to top input
[x] Make the spinner in the login/sign-up button white - so that it contrasts well with the button color

Avatar image

[x] When loading avatar images, do not show the colored background until after the image has been determined to not exist
- This should remove the flash of color when loading pages

Site header

[x] Move header "Publish" link to the left nearer the search bar, and away from the user icon

Search results screen

[x] Add page title "Search Results for '${searchTerm}'

Catalog Details Header

Re-arrange to match the same as the user details header
- [x] name to the right of the avatar image
- [x] description text font and size
- [x] put an @ infront of the catalog slug (will be used to reference a catalog in the future)

Admin user screen

[x] during loading, hide the table footer
[x] change the UI of "change status" button
[x] fix the modal UI of "change status"
[x] Give the page content section a minimum height equal to the full height of the table. So the footer doesn't jump around while paginating
[x] Make the loading icon smaller. Maybe 40px. Equal to other pages

Package Details page

[x] Change "How to install datapm client" to open the new wizard
[x] Make avatar image a clickable link to the catalog. Hover cursor pointer
[x] Add a copy-to-clipboard icon and the word copy in small text to the right of the catalog-slug/package-slug title

User detail page

[x] Make users first and last name text larger
[x] If the user's name is not visible, show @username in same header title text
[x] Otherwise show username as it is now

User catalogs page when they have no other catalogs published

Example: https://test.datapm.io/dreamingwell#catalogs
[x] Currently no explainer text is show. Show Either ${username} has not created any other catalogs, or you do not have permission to view of any of the catalogs they have created. <a href="/docs/catalogs">Learn more about catalogs</a>

Package details page when user doesn't have permission to view

Example: logout and view https://test.datapm.io/dreamingwell/us-congressional-legislators
[x] make catalog name a link to catalog/user

My packages page

[x] When a user has no packages published. show a message You have no published packages on this registry. Learn <a href="/docs/publish-data">how to publish a package</a>

My collections page

[x] When a user has no collections. Left align the "Create A Collection" button
[x] Add a space before "Learn more about collections"

My catalogs page

[x] Show the user's username catalog at the top of the table.
[x] When user tries to delete show a message "You can not delete your username catalog."

Package "Manage" page

[x] "Manage Package" title is not the same font weight as the other titles on this page.
[x] change "Make this package public" to either "public" (green) or "not public" (grey) - same as other places in the UI

Collection manage page

[x] Manage tab does not update the route with #manage. Allow user to access directly with that hash

User pages

[x] Give each of the my account, packages, collections, and catalog components a minimum height tall enough that they don't cause the page to jump around a lot when loading reasonable amounts of content. Maybe 500px

Add Package To Collection Dialog

[x] The "add" button is dark grey. Change to normal color
[x] Change "add" button to "Add To Collection"
[ ] Change select drop down to an autocomplete input
- [x] Should allow the user to enter a new collection name that does note exist
  - [x] Create the collection immediately, then open the Ed Collection dialog navigate to the collection details page
- [ ] Auto complete existing collection names
  - [ ] If the user does not have an existing collection with manage permission, search for collections that user does not have manage permissions. Then show a "you do not have permission to edit this collection" error below.

Edit Collection Dialog

[x] Add Description input

Create collection dialog

[x] On open, autofocus on Collection Name input

Share package dialog

[x] when clicking on the share buttons (twitter, facebook, email, and reddit) - I have to click directly on the text. If I click on the color space to the right of the text, nothing happens.

Install Client Wizard Dialog

[x] For each screen, add the "copy-to-clipboard" icon on the right each white block. Then implement click to copy.
[x] For the first three screens, add a link "Detailed documentation" that takes the user to "https://test.datapm.io/docs/command-line-client/" in a new window (target="_blank")

Package Download Dialog

[x] When the user chooses database, file, format, etc option - close the download dialog window.

Delete Package Dialog

[x] When the user clicks the delete button in the dialog, show the spinner icon until the response is received

User Catalogs

[x] The delete button looks funky (maybe Safari specific)

Home page

[x] Center the spinning icon horizontally (it's in a good spot vertically)
[x] For latest and recently viewed, add titles above "Collections" and "Packages"

Client install wizard

[x] If the user is not logged-in, do not show the "authenticate" step (hide it in the top bar, and skip the page)

User "My Account" screen

[x] When I delete an API key, the screen blinks several times.
[x] After adding a new API, the copy text box doesn't look like the rest of the site. Change to look like the "click to copy fetch command" box on the package details page

User Packages

[x] When a single user has many packages 4 or more packages, the packages section does not expand but becomes scrollable.
- https://test.datapm.io/dreamingwell

Make Public Warning Dialog

[x] The "Allow Public" button in the bottom right is cut off

Package Details page (and maybe others)

[x] When I navigate to a package details page for a user that has an avatar, and then away to another package details page for a user that does not have an avatar, the first user's avatar shows on the second package details page.
- Goes away if I reload the page
- https://test.datapm.io/docbrown/covid-19-case-surveillance
- https://test.datapm.io/dreamingwell/political-regions

Package Schema

[x] When I expand a row in the schema, the details show up in a box with a separate outline below the row I clicked. Instead, show the details in the same outlined box that I clicked (not two separate boxes)

Edit User Details

[x] Most details in this dialog box do not change when saved

bleonagjocaj commented 3 years ago

Hi @traviscollins. Please check the image below. The request was to remove the dark gray color on the button but the dark gray color appears only if the button is disabled and when the button is enabled the button has a normal color. So have you thought about changing the disabled button color or what?

Group 10

traviscollins commented 3 years ago

Thanks @bleonagjocaj . In safari the add button is a much darker grey even when both the package and collection are specified.

bleonagjocaj commented 3 years ago

Thanks @bleonagjocaj . In safari the add button is a much darker grey even when both the package and collection are specified.

Oh I didn't know that you were talking about Safari. Thanks, I will fix this one.

traviscollins commented 3 years ago

@bleonagjocaj I reviewed the test site after deploying the latest updates. Big improvement! I re-opened this ticket, and added some more items to the bottom of it.

bleonagjocaj commented 3 years ago

Hi @traviscollins. Can you tell me more about this one because I saw that if you change something in this modal you have to refresh the page in order to see the changes so If you know any example that is not working here please let me know. Thanks

traviscollins commented 3 years ago

Using Safari, I wasn’t able to change my first name, last name, description, website, twitter, or linked in values. I wasn’t able to change the public/private settings for those things.

On Mar 3, 2021, at 10:06 AM, Bleona Gjocaj notifications@github.com wrote:

Hi @traviscollins https://github.com/traviscollins. Can you tell me more about this one because I saw that if you change something in this modal you have to refresh the page in order to see the changes so If you know any example that is not working here please let me know. Thanks https://user-images.githubusercontent.com/24249405/109824526-33dc7c80-7c39-11eb-8a82-577a95cdaa0e.png — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/big-armor/datapm-registry/issues/245#issuecomment-789780920, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHBLOP5FJJKUMVES7XQK2LTBZF6BANCNFSM4XPOGQ3A.

big-armor / datapm