DestinyItemManager
Make the tag in Organizer trigger the tagging menu
In Compare, you can click the tag icon to get a dropdown of tagging options, which is a convenient way to select tags (see CompareItem.tsx). In the Organizer cell for tags (in Columns.tsx), it's just an icon with no interactivity. It'd be great to use the same method as in Compare in the Organizer.
I have made a little progress on this...
Aside from probably wanting to tweak the styles the lock seems to function as expected (i.e. it performs the lock/unlock action and the icon changes accordingly) -- I'm sure the code is far from ideal at the moment but I'm still learning how React works and how everything in DIM is wired up.
I am however having an issue with the tag drop-down (it's likely just a styling issue?) -- it does not maintain a clear layer/focus above the other background elements...
I'll keep playing around and see if I can figure it out but any pointers in the right direction would be greatly appreciated!
To be honest this was just a quick play around and I wasn't expecting to get anywhere close to this, all I did was copy the functionality over from Compare.
-- I did at least follow it through from the import:
import { LockActionButton, TagActionButton } from 'app/item-actions/ActionButtons';
back up to the definition in:
src/app/item-popup/ItemTagSelector.tsx
...
Having looked a bit more closely, at least part of the problem (I think) is due to the mouse moving over the next row and triggering an update to highlight the next row.
Yup the steps are:
- Switch to using the ItemTagSelector.
- Override the styling so it looks good in Organizer.
- Adjust the z-index of the menu so it shows at the right layer.
Apologies for the time passed with no updates on this issue, I decided to take an online course for React... Then I decided better first to brush up on my (long-forgotten and now irrelevant) JavaScript skills dating back to pre and early jQuery. Progress is likely to be slow!
Basically I don't (yet) understand enough about how DIM is built. I will persevere, but if someone else wants to work on this issue please feel free, I just ask that you reply here with your intent to do so.
For clarity:
- I was initially confused if I should be using
PressTipor some other 'pop-up/tool-tip' component for render -- I decided not! - I am trying to follow and understand the components and associated props down through the chain:
TagActionButton>ItemTagSelector>Selector. - I know I'm being really dumb but I don't even understand where and how the styles are computed and applied. -- I see the "styles" imports referencing the different SCSS files in different components, then there's the
clsxfunction doing something (?!) ... I can't even play around with it in the browser's dev-tools because (of course) the elements are removed from the DOM when the menu looses focus and I can't even figure out how to work around that, lol.
I was initially confused if I should be using PressTip or some other 'pop-up/tool-tip' component for render -- I decided not!
The popup already has all the stuff it needs to show the menu, nothing needs to be changed there.
I am trying to follow and understand the components and associated props down through the chain: TagActionButton > ItemTagSelector > Selector.
TagActionButton contains an ItemTagSelector which configures a generic Select component.
I know I'm being really dumb but I don't even understand where and how the styles are computed and applied. -- I see the "styles" imports referencing the different SCSS files in different components, then there's the clsx function doing something (?!) ... I can't even play around with it in the browser's dev-tools because (of course) the elements are removed from the DOM when the menu looses focus and I can't even figure out how to work around that, lol.
Every component refers to its own styles which are CSS modules - there's a corresponding <component>.m.scss with the styles. Each class name defined in the module becomes a property on the styles import that can be passed to className. clsx is a library that combines class names together intelligently.
DIM might be a bit complex of a project to just dive into without prior experience - I'd suggest making some apps of your own to learn the basics, and then a lot of this might make more sense.
Yeah I fully appreciate that, and thank you. The course contains numerous projects, so I'm just going to take my time and work my way through it. -- DIM is an inspiration, and it'll still be here when I'm ready. Maybe not this issue but something, when I'm able.
A lot of respect for all of the work that's gone in to DIM and continues with it's community of developers.