wip ui

socketsupply · Mar 11, 2024 · 7a0e8c4 · 7a0e8c4
1 parent 98ba34e
commit 7a0e8c4
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 4 deletions.
diff --git a/src/css/index.css b/src/css/index.css
@@ -253,7 +253,7 @@ main-component {
 
 header {
   display: grid;
-  grid-template-columns: 1fr 34px 250px 34px 1fr;
+  grid-template-columns: 1fr 34px 250px 34px 1fr 34px 34px;
   gap: 12px;
   grid-template-rows: auto;
   align-content: center;
@@ -265,7 +265,7 @@ header {
   right: 0;
   cursor: default;
   app-region: drag; /* windows */
-  --app-region: drag; /* mac/linux */
+  --app-region: drag; /* mac & linux */
 }
 
 header [platform="darwin"] {

diff --git a/src/index.js b/src/index.js
@@ -457,7 +457,7 @@ class AppView extends Tonic {
     await this.init()
 
     return this.html`
-      <header movable>
+      <header>
         <span class="spacer"></span>
 
         <tonic-button type="icon" size="18px" symbol-id="play" title="Build & Run The Project" data-event="run">
@@ -475,6 +475,22 @@ class AppView extends Tonic {
         </tonic-button>
 
         <span class="spacer"></span>
+        <tonic-button
+          type="icon"
+          size="18px"
+          symbol-id="plus"
+          title="Add a shared project"
+          data-event="get-share"
+        >
+        </tonic-button>
+        <tonic-button
+          type="icon"
+          size="18px"
+          symbol-id="link"
+          title="Share this project"
+          data-event="put-share"
+        >
+        </tonic-button>
       </header>
 
       <tonic-split id="split-main" type="vertical">

diff --git a/src/sprite.js b/src/sprite.js
@@ -155,6 +155,11 @@ class AppSprite extends Tonic {
             c0,0.7,0.5,1.3,1.2,1.3C84.6,70,85.1,69.4,85.1,68.7z"/>
         </symbol>
 
+        <symbol id="plus" viewBox="0 0 100 100">
+          <line fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="0" x1="46.5" y1="15.4" x2="46.5" y2="86.7"/>
+          <line fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="0" x1="82.2" y1="51.1" x2="10.9" y2="51.1"/>
+        </symbol>
+
         <symbol id="package" viewBox="0 0 100 100">
           <path fill="none" stroke="currentColor" stroke-width="2"
             d="M89.2,26.3L89.2,26.3L70,14.9L50.9,3.4l0,0c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.2,0-0.2,0.1l0,0l-38.5,23l0,0l-0.1,0.1

diff --git a/src/templates/src/index.html b/src/templates/src/index.html
@@ -18,7 +18,7 @@
   </head>  
   <script charset="utf-8" type="module" src="index.js"></script>
   <link rel="stylesheet" href="index.css"/>
-  <body movable>
+  <body>
     <h1>Hello, World.</h1>
   </body>
 </html>
diff --git a/src/worker.js b/src/worker.js
@@ -37,6 +37,23 @@ export default async function (req, env, ctx) {
     `
   }
 
+  if (params.get('device') === 'iphone-15') {
+    css = `
+      #SOCKET_NOTCH {
+        position: fixed;
+        top: 0;
+        left: 50%;
+        width: 35%;
+        transform: translateX(-50%);
+        height: 3.8%;
+        border-radius: 0 0 10px 10px;
+        background: black;
+        opacity: 0.1;
+        z-index: 1000;
+      }
+    `
+  }
+
   if (url.pathname.endsWith('index.html')) {
     data = data.replace(/<html(?:[^\n\r]*)>/, `<html style="zoom: ${params.get('zoom')}">`)
     data = data.replace('</body>', `<style>${css}</style><div id="SOCKET_NOTCH"></div></body>`)