Details operation toolbar

[WithoutPants]

This is an offshoot of #4699. I'm taking my own advice and reducing the scope of changes so that more focused feedback can be provided and get this implemented sooner.

The summary of changes is as follows:

• date, frame rate and resolution are moved to a sub-header under the main title
• a toolbar has been added between the date/resolution sub-header and the tabs. This toolbar includes the rating, a new play count button, the o-count button, organised button and the overflow menu.
• rating has been removed from the edit panel. Rating can be set in any panel now. Keybinds have been shifted across as well
• o-count button has been restyled. The dropdown menu is removed - the other functions can be accessed in the history tab. The play count works the same way.
• the numeric rating control is displayed as a read-only field by default, the editable text field is accessed by clicking the accompanying pencil button, which shows and focuses on the field. Clicking away from the field restores the read-only field.

I plan to add to this PR to roll this out to the image and gallery detail pages, once I've gotten some feedback.

Image will have the date and resolution in the sub-header, and all but the view count button in the toolbar. Gallery will have the date and potentially image count in the sub-header, and the same toolbar buttons as image.

Resolves #1744

[WithoutPants]

To address some feedback from the other PR:

@DogmaDragon

The date is now displayed in American English format instead of YYYY-MM-DD which are used in other areas of Stash.

This is consistent with the current date display in the details pages. The short form is suitable for cards and input, but for details presentation, I think we should stick with the locale-specific longform format.

How is resolution handled if there are multiple files attached to the same scene that have different dimensions?

This is based on the primary file.

Could we include the frame rate next to the resolution? It would please some people, and it shouldn't be an issue to those people that don't care about it.

Done.

[DogmaDragon]

How about also adding an icon next to decimal rating?

Used https://fontawesome.com/icons/star?f=classic&s=solid in the example.

---

This is consistent with the current date display in the details pages. The short form is suitable for cards and input, but for details presentation, I think we should stick with the locale-specific longform format.

That does make sense. I'll just have to learn to live with it.

[WithoutPants]

How about also adding an icon next to decimal rating?

Good idea. I went with gold colouring and added this to other components as well:

(image lightbox)

(gallery wall)

I also improved the handling of changing the numeric rating so that it doesn't set on every keypress - now updates on blur instead.

[randemgame]

Looks good to me! I didn't realise decimal allowed for even more specific grading so have switched over from tenth stars. I was put off by the aesthetic before. In Firefox the input box is way too large, see:

but I noticed in the screenshot above that it isn't true for other browsers like Chrome
. Not sure that you can do anything about that.

Could you fix it so the decimal input for the Performer page would have this same new look you've done with scenes, with the star and pen icon to input, rather than it permanently being in the input box mode? This was part of the off putting look before for me.

Also, just noticed in both browsers that the decimal input box is filling the whole width in movies, which looks pretty messed up! From Chrome:

[WithoutPants]

Looks good to me! I didn't realise decimal allowed for even more specific grading so have switched over from tenth stars. I was put off by the aesthetic before. In Firefox the input box is way too large... Not sure that you can do anything about that.

Could you fix it so the decimal input for the Performer page would have this same new look you've done with scenes, with the star and pen icon to input, rather than it permanently being in the input box mode?

Also, just noticed in both browsers that the decimal input box is filling the whole width in movies, which looks pretty messed up!

Thanks for the feedback, this has now been fixed and made consistent across the other pages.

[WithoutPants]

These changes have been added to the image and gallery details pages.

I've made the numeric rating changes to the list table cells as well:

To reduce the amount of vertical space used up by the header, I've used TruncatedText for the object titles, restricting the rows to 2. For most titles found on stashdb, this accommodated for most titles. This can be tweaked later if needed.

This is now ready for review/testing.

[echo6ix]

To me this is a regression from the incumbent layout. It doesn't reduce inconsistency and ad hoc design elements, it adds to it.

Row with date, resolution, and fps

There's no reason the resolution and fps has to be justified right and cannot be grouped with the date using a pipe or other bullet separator. The pipe separator is already introduced btw fps and resolution; the fact that two of values are more alike than the date is a trivial difference that won't confuse anyone. Moreover, the resolution and fps are redundant here since they also appear in the file tab, therefore display them using the condensed shorthand format (ie. 1080p30, 2160p60, no decimals for the fps on shorthand). The fps and resolution seem to be acting like a summary report to the file tab info. This reduces the amount of characters and required bullet separators: January 1, 1973 • 2160p60

Row with ratings and operation bar

The rating stars don't need to be partitioned from the rest of the operation sbar. Rating stars, watch icon, and o-counter icon are all actionable user interactions (things that are alike), and you're already willing to put them on the same row. Therefore ratings should be grouped with the operations bar and left justified too. The footer on Github cards shows how to do this right where each button has a subtle border to visually partition it.

Github user interaction buttons

I would personally implement it like this for the different rating star types:

The pencil edit icon is superfluous like this because the borders around the buttons already indicate the button is actionable, and that should be enough space to edit a numerical value in place. It makes sense to have the pencil edit icon in a table's cell because that's a completely different layout altogether.

Each operation button is now the same. Consistent and grouped together for visual coherency.

[JanJastrow]

I like the redesign, even tho it looks a bit crammed (just judging from the screenshots).
I'd like to throw Issue #1744 in here while you are working on this page.

• Save ratings without the additional need to click "save"
  (or is this the case now?)

[WithoutPants]

There's no reason the resolution and fps has to be justified right and cannot be grouped with the date using a pipe or other bullet separator.

Apart from making it somewhat consistent with the scene cards, these positions provide a definite place for the user to find this information. Not all scenes/images/galleries will have dates, so the position of the resolution/frame rate will differ based on whether the date is set.

I don't think this is an improvement over what's currently on this branch.

Condensing and combining the frame rate and resolution values to my eyes makes it more difficult to parse, and I just can't see a good reason to condense it this way. It's not like there's a dearth of space on that row.

The rating stars don't need to be partitioned from the rest of the operation sbar. Rating stars, watch icon, and o-counter icon are all actionable user interactions (things that are alike), and you're already willing to put them on the same row. Therefore ratings should be grouped with the operations bar and left justified too.

This seems like a pretty arbitrary approach and I'm not sure how this improves usability. Partitioning the rating from the other buttons means that there's fewer buttons grouped together, making it easier for the user to find the button/information they are after. Apart from looking ugly and unbalanced to my eyes, I just don't see it improving usability either:

The footer on Github cards shows how to do this right where each button has a subtle border to visually partition it.

This is potentially a good idea as it makes it clearer to users that these buttons are interactable, but right now it's is inconsistent with the entirety of the rest of the UI. If the goal is to minimise inconsistency, this directly contradicts it. We should reconsider the minimal button variant design across the UI though.

@JanJastrow

I'd like to throw Issue #1744 in here while you are working on this page.

This does in fact resolve that issue.

[randemgame]

I agree with the person without pants and have been running this branch for a good week now and would love to see it in the main dev build while discussion continues around the greater design of things. I thought I could try knock up a few different watch icon designs, I was thinking it would be cooler if looking towards the scene video to the right rather than left, or maybe straight forward is simpler to parse (though I'd be a little worried I was being watched) 👁️(edit: or maybe I'd be into it .... hmm)

Additional Edit: I might be a tacky guy, but maybe I could work on those icons animating a little on selection? just a brief burst of thirst for the O, a blink or squint for the eye, the organised box flipping open to closed? just thinkin' out loud now 💦🫠📦

[echo6ix]

@WithoutPants whatever approach you decide, if the time investment isn't a lot, can you add data-value attributes to the html for things like the date, resolution, and fps. It helps a lot with the potential customization, see here where I include a hypothetical example #4673

[JanJastrow]

Some feedback: I like it.
I need to adjust my muscle memory, because I was rating my large library at the moment. 🤷‍♂️

The FPS/RES info is very nice 🔥

The stars are a bit to small / hard do use.
On the phone as well as on desktop with a mouse.

I never really needed the old "reduce/reset o- and play-counter", but it's interesting managing it through the History tab now.
Could you add an "alt + mouseclick"-function to decrease the counter quickly? (at least on the desktop)

[echo6ix]

Someone on Discord was mentioning they can no longer style the counter elements based on the value of the counter. Adding a data-value property to the o-counter and play counter respectively would resolve this. Probably would be good practice going forward to add that property to all elements with badges and counters etc

[IAmKontrast]

Hide framerate and resolution from the new layout with css:

/* Hide Framerate and resolution */
.scene-subheader .frame-rate,
.scene-subheader .divider,
.scene-subheader .resolution {
display: none;
}