From e8fd7863e5561a520a49e90fbe743781abc361c0 Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Tue, 26 Nov 2024 08:57:56 +0100
Subject: [PATCH] style fixes

---
 .../1-styling/componentCss/style.css          |   2 +-
 .../simply-toolbar/componentCss/darkmode.css  |   4 +-
 .../componentCss/simply-toolbar.css           |  10 +-
 .../simply-main-toolbar.html                  |  20 +++
 www/api/data/generated.html                   | 139 ++++--------------
 .../publish/pageTemplates/Publish App.html    |   3 -
 www/index.html                                | 139 ++++--------------
 7 files changed, 96 insertions(+), 221 deletions(-)

diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css
index 1ba9961..c6265b7 100644
--- a/www/api/data/components/1-styling/componentCss/style.css
+++ b/www/api/data/components/1-styling/componentCss/style.css
@@ -224,7 +224,7 @@ header {
     background-color: #404040;
     border-bottom: 2px solid #2222;
     vertical-align: middle;
-    z-index: 1;
+    z-index: 200;
 }
 header h1 {
     margin: 0;
diff --git a/www/api/data/components/simply-toolbar/componentCss/darkmode.css b/www/api/data/components/simply-toolbar/componentCss/darkmode.css
index 0b015f5..eff8a48 100644
--- a/www/api/data/components/simply-toolbar/componentCss/darkmode.css
+++ b/www/api/data/components/simply-toolbar/componentCss/darkmode.css
@@ -1,7 +1,7 @@
 :root {
-  --simply-toolbar-background: #404040;
+  --simply-toolbar-background: #222;
   --simply-toolbar-background-secondary: #333;
-  --simply-toolbar-font-color: #bbb;
+  --simply-toolbar-font-color: #ddd;
   --simply-toolbar-color-primary: #ea5922;
   --simply-toolbar-color-secondary: #ddd;
   --simply-toolbar-color-support: #444;
diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
index 7e1d130..c9817d9 100644
--- a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
+++ b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
@@ -61,6 +61,7 @@
   list-style: none;
   white-space: nowrap;
 }
+
 .simply-toolbar-section > ul > li.simply-text-format {
   margin-right: 4px;
 }
@@ -72,6 +73,9 @@
   min-height: var(--simply-toolbar-base-height);
   transform: translate3d(0,0,0);
   box-sizing: content-box;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
 }
 .simply-main-toolbar .simply-buttons {
   white-space: nowrap !important;
@@ -374,4 +378,8 @@ label.simply-subsection {
 }
 .simply-main-toolbar.simply-collapse li:nth-child(n+2) {
   display: none;
-}
\ No newline at end of file
+}
+.simply-toolbar button.simply-toolbar-logo {
+  padding: 0px 5px;
+  box-sizing: content-box;
+}
diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-main-toolbar.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-main-toolbar.html
index c8caed1..2c8d1f0 100644
--- a/www/api/data/components/simply-toolbar/componentTemplates/simply-main-toolbar.html
+++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-main-toolbar.html
@@ -105,5 +105,25 @@
         </li>
       </ul>
     </template>
+    <template data-simply-template="Publish App">
+      <ul class="simply-buttons">
+        <li>
+          <button data-simply-command="simply-about" class="simply-toolbar-logo">
+            <simply-render rel="logo"></simply-render>
+          </button>
+        </li>
+        <li>
+          <button data-simply-command="simply-preview">
+            <i class="fa fa-eye"></i>Preview
+          </button>
+        </li>
+        <li>
+          <button data-simply-command="saveAppHtml">
+            <i class="fa fa-check"></i>Publish
+          </button>
+        </li>
+      </ul>
+    </template>
+    
   </div>
 </section>
\ No newline at end of file
diff --git a/www/api/data/generated.html b/www/api/data/generated.html
index 2fb3db4..a7e67bb 100644
--- a/www/api/data/generated.html
+++ b/www/api/data/generated.html
@@ -260,7 +260,7 @@
           background-color: #404040;
           border-bottom: 2px solid #2222;
           vertical-align: middle;
-          z-index: 1;
+          z-index: 200;
       }
       header h1 {
           margin: 0;
@@ -525,9 +525,9 @@
       }
       /* darkmode */
       :root {
-        --simply-toolbar-background: #404040;
+        --simply-toolbar-background: #222;
         --simply-toolbar-background-secondary: #333;
-        --simply-toolbar-font-color: #bbb;
+        --simply-toolbar-font-color: #ddd;
         --simply-toolbar-color-primary: #ea5922;
         --simply-toolbar-color-secondary: #ddd;
         --simply-toolbar-color-support: #444;
@@ -603,6 +603,7 @@
         list-style: none;
         white-space: nowrap;
       }
+      
       .simply-toolbar-section > ul > li.simply-text-format {
         margin-right: 4px;
       }
@@ -614,6 +615,9 @@
         min-height: var(--simply-toolbar-base-height);
         transform: translate3d(0,0,0);
         box-sizing: content-box;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
       }
       .simply-main-toolbar .simply-buttons {
         white-space: nowrap !important;
@@ -917,6 +921,11 @@
       .simply-main-toolbar.simply-collapse li:nth-child(n+2) {
         display: none;
       }
+      .simply-toolbar button.simply-toolbar-logo {
+        padding: 0px 5px;
+        box-sizing: content-box;
+      }
+      
     </style>
     <!-- /Component CSS -->
     <!-- Page CSS -->
@@ -3050,35 +3059,7 @@
         </template>
       </ul>
     </div>
-    <!-- HTML%20structure -->
-    <div class="simply-toasts">
-      <ul class="simply-toasts simply-space" data-simply-list="alerts">
-        <template data-simply-template="error">
-          <li class="simply-toast simply-toast-error simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
-            <div class="simply-space" data-simply-field="message"></div>
-          </li>
-        </template>
-        <template data-simply-template="warning">
-          <li class="simply-toast simply-toast-warning simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
-            <div class="simply-space" data-simply-field="message"></div>
-          </li>
-        </template>
-        <template data-simply-template="info">
-          <li class="simply-toast simply-toast-info simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
-            <div class="simply-space" data-simply-field="message"></div>
-          </li>
-        </template>
-      </ul>
-    </div>
     <!-- Toast styles -->
-    <style>
-      .simply-toasts {
-        position: relative;
-        z-index: 101;
-      }
-    </style>
-    
-    <!-- Toast%20styles -->
     <style>
       .simply-toasts {
         position: relative;
@@ -4124,6 +4105,26 @@
             </li>
           </ul>
         </template>
+        <template data-simply-template="Publish App">
+          <ul class="simply-buttons">
+            <li>
+              <button data-simply-command="simply-about" class="simply-toolbar-logo">
+                <simply-render rel="logo"></simply-render>
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="simply-preview">
+                <i class="fa fa-eye"></i>Preview
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="saveAppHtml">
+                <i class="fa fa-check"></i>Publish
+              </button>
+            </li>
+          </ul>
+        </template>
+        
       </div>
     </section>
     </template>
@@ -4137,25 +4138,6 @@
     <div class="main" data-simply-field="page" data-simply-content="template">
     <!-- Page HTML templates -->
     <template data-simply-template="Edit base component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="saveBaseComponent">Save</button>
-          <button class="simplycode-button" data-simply-command="deleteBaseComponent">Delete</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentHeadHtml"></simply-render>
-      <simply-render rel="componentBodyHtml"></simply-render>
-      <simply-render rel="componentFootHtml"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentRawApi"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20base%20component">
       <main>
       <div class="simplycode-header">
         <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
@@ -4200,27 +4182,6 @@ <h1>Add base component</h1>
     </main>
     </template>
     <template data-simply-template="Edit component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="saveComponent">Save</button>
-          <button class="simplycode-button" data-simply-command="deleteComponent">Delete</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentComponentTemplate"></simply-render>
-      <simply-render rel="componentComponentCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20component">
       <main>
       <div class="simplycode-header">
         <h1>Edit component: <span data-simply-field="component.id"></span></h1>
@@ -4268,27 +4229,6 @@ <h1>Add component</h1>
     
     </template>
     <template data-simply-template="Edit page">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="savePage">Save</button>
-          <button class="simplycode-button" data-simply-command="deletePage">Delete</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageTemplate"></simply-render>
-      <simply-render rel="componentPageCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20page">
       <main>
       <div class="simplycode-header">
         <h1>Edit page: <span data-simply-field="component.id"></span></h1>
@@ -4306,18 +4246,6 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
     </main>
     </template>
     <template data-simply-template="Edit page frame">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit page frame</h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="savePageFrame">Save</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageFrame"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20page%20frame">
       <main>
       <div class="simplycode-header">
         <h1>Edit page frame</h1>
@@ -4371,9 +4299,6 @@ <h1>Add page</h1>
     <template data-simply-template="Publish App">
       <main>
       <h1>App preview</h1>
-      <div class="field">
-        <button class="simplycode-button" data-simply-command="saveAppHtml">Publish App</button>
-      </div>
       <simply-render rel="fullAppPreview"></simply-render>
     </main>
     </template>
diff --git a/www/api/data/pages/publish/pageTemplates/Publish App.html b/www/api/data/pages/publish/pageTemplates/Publish App.html
index 754613f..6421192 100644
--- a/www/api/data/pages/publish/pageTemplates/Publish App.html	
+++ b/www/api/data/pages/publish/pageTemplates/Publish App.html	
@@ -1,7 +1,4 @@
 <main>
   <h1>App preview</h1>
-  <div class="field">
-    <button class="simplycode-button" data-simply-command="saveAppHtml">Publish App</button>
-  </div>
   <simply-render rel="fullAppPreview"></simply-render>
 </main>
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index 2fb3db4..a7e67bb 100644
--- a/www/index.html
+++ b/www/index.html
@@ -260,7 +260,7 @@
           background-color: #404040;
           border-bottom: 2px solid #2222;
           vertical-align: middle;
-          z-index: 1;
+          z-index: 200;
       }
       header h1 {
           margin: 0;
@@ -525,9 +525,9 @@
       }
       /* darkmode */
       :root {
-        --simply-toolbar-background: #404040;
+        --simply-toolbar-background: #222;
         --simply-toolbar-background-secondary: #333;
-        --simply-toolbar-font-color: #bbb;
+        --simply-toolbar-font-color: #ddd;
         --simply-toolbar-color-primary: #ea5922;
         --simply-toolbar-color-secondary: #ddd;
         --simply-toolbar-color-support: #444;
@@ -603,6 +603,7 @@
         list-style: none;
         white-space: nowrap;
       }
+      
       .simply-toolbar-section > ul > li.simply-text-format {
         margin-right: 4px;
       }
@@ -614,6 +615,9 @@
         min-height: var(--simply-toolbar-base-height);
         transform: translate3d(0,0,0);
         box-sizing: content-box;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
       }
       .simply-main-toolbar .simply-buttons {
         white-space: nowrap !important;
@@ -917,6 +921,11 @@
       .simply-main-toolbar.simply-collapse li:nth-child(n+2) {
         display: none;
       }
+      .simply-toolbar button.simply-toolbar-logo {
+        padding: 0px 5px;
+        box-sizing: content-box;
+      }
+      
     </style>
     <!-- /Component CSS -->
     <!-- Page CSS -->
@@ -3050,35 +3059,7 @@
         </template>
       </ul>
     </div>
-    <!-- HTML%20structure -->
-    <div class="simply-toasts">
-      <ul class="simply-toasts simply-space" data-simply-list="alerts">
-        <template data-simply-template="error">
-          <li class="simply-toast simply-toast-error simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
-            <div class="simply-space" data-simply-field="message"></div>
-          </li>
-        </template>
-        <template data-simply-template="warning">
-          <li class="simply-toast simply-toast-warning simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
-            <div class="simply-space" data-simply-field="message"></div>
-          </li>
-        </template>
-        <template data-simply-template="info">
-          <li class="simply-toast simply-toast-info simply-toast-autohide" data-simply-field="state" data-simply-content="attributes" data-simply-attributes="data-state">
-            <div class="simply-space" data-simply-field="message"></div>
-          </li>
-        </template>
-      </ul>
-    </div>
     <!-- Toast styles -->
-    <style>
-      .simply-toasts {
-        position: relative;
-        z-index: 101;
-      }
-    </style>
-    
-    <!-- Toast%20styles -->
     <style>
       .simply-toasts {
         position: relative;
@@ -4124,6 +4105,26 @@
             </li>
           </ul>
         </template>
+        <template data-simply-template="Publish App">
+          <ul class="simply-buttons">
+            <li>
+              <button data-simply-command="simply-about" class="simply-toolbar-logo">
+                <simply-render rel="logo"></simply-render>
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="simply-preview">
+                <i class="fa fa-eye"></i>Preview
+              </button>
+            </li>
+            <li>
+              <button data-simply-command="saveAppHtml">
+                <i class="fa fa-check"></i>Publish
+              </button>
+            </li>
+          </ul>
+        </template>
+        
       </div>
     </section>
     </template>
@@ -4137,25 +4138,6 @@
     <div class="main" data-simply-field="page" data-simply-content="template">
     <!-- Page HTML templates -->
     <template data-simply-template="Edit base component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="saveBaseComponent">Save</button>
-          <button class="simplycode-button" data-simply-command="deleteBaseComponent">Delete</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentHeadHtml"></simply-render>
-      <simply-render rel="componentBodyHtml"></simply-render>
-      <simply-render rel="componentFootHtml"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentRawApi"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20base%20component">
       <main>
       <div class="simplycode-header">
         <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
@@ -4200,27 +4182,6 @@ <h1>Add base component</h1>
     </main>
     </template>
     <template data-simply-template="Edit component">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit component: <span data-simply-field="component.id"></span></h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="saveComponent">Save</button>
-          <button class="simplycode-button" data-simply-command="deleteComponent">Delete</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentComponentTemplate"></simply-render>
-      <simply-render rel="componentComponentCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20component">
       <main>
       <div class="simplycode-header">
         <h1>Edit component: <span data-simply-field="component.id"></span></h1>
@@ -4268,27 +4229,6 @@ <h1>Add component</h1>
     
     </template>
     <template data-simply-template="Edit page">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit page: <span data-simply-field="component.id"></span></h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="savePage">Save</button>
-          <button class="simplycode-button" data-simply-command="deletePage">Delete</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageTemplate"></simply-render>
-      <simply-render rel="componentPageCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20page">
       <main>
       <div class="simplycode-header">
         <h1>Edit page: <span data-simply-field="component.id"></span></h1>
@@ -4306,18 +4246,6 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
     </main>
     </template>
     <template data-simply-template="Edit page frame">
-      <main>
-      <div class="simplycode-header">
-        <h1>Edit page frame</h1>
-        <div class="simplycode-controls">
-          <button class="simplycode-button" data-simply-command="savePageFrame">Save</button>
-        </div>
-      </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageFrame"></simply-render>
-    </main>
-    </template>
-    <template data-simply-template="Edit%20page%20frame">
       <main>
       <div class="simplycode-header">
         <h1>Edit page frame</h1>
@@ -4371,9 +4299,6 @@ <h1>Add page</h1>
     <template data-simply-template="Publish App">
       <main>
       <h1>App preview</h1>
-      <div class="field">
-        <button class="simplycode-button" data-simply-command="saveAppHtml">Publish App</button>
-      </div>
       <simply-render rel="fullAppPreview"></simply-render>
     </main>
     </template>