Skip to content

Redesign Designify Editor #520

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.

Sign up for GitHub

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

Merged
BijjuXD merged 4 commits into from
Sep 22, 2026
Merged

Redesign Designify Editor #520

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
17100c1
redesign Designify editor
jasonzli-DEV Sep 18, 2026
c6c5aa0
add translation files
jasonzli-DEV Sep 18, 2026
f8a512d
Merge branch 'develop' into ui/designify-redesign
jasonzli-DEV Sep 18, 2026
0066895
fix error page preview resets
jasonzli-DEV Sep 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 90 additions & 41 deletions app/Filament/Pages/Designify.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
use App\Contracts\Repository\SettingsRepositoryInterface;
use App\Filament\Components\Alert;
use App\Filament\Components\ImageInput;
use App\Filament\Widgets\PreviewWidget;
use App\Traits\Helpers\AvailableLanguages;
use Filament\Actions\Action;
use Filament\Forms\Components\ColorPicker;
Expand All @@ -19,13 +18,13 @@
use Filament\Notifications\Notification;
use Filament\Pages\Concerns\InteractsWithHeaderActions;
use Filament\Pages\Page;
use Filament\Schemas\Components\Group;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Schemas\Contracts\HasSchemas;
use Illuminate\Contracts\Config\Repository as ConfigRepository;
use Illuminate\Contracts\Console\Kernel;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\HtmlString;
use Illuminate\Support\Str;
Expand Down Expand Up @@ -177,8 +176,10 @@ protected function getFormSchema(): array
return [
Tabs::make('settings-tabs')
->disabled(fn (): bool => config('panel.load_environment_only'))
->live(debounce: 300)
->persistTabInQueryString()
->vertical()
->extraAttributes(['class' => 'designify-settings-tabs'])
->tabs([
Tab::make('general')
->label(trans('admin/settings.designify.general'))
Expand Down Expand Up @@ -240,8 +241,10 @@ private function environmentNotice(): array
private function generalSettings(): array
{
return [
Group::make()
->columns(2)
Section::make(trans('admin/settings.designify.section-footer'))
->description(trans('admin/settings.designify.section-footer-description'))
->icon('tabler-copyright')
->columns(1)
->schema([
Toggle::make('designify:customCopyright')
->label(trans('admin/settings.designify.custom-copyright'))
Expand All @@ -255,8 +258,10 @@ private function generalSettings(): array
->columnSpan(1),
]),

Group::make()
->columns(2)
Section::make(trans('admin/settings.designify.section-maintenance'))
->description(trans('admin/settings.designify.section-maintenance-description'))
->icon('tabler-tool')
->columns(1)
->schema([
Toggle::make('designify:isUnderMaintenance')
->label(trans('admin/settings.designify.maintenance-mode'))
Expand All @@ -270,8 +275,10 @@ private function generalSettings(): array
->columnSpan(1),
]),

Group::make()
->columns(2)
Section::make(trans('admin/settings.designify.section-behavior'))
->description(trans('admin/settings.designify.section-behavior-description'))
->icon('tabler-adjustments-horizontal')
->columns(1)
->schema([
Toggle::make('designify:alwaysShowKillButton')
->label(trans('admin/settings.designify.always-show-kill-button'))
Expand All @@ -295,8 +302,10 @@ private function generalSettings(): array
->columnSpan(1),
]),

Group::make()
->columns(3)
Section::make(trans('admin/settings.designify.section-destinations'))
->description(trans('admin/settings.designify.section-destinations-description'))
->icon('tabler-external-link')
->columns(1)
->schema([
TextInput::make('designify:statusCardLink')
->label(trans('admin/settings.designify.status-card-link'))
Expand All @@ -320,7 +329,7 @@ private function colorSettings(): array
{
return [
Section::make(trans('admin/settings.designify.basic-colors'))
->columns(4)
->columns(2)
->icon('tabler-palette')
->schema([
ColorPicker::make('designify:colorPrimary')->label(trans('admin/settings.designify.primary')),
Expand All @@ -330,7 +339,7 @@ private function colorSettings(): array
]),

Section::make(trans('admin/settings.designify.dark-colors'))
->columns(5)
->columns(2)
->icon('tabler-color-swatch')
->schema([
ColorPicker::make('designify:color50')->label('50'),
Expand All @@ -347,7 +356,7 @@ private function colorSettings(): array
]),

Section::make(trans('admin/settings.designify.light-colors'))
->columns(5)
->columns(2)
->icon('tabler-color-swatch')
->schema([
ColorPicker::make('designify:color50L')->label('50'),
Expand All @@ -368,8 +377,10 @@ private function colorSettings(): array
private function lookAndFeelSettings(): array
{
return [
Group::make()
->columns(4)
Section::make(trans('admin/settings.designify.section-navigation'))
->description(trans('admin/settings.designify.section-navigation-description'))
->icon('tabler-layout-sidebar')
->columns(1)
->schema([

Toggle::make('designify:sidebarLogout')
Expand All @@ -381,10 +392,12 @@ private function lookAndFeelSettings(): array
->label(trans('admin/settings.designify.panel-background'))
->helperText(trans('admin/settings.designify.panel-background-helper'))
->maxLength(255)
->columnSpan(2),
->columnSpanFull(),
]),
Group::make()
->columns(4)
Section::make(trans('admin/settings.designify.section-surface'))
->description(trans('admin/settings.designify.section-surface-description'))
->icon('tabler-brush')
->columns(1)
->schema([
Toggle::make('designify:allocationBlur')
->label(trans('admin/settings.designify.allocation-blur'))
Expand All @@ -410,15 +423,17 @@ private function lookAndFeelSettings(): array
])
->searchable()
->native(false)
->columnSpan(2),
->columnSpanFull(),
]),
];
}

private function layoutSettings(): array
{
return [
Group::make()
Section::make(trans('admin/settings.designify.section-layout'))
->description(trans('admin/settings.designify.section-layout-description'))
->icon('tabler-layout-dashboard')
->columns(1)
->schema([
ToggleButtons::make('designify:cardType')
Expand All @@ -433,7 +448,7 @@ private function layoutSettings(): array
'row' => trans('admin/settings.designify.row'),
])
->required()
->columnSpan(2),
->columnSpanFull(),
ToggleButtons::make('designify:layoutType')
->label(trans('admin/settings.designify.navbar-sidebar-layout'))
->inline()
Expand All @@ -450,15 +465,17 @@ private function layoutSettings(): array
'accent' => trans('admin/settings.designify.accent'),
])
->required()
->columnSpan(2),
->columnSpanFull(),
]),
];
}

private function alertSettings(): array
{
return [
Group::make()
Section::make(trans('admin/settings.designify.section-alerts'))
->description(trans('admin/settings.designify.section-alerts-description'))
->icon('tabler-bell')
->schema([
Repeater::make('designify:alerts')
->label(trans('admin/settings.designify.alert-messages'))
Expand Down Expand Up @@ -493,8 +510,10 @@ private function alertSettings(): array
private function siteSettings(): array
{
return [
Group::make()
->columns(2)
Section::make(trans('admin/settings.designify.section-identity'))
->description(trans('admin/settings.designify.section-identity-description'))
->icon('tabler-world-www')
->columns(1)
->schema([
TextInput::make('designify:site_title')
->label(trans('admin/settings.designify.site-title'))
Expand Down Expand Up @@ -532,7 +551,7 @@ private function errorSettings(): array
{
return [
Section::make(trans('admin/settings.designify.error-404'))
->columns(2)
->columns(1)
->iconColor('warning')
->icon('tabler-device-imac-exclamation')
->schema([
Expand All @@ -548,11 +567,15 @@ private function errorSettings(): array
->label(trans('admin/settings.designify.message'))
->rows(3)
->required()
->columnSpan(2),
->columnSpanFull(),
ImageInput::make('designify:errors:404:image')
->label(trans('admin/settings.designify.site-image')),
ColorPicker::make('designify:errors:404:color')
->label(trans('admin/settings.designify.site-color')),
]),

Section::make(trans('admin/settings.designify.error-403'))
->columns(2)
->columns(1)
->icon('tabler-device-imac-exclamation')
->iconColor('primary')
->schema([
Expand All @@ -568,13 +591,17 @@ private function errorSettings(): array
->label(trans('admin/settings.designify.message'))
->rows(3)
->required()
->columnSpan(2),
->columnSpanFull(),
ImageInput::make('designify:errors:403:image')
->label(trans('admin/settings.designify.site-image')),
ColorPicker::make('designify:errors:403:color')
->label(trans('admin/settings.designify.site-color')),
]),

Section::make(trans('admin/settings.designify.error-500'))
->iconColor('danger')
->icon('tabler-device-imac-exclamation')
->columns(2)
->columns(1)
->schema([
TextInput::make('designify:errors:500:title')
->label(trans('admin/settings.designify.title'))
Expand All @@ -588,15 +615,21 @@ private function errorSettings(): array
->label(trans('admin/settings.designify.message'))
->rows(3)
->required()
->columnSpan(2),
->columnSpanFull(),
ImageInput::make('designify:errors:500:image')
->label(trans('admin/settings.designify.site-image')),
ColorPicker::make('designify:errors:500:color')
->label(trans('admin/settings.designify.site-color')),
]),
];
}

private function sidebarSettings(): array
{
return [
Group::make()
Section::make(trans('admin/settings.designify.section-sidebar-links'))
->description(trans('admin/settings.designify.section-sidebar-links-description'))
->icon('tabler-link-plus')
->schema([
Repeater::make('designify:sidebarButtons')
->label(trans('admin/settings.designify.sidebar-links'))
Expand All @@ -616,7 +649,7 @@ private function sidebarSettings(): array
->label(trans('admin/settings.designify.open-in-new-tab'))
->inline(false),
])
->columns(3)
->columns(1)
->addActionLabel(trans('admin/settings.designify.add-link'))
->columnSpanFull(),
]),
Expand All @@ -628,6 +661,26 @@ protected function getFormStatePath(): ?string
return 'data';
}

public function updatedData(): void
{
$this->dispatch('designify-preview-updated', settings: $this->getPreviewSettings());
}

public function getPreviewSettings(): array
{
$preview = [];

foreach ($this->data ?? [] as $key => $value) {
if (! is_string($key) || ! str_starts_with($key, 'designify:')) {
continue;
}

Arr::set($preview, str_replace(':', '.', Str::after($key, 'designify:')), $value);
}

return $preview;
}

public function save(): void
{
if (config('panel.load_environment_only')) {
Expand Down Expand Up @@ -662,6 +715,7 @@ public function save(): void
->send();

$this->dispatch('$refresh');
$this->dispatch('designify-saved', settings: $this->getPreviewSettings());
$this->js("window.dispatchEvent(new CustomEvent('reload-iframe'))");
}

Expand All @@ -687,9 +741,11 @@ public function resetToDefaults(): void

$this->dispatch('$refresh');

$this->dispatch('designify-reset');

// We have to reload the window after resetting designify settings.
// Please open PR if there's another way without running js code.
$this->js('window.location.reload()');
$this->js('window.__designifySkipBeforeUnload = true; window.location.reload()');
}

protected function getHeaderActions(): array
Expand All @@ -713,11 +769,4 @@ protected function getHeaderActions(): array
->action(fn () => $this->resetToDefaults()),
];
}

protected function getFooterWidgets(): array
{
return [
PreviewWidget::class,
];
}
}
12 changes: 0 additions & 12 deletions app/Filament/Widgets/PreviewWidget.php
View file
Open in desktop

This file was deleted.

Loading
Loading