Filament•12mo ago

menu item background color changing

I have selected as background color for the menu items a blue as you see in the first image. Now have created a app/Filament/Resources/ReservationResource/Pages/DatesPage.php I all this page from an action. This page has no Menu Item. I have set protected static bool $shouldRegisterNavigation = false; When the site loads, the meny item background gets yellow (Filament Standard). Image 2. Where is my error please? I want to keep my defined blue as background color.

12 Replies

awcodes•12mo ago

what's in your custom page's blade file?

Falk Maria Zeitsprung•12mo ago

hi @awcodes , there is:

<x-filament::page>
    <h1>{{ $availability->reservableItem->center->name }}</h1>
    <h2>{{ $availability->reservableItem->name }}</h2>
    <h3>{{ $availability->start_time }}</h3>
    <h4>{{ $availability->duration_txt }}</h4>

    <table>
        @foreach($recurrenceDates as $date)
            <tr>
                <td>{{ $date }}</td>
            </tr>
        @endforeach
    </table>
</x-filament::page>

<x-filament::page>
    <h1>{{ $availability->reservableItem->center->name }}</h1>
    <h2>{{ $availability->reservableItem->name }}</h2>
    <h3>{{ $availability->start_time }}</h3>
    <h4>{{ $availability->duration_txt }}</h4>

    <table>
        @foreach($recurrenceDates as $date)
            <tr>
                <td>{{ $date }}</td>
            </tr>
        @endforeach
    </table>
</x-filament::page>

awcodes•12mo ago

That looks fine. It could be a plugin's stylesheet.

Falk Maria Zeitsprung•12mo ago

Ahh thanks! I have this Page:

<?php

namespace App\Filament\Resources\ReservationResource\Pages;

use App\Filament\Resources\ReservationResource;
use App\Models\Availability;
use Filament\Resources\Pages\Page;
use Recurr\Rule;
use Recurr\Transformer\ArrayTransformer;
use Recurr\Transformer\ArrayTransformerConfig;

class DatesPage extends Page
{

    public static string $view = 'filament.resources.reservation-resource.pages.dates-page';
    protected static bool $shouldRegisterNavigation = false;
    protected static string $resource = ReservationResource::class;
    protected static ?string $title = 'Listado Fechas y Horas';

    protected static function shouldRegisterNavigation(): bool
    {
        //return auth()->user()->hasRole(['Root', 'Admin']);
        return false;
    }

    public function mount(Availability $availability)
    {
        abort_unless(auth()->user()->hasAnyRole(['Root', 'Admin', 'User']), 403);

        // Get the recurrence rule
        $rule = new Rule($availability->recurrence_pattern);
        // poner la cantidad de repeticiones
        $rule->setCount(25);

        // Convert the rule to an array of dates
        $transformer = new ArrayTransformer();
        $transformerConfig = new ArrayTransformerConfig();
        $transformerConfig->enableLastDayOfMonthFix();
        $transformer->setConfig($transformerConfig);
        $recurrences = $transformer->transform($rule);

        $recurrenceStartDates = [];
        foreach ($recurrences as $recurrence) {
            $recurrenceStartDates[] = $recurrence->getStart()->format('d-m-Y H:i');
        }

        $this->availability = $availability;
        $this->recurrenceDates = $recurrenceStartDates;

    }

    protected function getTableActionsPosition(): ?string
    {
        return Position::BeforeCells;
    }


}

<?php

namespace App\Filament\Resources\ReservationResource\Pages;

use App\Filament\Resources\ReservationResource;
use App\Models\Availability;
use Filament\Resources\Pages\Page;
use Recurr\Rule;
use Recurr\Transformer\ArrayTransformer;
use Recurr\Transformer\ArrayTransformerConfig;

class DatesPage extends Page
{

    public static string $view = 'filament.resources.reservation-resource.pages.dates-page';
    protected static bool $shouldRegisterNavigation = false;
    protected static string $resource = ReservationResource::class;
    protected static ?string $title = 'Listado Fechas y Horas';

    protected static function shouldRegisterNavigation(): bool
    {
        //return auth()->user()->hasRole(['Root', 'Admin']);
        return false;
    }

    public function mount(Availability $availability)
    {
        abort_unless(auth()->user()->hasAnyRole(['Root', 'Admin', 'User']), 403);

        // Get the recurrence rule
        $rule = new Rule($availability->recurrence_pattern);
        // poner la cantidad de repeticiones
        $rule->setCount(25);

        // Convert the rule to an array of dates
        $transformer = new ArrayTransformer();
        $transformerConfig = new ArrayTransformerConfig();
        $transformerConfig->enableLastDayOfMonthFix();
        $transformer->setConfig($transformerConfig);
        $recurrences = $transformer->transform($rule);

        $recurrenceStartDates = [];
        foreach ($recurrences as $recurrence) {
            $recurrenceStartDates[] = $recurrence->getStart()->format('d-m-Y H:i');
        }

        $this->availability = $availability;
        $this->recurrenceDates = $recurrenceStartDates;

    }

    protected function getTableActionsPosition(): ?string
    {
        return Position::BeforeCells;
    }


}

may be i forgot something? I also wonder that i cant use Tailwind commans in the blade. They are ignored.

awcodes•12mo ago

you are using a custom theme right?

Falk Maria Zeitsprung•12mo ago

i only use blue instead of yellow.

awcodes•12mo ago

can i see your tailwind.config.js

Falk Maria Zeitsprung•12mo ago

tailwind.config.js

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './vendor/filament/**/*.blade.php',

    ],
    darkMode: 'class',
    theme: {
        /*fontFamily: {
            sans: ['"Source Sans Pro"', 'Helvetica', 'Arial' ,'sans-serif']
        },*/
        extend: {
            colors: {
                transparent: 'transparent',
                current: 'currentColor',
                danger: colors.rose,
                primary: colors.sky, //colors.cyan colors.emerald, //colors.blue,
                success: colors.green,
                warning: colors.yellow,
                dunkelgruen: '#1A3336',
                gruen: '#24CD9C',
                hellblau: '#f5faff',
                schwarz: '#1D2120',
                grau: '#D6D6D6',
                hellgrau: '#F9F9F9',
                textkleingrau: '#575A59',
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './vendor/filament/**/*.blade.php',

    ],
    darkMode: 'class',
    theme: {
        /*fontFamily: {
            sans: ['"Source Sans Pro"', 'Helvetica', 'Arial' ,'sans-serif']
        },*/
        extend: {
            colors: {
                transparent: 'transparent',
                current: 'currentColor',
                danger: colors.rose,
                primary: colors.sky, //colors.cyan colors.emerald, //colors.blue,
                success: colors.green,
                warning: colors.yellow,
                dunkelgruen: '#1A3336',
                gruen: '#24CD9C',
                hellblau: '#f5faff',
                schwarz: '#1D2120',
                grau: '#D6D6D6',
                hellgrau: '#F9F9F9',
                textkleingrau: '#575A59',
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

awcodes•12mo ago

this part is odd and probably not needed:

'./resources/**/**/*.blade.php',      './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',

'./resources/**/**/*.blade.php',      './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',

but it looks ok i'm not seeing why that one page wouldn't be working.

Falk Maria Zeitsprung•12mo ago

you are right, thats odd thanks very much for watching it @awcodes !

awcodes•12mo ago

sorry i don't have a definitive answer for you. maybe try running a build, sometimes running dev can get hung up.

Falk Maria Zeitsprung•12mo ago

ah good idea! build gives the same result. Will check plugins.

Gaming

Programming

menu item background color changing