Infinite Music Discs

Infinite Music Discs

66 Downloads

Advanced editing mode for DiscListEntry

bradytheinventor opened this issue ยท 5 comments

commented

The DiscListEntry component is visually simple with only a couple of editable fields. Add an optional "advanced" mode, hidden by default, with lots of room for very specific customization fields. This is where advanced features like loot table customization or overriding the internal name would go.

https://doc.qt.io/qt-6/
https://doc.qt.io/qt-6/qwidget.html
https://doc.qt.io/qt-6/qboxlayout.html

  • will need to design how the components sit in a series of layouts to make sure the UI always looks good (nesting layouts inside each other, which layouts to use, etc)
  • might need to design some new widgets so they look good and have hooks (preferably Qt signal/slot or simple getters/setters) that you can use to connect widgets together into a more complicated control
  • maybe design transition animations if you want to get fancy

To do:

  • Diagram/mockup of the planned advanced mode UI
  • Plan which (if any) new widgets will need to be created
  • Plan how the new and old widgets should be arranged with layouts to implement the UI mockup
  • Plan the new code architecture of the DiscListEntry so that it's easy to work with. Refactor the DiscListEntry / DiscList code if it makes things easier. Use good software design principles, especially encapsulation
  • Design QSS for the new widgets so they look good, and add them to the stylesheet
  • Write code
  • Test code before releasing
commented

@500-internal-server-error Here's a simple UI mockup. It would add a new button next to and similar in style to the DeleteButton of every DiscListEntry widget. So each disc gets its own set of advanced configuration options.
imd-advancedconfig-mockup1

When the new button is clicked, the DiscListEntry expands vertically (using QPropertyAnimations similar to the slide in/out of the StatusDisplayWidget toast) to reveal all of the advanced controls. A partial underline separates the "standard" controls from the "advanced" controls to help differentiate them.
imd-advancedconfig-mockup2

Some requirements to help clarify further:

  • The advanced UI button must have a similar size and look and feel to the DeleteButton (I can help with the art if necessary). Maybe it would be smart to create a "VirtualConfigButton" which is inherited by DeleteButton and the new UI button.
  • The advanced UI button (wrench icon) must illuminate when hovered over. The button must stay illuminated while the advanced UI is open to remind the user how to close it.
  • When the advanced UI of a DiscListEntry is opened, all other advanced UIs must close. This effectively means only one DiscListEntry can be expanded at a time. The contents of the other advanced UIs are not erased, they just shouldn't be displayed.
  • The partial underline must not be visible while the advanced UI is closed.
  • The advanced UI must expand to show/hide an arbitrary number of controls, aka the QPropertyAnimation must not have a hardcoded start/end point. I might add more controls later and I don't want to have to keep updating a hardcoded value.
commented

Thanks for the mockup, could you explain more about the advanced editing mode layout? I see an image, 3 checkboxes, and a texbox, but with no description as to what they're intended to do.

commented

Here's my current attempt at implementing the advanced editing screen, currently I'm focusing on getting the components in before working on things like animations, hiding, etc.

commented

Thanks for the mockup, could you explain more about the advanced editing mode layout? I see an image, 3 checkboxes, and a texbox, but with no description as to what they're intended to do.

Sorry, I should have explained that better. The advanced UI is supposed to be a catchall for any implementation-specific features that get added. I'll keep adding new controls over time, so I just threw in some images to represent what it will look like eventually. For now, the only control that needs to be in the advanced UI is a QFocusLineEdit for your "edit internal name" feature.

commented

Branch updated, I have the separator and textbox in there and it is collapsible, but currently it seems to be a class property rather than an object property, and I'm not sure how to fix that. Expanding/collapsing the advanced view seems to only work for the first item on the list.