OrchardCMS / OrchardCore

Orchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.
https://orchardcore.net
BSD 3-Clause "New" or "Revised" License
7.39k stars 2.38k forks source link

[Media picker] Open media picker full screen and collapse folder pane #10429

Open xperiandri opened 2 years ago

xperiandri commented 2 years ago

Is your feature request related to a problem? Please describe.

When you open a file picker to pick images there is too little space to view them. Only 4 images fit the screen. Which makes them hard to find visually.

Describe the solution you'd like

I want the ability to press a button and expand the picker to occupy a full page. And I want a button that collapses the left folder pane like in Azure DevOps.

deanmarcussen commented 2 years ago

Both ideas sound good, happy to take prs

Note there is a button already to show images in grid view (large thumbnails) or list view (smaller thumbnails)

Side Note: The left panel needs to be resizable, because long folder names scroll of the edge, and the delete button is not visibile, or usable in that case. Or the delete / add buttons need to be fixed, and the folder names ellipsized when they overrun

Skrypt commented 2 years ago

@deanmarcussen I see your point there :

https://user-images.githubusercontent.com/3228637/136421316-c5d93774-88a4-46e0-93c8-13ce0dd730eb.mp4

xperiandri commented 2 years ago

image

  1. Remove title in full screen
  2. Remove margins
  3. Move pagination to increase useful space
  4. Add collapse button the same as in admin menu
Skrypt commented 2 years ago

I like the idea to move the pager in the footer. Collapse makes sense. Remove title only in fullscreen mode but then you need to move back to close the modal? Then empty space is because of Bootstrap breakpoints. These are bootstrap columns with breakpoints.

sebastienros commented 2 years ago

What about expand the size but not be full-screen since in which case we would not see it's a modal. Would be great if you could help on this, maybe one feature at a time if it's too much work.

xperiandri commented 2 years ago

Remove title only in fullscreen mode but then you need to move back to close the modal?

Press Cancel button 🙂

xperiandri commented 2 years ago

What about expand the size but not be full-screen since in which case we would not see it's a modal.

There should be another toggle button (radio buttons like grid and list) that expands from modal mode to full-screen mode and back