[6.x] Enhanced Asset Browser by duncanmcclean · Pull Request #11807 · statamic/cms

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean · 2025-05-20T16:30:43Z

Continuation of #11785.

Changes:

Removes left-over logic from being able to switch between asset containers
- Tabs were removed from the asset browser in [5.x] Remove container tabs from Asset Manager #10392, in favour of the CP nav.
Removes the /cp/asset-containers view.
- We don't link to it anywhere and it's currently broken anyways. It's still used as an AJAX endpoint though.
Uses the new UI dropdown components in the top-right dropdown
Renamed the asset thumbnails preference key, to make it more consistent with other preference keys.
Ensured the "mode" toggle can never be set to null
Fixed a bug when creating folders in Grid mode, when there's no existing folders.
Adds keyboard shortcuts for moving between previous & next assets.
- cmd + left arrow and cmd + right arrow will save the asset and navigate to the previous/next asset.
  - You can use ctrl instead of cmd on Windows & Linux.
- It'll handle pagination - so if you're viewing the last asset on the 1st page, it'll navigate to the 1st asset on the 2nd page.
Allowed for moving assets & folders using drag and drop.

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Otherwise, you could end up with no selected mode in the asset browser.

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

…exist.

I didn't realise there was a mixin for this when I built it. Much nicer now.

jackmcdade · 2025-05-23T20:17:06Z

This is looking awesome! Nice work @duncanmcclean :D

A few todos here (not all for you)

Style the drag asset state @jackmcdade
Need Prev/Next navigation buttons in addition to shortcuts @duncanmcclean
When navigating between next/prev assets, should check to see if any data changed before saving so you don't get a bunch of "Saved Asset" toasts when you're just cruising through and looking at images. @duncanmcclean

… state

duncanmcclean added 22 commits May 20, 2025 10:33

One asset container at a time.
2e039a7

Use new dropdown components
01337e5

Prevent warnings about actionOpened
e372def

wip
fb5f791

Move new folder events into sharedAssetEvents object
d3db98a

Do away with unused asset container index view
dc6e733
It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it. Keeping the endpoing since we *do* use it via AJAX.

We won't be navigating between containers anymore.
b2ee3eb

Don't keep track of container here. It never changes.
d786cb2

Rename thumbnail size preference key
e875cd7
It should be nested under the `assets` key (like columns, sort direction, etc). It should also be in snake case.

Ensure toggle group always has a value.
6be4505
Otherwise, you could end up with no selected mode in the asset browser.

Ability to navigate between previous/next assets
33fa784
Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)

Ensure folders can be created in Grid mode, when no existing folders …
ce86581
…exist.

Prevent the images themselves being dragged
9da783d

Drag & drop assets and folders in grid mode
a24c92c

Prevent upload overlay showing when dragging assets & folders
593f12e

Remove data attributes. I never ended up using them.
971fd34

Dry up new folder stuff.
1a57ba4
I didn't realise there was a mixin for this when I built it. Much nicer now.

Use the same order between two asset browser components.
f344ddb

Merge remote-tracking branch 'origin/ui' into asset-browser
b630bca

Uncomment assets css
e764448

Drag & drop assets and folders in table mode
8616dc4

Prevent moving assets & folders without permission
dd03e60

duncanmcclean marked this pull request as ready for review May 23, 2025 13:55

duncanmcclean requested a review from jackmcdade May 23, 2025 13:55

duncanmcclean added 2 commits May 28, 2025 12:49

Add previous/next buttons
0489cb9

Only save when navigating between prev/next assets when there's dirty…
49cbe0a
… state

jackmcdade merged commit 209d907 into uiMay 28, 2025

jackmcdade deleted the asset-browser branch May 28, 2025 23:34

jackmcdade changed the title ~~[6.x] Asset Browser~~ [6.x] Enhanced Asset Browser Aug 21, 2025