Skip to content

Alert banner #1002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from
Draft

Alert banner #1002

wants to merge 16 commits into from

Conversation

ShadowComes
Copy link

@ShadowComes ShadowComes commented Feb 12, 2025

Aler Banner feature! 🚨

I ShadowComes ( Git: @ShadowComes Discord: shadowcomes) and Martin Oscar (Git: @rmartinoscar Discord: rmartinoscar) have created a alert banned that we are ready to share. 🔥 🚀
This alert banner is globally applyed, meaning that the users and admins will see the alert!
Discord Threads channel about this project 🧵

And everyone who has crazy ideas, please be wellcome to mention them!!! 😋

New features what we inclouded:

  • Added a tab in Settings for Alert Banner configuration for admins ⚠️
  • Enabled or Disabled alert
  • Choice between able to close the alert or to be temporary
  • Icon searching database - see in attachments a showcase for it 📹
  • Alert Status - A choice between various colours

The icon pick library repo:
https://github.com/lukas-frey/filament-icon-picker

image
image
image
Screenshot (104)
image
Showcase_video-icon_picker

Possible updates in upcoming time:

  • Alert duration time
  • Optimized character layout in banner that it doesn't overflow the panel :D

Inspiration reference

#892

@ShadowComes ShadowComes requested a review from a team as a code owner February 12, 2025 16:54
Copy link
Contributor

github-actions bot commented Feb 12, 2025

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@notAreYouScared
Copy link
Member

Please use tabler icons and not hero icons

Comment on lines +266 to +272
->options([
'info' => '<span class="text-info-600 dark:text-info-500">Info</span>',
'warning' => '<span class="text-warning-600 dark:text-warning-500">Warning</span>',
'danger' => '<span class="text-danger-600 dark:text-danger-500">Danger</span>',
'success' => '<span class="text-success-600 dark:text-success-500">Success</span>',
])
->allowHtml()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Im figuring out a way to use getOptionLabelUsing with html insead of hardcoding it in options so we can use

->getOptionLabelUsing(fn ($value, AlertBanner $alertBanner) => printf('<span class="%s">%s</span>', $alertBanner->getColorClasses($value), $value))

Also requires changing

public function getColorClasses(): string
{
return match ($this->getStatus()) {
'success' => 'text-success-600 dark:text-success-500',
'warning' => 'text-warning-600 dark:text-warning-500',
'danger' => 'text-danger-600 dark:text-danger-500',
default => 'text-info-600 dark:text-info-500',
};

to

    public function getColorClasses(?string $status = null): string
    {
        $status ??= $this->getStatus();
        return match ($status) {
            'success' => 'text-success-600 dark:text-success-500',
            'warning' => 'text-warning-600 dark:text-warning-500',
            'danger' => 'text-danger-600 dark:text-danger-500',
            default => 'text-info-600 dark:text-info-500',
        };
    }

https://discord.com/channels/883083792112300104/1338330020111978546/1338330020111978546

Comment on lines 249 to 263
->label(fn (Get $get) => trans('admin/setting.alert_banner.title') . " ({$get('alert_banner_title_length')}/32 characters)")
->required()
->maxLength(32)
->visible(fn (Get $get) => $get('ALERT_BANNER_ENABLED'))
->default(env('ALERT_BANNER_TITLE', config('panel.alert_banner.title')))
->reactive()
->afterStateUpdated(fn ($state, Set $set) => $set('alert_banner_title_length', strlen($state))),
TextArea::make('alert_banner_message')
->label(fn (Get $get) => trans('admin/setting.alert_banner.message') . " ({$get('alert_banner_message_length')}/114 characters)")
->required()
->maxLength(114)
->visible(fn (Get $get) => $get('ALERT_BANNER_ENABLED'))
->default(env('ALERT_BANNER_MESSAGE', config('panel.alert_banner.message')))
->reactive()
->afterStateUpdated(fn ($state, Set $set) => $set('alert_banner_message_length', strlen($state))),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/pelican-dev/panel/pull/1002/files#r1953058733
use the const in AlertBanner, remove afterStateUpdated() and hardcoded length

Copy link
Contributor

@rmartinoscar rmartinoscar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe i should make this a Draft ?

@ShadowComes
Copy link
Author

I have read the CLA Document and I hereby sign the CLA

@rmartinoscar rmartinoscar marked this pull request as draft February 12, 2025 17:13
@Boy132
Copy link
Member

Boy132 commented Feb 12, 2025

I like the basic idea of using AlertBanners as kind of global announcements, however, this should be it's own thing.
Stored in the database, support for multiple banners & showing a banner only on specific pages etc. This shouldn't be in the panel settings.

@lancepioch
Copy link
Member

I agree with @Boy132

cc @rmartinoscar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants