pinokiod 3.9.3 → 3.9.13

package/server/views/index.ejs

@@ -128,9 +128,12 @@ body.dark .browser-options-row {
   border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 */
-.context-menu-wrapper {
-  padding: 2px 0;
+body.dark .context-menu-wrapper {
   background: rgba(0,0,0,0.9);
+  color: white;
+}
+.context-menu-wrapper {
+  background: rgba(0,0,0,0.06) !important;
 }
 .context-menu {
  /* 
@@ -150,6 +153,10 @@ body.dark .browser-options-row {
   width: 80px;
   padding: 6px 10px !important;
   text-align: left;
+  color: black;
+}
+body.dark .context-menu .btn {
+  color: white;
 }
 .context-menu.collapsed {
 /*
@@ -157,16 +164,19 @@ body.dark .browser-options-row {
   */
   display: none;
 }
-body.dark .open-menu {
+body.dark .open-menu, body.dark .browse {
+  border: none !important;
   background: black !important;
   color: white !important;
 }
-.open-menu {
+.open-menu, .browse {
   width: 80px;
   border-radius: 0 !important;
-  background: white !important;
+  background: rgba(0,0,0,0.06) !important;
   color: black !important;
+  /*
   border: 1px solid rgba(0, 0, 0, 0.3);
+  */
 }
 .open-menu.selected {
   border: none !important;
@@ -369,27 +379,33 @@ body.dark .open-menu {
               <div class='description'><%=item.description%></div>
               <div class='menu-btns'>
                 <div>
+                  <button class='btn browse' data-src="<%=item.browser_url%>/browse">
+                    <i class='fa-solid fa-code'></i> Dev
+                  </button>
                   <button class='btn open-menu'>
                     <i class="fa-solid fa-bars"></i><span> Menu</span>
                   </button>
                   <div class='context-menu collapsed'>
                     <div class='context-menu-wrapper'>
-                      <button class='btn browse' data-src="<%=item.browser_url%>/browse">
-                        <i class='fa-regular fa-folder-open'></i> View
-                      </button>
                       <button class='btn copy-menu' data-src="<%=item.browser_url%>/browse">
                         <i class='fa-solid fa-copy'></i> Copy
                       </button>
                     </div>
                   </div>
                 </div>
-                <div class='flexible'></div>
                 <% if (item.running_scripts) { %>
                   <% item.running_scripts.forEach((s) => { %>
+                    <% if (s.id) { %>
+                      <button class='btn shutdown' data-id="<%=s.id%>">
+                        <i class="fa-solid fa-stop"></i> Stop <%=s.name%>&nbsp;
+                        <i class='fa-solid fa-spin fa-circle-notch'></i>
+                      </button>
+                    <% } else { %>
                       <button class='btn shutdown' data-src="<%=s.path%>">
                         <i class="fa-solid fa-stop"></i> Stop <%=s.name%>&nbsp;
                         <i class='fa-solid fa-spin fa-circle-notch'></i>
                       </button>
+                    <% } %>
                   <% }) %>
                 <% } %>
               </div>
@@ -437,14 +453,14 @@ body.dark .open-menu {
               <div class='title'><%=item.name%></div>
               <div class='description'><%=item.description%></div>
               <div class='menu-btns'>
+                <button class='btn browse' data-src="<%=item.browser_url%>/browse">
+                  <i class='fa-solid fa-code'></i> Dev
+                </button>
                 <button class='btn open-menu'>
                   <i class="fa-solid fa-bars"></i><span> Menu</span>
                 </button>
                 <div class='context-menu collapsed'>
                   <div class='context-menu-wrapper'>
-                    <button class='btn browse' data-src="<%=item.browser_url%>/browse">
-                      <i class='fa-regular fa-folder-open'></i> View
-                    </button>
                     <button class='btn copy-menu' data-src="<%=item.browser_url%>/browse">
                       <i class='fa-solid fa-copy'></i> Copy
                     </button>
@@ -872,13 +888,16 @@ document.addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
     let src = target.getAttribute("data-src")
+    let id = target.getAttribute('data-id')
     console.log("src", src)
 
+    let params = {}
+    if (id) params.id = id
+    if (src) params.uri = "~/" + src
+
     socket.run({
       method: "kernel.api.stop",
-      params: {
-        uri: "~/" + src
-      }
+      params,
     }, (packet) => {
       console.log("packet", packet)
       if (packet.type === "result") {
@@ -906,7 +925,7 @@ document.addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
     let contextMenu = target.closest(".col").querySelector(".context-menu").classList.toggle("collapsed")
-    target.classList.toggle("selected")
+//    target.classList.toggle("selected")
     return
   }
 

package/server/views/partials/dynamic.ejs

@@ -1,9 +1,57 @@
-<% dynamic.forEach((item, i) => { %>
-  <a target="<%=item.target%>" href="<%=item.href%>" class='dynamic-item btn header-item frame-link' data-index="<%=i+4%>" data-key="<%=item.key%>">
-    <div class='tab'><%-item.btn%></div>
-    <% if (item.running) { %>
-      <div class='loader shutdown online'>
+<% dynamic.forEach((item, index) => { %>
+  <% if (item.menu) { %>
+    <div class='nested-menu <%=item.display || ""%>'>
+      <div class='btn header-item frame-link reveal'>
+        <div class='tab'><%-item.btn%></div>
+        <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
       </div>
+      <div class='submenu hidden'>
+        <%- include('./menu', { menu: item.menu }) %>
+      </div>
+    </div>
+  <% } else { %>
+    <% if (item.btn) { %>
+      <% if (item.action) { %>
+        <div <%=item.default ? 'data-default' : ''%> data-action="<%=JSON.stringify(item.action)%>" class='btn header-item frame-link <%=item.display || ""%>'>
+          <div class='tab'><%-item.btn%></div>
+        </div>
+      <% } else if (item.run) { %>
+        <div data-run="<%=item.run%>" data-cwd="<%=item.cwd%>" class='btn header-item frame-link <%=item.display || ""%>'>
+          <div class='tab'><%-item.btn%></div>
+        </div>
+      <% } else if (item.command) { %>
+        <div data-command="<%=item.command%>" data-filepath="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
+          <div class='tab'><%-item.btn%></div>
+        </div>
+      <% } else if (item.fs) { %>
+        <div data-filepath="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
+          <div class='tab'><%-item.btn%></div>
+        </div>
+      <% } else if (item.target === "_blank") { %>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
+          <div class='tab'><%-item.btn%></div>
+          <div class='loader'>
+            <i class="fa-solid fa-up-right-from-square"></i>
+          </div>
+        </a>
+      <% } else { %>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
+          <div class='tab'><%-item.btn%></div>
+          <% if (item.running) { %>
+            <div class='loader shutdown online'>
+            </div>
+            <div class='loader shutdown hidden'>
+              <!--
+              <i class='fa-solid fa-spin fa-circle-notch'></i>
+              <i class="fa-solid fa-chevron-right"></i>
+              -->
+              <button class='btn'>
+              <i class="fa-solid fa-square"></i> Stop
+              </button>
+            </div>
+          <% } %>
+        </a>
+      <% } %>
     <% } %>
-  </a>
+  <% } %>
 <% }) %>

package/server/views/partials/menu.ejs

@@ -1,8 +1,9 @@
 <% menu.forEach((item, index) => { %>
   <% if (item.menu) { %>
-    <div class='nested-menu'>
+    <div class='nested-menu <%=item.display || ""%>'>
       <div class='btn header-item frame-link reveal'>
         <div class='tab'><%-item.btn%></div>
+        <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
       </div>
       <div class='submenu hidden'>
         <%- include('./menu', { menu: item.menu }) %>
@@ -11,26 +12,30 @@
   <% } else { %>
     <% if (item.btn) { %>
       <% if (item.action) { %>
-        <div <%=item.default ? 'data-default' : ''%> data-action="<%=JSON.stringify(item.action)%>" class='btn header-item frame-link'>
+        <div <%=item.default ? 'data-default' : ''%> data-action="<%=JSON.stringify(item.action)%>" class='btn header-item frame-link <%=item.display || ""%>'>
+          <div class='tab'><%-item.btn%></div>
+        </div>
+      <% } else if (item.run) { %>
+        <div data-run="<%=item.run%>" data-cwd="<%=item.cwd%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
       <% } else if (item.command) { %>
-        <div data-command="<%=item.command%>" data-filepath="<%=item.href%>" class='btn header-item frame-link'>
+        <div data-command="<%=item.command%>" data-filepath="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
       <% } else if (item.fs) { %>
-        <div data-filepath="<%=item.href%>" class='btn header-item frame-link'>
+        <div data-filepath="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
       <% } else if (item.target === "_blank") { %>
-        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
           <div class='loader'>
             <i class="fa-solid fa-up-right-from-square"></i>
           </div>
         </a>
       <% } else { %>
-        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
             <div class='loader shutdown online'>

package/server/views/prototype/index.ejs

@@ -144,15 +144,16 @@ body.dark .badge {
   margin-right: 10px;
   border-radius: 10px;
 }
+body.dark .prototype-header {
+  color: white;
+}
 .prototype-header .btn {
   border: 1px solid rgba(255,255,255,0.3);
 }
 .prototype-header {
   align-items: center;
   display: flex;
-  padding: 40px;
-  background: black;
-  color: white;
+  padding: 40px 20px;
 }
 .prototype-header h1 {
   letter-spacing: -1px;
@@ -196,6 +197,324 @@ body.dark .browser-options-row {
     padding: 0;
   }
 }
+
+
+
+
+
+
+.online {
+  width: 10px;
+  height: 10px;
+  background: yellowgreen;
+  border-radius: 10px;
+}
+#menu {
+  display: flex;
+}
+#menu i {
+  display: block;
+}
+#menu img {
+  display: none;
+  height: 30px;
+  object-fit: contain;
+  /*
+  border-radius: 20px
+  */
+}
+#menu.margin {
+/*
+  padding: 5px;
+  */
+}
+#menu.margin i {
+  display: none;
+}
+#menu.margin img {
+  display: block;
+}
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+.menu {
+  overflow: auto;
+}
+body.dark .m {
+  border-top: 1px solid rgba(255,255,255,0.04);
+}
+.m {
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+body aside {
+/*
+  background: var(--light-bg);
+  */
+  border-right: 1px solid rgba(0,0,0,0.04);
+  height: 100%;
+}
+body.dark aside {
+  background: var(--dark-bg);
+  border-right: 1px solid rgba(255,255,255,0.04);
+}
+aside {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  overflow: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+main {
+  flex-grow: 1;
+  min-height: 0;
+  /*
+  height: 100%;
+  */
+}
+main iframe[name^=http] {
+  background: white;
+}
+main iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.header-item {
+  /*
+  display: block;
+  */
+  display: flex;
+  font-size: 12px;
+  text-decoration: none;
+  align-items: center;
+  border-radius: 0;
+  cursor: pointer;
+}
+.header-item.selected {
+}
+.header-item .btn2 {
+  margin: 0;
+  border: none;
+  padding: 5px;
+  /*
+  color: var(--light-color);
+  */
+}
+body.dark .header-item .btn2 {
+/*
+  color: var(--darkt-color);
+  */
+}
+.bar .btn2 i {
+  display: block;
+  margin-right: 5px;
+}
+.header-item > * {
+  display: block;
+}
+.header-item img {
+/*
+  width: 60px;
+  */
+  height: 80px;
+  width: 80px;
+  /*
+  border-radius: 10px;
+  */
+  object-fit: contain;
+  display: inline-block;
+  /*
+  border-radius: 30px;
+  */
+}
+body.dark .header-item.btn {
+/*
+  color: white;
+  */
+  color: var(--dark-color);
+}
+.header-item.btn {
+  padding: 10px;
+  background: none !important;
+  color: var(--light-color);
+}
+.logo {
+  font-size: 20px;
+  padding: 20px;
+}
+body .logo {
+  color: var(--light-color);
+}
+body.dark .logo {
+  color: var(--dark-btn-color);
+  /*
+  color: white;
+  */
+}
+body #new-window {
+  color: var(--light-color);
+}
+body.dark #new-window {
+  color: var(--dark-btn-color);
+  /*
+  color: white;
+  */
+}
+/*
+.dark .app-info {
+  background: rgba(255,255,255,0.04);
+}
+*/
+.app-info {
+  
+/*
+  display: flex;
+  */
+  box-sizing: border-box;
+  text-align: center;;
+  font-weight: bold;
+  align-items: center;
+  /*
+  background: rgba(0,0,0,0.04);
+  */
+}
+.folderbuttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0px;
+}
+.header-btns {
+  padding: 0 !important;
+}
+body.dark .header-btns {
+  border-top: 1px solid rgba(255,255,255,0.04);
+}
+.app-info-edit {
+  text-decoration: none;
+  color: black;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+/*
+.dark .app-info-edit {
+  border-top: 1px solid rgba(255,255,255,0.2);
+  border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+*/
+.dark .app-info-edit:hover {
+  background: rgba(0,0,0,0.2);
+}
+.app-info-edit:hover{
+  background: rgba(0,0,0,0.05);
+}
+.app-info-edit i{
+  display: block;
+}
+.app-info-edit, .app-info-copy {
+  font-weight: normal;
+
+  /*
+  border-radius: 20px;
+  */
+  font-size: 12px;
+  padding: 15px 5px;
+  /*
+  margin: 10px 20px 0;
+  */
+}
+.app-info-card {
+  padding: 10px !important;
+}
+.app-info .btn {
+  width: 100%;
+}
+.app-info-card > * {
+  padding: 5px;
+  color: var(--light-color);
+  text-decoration: none;
+  box-sizing: border-box;
+}
+body.dark .app-info-card > * {
+  color: var(--dark-color);
+}
+.appcanvas {
+  display: flex;
+  flex-grow: 1;
+  border-top: 1px solid rgba(0, 0,0 ,0.04);
+}
+body.dark .appcanvas {
+  border-top: 1px solid rgba(255,255,255,0.04);
+}
+
+@media only screen and (max-width: 480px) {
+  nav .btn2 {
+    width: auto !important;
+    min-width: 40px;
+    border-right: none;
+    flex-direction: column;
+  }
+  .app-info {
+    display: flex;
+    padding: 10px;
+  }
+  .app-info img {
+    width: 60px;
+    height: 60px;
+  }
+
+  .header-item {
+    font-size: 16px;
+  }
+  aside.active {
+    width: 100%;
+    z-index: 10000000;
+  }
+  aside:not(.active) {
+    display: none;
+  }
+  .container {
+    display: none;
+  }
+  .container.active {
+    display: block;
+    position: absolute;
+    z-index: 10000000;
+    width: 100%;
+    height: 100%;
+  }
+  /*
+  .grid-btns {
+    display: none;
+  }
+  */
+  #menu {
+    display: none;
+  }
+  #menu-mobile {
+    display: flex;
+  }
+}
+body.dark .header-item.cursor.header-top {
+  background: none !important;
+}
+.header-item.cursor.header-top {
+  background: none !important;
+}
+.header-item.header-top {
+  display: block;
+}
 </style>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
@@ -248,38 +567,54 @@ body.dark .browser-options-row {
 </div>
 </h1>
 </header>
-<main>
-<div id='terminal' class='hidden'></div>
-<div class='container'>
-  <div class='prototype-header'>
-    <div>
-      <h1>Create a new project</h1>
-      <div class='desc'>Select an option to set up a new folder</div>
-    </div>
-    <div class='flexible'></div>
-    <a class='btn' id='download'><i class='fa-solid fa-download'></i> Download a custom prototype script</a>
-  </div>
-  <div class='folder-templates drawer'>
-    <% items.forEach((folder, i) => { %>
-      <a class='line folder' href="/prototype/show/<%=folder.id%>">
-        <% if (folder.icon) { %>
-          <img src="<%=folder.icon%>">
-        <% } else { %>
-          <% if (theme === 'dark') { %>
-            <img src="/pinokio-white.png">
+<div class='appcanvas'>
+  <aside class='active'>
+    <div class='header-top header-item'>
+      <div class='app-info'>
+        <div class='app-info-card'>
+          <% if (config.icon) { %>
+            <img src="<%=config.icon%>"/>
           <% } else { %>
-            <img src="/pinokio-black.png">
+            <i class="fa-regular fa-circle-dot"></i>
           <% } %>
-        <% } %>
-        <div class='col flexible'>
-          <div class='title'><%=folder.title%></div>
-          <div class='description'><%=folder.description%></div>
+          <div><%=config.title%></div>
+          <div class="folderpath"><%=config.web_path%></div>
+        </div>
+      </div>
+    </div>
+  </aside>
+  <main>
+    <div class='container'>
+      <div class='prototype-header'>
+        <div>
+          <h1><%=title%></h1>
+          <div class='desc'><%=description%></div>
         </div>
-      </a>
-    <% }) %>
-  </div>
+        <div class='flexible'></div>
+        <a class='btn' id='download'><i class='fa-solid fa-download'></i> Download a custom prototype script</a>
+      </div>
+      <div class='folder-templates drawer'>
+        <% items.forEach((folder, i) => { %>
+          <a class='line folder' href="/prototype/show/<%=folder.id%>?path=<%=path%>">
+            <% if (folder.icon) { %>
+              <img src="<%=folder.icon%>">
+            <% } else { %>
+              <% if (theme === 'dark') { %>
+                <img src="/pinokio-white.png">
+              <% } else { %>
+                <img src="/pinokio-black.png">
+              <% } %>
+            <% } %>
+            <div class='col flexible'>
+              <div class='title'><%=folder.title%></div>
+              <div class='description'><%=folder.description%></div>
+            </div>
+          </a>
+        <% }) %>
+      </div>
+    </div>
+  </main>
 </div>
-</main>
 <script>
 let paths = location.pathname.split("/").filter(x=>x)
 var term