Project

General

Profile

Actions

Feature #12821

closed

Folder management tool for group library

Added by Boone Gorges almost 4 years ago. Updated over 3 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Group Library
Target version:
Start date:
2020-05-15
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Previously: #3176

The Group Library allows library items to be organized into folders. These folders can be created in the Edit context for individual items (via the 'Add new folder' option in the folder selection dropdown). But there are no other tools available for managing folders. Based on team discussions, we need roughly the following abilities:

- View the group's folders (and item counts?)
- Edit existing folder names
- Delete existing folders (which would unlink the items in the folder, but would not delete them)

Sonja suggested she might have a first pass at thinking about what such an interface might look like. My initial suggestion is that we mimic the two-screen approach for the library itself: a folder-list view, and an add/edit/delete for individual folders. Then, we just need some mechanism in the UI where you can enter the 'Edit Folders' view - Sonja suggested perhaps an additional dropdown item on the Folders filter dropdown, though I fear that this might be a bit too buried and not totally semantic.

Preliminarily, I'd suggest that only group administrators be able to access the folder management tools. Otherwise the permissions questions get too confusing.


Files

folder-any.png (122 KB) folder-any.png Colin McDonald, 2020-05-20 01:02 PM
folder-edit.png (77.4 KB) folder-edit.png Colin McDonald, 2020-05-20 01:02 PM
12821-edit-delete-folders-v1.pdf (1.27 MB) 12821-edit-delete-folders-v1.pdf Sonja Leix, 2020-08-18 01:15 PM
12821-edit-delete-folders-v2.pdf (1.27 MB) 12821-edit-delete-folders-v2.pdf Sonja Leix, 2020-08-19 01:47 PM
12821-edit-delete-folders-v3.pdf (1.58 MB) 12821-edit-delete-folders-v3.pdf Sonja Leix, 2020-09-23 05:47 PM
12821-edit-delete-folders-v4.pdf (1.58 MB) 12821-edit-delete-folders-v4.pdf Sonja Leix, 2020-09-30 12:02 PM
Peek 2020-10-02 09-56.gif (1.75 MB) Peek 2020-10-02 09-56.gif Boone Gorges, 2020-10-02 10:55 AM
folder-icon@2x.png (1.07 KB) folder-icon@2x.png Sonja Leix, 2020-10-06 12:24 PM
folder-icon.svg (325 Bytes) folder-icon.svg Sonja Leix, 2020-10-06 12:24 PM
folder-icon.png (511 Bytes) folder-icon.png Sonja Leix, 2020-10-06 12:24 PM
12821-edit-delete-folders-v5-add-folder.pdf (993 KB) 12821-edit-delete-folders-v5-add-folder.pdf Sonja Leix, 2020-10-07 06:42 PM
Peek 2020-10-08 12-41.gif (146 KB) Peek 2020-10-08 12-41.gif Boone Gorges, 2020-10-08 01:41 PM
12821-edit-delete-folders-v6.pdf (1.58 MB) 12821-edit-delete-folders-v6.pdf Sonja Leix, 2020-10-26 05:13 PM
library-on-mobile.png (137 KB) library-on-mobile.png Colin McDonald, 2020-11-24 12:28 PM
manage-folder-on-mobil.png (123 KB) manage-folder-on-mobil.png Colin McDonald, 2020-11-24 12:28 PM

Related issues

Related to CUNY Academic Commons - Support #13159: changing folder names?ResolvedBoone Gorges2020-08-05

Actions
Actions #1

Updated by Colin McDonald almost 4 years ago

Thanks for breaking out this ticket, Boone. Looking forward to hearing Sonja's take on this, but just a thought -- would it be enough that when you're in a folder (i.e. selected a folder filter) there is a link/button at the top, maybe next to the second "kind" filter dropdown, that says Edit/Delete Folder? This wouldn't be on the front/any folder view. I attached a couple of dev site screenshots explaining this, too.

I suppose this would also be sort of buried, but it seems like a natural place to me. The button could activate a pop-up where you can edit the folder name or check a box to delete the folder (noting actual items will not be deleted) and then save either change.

Do we need more of an interface when you can already see all group folders from the folder filter dropdown, and then also see the items/count in each folder by selecting one from that dropdown? I agree that however we implement, it should only be available to administrators.

Actions #2

Updated by Boone Gorges almost 4 years ago

Thanks, Colin. The idea of showing a link there, and showing it only when filtering by folder, seems like a decent idea to me. I'm unsure whether it's sufficient - people might expect to have more of a generic view of all folders available.

That said, we could consider approaching this in a conservative way. Colin's suggestion (or something like it) requires just a single new view - editing a single folder. If we decide in the future, due to user feedback, that we need a second new view - a listing of all folders, with edit links - it could be added alongside the single-edit view. That way we don't spend extra design/dev time building something that people don't really need.

I'll be happy to follow whatever Sonja suggests :-D

Actions #3

Updated by Boone Gorges over 3 years ago

Actions #4

Updated by Colin McDonald over 3 years ago

Resurfacing this for fall release brainstorming, and perhaps Sonja's input to start - what do you think of my idea to offer a simple/gradual solution to the folder-renaming problem to start, where you can rename any folder once you've filtered into that folder, but there isn't a management/renaming view that shows all folders? Or do you think there's an achievable design alternative that offers something closer to the overarching view?

FWIW, I think that the user in #12821 would have been been served fine by the simpler option to just rename individual folders as needed once he was inside of them. That seems like a pretty edge case already.

Actions #5

Updated by Sonja Leix over 3 years ago

Thanks Colin and Boone,
I just tried to do some sketches, but it adds complexity. I'll think this through a little more.

Actions #6

Updated by Colin McDonald over 3 years ago

Thanks for the update Sonja, just let me know if I can help talk or look through anything you're working on!

Actions #7

Updated by Sonja Leix over 3 years ago

Colin, the proposal you've made is not ideal, because the "edit/delete folder" link is not contextually located by or right next to the folders dropdown. It might get lost or feel out of place for users.

I've put together a first attempt at solving this ask. It's based on an earlier thought.
In the PDF attached you can see an additional option at the bottom of the folder dropdown to "+ Edit folders". This option takes the user to a separate screen with the list of folders. Here the user can do three different things: Add a new folder, Edit (rename) an existing folder, or delete a folder.

If there is a real need for it, we can also add the number of items in each folder in the list.

Looking forward to your feedback.

Actions #8

Updated by Boone Gorges over 3 years ago

Thanks for working on this, Sonja!

I like the positioning of 'Edit Folders' in the dropdown. And page 3 looks like a good and simply way of displaying editable folders.

You say that renaming will happen in an overlay. Elsewhere in the Library (and in general on the Commons) we use overlays for confirmation, as in the case of delete, but not really for editing of this sort. As such, it doesn't feel quite right to me. A couple other possibilities: (a) When you click Rename, the name of the folder turns into a text field; when in 'edit mode', we'd need additional action links 'Save' and 'Cancel', perhaps alongside 'Rename' and 'Delete'. (b) Clicking Rename opens a small "drawer" underneath the folder name where the editing can take place.

Actions #9

Updated by Sonja Leix over 3 years ago

Thanks Boone, that makes a lot of sense and I'd like to keep these patterns consistent. Would be a good idea to add these kind of UX patterns into the new pattern library down the road.

I've updated the designs to reflect the suggested change. See attached.

Actions #10

Updated by Boone Gorges over 3 years ago

This is exactly what I was envisioning. Thanks, Sonja! Once others have signed off on this, please reassign the ticket to me for implementation.

Actions #11

Updated by Matt Gold over 3 years ago

Looks great to me. Thank you, Sonja!

Actions #12

Updated by Sonja Leix over 3 years ago

  • Status changed from New to In Progress
  • Assignee changed from Sonja Leix to Boone Gorges

Matt Gold wrote:

Looks great to me. Thank you, Sonja!

Thanks Matt!

Actions #13

Updated by Colin McDonald over 3 years ago

Looks good to me too!

Actions #14

Updated by Colin McDonald over 3 years ago

As we discussed in the Friday group meeting, Sonja's mockup is close to addressing the original issue of creating a folder management tool, but it spurs other issues. There was confusion about what "Delete" means on the management page -- it's meant to mean "delete this folder (i.e. label)" but can be taken to mean "delete this folder and all of its contents."

There was agreement that it would be good to have BOTH functions, but I'm not sure yet how feasible that is. The "delete label" function seems easy enough with some clearer language, but the "delete all contents" requires some backend work. And what if an item is in multiple folders?

We discussed keeping the Rename / Delete language we have now, and the Rename functionality, but when the Delete overlay pops up with a click, there will be two options:

1. Delete this folder label only.
2. Delete the folder entirely (label and all contents).

Perhaps we can move ahead with this once Sonja and Boone weigh in from their ends. Two somewhat related things that came up (which I can break out into other tickets if we'd like) are whether we can show what folder an item is in on the main Library screen, perhaps with another Folder column that links into each listed Folder, and whether we need bulk editing features in the library to remove items in batches, add them to folders, etc. Perhaps the former is easier to implement than the latter, but let's go over it.

Actions #15

Updated by Boone Gorges over 3 years ago

And what if an item is in multiple folders?

As currently implemented, items can only be in a single folder.

We discussed keeping the Rename / Delete language we have now, and the Rename functionality, but when the Delete overlay pops up with a click, there will be two options:

"Folder label" is still unclear, IMO. Here's a suggestion for another direction for language:

1. Delete folder and its contents (this action cannot be reversed)
2. Delete folder but keep its contents (content will be placed in the top level of the Library)

Two somewhat related things that came up

These should definitely each get their own tickets.

Actions #16

Updated by Sonja Leix over 3 years ago

Two somewhat related things that came up

Let's create new items for those. I have some thoughts on adding another column for the folder, but I'd like to add it to the ticket. Please assign it to me or add me as a watcher.

--
Regarding the clarification around Delete, I've mocked up the overlay (see page 5 in the PDF). Note: this is the first overlay I've mocked up and I couldn't find an example on the site, so the design isn't consistent with current overlay styles. We should keep the current overlay styles as is. Thoughts on the wording and structure of the overlay?

I also want to float the idea to potentially change the term "folder" to its actual functional term "label". We might then want to allow users to tag library items with multiple labels and deleting a label would never delete the items. Just food for thought, because it feels like we're boxing ourselves in by calling labels > folders.

Actions #17

Updated by Boone Gorges over 3 years ago

This looks good to me, Sonja!

If a user clicks Delete but then wants to change their mind, they'd have to click the X button. Do we feel this is obvious enough?

Actions #18

Updated by Sonja Leix over 3 years ago

Boone Gorges wrote:

This looks good to me, Sonja!

If a user clicks Delete but then wants to change their mind, they'd have to click the X button. Do we feel this is obvious enough?

I think it's common enough of a convention. With the redesign, I'd like to try to create stronger patterns for common use cases like an overlay modal. If anyone on the team feels strongly about a "cancel" or "dismiss" option, I'm not opposed to add it. I stayed on the side of simplicity and focused on the most important things as CTAs.

Actions #19

Updated by Boone Gorges over 3 years ago

I'm happy with "x for cancel" - IMO there's no need for an additional button. I was just raising it for others to consider :)

Actions #20

Updated by Colin McDonald over 3 years ago

I think that the overlay is looking good and the X works to get out of it if need be. One language thing that might be good -- say "Delete folder but keep its contents" as we do now, then underneath say "Contents will be placed in the top level of the Library." Saying "Content" singular there is just a bit unclear to me.

Actions #21

Updated by Sonja Leix over 3 years ago

Colin McDonald wrote:

I think that the overlay is looking good and the X works to get out of it if need be. One language thing that might be good -- say "Delete folder but keep its contents" as we do now, then underneath say "Contents will be placed in the top level of the Library." Saying "Content" singular there is just a bit unclear to me.

Thanks Colin, I've made that simple copy update and now we just need an official sign off for implementation.

Actions #22

Updated by Matt Gold over 3 years ago

It looks good to me!

Actions #23

Updated by Boone Gorges over 3 years ago

Hi Sonja - Thanks very much for the latest version of the comps. I've started working through them and I've got a couple of questions for you.

1. Could you please provide a folder icon? I'm using Dashicons but they don't have an icon for a closed folder, so I may need an image, similarly formatted to the file-type icons you provided (pdf, etc)

2. You've got a button for 'Add New Folder' but there's no mockup for it. I've left this out for the time being. IMO the ability to add an empty folder could create some confusion, since at the moment the folder filter dropdown on the Library view doesn't show empty folders (though the Folder dropdown when editing/creating an item does). But if we do want this, I'd like some visuals. This could be something as simple as a new item at the top/bottom of the folder list, in Edit mode, with a blank title.

3. For the action links (Cancel, Delete, Rename) I added underlining on hover.

4. For AJAX animations: When renaming a folder, I added a spinner to the 'Update' button. This follows the convention when creating or editing a library item. When deleting, the dialog library I'm using makes it difficult to use spinners (because I can't easily keep the dialog open after the user clicks). So instead, I'm setting opacity:.5 for the whole interface and disabling other links until the request is complete; the user knows it's ready when the opacity returns and the deleted item is removed from the list.

A brief gif is attached, which demonstrates most of the functionality. I'll also put it up on cdev for anyone who's interested in initial testing. Let's hold off on full-fledged testing until after Sonja and I have finished our first rounds of design sign-off.

Actions #24

Updated by Sonja Leix over 3 years ago

Boone Gorges wrote:

Hi Sonja - Thanks very much for the latest version of the comps. I've started working through them and I've got a couple of questions for you.

1. Could you please provide a folder icon? I'm using Dashicons but they don't have an icon for a closed folder, so I may need an image, similarly formatted to the file-type icons you provided (pdf, etc)

The designs have a closed folder icon already. Do you mean you need an open folder icon?

2. You've got a button for 'Add New Folder' but there's no mockup for it. I've left this out for the time being. IMO the ability to add an empty folder could create some confusion, since at the moment the folder filter dropdown on the Library view doesn't show empty folders (though the Folder dropdown when editing/creating an item does). But if we do want this, I'd like some visuals. This could be something as simple as a new item at the top/bottom of the folder list, in Edit mode, with a blank title.

Good points. Let's discuss today.

3. For the action links (Cancel, Delete, Rename) I added underlining on hover.

Great!

4. For AJAX animations: When renaming a folder, I added a spinner to the 'Update' button. This follows the convention when creating or editing a library item. When deleting, the dialog library I'm using makes it difficult to use spinners (because I can't easily keep the dialog open after the user clicks). So instead, I'm setting opacity:.5 for the whole interface and disabling other links until the request is complete; the user knows it's ready when the opacity returns and the deleted item is removed from the list.

I like this transition!

A brief gif is attached, which demonstrates most of the functionality. I'll also put it up on cdev for anyone who's interested in initial testing. Let's hold off on full-fledged testing until after Sonja and I have finished our first rounds of design sign-off.

The flow looks great in the gif! Thanks for sharing.

Actions #25

Updated by Boone Gorges over 3 years ago

The designs have a closed folder icon already. Do you mean you need an open folder icon?

No, I mean: can you provide me with an image file?

Actions #26

Updated by Sonja Leix over 3 years ago

Boone Gorges wrote:

The designs have a closed folder icon already. Do you mean you need an open folder icon?

No, I mean: can you provide me with an image file?

Yes, absolutely. Attached are a PNG and SVG, let me know if you need it in a different size or file format and I'll provide it.

Actions #27

Updated by Colin McDonald over 3 years ago

Sonja, we'll look here for the "Add new folder" mockup we discussed on the call when you have it. We talked about how it could be good for people to be able to add folders this way, when they'll have zero items initially, rather than just during an individual item upload. One example would be a professor trying to add many folders quickly, or adding a folder that students will then upload assignments into later.

Boone's last gif mockup could change based on our #13371 progress with displaying folder names more prominently in the Library, but we'll continue that conversation there. I think the functionality is still the same at this point.

Actions #28

Updated by Boone Gorges over 3 years ago

Boone's last gif mockup

Minor correction, but it's not a mockup. The feature has been built :-D But yes, the question of how folders are displayed in the Library itself (as opposed to the Edit Folders pane) is separate altogether from this ticket.

Actions #29

Updated by Colin McDonald over 3 years ago

Duly noted, and mockup mockery duly absorbed. Thanks for clarifying, and of course for getting this built so quickly!

Actions #30

Updated by Sonja Leix over 3 years ago

I'd like to add the "add new folder" ui inline above the list of folders. This keeps the user on one screen and will makes it easy in case a user wants to add add multiple folders in a row.

Flow would be as follows:
User clicks on "Add folder" button
Add new folder UI appears above list of folders and cursor is automatically focused on the text field
User adds folder name and clicks "add folder" > New folder appears in list of folders (sorted alphabetically, or as currently implemented)
–OR user clicks on "cancel" to exit the add folder flow

Let me know what you think.

Actions #31

Updated by Matt Gold over 3 years ago

that makes sense to me

Actions #32

Updated by Boone Gorges over 3 years ago

I've built the 'Add New Folder' tool. A brief gif is attached. It's ready to test on cdev.

Actions #33

Updated by Matt Gold over 3 years ago

Looks good!

Actions #34

Updated by Colin McDonald over 3 years ago

Agreed, it's great!

Actions #35

Updated by Sonja Leix over 3 years ago

Looks great, Boone! Thanks for the swift implementation!

Actions #36

Updated by Sonja Leix over 3 years ago

Updated the mockups based on our conversation on Friday.
I've changed the "Library folders" page title to "Manage folders" to be consistent with the link that leads to this page.

I've also created mobile designs for this screen. Let's treat overlays on mobile as we always do – let me know if you need any further guidance on that. We'll look at mobile overlays during the redesign project more closely.

Actions #37

Updated by Boone Gorges over 3 years ago

Thanks, Sonja. I've implemented these changes.

Actions #38

Updated by Colin McDonald over 3 years ago

Scott did some mobile testing and saw a couple things:

- Add New Item and search icon overlap (see attached)
- The Manage Folder screen seems like it could use a little styling so that the content appears on one line (see attached)

Actions #39

Updated by Boone Gorges over 3 years ago

Thanks for the screenshots, Colin. I'm not seeing either of these on cdev. It looks like Scott might've been testing using a browser that was caching the production stylesheets. Try again, loading in a private window, or after clearing the browser cache.

Actions #40

Updated by Colin McDonald over 3 years ago

Thanks, Boone. I double-checked in cdev and wasn't able to see these mobile issues, either. I'll loop back with Scott and make sure he's testing with the right window/cache setup.

Actions #41

Updated by Boone Gorges over 3 years ago

  • Status changed from Testing Required to Resolved
Actions

Also available in: Atom PDF