Resource Manager Mockup
OpenPublic

Mock History

Current Revision1
91

Mock Description

Note: functionality list is in T13338.

Missing functionality now:

  • open resource folder
  • delete backup files
  • possible: show dependant resources (both actually saved inside, like patterns in presets, and external, like brush tips for presets)
tymond created Resource Manager Mockup.Mar 18 2020, 8:53 PM
tymond added a project: Krita: Abyss.
tymond added subscribers: Krita, Krita: Abyss.
tymond updated the mock's description. (Show Details)Mar 18 2020, 11:47 PM
rempt added a subscriber: rempt.Mar 19 2020, 1:16 PM

For the tabs, I'd say "Details" and "Activate Resources" are better titles; I'd switch the tabs, too. Maybe even make the details pane a popup accessible from the activate/deactivate pane.

tymond added inline comment(s).Jun 29 2020, 12:00 PM
Inline Comments

I am wondering whether it should be a checkbox like here, or better a combobox with those choices:

  • All
  • Only active resources
  • Only deleted resources

It should support multiple selection, unlike other ResourceItemChoosers.

I wonder what widget would be best here? I would like to have here a very clear and easy to use way to add and delete tags from the resource.
I thought about a combobox with items with checkboxes, but... it's quite difficult to do in Qt, for some reason. And it might not be that easy or clear as I thought.

tymond added inline comment(s).Jun 29 2020, 12:14 PM
Inline Comments

Missing functionality:

  • open resource folder
  • delete backup files

Possible missing functionality:

  • show resources that this resource depends on (and whether it's embedded or not)
  • show resources that depend on this resource

With QStandardItemModel it's pretty easy to add checkboxes to the items in a combobox, but whether that's the best idea... Maybe we can be consistent and use the standard tag/untag gui from the item choosers?

Also, maybe we can get rid of the tabs completely and make the right-hand view aware of whether one or more than one resource is selected and change accordingly.

The right-click menu for tagging and untagging will be available, of course, I just thought it would be nice to have an easier method to do so (right-click and then choosing etc. etc. doesn't seem so accessible). If right-click menu is enough, I can change this widget to just a label with a list of tags that this resource has (the same you get when you hover over the item on the item chooser).

Regarding tabs, yes, I agree. I guess my brain assumed it was necessarily because of historical reasons (aka old mockup), but it's not longer the case.

For the left side I'm going to reuse ResourceItemChooser (so you can expect all the comboboxes and checkboxes the default resource item has, I just don't have all icons in my library yet), but there will be some technical obstacles.

rempt added a comment.Jun 29 2020, 1:00 PM

okay, sounds good.

Scottyp says the right-click menu cannot be all we have there, so the mockup version of the multiple resources selected still stands.

The proposed interface looks good. The only thing I don't like is the usage of a combo-box for tagging. In majority of GUIs, including Krita ones, tags are managed with a simple line-edit, where the user types the tags and they appear as typing-suggestions. I guess KF5 even has a special GUI control for that. Though I'm not sure if we can use that.

Inline Comments

I have a feeling that all three controls can be replaced with a single line-edit. Or a line-edit + three buttons ("add", "remove", "replace").

I don't understand why this manual switch is needed. As soon as the user select multiple resources with Ctrl+Click or Shift+Click the widget can automatically switch into "Multiple resources mode". Like "Layer Properties" dialog. Why this switch is needed?

The standard way to show/modify tags is to use a line-edit textbox. I'm not sure a drop-down is a good idea here.

I think a simple checkbox for "show deleted resources" should be enough. You might also try to add a button "Delete all deleted resources" near that, which is activated only when the checkbox is active.

I'm not sure that a compo-box for tags is a good idea.

Btw, we have a set of classes that handle multiselection editing. They are stored in kis_multinode_property.cpp.

tymond added a comment.Jan 4 2021, 4:01 PM

Video showing the alternative version of the multiple resources view: https://krita-artists.org/uploads/default/original/3X/d/5/d5bbedf1d1bb88702b7981a61efdb0d2df7ab7b2.webm

Biggest issues with base version (no drag&drop):

  • needs clicking
  • less visual

Biggest issues with alternative version (drag&drop possible):

  • less intuitive removing from a tag.
    • the idea is that on the left there is one selection of presets and on the right there is another selection.
    • to move presets to a tag, you select some on the left and move to the right where a tag is selected
    • to add presets to the tag (without removing from the old tag), you select some on the left and move to the right side, but first you press the "Add to tag" button
    • (I might add option that for example holding Shift (or Alt) will make it switch to the Move, but to keep it pen-friendly, we need a button, too
    • to remove presets from a tag, you need to do it the other way around
    • selecting the presets on the right side and moving to the left
    • however while moving from the left to the right sounds intuitive enough, the removal sounds... a bit less intuitive. I think it should be done in a different way.
    • Maybe:
      • another button (then there would be three: Add to tag, Move to tag, and Remove from tag).
      • when you click Remove from tag button, the presets selection will disappear and only a rectangle will appear (looking just like the Recent Documents rectangle, or the one you drag the image on?)
      • so the drag&drop will only work left-to-right.

I think being able to drag-and-drop is a good idea for making it a smoother tablet experience.

I think a simpler way of thinking about removal from a tag would be to allow users to remove by dragging anywhere outside of the right-hand side tagged resource view. This is usually a pretty intuitive UI/UX way of describing removal, and moving the tagged resource into the left hand side seems unnecessary since you're not really "adding" it to that specific view. To make it clear what it's going to do, IIRC you can change the icon of the QDrag once the user drags the resource outside of the tagged resource box. I hope that makes sense, it's a bit hard to describe in words...

Otherwise, I think it's a good improvement.

tymond added a comment.Jan 4 2021, 6:29 PM

I think a simpler way of thinking about removal from a tag would be to allow users to remove by dragging anywhere outside of the right-hand side tagged resource view. This is usually a pretty intuitive UI/UX way of describing removal, and moving the tagged resource into the left hand side seems unnecessary since you're not really "adding" it to that specific view. To make it clear what it's going to do, IIRC you can change the icon of the QDrag once the user drags the resource outside of the tagged resource box. I hope that makes sense, it's a bit hard to describe in words...

Makes lots of sense, however I'm not sure if that would be clear enough for users. It sounds like something that needs to be implemented to see what users/beta testers say... which makes me a bit nervious since it's a lot of work. But I guess at this point it's getting clearer and clearer I just need to do it :) If I will have to scrap it later, then be it...

Hi, @tymond!

to add presets to the tag (without removing from the old tag), you select some on the left and move to the right side, but first you press the "Add to tag" button

I have a feeling that you are overcomplicating things :) Why don't you want to make a tristated version of the tag selector instead? I mean this one:

When multiple resources are selected, the widget would show all the tags that are present in all the resources, with the following marking:

  • solid color background --- the tag is present in all the selected resources
  • dashed/grayed-out background --- the tag is present on in some of the selected resources

Clicking on a grayed-out tag will propagate the tag on all the selected resources. Removing a solid/grayed-out tag will remove it from all the selected resources.

Such approach will let you use the same UI layout for both, single-resource selection and multi-resource selection, which will be less confusing for the user. It also supports tablets easily. What is more, this UI is consistent with the standard UIX present in many other applications (mostly, audio players that support media metadata editing). We also use this UIX in layer properties dialog, see kis_multinode_property.cpp.

mwein added a subscriber: mwein.Jan 21 2021, 11:23 PM

I tried to implement the mockup as actual dialog, and I think I understand how most of it should work, except for the (Un)delete button.

The "Manage Resources..." menu entry used to be just a bundle manager, now the dialog is called "Manage Resource Libraries", so that's what I called the menu entry, so that the new Resource Manager is where you actually get to when you go to "Manage Resources...", but maybe you have a better idea.

First attempt looks like this:

Spacing sure could need some more work, and the movable splitter is just an idea, not sure if it's very practical.
I feel like the combo-boxes for type, storage and tag should have a label too, but did it like the mockup.
Also, the "Delete Backup Files" maybe should not be directly above the close button, although I hope it'll ask for confirmation anyway.

I'm also wondering if any existing widgets can be re-used, but KisResourceTaggingManager as a whole seems unusable, changing the resource type requires a new object, and it effectively owns the KisTagChooserWidget and KisTagFilterWidget, and I'm not sure if either of those widgets really suits here either.
It's also just an assumption that KisResourceItemListView will actually work in MultiSelection mode, no idea if it really does.

Anyway, I've put the code here:
https://invent.kde.org/mwein/krita/-/tree/resource-manager-mockup

__

Inline Comments

How should this button behave? Should it change label depending on the status of the selection? And if we have multi-selection that is partially deleted, what would it do?

Great work, thanks!

Regarding questions:

I would actually prefer the Manage Resource Libraries to be Manage Bundles, and then it would be "Manage Bundles -> Manage Bundles" and "Manage Resources -> Manage Resources", but this way is ok, too. We can always ask Tyson or David R or someone.

I feel like the combo-boxes for type, storage and tag should have a label too, but did it like the mockup.

It might be a good idea if there is space for that.

Also, the "Delete Backup Files" maybe should not be directly above the close button, although I hope it'll ask for confirmation anyway.

I don't necessarily like that part of the mockup - those four buttons. I mostly added it to make sure I don't forget about anything. So any changes in this area are fine as long as the functionality is preserved.

I actually have two other things to remember about:

  • exporting resources - another button???
  • be able to create a new tag with the brushes selected -> this one should be handled in tag selection widget...

I'm also wondering if any existing widgets can be re-used

You can still reuse parts of those. For example the filter box on the bottom can use the KisResourceSearchBoxFilter. The filter there still needs some work... But it needs work regardless on where it's used, so you can use that class, I believe.

How should this button behave? (Delete/undelete)

I wanted it to change label depending on the selection. However if we have multi-selection with partially deleted things... I don't know - we could disable it, then. But if all are deleted then it should be Undelete, and if all are active then it should be Delete. Also I wasn't sure whether to use Delete/Undelete or Active/Inactive nomenclature (like "Deactivate" etc.).