c8robin/cakephp-rootui

Plugin for using RootUI with a CakePHP application

v0.0.2-alpha 2021-09-23 18:30 UTC

Requires

• php: >=7.2
• cakephp/cakephp: ~4.2.0

Requires (Dev)

• phpunit/phpunit: ^8.5 || ^9.3

MIT

README

Root UI theme for CakePHP applications

Root UI is a minimalist responsive theme, more info here: https://themeforest.net/item/rootui-react-admin-dashboard/24852340

This plugin will allow you to use that theme with your CakePHP application.

NOTE: this plugin does NOT contain the required Root UI files!

Need to refactor because it contains a Helper and a Cell that should not be part of the theme. To be split off into separate plugin.

Requirements

• CakePHP
• RootUI theme: the theme will provide the necessary css, js, img and font files that this plugin relies on

Installation

You can install this plugin into your CakePHP application using composer.

The recommended way to install composer packages is:

composer require c8robin/cakephp-rootui

Using the RootUi plugin

Load the plugin

bin\cake plugin load RootUi

Set RootUi as your theme. Do this in your AppController::beforeRender() method

public function beforeRender(EventInterface $event)
{
    parent::beforeRender($event);

    $this->viewBuilder()->setTheme('RootUi');
}

Make sure to use the theme's templates for rendering form controls and paginator elements. Also, add your own CSS and js if needed. Put the following in your AppView::initialize() method:

public function initialize(): void
{
    $this->loadHelper('Paginator', ['templates' => 'RootUi.paginator-templates']);
    $this->loadHelper('Form', ['templates' => 'RootUi.ctform']);
    $this->loadHelper('RootUi.Nav');

    $this->append('css');
    echo $this->Html->css('myapp.css');
    $this->end();
}

You can insert navigation links in the menu on the left by creating menu items with the Nav helper, provided by the plugin.

For instance, still in AppView::initialize() :

    $this->start('nav');
        echo $this->Nav->navLabel('Get started');
        echo $this->Nav->navItem('Item 1', $this->Url->build(['controller' => 'Controller1', 'action' => 'index']), 'plus', $this->getRequest()->getParam('controller') == 'Controller1');
        echo $this->Nav->navItem('Item 2', $this->Url->build(['controller' => 'Controller2', 'action' => 'dashboard']), 'box', $this->getRequest()->getParam('controller') == 'Controller2');
    $this->end();

Notice how you can use a check on the current controller to make a nav item current or not.