pinokiod 3.40.0 → 3.42.0

package/server/public/style.css

@@ -47,7 +47,10 @@
   --light-btn-bg: #7f5bf3;
   --light-btn-color: white;
 
+  --dark-btn-bg: rgba(255,255,255,0.07);
+/*
   --dark-btn-bg: rgba(0,0,0,0.8);
+  */
   /*
   --dark-btn-color: #b7a1ff;
   */
@@ -154,17 +157,23 @@ body.dark .dynamic.selected {
   background: rgba(0,0,0,0.05);
   */
 }
-.submenu {
-  margin-left: 10px;
+aside .tab.submenu {
+  padding-left: 25px;
   box-sizing: border-box;
 }
+#genlog, #downloadlogs {
+  cursor: pointer;
+}
 
 .url-bar {
   font-family: verdana;
   font-size: 12px;
-  padding: 0 10px;
+  padding: 0 20px;
   font-weight: normal;
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .url-bar .http-url:hover {
   color: royalblue;
@@ -208,7 +217,7 @@ body.dark .loader-container {
   background: rgba(0,0,0,0.3) !important;
 }
 .loader-dialog {
-  padding: 100px;
+  padding: 10px !important;
 }
 body.dark .loader-popup {
   background: rgba(255,255,255,0.07) !important;
@@ -218,7 +227,9 @@ body.dark .loader-popup {
   font-size: 12px;
   letter-spacing: 1px;
   background: rgba(0,0,0,0.6);
+  /*
   width: 200px !important;
+  */
   border-radius: 50px !important;
   color: white;
 }
@@ -737,7 +748,10 @@ form.search {
   gap: 5px;
 }
 .btn-tab .btn {
+  display: flex;
   text-align: center;
+  align-items: center;
+  gap: 5px;
   box-sizing: border-box;
 }
 body.dark form.search input[type=search] {
@@ -897,6 +911,7 @@ body.columns .containers {
 .menu-btns {
   display: flex;
   align-items: flex-start;
+  flex-wrap: wrap;
 }
 .terminal-container {
 /*
@@ -1073,6 +1088,9 @@ header small:empty {
 }
 header h1 {
   display: flex;
+  /*
+  align-items: stretch;
+  */
   align-items: center;
   flex-wrap: wrap;
 }
@@ -1322,6 +1340,7 @@ body.dark .line .avatar i {
   font-size: 13px;
   opacity: 0.8;
   margin-bottom: 5px;
+  word-break: break-word;
 }
 body.dark a.line {
   color: var(--dark-color);
@@ -1391,6 +1410,7 @@ body.dark .line.align-top h3 .col .uri {
   color: rgba(0,0,0,0.4);
   font-size: 12px;
   font-family: verdana;
+  word-break: break-word;
 }
 body.dark .line.align-top h3 .col .title a {
   color: var(--dark-link-color);
@@ -1444,6 +1464,8 @@ body.dark .line.align-top h3 .col .title i {
 .line.align-top h3 .col .btn {
   padding: 4px 10px;
   margin-right: 5px;
+  margin-bottom: 5px;
+  word-break: break-word;
 }
 body.dark .line.align-top h3 .col .btn.label {
   background: rgba(255,255,255,0.05);
@@ -1502,6 +1524,12 @@ body.dark .line.align-top h3 .col .btn.label {
 button {
   cursor: pointer;
 }
+body.dark .btn-tab .btn, .btn-tab .btn {
+  /*
+  background: #3c5bb9 !important;
+  background: royalblue !important;
+  */
+}
 body.dark .btn {
   color: var(--dark-btn-color);
   /*
@@ -1929,6 +1957,7 @@ body.dark .browser-options {
   */
 }
 .btn2 {
+  padding: 0 10px;
   background: none;
   font-weight: normal;
   /*
@@ -1937,7 +1966,6 @@ body.dark .browser-options {
   color: var(--light-color);
   text-transform: uppercase;
   border-radius: 5px;
-  padding: 0px 5px;
   text-align: center;
 
   cursor: pointer;
@@ -1947,7 +1975,12 @@ body.dark .browser-options {
   /*
   font-weight: bold;
   */
+  /*
   display: inline-block;
+  */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
   text-rendering: auto;
   letter-spacing: normal;
@@ -1963,10 +1996,12 @@ body.dark .browser-options {
 .btn2 i {
   margin: 2px 0;
   display: inline-block;
-  font-size: 12px;
+  font-size: 14px;
 }
 .nav-btns {
+/*
   padding: 10px 0;
+  */
   display: flex;
 }
 /*
@@ -2050,14 +2085,12 @@ footer.status {
     background: black;
 }
 */
-body.dark .btn.red {
-  color: rgba(230,0,0,1) !important;
-  border: 1px solid rgba(210,0,0,0.7) !important;
-}
 .btn.red {
-  color: rgba(210,0,0,0.8) !important;
+  color: #bf411d !important;
+  /*
   border: 1px solid rgba(210,0,0,0.3);
   background: none;
+  */
 }
 
 #error-screen {
@@ -2186,3 +2219,269 @@ mark{
   padding: unset !important;
   font-size: unset !important;
 }
+
+
+.dropdown {
+  z-index: 1000000000;
+  position: relative;
+  padding: 0 !important;
+}
+.dropdown .btn2 {
+  height: 100%;
+}
+/* Dropdown content */
+body.dark .dropdown-content {
+    border: none;
+}
+body.dark .dropdown .btn2 {
+    background: none;
+    color: white;
+}
+body.dark .dropdown-content .btn2 {
+    background: rgba(0,0,0,0.85);
+    color: white;
+}
+.dropdown-content {
+    z-index: 1000000000;
+    display: none;
+    position: absolute;
+    background: #fff;
+    min-width: 200px;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+    border-radius: 4px;
+    z-index: 1000;
+    top: 100%;
+    right: 0;
+    border: 1px solid #dee2e6;
+}
+
+.dropdown-content.show {
+    display: block;
+}
+
+.dropdown-content .btn2 div {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.dropdown-content .btn2 {
+    width: 100%;
+    text-align: left;
+    border: none;
+    border-radius: 0;
+    padding: 12px 16px;
+    margin: 0;
+    background: transparent;
+    color: #495057;
+    min-width: unset;
+    height: auto;
+    justify-content: flex-start;
+    box-sizing: border-box;
+}
+
+.dropdown-content .btn2:first-child {
+    border-radius: 4px 4px 0 0;
+}
+
+.dropdown-content .btn2:last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.dropdown-content .btn2:hover {
+    background: #f8f9fa;
+}
+
+.dropdown-content .btn2 div {
+    justify-content: flex-start;
+    width: 100%;
+}
+
+/* Active state for dropdown trigger */
+.dropdown.active .btn2 {
+    background: #e9ecef;
+    border-color: #adb5bd;
+}
+
+body.dark .mode-selector .btn2.selected {
+  background: royalblue;
+  color: white;
+}
+.mode-selector .btn2.selected {
+  background: royalblue;
+  color: white;
+  border-radius: 4px;
+}
+.mode-selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  flex-grow: 1;
+  /*
+  background: rgba(0,0,0,0.04);
+  */
+  padding: 5px;
+  margin: 0 10px;
+  border-radius: 10px;
+}
+.mode-selector .btn2 {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  width: 100px;
+  gap: 5px;
+  border-radius: 5px;
+}
+
+.urlbar {
+  flex-grow: 1;
+  margin: 0 20px;
+}
+body.dark .urlbar input[type=url] {
+  background: rgba(255,255,255,0.1);
+  color: white;
+}
+.urlbar input[type=url] {
+  background: rgba(0,0,0,0.05);
+  border-radius: 6px;
+  border: none;
+  padding: 10px;
+  width: 100%;
+}
+
+
+
+
+
+body.minimized {
+  display: flex;
+  flex-direction: row;
+}
+body.minimized header .dropdown-content {
+  position: relative;
+  min-width: unset;
+  top: unset;
+  left: unset;
+}
+body.minimized header h1 #close-window {
+  order: 0;
+}
+body.minimized header .home {
+  display: block;
+}
+body.minimized header {
+  padding: 10px 0 0;
+  overflow: auto;
+  flex-shrink: 0;
+}
+body.minimized header h1 .urlbar {
+  display: none; 
+}
+body.minimized header h1 .btn2 {
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+body.minimized header h1 {
+  height: 100%;
+  overflow: auto;
+  display: block;
+}
+body.minimized .mode-selector {
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  align-items: stretch;
+  gap: 0;
+}
+body.minimized .mode-selector .btn2 {
+  width: unset;
+  padding: 10px;
+  border-radius: 0 !important;
+}
+body.minimized .mode-selector .caption {
+  display: none;
+}
+/*
+body.minimized .appcanvas, body.minimized main {
+*/
+body.minimized .appcanvas {
+  padding-top: 20px;
+}
+body.minimized main .container {
+  margin-left: 0;
+}
+body.minimized .app-icon {
+  display: block; 
+}
+body.minimized aside {
+  display: none;
+}
+
+@media only screen and (max-width: 800px) {
+  header .dropdown-content {
+    position: relative;
+    min-width: unset;
+    top: unset;
+    left: unset;
+  }
+  header h1 #close-window {
+    order: 0;
+  }
+  header {
+    padding: 10px 0 0;
+    overflow: auto;
+    flex-shrink: 0;
+  }
+  header .home {
+    display: block;
+  }
+  header h1 .btn2 {
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  header h1 {
+    height: 100%;
+    overflow: auto;
+    display: block;
+  }
+  header h1 .urlbar {
+    display: none; 
+  }
+  .mode-selector {
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+    align-items: stretch;
+    gap: 0;
+  }
+  .mode-selector .btn2 {
+    width: unset;
+    padding: 10px;
+    border-radius: 0 !important;
+  }
+  .mode-selector .caption {
+    display: none;
+  }
+  /*
+  .appcanvas, main {
+  */
+  .appcanvas {
+    padding-top: 20px;
+  }
+  main .container {
+    margin-left: 0;
+  }
+  .app-icon {
+    display: block;
+  }
+  aside {
+    display: none;
+  }
+}

package/server/socket.js

@@ -1,6 +1,7 @@
 const WebSocket = require('ws');
 const path = require('path')
 const Util = require("../kernel/util")
+const Environment = require("../kernel/environment")
 class Socket {
   constructor(parent) {
     this.buffer = {}
@@ -323,10 +324,11 @@ class Socket {
           */
           let paramStr = m[0]
           let cwd = new URL("http://localhost" + paramStr).searchParams.get("cwd")
+          let root = await Environment.get_root({ path: cwd }, this.parent.kernel)
+          cwd = root.root
           let session = this.sessions[key]
           let logpath = path.resolve(cwd, "logs/dev", path.parse(relative).base)
           await Util.log(logpath, buf, session)
-
         }
       } else if (relative.startsWith("api")) {
         // api
@@ -338,6 +340,8 @@ class Socket {
         */
         let filepath_chunks = relative.split(path.sep).slice(2)
         let cwd = this.parent.kernel.path(...relative.split(path.sep).slice(0, 2))
+        let root = await Environment.get_root({ path: cwd }, this.parent.kernel)
+        cwd = root.root
         let session = this.sessions[key]
         let logpath = path.resolve(cwd, "logs/api", ...filepath_chunks)
         await Util.log(logpath, buf, session)
@@ -361,6 +365,8 @@ class Socket {
         let native_path_exists = await new Promise(r=>fs.access(native_path, fs.constants.F_OK, e => r(!e)))
         if (native_path_exists) {
           let cwd = native_path
+          let root = await Environment.get_root({ path: cwd }, this.parent.kernel)
+          cwd = root.root
           let session = this.sessions[key]
           let logpath = path.resolve(cwd, "logs/shell")
           await Util.log(logpath, buf, session)