Closed bradenmacdonald closed 2 months ago
For some reason I cannot replace screenshots in the original text, but these are the hifi card designs:
@jmakowski1123 CC @bradenmacdonald
Clicking on the Edit action opens the requisite editor
I think this would not be done for now in this task, since we would have this same problem
Clicking on Copy to Clipboard copies the component to the clipboard
I think this is out of the scope of this task. We can add that functionality in another task in this epic.
(see comments for most recent designs)
Are there designs for the menus?
Got it. So all we need for now in this story is a placeholder for the 3-dot menu.
Then in future stories:
Action to edit - is contingent on getting the editors into Libraries, which I created as Epic 4 https://github.com/openedx/frontend-app-course-authoring/issues/1086
Action to copy to clipboard - is now a separate story https://github.com/openedx/frontend-app-course-authoring/issues/1104
Action to add to collection - will be a separate story in Epic 2
Hi @jmakowski1123
Card should be color-coded based on type.
Do you have the colors of the cards?
@ChrisChV The colors are here: https://www.figma.com/design/Y3gSyrpG6uncUUfjK7eQuo/Content-Libraries-and-Taxonomies?node-id=2130-52666&t=edCcbOnCFP9j2ibq-4
@jmakowski1123 This it's ready for AC testing
Edit: In https://tagging-preview.staging.do.opencraft.hosting/dashboard
@jmakowski1123 This it's ready for AC testing
Edit: In https://tagging-preview.staging.do.opencraft.hosting/dashboard
Was that link supposed to go to a course in Studio? The only sample Library I can see the prototype cards is here: https://app.tagging-preview.staging.do.opencraft.hosting/course-authoring/library/lib:Axim:Math101
These examples don't contain truncated titles or descriptions, so can't test those two things. Am I looking in the right place though?
Hi @jmakowski1123
Was that link supposed to go to a course in Studio?
This is the link of Studio. You can see the libraries list on the "Libraries" tab.
These examples don't contain truncated titles or descriptions, so can't test those two things
I created Library for AC testing with these cases.
Thank you, this looks good!
Designs: Mid-Fi Figma link
Implement the grid/card view of components in the library that match the current keyword search.
✅ In Scope:
Display the component name, description, type and tag icon with tag count (see tagging epic). Note: this isn't the final design - check Figma. Note: The type includes: text (for the text blocks), video (for the video blocks), open response (for ORAs), specific CAPA problem types - single select, multi-select, dropdown, numerical input, text input (for the problem block), and specific advanced problem types - annotation, poll, etc (for the advanced problem block).
The 3-dot menu should contain actions for: Edit, Copy to Clipboard, Add to collection. Separate stories exist for each action from the 3-dot menu so it just needs to be a placeholder for now.
Card should be color-coded based on type.
Long titles/descriptions/types should be truncated with an ellipsis as shown in the mockups.
Icons should match the icons we're using in the courseware search modal, and should be sharing the same code.
Implement Infinite scroll (Hint:
useInfiniteQuery
)Keep the empty states for when there are no components in the library or no components matching the search.
🛑 Out of Scope:
Notes: You can temporarily enable the Library Authoring MFE in order to create components for testing.