Filament•16mo ago

Issue with UI of Curator

Sorry to tag you @awcodes but since you wrote this plugin you may know what's going on. I installed the CSS and Cropperjs, but my CuratorPicker, looks weird: theme.css

@import 'node_modules/cropperjs/dist/cropper.css';
@import 'vendor/awcodes/filament-curator/resources/css/plugin.css';

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

@import 'node_modules/cropperjs/dist/cropper.css';
@import 'vendor/awcodes/filament-curator/resources/css/plugin.css';

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

vite.config.js

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js','resources/css/filament/app/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js','resources/css/filament/app/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

postcss.config.js

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-curator/resources/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-curator/resources/**/*.blade.php',
    ],
}

76 Replies

Brian Kidd•16mo ago

You should post this in the dedicated #curator channel

Dennis Koch•16mo ago

Did you register your custom theme?

awcodes•16mo ago

also make sure to include the plugin's views in your tailwind.config.js

MatthewOP•16mo ago

yes I did. I used php artisan make:filament-theme admin if thats whats what you mean

Dennis Koch•16mo ago

That’s the command to create a theme. Did you register it in your context provider?

MatthewOP•16mo ago

sorry im late

MatthewOP•16mo ago

I get this:

MatthewOP•16mo ago

Oh wait, this is for v1? How do I register the theme?

Dennis Koch•16mo ago

There's a whole section on the docs for this: https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

MatthewOP•16mo ago

I get this warning but it works anyways. Thank you

MatthewOP•15mo ago

Whether I have constrained true/false the image always takes up the whole preview, and it looks cut off as well. Am I mssing anything?

    public static function form(Form $form): Form
    {
        $record = $form->getRecord(); 

        return $form
            ->schema([
                Section::make()
                    ->columns(2)
                    ->schema([
                        TextInput::make("name"),
                        
                        CuratorPicker::make("attachment")
                            ->label('Media')
                            ->multiple()
                            ->constrained(false)
                            ->pathGenerator(CustomPathGenerator::class), // see path generators below
                            // ->directory('Year1'),
                    ])

            ]);
    }

    public static function form(Form $form): Form
    {
        $record = $form->getRecord(); 

        return $form
            ->schema([
                Section::make()
                    ->columns(2)
                    ->schema([
                        TextInput::make("name"),
                        
                        CuratorPicker::make("attachment")
                            ->label('Media')
                            ->multiple()
                            ->constrained(false)
                            ->pathGenerator(CustomPathGenerator::class), // see path generators below
                            // ->directory('Year1'),
                    ])

            ]);
    }

Also the delete modal appears to be having some issues rendering

MatthewOP•15mo ago

I have updated the config files

MatthewOP•15mo ago

Also, when I click ctrl + left mouse click I cant select multiple files 😅

MatthewOP•15mo ago

@awcodes? 🙃 🙏

awcodes•15mo ago

@thethunderturner did you recently update Filament?

MatthewOP•15mo ago

Yes I did. Or at least, it was updated automatically when I entered composer update Iirc when I downloaded your package it downgraded filament to .41

awcodes•15mo ago

and you have php artisan filament:upgrade as part of your composer update? my plugin. doesn't have any restriction on the Filament version

MatthewOP•15mo ago

Uhhm, I think so. I will check in 10m and get back to you

awcodes•15mo ago

if you don't, add it. and also run it, then run npm run build to also recompile your theme.

MatthewOP•15mo ago

I do

    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan filament:upgrade"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },

    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan filament:upgrade"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },

MatthewOP•15mo ago

When I run npm run build I get the following warnings:

awcodes•15mo ago

definitely somthing wrong with your setup.

awcodes•15mo ago

MatthewOP•15mo ago

I followed exactly what the guide said :/ do you mind showing the main contents of your config? or at least if I can have a look at the curator demo repo I might find whats wrong. Unless, you have it private?

MatthewOP•15mo ago

Found it: https://github.com/awcodes/curator-demo

GitHub

GitHub - awcodes/curator-demo

Contribute to awcodes/curator-demo development by creating an account on GitHub.

awcodes•15mo ago

make sure you're looking at the 3.x branch

MatthewOP•15mo ago

Yes of course And you were right, there was a misconfiguration

MatthewOP•15mo ago

now i have this

MatthewOP•15mo ago

I still cant select multiple file though :(

awcodes•15mo ago

Did you set the picker to have ->multiple() It’s working for me.

MatthewOP•15mo ago

Yes I did

    public static function form(Form $form): Form
    {
        $record = $form->getRecord(); 

        return $form
            ->schema([
                Section::make("Year 1 Programming (23hj2)")
                    ->label("change")
                    ->description('Prevent abuse by limiting the number of requests per period')
                    ->schema([
                        TextInput::make("name"),

                        CuratorPicker::make("attachment")
                            ->label('Media')
                            ->multiple()
                            ->constrained(true)
                            ->pathGenerator(CustomPathGenerator::class), // see path generators below
                            // ->directory('Year1'),
                    ])
            ]);
    }

    public static function form(Form $form): Form
    {
        $record = $form->getRecord(); 

        return $form
            ->schema([
                Section::make("Year 1 Programming (23hj2)")
                    ->label("change")
                    ->description('Prevent abuse by limiting the number of requests per period')
                    ->schema([
                        TextInput::make("name"),

                        CuratorPicker::make("attachment")
                            ->label('Media')
                            ->multiple()
                            ->constrained(true)
                            ->pathGenerator(CustomPathGenerator::class), // see path generators below
                            // ->directory('Year1'),
                    ])
            ]);
    }

Maybe there is an issue with the way I set up Section and its messing everything up

awcodes•15mo ago

Maybe view cache then. Not sure. Section shouldn’t matter.

MatthewOP•15mo ago

I cleared the veiws multiple times and built again

awcodes•15mo ago

Any console errors? Maybe the livewire request is failing.

MatthewOP•15mo ago

oeee yes

MatthewOP•15mo ago

huh

awcodes•15mo ago

Weird, explains your issue though. The js is breaking for some reason which means that after that it will no longer work. Unfortunately that isn’t specific to the plugin, so I’m not sure of the fix for you. Everything is working correctly in the demo.

MatthewOP•15mo ago

ok. Should I remove and reinstall the package? Maybe that fixes it All the configurations are away from vendor so a reinstall and npm run build could do the trick

awcodes•15mo ago

Possibly. File upload is a Filament component. And I’m not sure why livewire can’t find it. Maybe remove the vendor folder and reinstall everything.

MatthewOP•15mo ago

me neither. Indeed very weird After a clean reinstall, I get the same error wth

awcodes•15mo ago

i have an alias that runs:

rm -rf vendor
rm composer.lock
rm -rf node_modules
rm package-lock.json
composer install
npm i
npm run build

rm -rf vendor
rm composer.lock
rm -rf node_modules
rm package-lock.json
composer install
npm i
npm run build

sometimes everything just gets out of sync

MatthewOP•15mo ago

Still the same issue xD 😅 Could it a livewire messup?

awcodes•15mo ago

hmm. i'm seeing that error too, but my multi select is working. 🤣 working for me in both firefox and chrome

MatthewOP•15mo ago

Just tried on firefox, and its not working there either 😅 So what do we do from now?

awcodes•15mo ago

are you on windows?

MatthewOP•15mo ago

Linux Im looking through the files Where do you define when cmd is pressed? Maybe linux php isnt recognizing cmd and needs ctrl

MatthewOP•15mo ago

I found this from your curation.js in the dist file

MatthewOP•15mo ago

Im not sure if they have anything to do with each other

awcodes•15mo ago

not sure what you're looking at there. it's the metakey (event.metaKey), which is 'cmd' on mac for example i should probably update the verbiage though

MatthewOP•15mo ago

Indeed now it works I digged through the files and that was indeed the cause

awcodes•15mo ago

🤦‍♂️

MatthewOP•15mo ago

I will push a PR ok? 🙂

awcodes•15mo ago

that's on me push a PR for what?

MatthewOP•15mo ago

Fixing the issue I can make so that it places a special key based on the OS

awcodes•15mo ago

it's already doing that that's what metaKey does and it's already part of the code

MatthewOP•15mo ago

Hmm

awcodes•15mo ago

if ($wire.isMultiple && event && event.metaKey) {
                if (this.isSelected(mediaId)) {
                    let toRemove = Object.values($wire.selected).find(obj => obj.id == mediaId)
                    $wire.removeFromSelection(toRemove.id);
                    return;
                }

                $wire.addToSelection(mediaId);

                return;
            }

if ($wire.isMultiple && event && event.metaKey) {
                if (this.isSelected(mediaId)) {
                    let toRemove = Object.values($wire.selected).find(obj => obj.id == mediaId)
                    $wire.removeFromSelection(toRemove.id);
                    return;
                }

                $wire.addToSelection(mediaId);

                return;
            }

MatthewOP•15mo ago

yes yeah I saw it. I thought metaKey was exclusive to mac

awcodes•15mo ago

no, it's not specific to MAC, it just says to use whatever the metaKey is on the OS this is what needs to be updated 'Cmd + Click to select multiple files.' just the text it shouldn't say Cmd

MatthewOP•15mo ago

But that is just text. For me it doesnt work with metaKey I changed metaKey to ctrlKey and then it worked

awcodes•15mo ago

is it not the 'windows' key on your keyboard sounds more like an issue with the OS, or in livewire. control click won't work on mac, since that opens a contextual menu.

MatthewOP•15mo ago

ctrl + click also doesnt work for me (with metaKey), or alt + click, even if I have the fn on, no key works.

awcodes•15mo ago

weird, metaKey is the appropriate binding for multi select. it's that way even in most OSs and other software

MatthewOP•15mo ago

Well then it certaintly wont work on most linux or windows systems. When you press meta you open up the windows/linux task bar When you press and click, you move the window around

awcodes•15mo ago

well i'll give it some thought but it's not going to be as easy as just changing it to control

MatthewOP•15mo ago

Alright. Thank you:). It was a fun little exploration haha Maybe make a trait where it allows you to change the key used? Idk if that degrades the UI though

awcodes•15mo ago

maybe a named parameter in the ->multiple() method. i'll think about it. can't worry about it right now though.

MatthewOP•15mo ago

OK, thank you

MatthewOP•15mo ago

On another note, do you know why when uploading multiple images they appear half cropped? Could it be because you arent exactly using FileUpload?

awcodes•15mo ago

I am using filepond. That’s the native filament FileUpload field. There’s some styling on the drop area, maybe that’s affecting something.

MatthewOP•15mo ago

Quick question, is it possible to have an action that will display images in something like a popup in the red area, and not in a new tab? Can that be done with filament?

awcodes•15mo ago

i'm sure it's possible, but not currently part of the package. Also please use the #curator channel for questions specific to the plugin.

MatthewOP•15mo ago

Okk

Gaming

Programming

Issue with UI of Curator