Custom Panel Skin

[taufik-nurrohman]

Panel will no longer support global $_['skin'] property in the future. It is your task to add GUI that can store some value to determine the current skin.

Extension author can add an option field to store and load the current $state->x->panel->skin value. Ideally, it should be located in the .state path, under the Panel tab.

$skin = $state->x->panel->skin ?? 'my-custom-skin';

// Add `my-custom-skin` skin option
if ('.state' === $_['path'] && 'g' === $_['task']) {
    $_['lot']['desk']['lot']['form']['lot'][1]['lot']['tabs']['lot']['panel']['lot']['fields']['lot']['skin'] = [
        'name' => 'state[x][panel][skin]',
        'type' => 'option',
        'value' => $skin,
        'lot' => [
            'my-custom-skin' => 'My Skin',
            'none' => 'None' // Allow user to disable the skin feature :)
        ],
        'stack' => 30
    ];
}

A Skin option should appear in the field list under the Panel tab:

If you hit the Update button, the state value will be stored as a skin property in the main .\state.php file:

return [
    'title' => 'Site Title',
    'description' => 'Site description.',
    // …
    'x' => [
        'panel' => [
            'skin' => 'my-custom-skin'
        ]
    ]
];

You can then use that value to load your skin assets when the skin name matches:

$current_skin = $state->x->panel->skin ?? "";

if ('my-custom-skin' === $current_skin) {
    $_['asset']['panel.skin.my-custom-skin'] = [
        'path' => '.\path\to\file.css',
        'stack' => 30 // Must be greater than the main panel style sheet `stack` value
    ];
}