Renewed: Improve Styling

[crhallberg]

Splitting the style part of #258 into a new PR. Some of the JSX syntax has been copied over, but mostly this was re-themed from scratch. This work has revealed some redundancies that can be addressed here or in a new PR.

• Run Prettier (that'll fix the tab/space mix introduced by my local config)
• Redundancy: Breadcrumbs (manual, Breadcrumbs, BasicBreadcrumbs) Let's do this another time.
• Fix paginator button appearance
• Fix delete icons wrapping to second line and lacking labels
• Address style suggestions from 1/15/25 review

[demiankatz]

Thanks, @crhallberg -- we should probably get the build passing before I review this closely, especially if it's just formatting that's causing the failure. You should be able to npm run format to auto-fix styles (can't remember if this will work from the top level folder, but at very least I'm pretty sure it will work from inside the client folder).

[demiankatz]

From looking at the failed build, some of the issues seem to be related to unused variables, so it's not just auto-fixable whitespace that's an issue.

[demiankatz]

@crhallberg, looks like we're down to just one failing test, and it appears to be a trivial whitespace issue. Nearly there! Let me know when you're ready for me to look closer. :-)

[demiankatz]

Haven't taken too deep of a dive yet, but this is generally looking nicer all around. However, I'm noticing that the delete icons are wrapping to a second line and looking weird; e.g.:

[crhallberg]

Could it prettier? Always. Is it better? YES!

[demiankatz]

On smaller screen sizes, the bottom row of paginator buttons have gotten a bit weird. Here's what they look like on live:

And here's what they look like in this branch, in my VM, on my laptop screen:

The warning color of the delete button is gone, and the sizing is just weird. :-)

[demiankatz]

Thanks for fixing the delete status icon, @crhallberg -- that's definitely better. However, the delete action button is still problematic. I also found issues with the delete button appearance in the paginator. I have created TODO checkboxes for these two issues and linked the descriptions to comments with screen shots.

Some other general observations that might be worth addressing:

• I've noticed that tool tips in the editor only seem to work if you hover over the text and icons of the buttons. If you hover inside the button without touching the button content, you don't get a tool tip. This seems like it could cause problems/confusion, especially on the delete button which currently has a huge button with a tiny icon in the middle of it.
• I find the new "black on white" buttons kind of boring; I felt the old "white on dark blue" buttons felt more button-y. Maybe this is necessary for accessibility or dark mode support, in which case I can live with it... but I miss the old look.
• The "Show Thumbnails / Show Models / Show Child Counts" buttons in the editor are floated left now, but used to be floated right. I kind of prefer "controls on right" unless you have a strong reason for this change.
• On the "edit object" page, the buttons have gotten very large and spaced out; I think these controls could be made a bit more compact without accessibility suffering.
• On the "edit object" page, the green "populated datastream" color has turned yellow; I think it's important for this to be green.
• The colors for the object status (active/inactive/deleted) icons also feel too subtle to me. The inactive yellow is hard to distinguish from the deleted red. I wonder if a subtle background color on the control would be a better way to color-flag these than using a foreground color on a tiny icon.
• The fonts in the contents list feel smaller than necessary. Gives me more of a cramped feeling than the previous design, even though things line up more neatly.

Hopefully none of these things are terribly hard to change, and feel free to disagree with me on anything you feel strongly about. After we've done another round or two of this, we should get more opinions involved -- maybe by sending screen shots to the DCDE team.

[crhallberg]

• I've noticed that tool tips in the editor only seem to work if you hover over the text and icons of the buttons.

• On the "edit object" page, the green "populated datastream" color has turned yellow; I think it's important for this to be green.

For these two items, I might need a screenshot to point me to the right location.

[demiankatz]

@crhallberg, I'm no longer seeing a tool tip problem, though maybe I'm forgetting what I meant in my original message.

Regarding populated datastreams, I'm referring to the area of the object editor (e.g. http://localhost:3000/edit/object/vudl:1) that lists the datastreams. Here's what it looks like in dev:

And here's what it looks like in this PR:

I think we need to keep the green color (or something close to it) if at all possible. I'm also not a fan of the lack of separation or the incredibly tiny icons in the new version. What do you think?

[demiankatz]

Thanks, @crhallberg, things are definitely improved with the latest changes.

See below for a couple of things I noticed during a (less than exhaustive) review of the latest code.

I also think something needs to be done about the object button bar, because the delete button currently wraps to a second line and has no label; it would be nice to make this more consistent and balanced somehow.

[crhallberg]

I don't see the delete buttons in the ObjectBar. Is there a setting I need to turn on?

[demiankatz]

I don't see the delete buttons in the ObjectBar. Is there a setting I need to turn on?

The delete button only appears if you have a Trash PID set in your vudl.ini -- see:

https://github.com/FalveyLibraryTechnology/VuDL/blob/dev/api/vudl.ini.dist#L36

(You just need to create a folder somewhere that will serve as your trash can, and then put that PID in the config file).

I forgot about this requirement -- sorry for the confusion!

[demiankatz]

Thanks, @crhallberg, this is looking really great -- I think we're nearly done. Just a few remaining things:

1.) I just updated snapshots, but there's still one failing test. Let me know if you need help figuring out what's going on. I think it may be directly related to my next question, which is...

2.) Why did you remove the "loading" status support from DatastreamControlButton? I think that was intended to prevent buttons from being pressed before the associated content had loaded. Maybe you refactored that code elsewhere... but just want to be sure it's safe and accounted for!

3.) There's an empty client/styles/object-editor.css file added in this PR. Is that actually used/needed?

[demiankatz]

Thanks, @crhallberg -- just a couple small questions. Once these are settled, I think the next task is to take a bunch of before and after screen shots so we can get feedback from DCDE.

[demiankatz]

Thanks! I'll start taking screen shots the next time I am able to spin up an instance of this. In the meantime, just one trivial stylistic issue -- since we currently use spaces everywhere else, we shouldn't start introducing tabs in selected files. :-)

[demiankatz]

This file seems to be using tabs instead of spaces.

[demiankatz]

While testing this today, I noticed this message during build: autoprefixer: end value has mixed support, consider using flex-end instead -- should we make adjustments?

[demiankatz]

In any case, as promised, here's a set of screen shots to allow us to compare the new and old styles:

Context	Old Image	New Image
Main Menu
Pagination Menu
Paginator
Editor (top-level)
Editor (object)
Editor (Dublin Core)
Bulk Editor