- Reworked the UI a bit

meta/i18n/en/lean.caching.json

@@ -1,3 +1,6 @@
 {
-  "clear": "Clear"
+  "title": "Caching -- LEAN",
+  "page-title": "LEAN - Caching",
+  "clear": "Clear",
+  "breadcrumb": "Caching"
 }

meta/i18n/en/lean.console.json

@@ -1,5 +1,5 @@
 {
   "title": "Console -- LEAN",
-  "page-title": "LEAN - Console"
+  "page-title": "Console"
 
 }

meta/i18n/en/lean.request.json

@@ -2,6 +2,7 @@
   "title": "Request -- LEAN",
   "page-title": "LEAN - Request",
   "route": {
+    "breadcrumb": "Routes",
     "header": "List of active routes",
     "name": "Name",
     "uri": "URI",

meta/i18n/en/lean.storage.json

@@ -4,6 +4,7 @@
 
   "database": {
     "header": "List of databases",
+    "breadcrumb": "Database",
     "name": "Database",
     "adapter": "Adapter",
     "host": "Hostname:port",
@@ -13,7 +14,7 @@
     "table": {
       "header": "Tables details",
       "fields": "{$count} fields",
-      "name": "Name",
+      "name": "Table Name",
       "actions": "Actions",
       "table-fields" : "Fields in table",
       "create": "Create table",

meta/i18n/en/lean.templating.json

@@ -0,0 +1,6 @@
+{
+  "title": "Templating -- LEAN",
+  "page-title": "LEAN - Templating",
+  "breadcrumb": "Templating",
+  "header": "Views"
+}

meta/i18n/en/lean.update.json

@@ -0,0 +1,8 @@
+{
+  "title": "Update -- LEAN",
+  "page-title": "LEAN - Update",
+  "git": {
+    "breadcrumb": "Update",
+    "header": "Git Status"
+  }
+}

meta/i18n/fr/lean.console.json

@@ -2,6 +2,5 @@
     "title" : "Console -- LEAN",
     "page-title": "Console",
     "breadcrumb" : {
-        "index" : "Negundo"
     }
 }

meta/i18n/fr/lean.debugging.json

@@ -1,7 +1,7 @@
 {
     "title" : "Debugging -- LEAN",
     "page-title": "Déboguage",
-    "breadcrumb" : {
-        "index" : "Negundo"
+    "logs": {
+        "breadcrumb": "Logs"
     }
 }

meta/i18n/fr/lean.storage.json

@@ -13,7 +13,7 @@
     "table": {
       "header": "Tables details",
       "fields": "{$count} fields",
-      "name": "Name",
+      "name": "Table Name",
       "actions": "Actions",
       "table-fields" : "Fields in table",
       "create": "Create table",
@@ -22,7 +22,8 @@
     }
   },
   "session": {
-    "header": "List of sessions",
+    "header": "Liste des sessions",
+    "breadcrumb": "Sessions",
     "count": "{$count} session(s)"
   }
 

src/Lib/ConsoleControllerTrait.php

@@ -15,7 +15,7 @@ use Picea;
 
 #[Security(locked: false)]
 #[Taxus("dev")]
-#[\Notes\Route\Attribute\Object\Route(method: [ 'GET', 'POST', 'DELETE'] , base: "/~")]
+#[\Notes\Route\Attribute\Object\Route(method: [ 'GET', 'POST' ] , base: "/~")]
 trait ConsoleControllerTrait
 {
     use \Lean\ControllerTrait;
@@ -27,4 +27,9 @@ trait ConsoleControllerTrait
         $this->session = $session;
         $this->container = $container;
     }
+
+    public function version() : string
+    {
+        return "0.4.1";
+    }
 }

view/lean-console/base/asset/lean.css

@@ -14,33 +14,38 @@
 .btn-green {background: rgba(0,155,0,0.5);color: rgba(255, 255, 255, 0.9);}
 .btn-blue {background: rgba(0,0,155,0.5);color: rgba(255, 255, 255, 0.9);}
 
+body{background:#f3f3f9}
 code {white-space:pre-line;font-family:monospace;color: #e6e6e6;background: #343537;display: block;padding: 1rem;line-height: 1.5em;border: 1px solid #2e2e30;}
-h1 {font-size:2rem;color:#525960}
 body {font-family:Helvetica Neue, Helvetica, Arial, sans-serif;}
 summary {cursor:pointer;}
 
-#body-main {background:#dfe3f9;min-height:calc(100vh - 90px);display:flex}
+#body-main {min-height:calc(100vh - 30px);display:flex}
 
 /* Header */
-#body-header {background: #5e5e5e; color:#fff; min-height:60px;line-height:60px;padding:0 1rem;border-bottom: 2px solid #9b9595;}
-#body-header .page-title {font-size:1.5rem}
-#body-header .page-title:before {content:"🔳"; margin-right:10px}
+#body-header {background: #fff; color:#fff; min-height:60px;line-height:60px;padding:0 1rem;position:sticky;top:0;border-bottom:1px solid #ebedee;}
+#right-panel {max-width:calc(100% - 240px);width:100%;margin-left:auto}
+#subheader {background:#fff; padding: 1rem 1.4rem;display:flex;justify-content: space-between;box-shadow:0 1px 2px rgba(55,65,75,0.15)}
+#subheader h1 {font-size:1.1rem;font-size:inherit; font-weight:bold}
+#subheader .breadcrumb {font-size:0.9rem;display:flex;align-items:end}
+#subheader .breadcrumb-item + .breadcrumb-item:before {content:"›";padding:0 6px;}
 
 /* Footer */
-#body-footer {background: #475262;color: #fff;height: 30px;line-height: 30px;font-size: 0.8rem;padding: 0 0.5rem;text-align: right;border-top:2px solid #434446;}
+#body-footer {background: #fff;color: #333;height: 30px;line-height: 30px;font-size: 0.8rem;padding: 0 0.5rem;text-align: right;border-top:1px solid #ebedee;}
 
 /* Sidebar */
-#main-nav {background:#1e1e1e;border-top:2px solid #46494f;min-width:210px;color:#fff;font-family:consolas, courier new, monospace;font-size:0.9rem}
-#main-nav label {color: #a4a4a4;background:rgba(0,0,0,0.2);text-transform:uppercase ; display:block;padding:0.8rem 1rem;font-size:1.15em;}
+#main-nav {background:#242528;width:240px;color:#fff;font-family:consolas, courier new, monospace;font-size:0.9rem;position:fixed;top:0;bottom:0;overflow-y:scroll;padding-bottom:2rem;border-right: 2px solid #333;}
+#main-nav .app-title {font-size:1.3rem; text-align:center;padding:1.8rem 0}
+#main-nav .app-title:before {content:"🔳"; margin-right:10px}
+#main-nav label {color: #a4a4a4;text-transform:uppercase ; display:block;padding:0.8rem 1rem;font-size:1.15em;}
 #main-nav label:before {content:"⊙"; margin-right:10px}
-#main-nav a {color: #efecec;text-decoration:none;display:block;padding:0rem 1rem;background:rgba(255,255,255,0.05);transition:all 0.3s ease;line-height:3em;font-size:0.9em}
+#main-nav a {color: #efecec;text-decoration:none;display:block;padding:0 1rem 0 2rem;transition:all 0.3s ease;line-height:3em;font-size:0.9em}
 #main-nav a:before {content:"›"; margin-right:10px;line-height:3em}
 #main-nav a:hover {background:rgba(255,255,255,0.1)}
-#main-nav li + li {border-top:1px solid #555}
 
 /* Main content */
-#main-content {padding:4vh 2vw;border-top:2px solid #7d7d7d;width:100%;}
-#main-content section {border-radius:4px;box-shadow: 1px 1px 3px rgba(0,0,0,0.5)}
-#main-content section article {font-family: Courier New , Courier, monospace;font-size: 0.8em;background:#fff;padding:2vh 1vw;}
-#main-content section header {background:#e8e8e8;padding:2vh 1vw;font-size:1.4em;color: #4b4848;border-top-left-radius: 4px;border-top-right-radius: 4px;}
-#main-content section footer {background:#f9f9f9;padding:2vh 1vw;border-bottom-left-radius: 4px;bottom: 4px;}
+#main-content {padding:4vh 2vw;width:100%;margin-left:auto;}
+#main-content section {border-radius:0.3rem;box-shadow: 0 1px 2px rgba(56,65,74,.15)}
+#main-content section article {border-radius:0.3rem;font-family: Courier New , Courier, monospace;font-size: 0.8em;background:#fff;padding:1.5rem;}
+#main-content section header {border-top-left:0.3rem;border-top-right:4px;background:#fff;padding:1rem 1rem;font-size:1.2em;color: #4b4848;border-bottom:1px solid #e9ebec;display:flex;align-items:center}
+#main-content section footer {border-bottom-left:0.3rem;border-bottom-right:0.3rem;background:#f9f9f9;padding:2vh 1vw;}
+

view/lean-console/base/console/main-nav.phtml

@@ -1,4 +1,6 @@
 <nav id="main-nav">
+    <div class="app-title">LEAN {{ $this->version() }}</div>
+
     <label>{% lang "lean.nav.lean.label" %}</label>
     <ul>
         <li><a href="{% route 'lean.console:home' %}">{% lang "lean.nav.lean.dashboard" %}</a></li>
@@ -31,5 +33,4 @@
     <ul>
         <li><a href="{% route 'lean.console:debugging-logs' %}">{% lang "lean.nav.debugging.logs" %}</a></li>
     </ul>
-
-</nav>
+</nav>

view/lean-console/base/layout.phtml

@@ -21,18 +21,30 @@
 </head>
 
 <body>
-<header id="body-header">
-    {% section "header" %}{% endsection %}
-</header>
-
 <main id="body-main">
     {% section "nav" %}
-    {% view "lean-console/base/console/main-nav" %}
+        {% view "lean-console/base/console/main-nav" %}
     {% endsection %}
 
-    <section id="main-content">
-        {% section "content" %}{% endsection %}
-    </section>
+    <div id="right-panel">
+        <header id="body-header">
+            {% section "header" %}{% endsection %}
+        </header>
+
+        <div id="subheader">
+            <h1>{% section "subheader" %}{% _ "page-title" %}{% endsection %}</h1>
+            {% section "breadcrumb" %}
+                <ul class="breadcrumb">
+                    <li class="breadcrumb-item">Console</li>
+                    {% section "breadcrumb-items" %}{% endsection %}
+                </ul>
+            {% endsection %}
+        </div>
+
+        <section id="main-content">
+            {% section "content" %}{% endsection %}
+        </section>
+    </div>
 </main>
 
 <footer id="body-footer">

view/lean-console/page/caching/picea.phtml

@@ -8,13 +8,18 @@
     <div class="page-title">{% _ "page-title" %}</div>
 {% endsection %}
 
+{% section "breadcrumb-items" %}
+    <li class="breadcrumb-item">{% _ 'breadcrumb' %}</li>
+{% endsection %}
+
 {% section "content" %}
     {% foreach $list as $path => $folder %}
         <section>
             <header>
-                <h1>{{ $path }}</h1>
+                <h2>{{ $path }}</h2>
+
                 {% ui:form.post "caching.picea" %}
-                <button class="btn-red" type="submit">{% _ 'clear' %}</button>
+                    <button class="btn-red" type="submit">{% _ 'clear' %}</button>
                 {% ui:endform %}
             </header>
 
@@ -41,7 +46,7 @@
     <style>
         section > header {display:flex;justify-content: space-between}
         .picea h5 {font-size:1.5em; line-height:2em; font-weight:bold;text-decoration:underline}
-        .picea strong.grid {background: #353535;color: #fff;}
+        .picea strong.grid {background: #242528;color: #fff;}
         .picea .grid {padding:0.66rem 0.3rem;align-items:center}
         .picea .grid strong {color:#444}
         .picea .grid:nth-child(even) {background: #e3e3e3 }

view/lean-console/page/debugging/logs.phtml

@@ -1,6 +1,6 @@
 {% extends "lean-console/base/layout" %}
 
-{% language.set "lean.caching" %}
+{% language.set "lean.debugging" %}
 
 {% title _("title") %}
 
@@ -8,10 +8,14 @@
     <div class="page-title">{% _ "page-title" %}</div>
 {% endsection %}
 
+{% section "breadcrumb-items" %}
+    <li class="breadcrumb-item">{% _ 'logs.breadcrumb' %}</li>
+{% endsection %}
+
 {% section "content" %}
         <section>
             <header>
-                <h1>{{ $path }}</h1>
+                <h2>{{ $path }}</h2>
 
                 {% ui:form.get current_url() %}
                     {% ui:select 'logfile', array_combine($files, $files), get('file') ?? $open %}

view/lean-console/page/request/route.phtml

@@ -8,10 +8,14 @@
     <div class="page-title">{% _ "page-title" %}</div>
 {% endsection %}
 
+{% section "breadcrumb-items" %}
+    <li class="breadcrumb-item">{% _ 'route.breadcrumb' %}</li>
+{% endsection %}
+
 {% section "content" %}
     <section>
         <header>
-            <h1>{% _ 'route.header' %}</h1>
+            <h2>{% _ 'route.header' %}</h2>
         </header>
 
         <article class="routes">
@@ -40,7 +44,7 @@
     </section>
 
     <style>
-        .routes strong.grid {background: #353535;color: #fff;}
+        .routes strong.grid {background: #242528;color: #fff;}
         .routes .grid {padding:0.66rem 0.3rem}
         .routes .grid strong {color:#444}
         .routes .grid:nth-child(even) {background: #e3e3e3 }

view/lean-console/page/storage/database.phtml

@@ -10,7 +10,12 @@
     <div class="page-title">{% _ "page-title" %}</div>
 {% endsection %}
 
+{% section "breadcrumb-items" %}
+    <li class="breadcrumb-item">{% _ 'database.breadcrumb' %}</li>
+{% endsection %}
+
 {% section "content" %}
+
     {% if $connections %}
         {% foreach $connections as $connection %}
             <section>
@@ -28,7 +33,7 @@
                         <div class="col db-connection">{{ $connection->name }}</div>
                         <div class="col db-adapter">{{ $connection->adapter()::class }}</div>
                         <div class="col db-host">{{ $connection->adapter()->hostname ?? '-' }}:{{ $connection->adapter()->port ?? '-' }}</div>
-                        <div class="col db-name">{{ $connection->adapter()->database ?? '-' }}</div>
+                        <div class="col db-name">{{ $connection->adapter()->database ?? $connection->adapter()->path ?? '-' }}</div>
                         <div class="col db-username">{{ $connection->adapter()->username ?? '-' }}</div>
                     </div>
 
@@ -59,7 +64,7 @@
                                                 {% php $createAll[] = $entity %}
 
                                                 <div class="text-right">
-                                                    <button name="create" value="{{$entity}}" class="btn-blue">🗸 {% _ 'database.table.create' %}</button>
+                                                    <button name="create" value="{{$entity}}" class="btn-blue">&#x2713; {% _ 'database.table.create' %}</button>
                                                 </div>
                                             {% break %}
 
@@ -67,7 +72,7 @@
                                                 {% php $alterAll[] = $entity %}
 
                                                 <div class="text-right">
-                                                    <button name="alter" value="{{$entity}}" class="btn-blue">🗸 {% _ 'database.table.alter' %}</button>
+                                                    <button name="alter" value="{{$entity}}" class="btn-blue">&#x2713; {% _ 'database.table.alter' %}</button>
                                                 </div>
                                             {% break %}
                                         {% endswitch %}
@@ -77,13 +82,13 @@
 
                             {% if ($createAll ?? 0) > 1 %}
                                 <div class="text-right" style="padding:0.5rem 0">
-                                    <button name="createAll" value="{{ implode(',', $createAll) }}" class="btn-red">🗸 {% _ 'database.table.createAll' %}</button>
+                                    <button name="createAll" value="{{ implode(',', $createAll) }}" class="btn-red">&#x2713; {% _ 'database.table.createAll' %}</button>
                                 </div>
                             {% endif %}
 
                             {% if ($alterAll ?? 0) > 1 %}
                                 <div class="text-right" style="padding:0.5rem 0">
-                                    <button name="alterAll" value="{{ implode(',', $alterAll) }}" class="btn-red">🗸 {% _ 'database.table.alterAll' %}</button>
+                                    <button name="alterAll" value="{{ implode(',', $alterAll) }}" class="btn-red">&#x2713; {% _ 'database.table.alterAll' %}</button>
                                 </div>
                             {% endif %}
                         {% ui:endform %}
@@ -94,7 +99,7 @@
     {% endif %}
 
     <style>
-        .databases strong.grid {background:#181818;color:#fff}
+        .databases strong.grid {background: #242528;color:#fff}
 
         .databases .db-grid {padding:0.66rem 0.3rem}
         .databases .db-grid strong {color:#444}

view/lean-console/page/storage/session.phtml

@@ -8,10 +8,14 @@
     <div class="page-title">{% _ "page-title" %}</div>
 {% endsection %}
 
+{% section "breadcrumb-items" %}
+    <li class="breadcrumb-item">{% _ 'session.breadcrumb' %}</li>
+{% endsection %}
+
 {% section "content" %}
     <section>
         <header>
-            <h1>{% _ 'session.header' %}</h1>
+            <h2>{% _ 'session.header' %}</h2>
         </header>
 
         <article class="sessions">
@@ -34,7 +38,7 @@
     </section>
 
     <style>
-        .sessions strong.grid {background: #353535;color: #fff;}
+        .sessions strong.grid {background: #242528;color: #fff;}
         .sessions .grid {padding:0.66rem 0.3rem;align-items:center;justify-content:space-between;}
         .sessions .grid strong {color:#444}
         .sessions .grid:nth-child(even) {background: #e3e3e3 }

view/lean-console/page/templating/picea.phtml

@@ -8,12 +8,15 @@
     <div class="page-title">{% _ "page-title" %}</div>
 {% endsection %}
 
-{% section "content" %}
+{% section "breadcrumb-items" %}
+    <li class="breadcrumb-item">{% _ 'breadcrumb' %}</li>
+{% endsection %}
 
+{% section "content" %}
     {% foreach $list as $path => $folder %}
         <section>
             <header>
-                <h1>{{ $path }}</h1>
+                <h2>{{ $path }}</h2>
             </header>
 
             <article class="picea">
@@ -33,7 +36,7 @@
 
     <style>
         .picea h5 {font-size:1.5em; line-height:2em; font-weight:bold;text-decoration:underline}
-        .picea strong.grid {background: #353535;color: #fff;}
+        .picea strong.grid {background: #242528;color: #fff;}
         .picea .grid {padding:0.66rem 0.3rem;align-items:center}
         .picea .grid strong {color:#444}
         .picea .grid:nth-child(even) {background: #e3e3e3 }

view/lean-console/page/update/index.phtml

@@ -9,25 +9,25 @@
 {% endsection %}
 
 {% section "content" %}
-<section>
-    <header>
-        <h1>{% _ 'git.header' %}</h1>
-    </header>
+    <section>
+        <header>
+            <h1>{% _ 'git.header' %}</h1>
+        </header>
 
-    <article class="updates">
-        <div class="git-status">
-            <strong style="display:block;margin-bottom:7px">'git status' output</strong>
+        <article class="updates">
+            <div class="git-status">
+                <strong style="display:block;margin-bottom:7px">'git status' output</strong>
 
-            <code>
-                {% foreach $status as $line %}
-                    <div>
-                        {% if $line %}
-                            {{ $line }}
-                        {% endif %}
-                    </div>
-                {% endforeach %}
-            </code>
-        </div>
-    </article>
-</section>
+                <code>
+                    {% foreach $status as $line %}
+                        <div>
+                            {% if $line %}
+                                {{ $line }}
+                            {% endif %}
+                        </div>
+                    {% endforeach %}
+                </code>
+            </div>
+        </article>
+    </section>
 {% endsection %}