fixes preview mode, layout

socketsupply · Mar 25, 2024 · b30493a · b30493a
1 parent fe6cb08
commit b30493a
Show file tree

Hide file tree

Showing 12 changed files with 287 additions and 130 deletions.
diff --git a/socket.ini b/socket.ini
@@ -318,7 +318,7 @@ height = 80%
 ; The initial width of the first window in pixels or as a percentage of the screen.
 width = 80%
 
-backgroundColorDark = "rgba(0, 0, 0, 1)"
+backgroundColorDark = "rgba(46, 46, 46, 1)"
 backgroundColorLight = "rgba(255, 255, 255, 1)"
 
 ; Maximum height of the window in pixels or as a percentage of the screen.

diff --git a/src/components/confirm.js b/src/components/confirm.js
@@ -0,0 +1,69 @@
+import { TonicDialog } from '@socketsupply/components/dialog'
+
+class DialogConfirm extends TonicDialog {
+  async prompt (opts) {
+    this.state = opts
+    await this.reRender()
+    await this.show()
+    const result = await this.event('click')
+    await this.hide()
+    return result
+  }
+
+  renderCheckbox () {
+    if (this.state.checkboxLabel) {
+      return this.html`
+        <tonic-checkbox
+          label="${this.state.checkboxLabel}",
+          id="T${Math.random()}"
+        ></tonic-checkbox>
+      `
+    }
+  }
+
+  renderButtons () {
+    if (!this.state.buttons) {
+      return this.html`
+        <tonic-button async="true" value="ok">OK</tonic-button>
+      `
+    }
+
+    return this.state.buttons.map(button => {
+      const isAsync = button.isAsync === true ? 'true' : 'false'
+
+      return this.html`
+        <tonic-button
+          value="${button.value}"
+          async="${isAsync}"
+        >${button.label}</tonic-button>`
+    })
+  }
+
+  render () {
+    const {
+      message,
+      title = 'Confirm',
+      type = 'warning'
+    } = this.state
+
+    return this.html`
+      <header>${title}</header>
+      <main>
+        <tonic-icon
+          symbol-id="${type}"
+          size="24px"
+        ></tonic-icon>
+        <div class="message">
+          ${message}
+        </div>
+        ${this.renderCheckbox()}
+      </main>
+      <footer>
+        ${this.renderButtons()}
+      </footer>
+    `
+  }
+}
+
+export default DialogConfirm
+export { DialogConfirm }
diff --git a/src/components/editor.js b/src/components/editor.js
@@ -73,6 +73,7 @@ class EditorTabs extends Tonic {
       label: node.label,
       id: node.id,
       path: node.id,
+      isRootSettingsFile: node.isRootSettingsFile,
       model: monaco.editor.createModel(),
       state: null,
       hash: null,
@@ -179,10 +180,13 @@ class EditorTabs extends Tonic {
         if (this.state.tabs.size > 0) {
           const tabs = [...this.state.tabs.values()]
           const previousSibling = tabs.find(t => t.index < tab.index)
-          if (previousSibling) {
-            previousSibling.selected = true
-            this.state.selectedTabId = previousSibling.id
-            this.selectTab(previousSibling.id)
+          const nextSibling = tabs.find(t => t.index > tab.index)
+          const sibling = previousSibling || nextSibling
+
+          if (sibling) {
+            sibling.selected = true
+            this.state.selectedTabId = sibling.id
+            this.selectTab(sibling.id)
           }
         } else {
           // there are no more tabs. empty the editor
@@ -203,7 +207,12 @@ class EditorTabs extends Tonic {
         const unsaved = tab.unsaved ? 'unsaved' : ''
 
         return this.html`
-          <div class="tab ${selected} ${unsaved}" data-event="select" data-id="${tab.id}">
+          <div
+            class="tab ${selected} ${unsaved}"
+            data-event="select"
+            data-id="${tab.id}"
+            title="${tab.id}"
+          >
             <div class="label">${tab.label}</div>
             <div class="close"><tonic-button type="icon" symbol-id="close" data-event="close" size="18px"></tonic-button></div>
           </div>
@@ -280,10 +289,6 @@ class AppEditor extends Tonic {
     if (!projectNode.isDirectory) {
       const tabs = this.querySelector('editor-tabs')
 
-      if (projectNode.label === 'settings.json' && projectNode.parent.id === 'root') {
-        projectNode.isRootSettingsFile = true
-      }
-
       tabs.add(projectNode)
 
       const ext = path.extname(projectNode.id)

diff --git a/src/components/project.js b/src/components/project.js
@@ -498,6 +498,10 @@ class AppProject extends Tonic {
         }
       }
 
+      if (node.label === 'settings.json' && node.parent.id === 'root') {
+        node.isRootSettingsFile = true
+      }
+
       // Load the code editor
       const coEditor = document.querySelector('app-editor')
       coEditor.loadProjectNode(node)

diff --git a/src/components/properties.js b/src/components/properties.js
@@ -8,6 +8,38 @@ import { Encryption, sha256 } from 'socket:network'
 import Config from '../lib/config.js'
 
 class AppProperties extends Tonic {
+  async saveSettingsFile () {
+    const app = this.props.parent
+    const currentProject = app.state.currentProject
+    const pathToSettingsFile = path.join(path.DATA, 'projects', 'settings.json')
+    const coTabs = document.querySelector('editor-tabs')
+    const coEditor = document.querySelector('app-editor')
+
+    // if the user currently has the config file open in the editor...
+    if (coTabs.tab?.isRootSettingsFile) {
+      try {
+        coEditor.value = JSON.stringify(app.state.settings, null, 2)
+      } catch (err) {
+        return notifications.create({
+          type: 'error',
+          title: 'Unable to save config file',
+          message: err.message
+        })
+      }
+    }
+
+    try {
+      const str = JSON.stringify(app.state.settings)
+      await fs.promises.writeFile(pathToSettingsFile, str)
+    } catch (err) {
+      return notifications?.create({
+        type: 'error',
+        title: 'Error',
+        message: 'Unable to update settings'
+      })
+    }
+  }
+
   async change (e) {
     const el = Tonic.match(e.target, '[data-event]')
     if (!el) return
@@ -53,40 +85,14 @@ class AppProperties extends Tonic {
     // when the user wants to toggle one of the preview windows they have configured
     //
     if (event === 'preview') {
-      const pathToSettingsFile = path.join(path.DATA, 'projects', 'settings.json')
       const previewWindow = app.state.settings.previewWindows.find(o => o.title === value)
 
       if (previewWindow) {
         previewWindow.active = !previewWindow.active
-
-        const currentProject = app.state.currentProject
-
-        // if the user currently has the config file open in the editor...
-        if (currentProject.label === 'settings.json' && currentProject.parent.id === 'root') {
-          try {
-            editor.value = JSON.stringify(app.state.settings, null, 2)
-          } catch (err) {
-            return notifications.create({
-              type: 'error',
-              title: 'Unable to save config file',
-              message: err.message
-            })
-          }
-        }
-
-        try {
-          const str = JSON.stringify(app.state.settings)
-          await fs.promises.writeFile(pathToSettingsFile, str)
-        } catch (err) {
-          return notifications?.create({
-            type: 'error',
-            title: 'Error',
-            message: 'Unable to update settings'
-          })
-        }
-
-        app.activatePreviewWindows()
       }
+
+      await this.saveSettingsFile()
+      app.activatePreviewWindows()
     }
 
     //

diff --git a/src/components/sprite.js b/src/components/sprite.js
@@ -46,7 +46,7 @@ class AppSprite extends Tonic {
           <path fill="currentColor" d="M56.0327 25.6988C61.7851 20.1774 70.895 20.3744 76.4059 26.1394C81.8662 31.8515 81.7624 40.9113 76.1727 46.4953L43.0755 79.559C40.9173 81.715 37.6334 82.2498 34.9088 80.8889C30.5506 78.712 29.6103 72.8728 33.0625 69.4241L60.7903 41.7244C62.2562 40.26 62.2639 37.878 60.8077 36.404C59.3514 34.93 56.9826 34.9222 55.5167 36.3866L27.7889 64.0863C20.7003 71.1677 22.6312 83.1575 31.58 87.6274C37.1745 90.4219 43.9175 89.3238 48.3491 84.8968L81.4463 51.8331C89.9336 43.3544 90.0912 29.5983 81.8004 20.9252C73.4327 12.1718 59.6005 11.8726 50.8662 20.2562L18.2413 51.5712C16.7466 53.0058 16.6916 55.3872 18.1183 56.8901C19.5449 58.3931 21.9131 58.4485 23.4078 57.0138L56.0327 25.6988Z"/>
         </symbol>
 
-        <symbol id="play" viewBox="0 0 100 100">
+        <symbol id="play-icon" viewBox="0 0 100 100">
           <path fill="currentColor" d="M82.1,46.4l-57-32.9c-1.1-0.7-2.4-0.7-3.5,0c-1.1,0.7-1.7,1.9-1.7,3.2v65.8c0,1.3,0.5,2.5,1.7,3.2c0.6,0.3,1.1,0.5,1.8,0.5
             c0.6,0,1.2-0.2,1.8-0.5l56.9-32.9c1.1-0.7,1.8-1.9,1.8-3.2C84,48.3,83.3,47,82.1,46.4z"/>
         </symbol>

diff --git a/src/css/component-confirm.css b/src/css/component-confirm.css
@@ -0,0 +1,43 @@
+dialog-confirm {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  max-width: 500px;
+  min-height: 280px;
+  display: grid;
+  font-family: var(--tonic-monospace);
+  text-align: center;
+  app-region: drag;
+  --app-region: drag;
+}
+
+dialog-confirm header {
+  height: 46px;
+  text-align: center;
+  padding: 14px;
+  font-size: 12px;
+  color: var(--tonic-info);
+}
+
+dialog-confirm footer {
+  height: 60px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  padding: 0 14px;
+}
+
+dialog-confirm tonic-button {
+  app-region: unset;
+  --app-region: unset;
+  place-self: center end;
+}
+
+dialog-confirm p {
+  margin: 0;
+}
+
+dialog-confirm main {
+  justify-content: center;
+  align-content: center;
+  padding: 0 6%;
+}
diff --git a/src/css/component-editor.css b/src/css/component-editor.css
@@ -35,8 +35,8 @@ editor-tabs .tab.selected {
   opacity: 1;
 }
 
-editor-tabs .tab.unsaved {
-  border: 1px dashed;
+editor-tabs .tab.unsaved .label {
+  border-bottom: 1px solid var(--tonic-warning);
 }
 
 editor-tabs .tab .label {

diff --git a/src/css/index.css b/src/css/index.css
@@ -160,7 +160,6 @@ header {
 
 header.component {
   display: grid;
-  gap: 12px;
   grid-template-rows: auto;
   align-content: center;
   height: 50px;
@@ -177,6 +176,10 @@ header.component tonic-button {
   height: 34px;
 }
 
+header.component tonic-button.selected svg use {
+  color: var(--tonic-accent);
+}
+
 header.component#header-properties {
   display: grid;
   grid-template-columns: 34px 34px 34px 1fr;

diff --git a/src/css/view-home.css b/src/css/view-home.css
@@ -19,6 +19,16 @@ view-home.show {
   opacity: 1;
 }
 
+view-home .content {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 6%;
+  overflow: scroll;
+}
+
 view-home h1 {
   font-family: var(--tonic-body);
   text-transform: uppercase;
@@ -75,8 +85,8 @@ view-home tonic-tab a {
 }
 
 view-home tonic-tab a[aria-selected="true"] {
-  background: var(--tonic-accent);
-  color: white;
+  background: var(--tonic-border);
+  color: var(--tonic-primary);
 }
 
 view-home #tab-panel-profile section {

diff --git a/src/index.js b/src/index.js
@@ -430,6 +430,15 @@ class AppView extends Tonic {
     if (coDialogSubscribe) coDialogSubscribe.show()
   }
 
+  async togglePreviewMode () {
+    const coPreviewModeButton = document.querySelector('#toggle-preview-mode')
+    coPreviewModeButton.classList.toggle('selected')
+
+    const coProperties = document.querySelector('app-properties')
+    this.state.settings.previewMode = !this.state.settings.previewMode
+    coProperties.saveSettingsFile()
+  }
+
   async createProject () {
     const dest = path.join(path.DATA, 'projects', 'new-project')
     await fs.promises.mkdir(dest, { recursive: true })
@@ -678,6 +687,10 @@ class AppView extends Tonic {
       this.exportProject()
     }
 
+    if (event === 'preview-mode') {
+      this.togglePreviewMode()
+    }
+
     if (event === 'create-new-project') {
       this.createProject()
     }
@@ -732,13 +745,13 @@ class AppView extends Tonic {
         <tonic-split-right width="20%">
           <header class="component" id="header-properties">
 
-            <tonic-button type="icon" size="18px" symbol-id="play" title="Build & Run The Project" data-event="run">
+            <tonic-button type="icon" size="18px" symbol-id="play-icon" title="Build & Run The Project" data-event="run">
             </tonic-button>
 
             <tonic-button type="icon" size="22px" symbol-id="run-icon" title="Evalulate The current selection or all code in the editor" data-event="eval">
             </tonic-button>
 
-            <tonic-button type="icon" size="24px" symbol-id="speed-icon" title="Toggle real-time preview mode, save changes as you type" data-event="preview-toggle">
+            <tonic-button type="icon" size="24px" symbol-id="speed-icon" id="toggle-preview-mode" title="Toggle real-time preview mode, save changes as you type" data-event="preview-mode">
             </tonic-button>
 
             <span class="spacer"></span>