Merge pull request #704 from intechstudio/feat/Tooltip

🚩PR (Connecting): Reworked code base to use new NPM package of grid-uikit
intechstudio · May 10, 2024 · ff9bd33 · ff9bd33
2 parents b4505dd + 533f36c
commit ff9bd33
Show file tree

Hide file tree

Showing 33 changed files with 116 additions and 556 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,7 +1,6 @@
 src/renderer/runtime/intech_lua.json
 dist/*
 dist-web/*
-src/renderer/assets/*
 build/*
 build-assets/*
 src/external/grid-protocol/*
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "dependencies": {
-    "@intechstudio/grid-uikit": "^0.0.7",
+    "@intechstudio/grid-uikit": "^0.0.8",
     "adm-zip": "^0.5.10",
     "chokidar": "^3.5.3",
     "discord.js": "^13.6.0",

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
@@ -40,16 +40,14 @@
 </script>
 
 <script>
-  import * as luamin from "lua-format";
   import { stringManipulation } from "../main/user-interface/_string-operations";
 
   import { createEventDispatcher, onMount, onDestroy } from "svelte";
 
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
 
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../main/panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
+
   import { monaco_store } from "../main/modals/Monaco.store";
   import { monaco_elementtype } from "../lib/CustomMonaco";
 
@@ -156,11 +154,7 @@
       />
     </div>
 
-    <MoltenPushButton
-      on:click={open_monaco}
-      text={"Edit Code"}
-      style={ButtonStyle.ACCEPT}
-    />
+    <MoltenPushButton click={open_monaco} text={"Edit Code"} style={"accept"} />
   </div>
 
   <div class="flex flex-row mt-4">

diff --git a/src/renderer/config-blocks/Macro.svelte b/src/renderer/config-blocks/Macro.svelte
@@ -60,9 +60,7 @@
   import * as keyMap_hu from "../../external/macro/map-hu.json";
   import * as keyMap_de from "../../external/macro/map-de.json";
 
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../main/panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   const layouts = [
     { name: "En", lookup: keyMap_en.default },
@@ -517,9 +515,9 @@
       </button>
     </div>
     <MoltenPushButton
-      on:click={addKeyManually}
+      click={addKeyManually}
       text={"Add Key"}
-      style={ButtonStyle.ACCEPT}
+      style={"accept"}
     />
   </div>
   <div class="flex flex-col">
@@ -534,9 +532,9 @@
       />
 
       <MoltenPushButton
-        on:click={addDelayManually}
+        click={addDelayManually}
         text={"Add Delay"}
-        style={ButtonStyle.ACCEPT}
+        style={"accept"}
       />
     </div>
   </div>
@@ -555,11 +553,7 @@
     />
   </div>
 
-  <MoltenPushButton
-    on:click={clearMacro}
-    text={"Clear All"}
-    style={ButtonStyle.ACCEPT}
-  />
+  <MoltenPushButton click={clearMacro} text={"Clear All"} style={"accept"} />
 </div>
 
 <style>

diff --git a/src/renderer/config-blocks/MidiSysEx.svelte b/src/renderer/config-blocks/MidiSysEx.svelte
@@ -49,9 +49,7 @@
 
   import TabButton from "../main/user-interface/TabButton.svelte";
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../main/panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   export let config;
   export let index;
@@ -146,10 +144,10 @@
       </div>
     {/key}
     <MoltenPushButton
-      on:click={sendData}
+      click={sendData}
       disabled={!commitState}
       text={"Commit"}
-      style={ButtonStyle.ACCEPT}
+      style={"accept"}
     />
   </div>
 

diff --git a/src/renderer/config-blocks/VarGlobal.svelte b/src/renderer/config-blocks/VarGlobal.svelte
@@ -41,9 +41,7 @@
   export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../main/panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   let sidebarWidth;
 
@@ -229,10 +227,10 @@
       <div class="text-sm text-red-500">Parenthesis must be closed!</div>
     {/if}
     <MoltenPushButton
-      on:click={sendData}
+      click={sendData}
       disabled={Boolean(!commitState || parenthesisError || variableNameError)}
       text={"Commit"}
-      style={ButtonStyle.ACCEPT}
+      style={"accept"}
     />
   </div>
 

diff --git a/src/renderer/config-blocks/VarLocals.svelte b/src/renderer/config-blocks/VarLocals.svelte
@@ -41,9 +41,7 @@
   export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../main/panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   let sidebarWidth;
 
@@ -232,10 +230,10 @@
       <div class="text-sm text-red-500">Parenthesis must be closed!</div>
     {/if}
     <MoltenPushButton
-      on:click={sendData}
+      click={sendData}
       disabled={Boolean(!commitState || parenthesisError || variableNameError)}
       text={"Commit"}
-      style={ButtonStyle.ACCEPT}
+      style={"accept"}
     />
   </div>
 

diff --git a/src/renderer/config-blocks/VarSelf.svelte b/src/renderer/config-blocks/VarSelf.svelte
@@ -41,9 +41,7 @@
   export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../main/panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   let sidebarWidth;
 
@@ -233,10 +231,10 @@
       <div class="text-sm text-red-500">Parenthesis must be closed!</div>
     {/if}
     <MoltenPushButton
-      on:click={sendData}
+      click={sendData}
       disabled={Boolean(!commitState || parenthesisError || variableNameError)}
       text={"Commit"}
-      style={ButtonStyle.ACCEPT}
+      style={"accept"}
     />
   </div>
 

diff --git a/src/renderer/config-blocks/components/RawCode_SelectList.svelte b/src/renderer/config-blocks/components/RawCode_SelectList.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import { MeltSelect } from "@intechstudio/grid-uikit";
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../../main/panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton, MeltSelect } from "@intechstudio/grid-uikit";
 
   export let options = [];
 
@@ -26,11 +23,7 @@
     <MeltSelect bind:target={selection} {options} />
   {/if}
   <div class="flex flex-row gap-2">
-    <MoltenPushButton text={"Cancel"} on:click={handleCancel} />
-    <MoltenPushButton
-      text={"Replace"}
-      style={ButtonStyle.ACCEPT}
-      on:click={handleReplace}
-    />
+    <MoltenPushButton text={"Cancel"} click={handleCancel} />
+    <MoltenPushButton text={"Replace"} style={"accept"} click={handleReplace} />
   </div>
 </div>
diff --git a/src/renderer/main/NavTabs.svelte b/src/renderer/main/NavTabs.svelte
@@ -1,8 +1,7 @@
 <script>
+  import { tooltip } from "./_actions/tooltip.ts";
   import { appSettings, splitpanes } from "../runtime/app-helper.store";
 
-  import { setTooltip } from "./user-interface/tooltip/Tooltip.ts";
-
   let selectedRightTab = "Configuration";
   let selectedLeftTab = "ProfileCloud";
 
@@ -80,7 +79,7 @@
     -->
 
     <button
-      use:setTooltip={{
+      use:tooltip={{
         nowrap: true,
         placement: "right",
         duration: 75,
@@ -116,7 +115,7 @@
     </button>
 
     <button
-      use:setTooltip={{
+      use:tooltip={{
         nowrap: true,
         placement: "right",
         duration: 75,
@@ -174,7 +173,7 @@
 
   <div class="flex flex-col">
     <button
-      use:setTooltip={{
+      use:tooltip={{
         nowrap: true,
         placement: "right",
         duration: 75,
@@ -209,7 +208,7 @@
     </button>
 
     <button
-      use:setTooltip={{
+      use:tooltip={{
         nowrap: true,
         placement: "right",
         duration: 75,
@@ -269,7 +268,7 @@
     </button>
 
     <button
-      use:setTooltip={{
+      use:tooltip={{
         nowrap: true,
         placement: "right",
         duration: 75,
@@ -320,7 +319,7 @@
     </button>
 
     <button
-      use:setTooltip={{
+      use:tooltip={{
         nowrap: true,
         placement: "right",
         instant: true,
@@ -364,7 +363,7 @@
 
     {#if $appSettings.persistent.websocketMonitorEnabled === true}
       <button
-        use:setTooltip={{
+        use:tooltip={{
           nowrap: true,
           placement: "right",
           duration: 75,

diff --git a/...er/main/user-interface/tooltip/Tooltip.ts → src/renderer/main/_actions/tooltip.ts b/...er/main/user-interface/tooltip/Tooltip.ts → src/renderer/main/_actions/tooltip.ts
@@ -1,7 +1,7 @@
-import { tooltip_content } from "./tooltip-content.json.js";
+import { tooltip_content } from "../user-interface/tooltip/tooltip-content.json";
 import type { Action } from "svelte/action";
 
-export const setTooltip: Action<HTMLElement, any> = (
+export const tooltip: Action<HTMLElement, any> = (
   node: HTMLElement,
   options: any
 ): void => {
@@ -19,12 +19,13 @@ export const setTooltip: Action<HTMLElement, any> = (
     const sibling = document.createElement("div");
     node.parentNode?.insertBefore(sibling, node.nextSibling);
 
-    const Tooltip = (await import("./Tooltip.svelte")).default;
+    const MoltenTooltip = (await import("@intechstudio/grid-uikit"))
+      .MoltenTooltip;
 
     options.referenceElement = node;
     options.text = text;
 
-    new Tooltip({
+    new MoltenTooltip({
       target: sibling,
       props: options,
     });

diff --git a/src/renderer/main/modals/AddVirtualModule.svelte b/src/renderer/main/modals/AddVirtualModule.svelte
@@ -9,9 +9,7 @@
   import { ModuleType } from "./../../protocol/grid-protocol";
   import { Analytics } from "./../../runtime/analytics.js";
   import { runtime } from "../../runtime/runtime.store";
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
   import MoltenModal from "./MoltenModal.svelte";
   import { modal } from "./modal.store";
   import { get } from "svelte/store";
@@ -123,12 +121,12 @@
       <div class="flex flex-row gap-2 pt-4 ml-auto">
         <MoltenPushButton
           text="Add Module"
-          on:click={handleAddClicked}
-          style={ButtonStyle.ACCEPT}
+          click={handleAddClicked}
+          style={"accept"}
           disabled={selectedModule === -1}
         />
         {#if window.ctxProcess.buildVariables().BUILD_TARGET !== "web"}
-          <MoltenPushButton text="Cancel" on:click={handleCancelClicked} />
+          <MoltenPushButton text="Cancel" click={handleCancelClicked} />
         {/if}
       </div>
     </div>

diff --git a/src/renderer/main/modals/Export.svelte b/src/renderer/main/modals/Export.svelte
@@ -2,7 +2,7 @@
   import { modal } from "./modal.store";
   import { configManager } from "../panels/configuration/Configuration.store";
   import MoltenModal from "./MoltenModal.svelte";
-  import MoltenPushButton from "../panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
   import MoltenPopup from "../panels/preferences/MoltenPopup.svelte";
 
   function handleCopy() {
@@ -52,7 +52,7 @@
       class="bg-secondary min-h-200 font-mono w-full p-1 my-1 rounded"
     />
 
-    <MoltenPushButton on:click={handleCopy} text="Copy" style="accept">
+    <MoltenPushButton click={handleCopy} text="Copy" style="accept">
       <MoltenPopup slot="popup" text="Copied to clipboard!" />
     </MoltenPushButton>
   </div>

diff --git a/src/renderer/main/modals/Feedback.svelte b/src/renderer/main/modals/Feedback.svelte
@@ -6,9 +6,7 @@
   import { backOut } from "svelte/easing";
   import MoltenModal from "./MoltenModal.svelte";
   import { Analytics } from "../../runtime/analytics.js";
-  import MoltenPushButton, {
-    ButtonStyle,
-  } from "../panels/preferences/MoltenPushButton.svelte";
+  import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   let textArea = undefined;
   let inputField = undefined;
@@ -118,10 +116,10 @@
         </div>
       </div>
       <MoltenPushButton
-        on:click={sendFeedback}
+        click={sendFeedback}
         id="close-btn"
         text={"Submit Feedback!"}
-        style={ButtonStyle.ACCEPT}
+        style={"accept"}
       />
     </div>