Laravel-Backpack / FileManager

Admin interface for files & folders, using elFinder.
Other
94 stars 21 forks source link

add theme switching to elfinder #37

Closed pxpm closed 1 year ago

pxpm commented 1 year ago

Hey @jorgetwgroup thanks for the PR. Indeed, this was quite a bit of work even if you spared me some time by searching for the right themes, there were a lot of moving parts. 🙏

I wasn't able to make it work the way you were trying to do it. So I needed to re-think the css architecture to be able to have a "decent" looking elfinder.

This branch points to your branch so that you can see the difference between the implementations.

Basically I appended/removed the stylesheets as we need them. Some bit of extra work to style the iframe, but I think if we are not there yet, we are very close.

Can you and @karandatwani92 both have a quick look at this ? It's not to test file uploads etc, it's just to test the interface so it should not take you guys more than 10 minutes to test this.

The reason I ask you both is because this also has changes on the container sizing (at the moment as inline css but we can move it out to a class later). I will probably also ask @tabacitu after we 3 finish our back and forth and have this in a ready to merge state.

I only changed the standalonepopup (used in browser field) and the elfinder (used in this package) views.

It's missing to change the [X] that closes the popup, at the moment it's an image. I am still trying to decide if I create a dark image, or replace it completely with a css [X] that adapts the color depending on the scheme, so disregard that issue for now 👍

Don't forget you still need: https://github.com/Laravel-Backpack/theme-tabler/pull/116 too with this one.

Also if you already have elfinder installed you should delete the elfinder views from your resources/views/vendor/elfinder folder and publish them again with php artisan backpack:filemanager:install

Cheers

jcastroa87 commented 1 year ago

Hello @pxpm great work!!! finally this is going to the right place...

I try this scenarios and here the results:

On big dark screen work normal: Add-monster-Backpack-Admin-Panel

On small dark screen work normal: Add-monster-Backpack-Admin-Panel (1)

On small light screen work normal: Add-monster-Backpack-Admin-Panel (2)

If i access this from TinyMCE editor (Insert/Image) i didnt get the dark template and there is a white border Add-monster-Backpack-Admin-Panel (3)

But i can say this look great im very happy with this new approach.

Cheers.

karandatwani92 commented 1 year ago

The theme is my only concern. Previously, the elfinder theme was light in the dark mode. Now it's dark in the light mode.

The rest is same as @jorgetwgroup . Thanks @jorgetwgroup

jnoordsij commented 1 year ago

Was about to report an issue with a 404 on theme loading on the file manager page (https://demo.backpackforlaravel.com/admin/elfinder#elf_l1_Lw), but I think this may have been fixed by #37 as this sets cssAutoLoad : false which prevents the issue.

Can't check it yet, but if you update the demo, feel free to check if the 404 is gone!