fonts, async component, fixed modals, Link panel

Gruntfile.coffee

@@ -25,6 +25,7 @@ module.exports = (grunt) ->
           'node_modules/bootstrap/dist/js/bootstrap.min.js'
           'src/AdminLTE/assets/custom/nette.init.js'
           'src/AdminLTE/assets/custom/modal.js'
+          'src/AdminLTE/assets/custom/toggle-menu.js'
         ]
 
     uglify:

README.md

@@ -167,10 +167,7 @@ class AdminPresenter extends Presenter
 ## TODO:
 
 - Improve menu control and better authorization for nested items
-- Modals
-- Some extra components from AdminLTE easy to use from app
 - More examples
-- More configurable
 
 
 ## Inspiration

src/AdminLTE/AdminControl.php

@@ -132,6 +132,14 @@ protected function createComponentLoginForm(): LoginForm
         return $this->loginFormFactory->create();
     }
 
+    /**
+     * @param string $title
+     */
+    public function setTitle(string $title): void
+    {
+        $this->defaults['title'] = $title;
+    }
+
     /**
      * @param string   $content
      * @param object[] $flashes
@@ -152,6 +160,7 @@ public function render(string $content, array $flashes = []): void
                 __DIR__ . '/templates/' . $template,
                 array_merge([
                     'content' => $content,
+                    'collapsedMenu' => (bool) ($this->request->getCookie('sidebar-toggle-collapsed') ?? false),
                     'flashes' => $flashes,
                     'webLoader' => $this->webLoader->getFilesCollectionRender(),
                 ], $this->defaults)

src/AdminLTE/Components/LazyScreen/LazyScreen.php

@@ -0,0 +1,49 @@
+<?php declare(strict_types=1);
+
+namespace Chap\AdminLTE\Components\LazyScreen;
+
+use Nette\Application\UI\Control;
+use Nette\Bridges\ApplicationLatte\Template;
+use Nette\ComponentModel\IComponent;
+
+class LazyScreen extends Control
+{
+    /**
+     * @var bool
+     */
+    public $loaded = false;
+
+    /**
+     * @var callable
+     */
+    private $factoryCallback;
+
+    /**
+     * @param callable $factory
+     */
+    public function __construct(callable $factory)
+    {
+        $this->factoryCallback = $factory;
+    }
+
+    public function handleLoad(): void
+    {
+        $this->loaded = true;
+        $this->redrawControl('async');
+    }
+
+    /**
+     * @return IComponent|null
+     */
+    protected function createComponentAsync(): ?IComponent
+    {
+        return call_user_func($this->factoryCallback);
+    }
+
+    public function render(): void
+    {
+        /** @var Template $template */
+        $template = $this->getTemplate();
+        $template->render(__DIR__ . DIRECTORY_SEPARATOR . 'template.latte', ['isLoaded' => $this->loaded]);
+    }
+}

src/AdminLTE/Components/LazyScreen/template.latte

@@ -0,0 +1,10 @@
+{snippet async}
+<div class="well">
+    {if $isLoaded}
+        {control async}
+    {else}
+        <a n:href="load!" class="async-load ajax"></a>
+        <div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>
+    {/if}
+</div>
+{/snippet}

src/AdminLTE/DI/Extension.php

@@ -22,9 +22,10 @@ private function getDefaultConfig(): array
 			'menu' => [],
 			'skin' => 'purple',
 			'shade' => 'dark',
+            'brand' => '<b>Admin</b>LTE',
 			'search' => 'sidebar', // top, sidebar, none
 			'footer' => '<strong>Copyright &copy; 2019 <a href="http://www.chap.cz">Jan Loufek</a></strong>',
-			'version' => '1.0.0',
+			'version' => '1.1.0',
 			'profileImage' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAC91BMVEUAAAB/xMSAwcGCwsKFw8Noz9ds2Nht1dVx0NBx0tJy0dF1z894zMx5ycl9yMh+xMR/wsKAwMBV0+Nu0tJ+xMRhzdtj0d9u09Ry0NB4zMxVyd9hzdZh0Npny9hr1NR+xcVfzddgwtRay9le0t5VyeBayNNa0Nlm0Npr09dUyNlazth1zc13zMxN0OFRyt1U091d1OJQyt1o0thCvtdIyORy0NBTxtpUydhczdtBwd9RyNhm2tx1zc1g2+FVz+Jf0d1Iw91Rx9xSzN9Z1eQkuOVG0O1OxttOyNxPx9tHwt5Jw9tLxNwostpEwtpKxd5Oyd9h3OBH0/NN1u8/wd5DxeA8u9lAwd5CwNxDw95Ewt07tNE/wttAwN5Cw94/v9o+v9s/v9w/wdw6weI8v9w/wd1AvdY6vuE8v9w5vdw8wN8lrtY8vt05vdsssNQ5vtszv+EnuOE3vNw3vd42vNw4vds1utozutw1vNs2vt02vNwyu9s0uts2tNMjrtY0u9wxuNo4ttMxu90zutw0utw1u90xudsrsNUvudwzutozutwxutszvd8qtNsvudw2vdswudsxu+Eut9oxvd8zt9kxutwtt9svudwuuNwys9QstNgxu9ozuNclstswu9wwttstt9wrttsst9wostgrt9wptNorttwuudorttouutwiteEkt+Esut4otNsptdsqttwntNoptdontNsotdwps9kptNoqtNkotNomtdsptdsksdontdootdsptdoltd0mtNsntNsls9oks9smtNsntdskstontNsls9oks9oltd0jstoltNshstwls9sjstokstoisdogsdshsdojstsesNsfsNogsNogsdofrtggsNohsNkbrdkesNkhsdkrtdgcrtkcr9ocr9sdr9odr9ser9ogr9gbrtobrtscrtkhsdomtdwardkartkbrtkcrtofsNofsdkgsNkot9wpt9sYrNgYrNkZrNkZrdkZrdoardkardoartobrtkbr9qvHauRAAAA83RSTlMAAgICAgQEBAQEBAQEBAQEBAQGBgYICAgICAoKCgoKCgwMEhIUFBQUFBYWFhYYGBgYGhocHBweHh4gICAgIigqLCwuLjAwMDAwNDQ0ODo6PDw+PkRESEhISEhKTExMTlJSUlRWVlpeXmBgYmJmampucHBwdHR2eHh4enx8fIGBg4OFhYWHiYuLi4uPj5GRkZOTlZWVl5mZnZ2hoaGjo6Wpra2zs7e3t729v7+/w8PFx8fJycnJycvR0dPT09PX19fZ29vb3d3f4eHj4+Xl5+fp6+/v8/Pz8/X19ff39/f5+fn5+fn5+/v7+/v9/f39/f39/f0PpQQDAAACZElEQVQYGe3BVVQVURQG4F+xu7u7u7u7xu7u7u7uVuzCbuwWExsVuzuuoI5sLtaDi4frou7M8p45x5f9fWCMMcYYY4wxxhgTUL7v7K3bt+1YPrx+AqiXfdQ5OzncXloRaqUbe5dC8V9bHArVPEvhPOgFZTo+pgjY5yeBGl3fUcTWJIQKrV6QM7OgQKmb5JStM+TzIAM+WSBbUxsZmQnZdpOhe/kgVzUbGRsCuaaTiSOQ6xCZeF4IMqX3JTNNIFPlX2SmH2SqQqbGQKaWZGoZZKpDpqZCpqo/yUx/yJT7EZnpAqkukAlbOUjlTiauQK42gWRsDuRK6U2G3taGZAPI0CbIltaLDLysBemavSfnZkCBSeTU3mRQIPpqcuJkXiiRaEUAReRwESgSY8QzCidwfVaoU9fTTqFd7x4HKiXutM+P/rJ7D8sE1aLUGLrx0v2vX95cPTitcQr8J3lKly0aH0rlKBkVzhUuEAkSuVWf4Pnwt0cxOJF64qsPXksaJYcccVvv9KdgtwZlQARitT1FwewXB6aCBBW2BJHD5cE5EUaadnu+k8P5DrBa5N6+FNKddd0KxoND5uYLblBIn9wzwlLRFv2gsD6f2bBwfJ+eo+euOv6EwtmfHxaKvTKA/tWxXLDOZHLBgaSwSns/csViWCSbD7nErwWsMY9cdDomrFDiNbmqB6wwhVx2AhZwu0YuC6oEcfVIwDiIG0kCdkHcZhLwEeKOkogyEPaURDSAsG8koiGE6SRCgzCdRGgQppMIDcJ0EqFBmE4iNAjTSYQGYTqJ0CBMJxEaGGOMMcYYY4wxxkz8Abjl+JrI6Ox0AAAAAE lFTkSuQmCC',
 
 			'login' => [
@@ -34,10 +35,12 @@ private function getDefaultConfig(): array
             'cssFiles' => [
                 'mode' => 'remoteFA',
                 'localFA' => [
+                    "$dir/custom/fonts.css",
                     "$dir/full-admin.css",
                     "$dir/styles/font-awesome.min.css",
                 ],
                 'remoteFA' => [
+                    "$dir/custom/fonts.css",
                     "$dir/full-admin.css",
                     'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
                 ],

src/AdminLTE/Notifications/BasePanel.php

@@ -24,6 +24,7 @@ abstract class BasePanel extends Control implements IPanel
         ],
         'icon'        => 'bell-o',
         'linkAll'     => null,
+        'isDropdown'  => true,
         'allTitle'    => 'Show all',
         'headerTitle' => 'You have %d notifications.',
         'classType'   => '',
@@ -69,6 +70,17 @@ protected function setClassType(string $classType): self
         return $this;
     }
 
+    /**
+     * @param bool $isDropdown
+     * @return static
+     */
+    protected function setIsDropdown(bool $isDropdown): self
+    {
+        $this->parameters['isDropdown'] = $isDropdown;
+
+        return $this;
+    }
+
     /**
      * @param string $link
      * @return static

src/AdminLTE/Notifications/LinkPanel.php

@@ -0,0 +1,14 @@
+<?php declare(strict_types=1);
+
+namespace Chap\AdminLTE\Notifications;
+
+class LinkPanel extends BasePanel
+{
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->setIcon('envelope')
+            ->setIsDropdown(false);
+    }
+}

src/AdminLTE/Notifications/template.latte

@@ -1,9 +1,9 @@
 <li class="dropdown {$classType}-menu nav-item">
-    <a href="#" class="nav-link" data-toggle="dropdown">
+    <a href="{if $isDropdown}#{else}{$linkAll}{/if}" class="nav-link" {if $isDropdown}data-toggle="dropdown"{/if}>
         <i class="fa fa-{$icon}"></i>
         <span class="badge navbar-badge badge-{$counter[type]}" n:if="$counter[show] && $counter[count] > 0">{$counter[count]}</span>
     </a>
-    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right" n:if="$isDropdown">
         <span class="dropdown-header">{$headerTitle|translate}</span>
 
         <div class="dropdown-divider"></div>

src/AdminLTE/assets/custom/fonts.css

@@ -0,0 +1 @@
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);

src/AdminLTE/assets/custom/modal.js

@@ -1,14 +1,22 @@
-$("[modal]").unbind("click");
 
-$("[modal]").click(function(e) {
-    e.preventDefault();
-    $.ajax({
-        type: 'GET',
-        url: $(this).attr("href"),
-        data: {lte_no_layout: 1},
-        success: function (r) {
-            $("#modal .modal-content").html('<div class="mdl">'+r+'</div>');
-            $("#modal").modal("show");
-        }
+function initModals() {
+    $("[modal]").not(".modal-init").click(function(e) {
+        e.preventDefault();
+        $.ajax({
+            type: 'GET',
+            url: $(this).attr("href"),
+            data: {lte_no_layout: 1},
+            success: function (r) {
+                $("#modal .modal-content").html('<div class="mdl">'+r+'</div>');
+                $("#modal").modal("show");
+            }
+        });
     });
+    $("[modal]").not(".modal-init").addClass("modal-init");
+}
+
+initModals();
+$(document).ajaxComplete(function() {
+    console.log(111);
+    initModals();
 });

src/AdminLTE/assets/custom/nette.init.js

@@ -1,3 +1,9 @@
 $(function () {
     $.nette.init();
+});
+
+$( document ).ready(function() {
+    $("a.async-load").each(function () {
+        $.nette.ajax({ off: ['unique'], "url": this.getAttribute("href")});
+    });
 });

src/AdminLTE/assets/custom/toggle-menu.js

@@ -0,0 +1,10 @@
+$('.sidebar-toggle').click(function(event) {
+    event.preventDefault();
+    if (Boolean(sessionStorage.getItem('sidebar-toggle-collapsed'))) {
+        sessionStorage.setItem('sidebar-toggle-collapsed', '');
+        document.cookie = "sidebar-toggle-collapsed=0;path=/";
+    } else {
+        sessionStorage.setItem('sidebar-toggle-collapsed', '1');
+        document.cookie = "sidebar-toggle-collapsed=1;path=/";
+    }
+});

src/AdminLTE/templates/contentLogged.latte

@@ -1,39 +1,37 @@
-<body class="skin-{$skin} hold-transition sidebar-mini">
+<body class="skin-{$skin} hold-transition sidebar-mini {if $collapsedMenu}sidebar-collapse{/if}">
 <div class="wrapper">
-
     {include "header.latte"}
-
     <aside class="main-sidebar sidebar-dark-primary">
         <a href="{plink Homepage:}" class="brand-link">
-            <span class="brand-text"><b>Admin</b>LTE</span>
+            <span class="brand-text">{$brand|noescape}</span>
         </a>
-        <div class="sidebar">
-            {if $search === 'sidebar'}
-                {form search class=>"form-inline"}
-                    <div class="input-group">
-                        {input q class=> "form-control", placeholder=> "Search ..."}
-                        <span class="input-group-btn">{input submit class=>"btn btn-sidebar"}</span>
+        {if $search === 'sidebar'}
+            {form search class=>"form-inline"}
+                <div class="input-group">
+                    {input q class=> "form-control form-control-sidebar", placeholder=> "Search ...", type => "search"}
+                    <div class="input-group-append">
+                        {input submit class=>"btn btn-sidebar"}
                     </div>
-                {/form}
-            {/if}
-
+                </div>
+            {/form}
+        {/if}
+        <div class="sidebar">
             {control menu:menu}
         </div>
     </aside>
     <div class="content-wrapper px-4 py-2">
         {control menu:breadcrumb}
         <div class="container-fluid">
             {snippet flash}
-                <div n:foreach="$presenter->template->flashes as $flash" class="alert alert-{$flash->type}" n:block="flashes">
+                <div n:foreach="$presenter->template->flashes as $flash"
+                        class="alert alert-{$flash->type}" n:block="flashes">
                     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                     {$flash->message|translate}
                 </div>
             {/snippet}
             {$content|noescape}
         </div>
     </div>
-
     {include "footer.latte"}
-
 </div>
 </body>

src/AdminLTE/templates/header.latte

@@ -1,7 +1,9 @@
 <nav class="main-header navbar navbar-expand navbar-{$skin} navbar-{$shade}">
     <ul class="navbar-nav">
         <ul class="navbar-nav">
-            <li class="nav-item"><a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a></li>
+            <li class="nav-item">
+                <a class="nav-link sidebar-toggle" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
+            </li>
         </ul>
        {if $search === 'top'}
            {form search class=>"form-inline ml-3"}

src/AdminLTE/templates/modal.latte

@@ -1,3 +1,3 @@
-<section class="content">
+<section class="modal-body">
     {$content|noescape}
 </section>