feat(ux): guide user through clicks

mistweaverco · Nov 26, 2024 · 27cbb00 · 27cbb00
1 parent 2b5757e
commit 27cbb00
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/src/renderer/src/Host.svelte b/src/renderer/src/Host.svelte
@@ -9,6 +9,7 @@
   let connectionStringInputIcon: HTMLElement
   let connectButton: HTMLButtonElement
   let copyButton: HTMLButtonElement
+  let toggleRemoteCursorsButton: HTMLButtonElement
 
   let cursorsActive = false
 
@@ -39,6 +40,7 @@
     connectButton.addEventListener('click', async () => {
       const offer = getOfferFromUrl(connectionStringInput.value)
       await webRTCComponent.Connect(offer)
+      toggleRemoteCursorsButton.classList.remove('is-hidden')
     })
     copyButton.addEventListener('click', async () => {
       await webRTCComponent.Setup()
@@ -63,17 +65,6 @@
       </div>
     </div>
 
-    <div class="field">
-      <div class="control">
-        <button class="button is-warning" on:click={toggleRemoteCursors}>
-          <span class="icon">
-            <i class="fas fa-mouse-pointer"></i>
-          </span>
-          <span>{cursorsActive ? 'Disable remote cursors' : 'Enable remote cursors'}</span>
-        </button>
-      </div>
-    </div>
-
     <div class="field">
       <label class="label" for="remote_connection_string">Participant connection string</label>
       <div class="control has-icons-left has-icons-right">
@@ -103,5 +94,17 @@
         <button class="button is-link" bind:this={connectButton} disabled>Connect</button>
       </div>
     </div>
+
+    <div class="field">
+      <div class="control">
+        <button bind:this={toggleRemoteCursorsButton} class="button is-warning is-hidden" on:click={toggleRemoteCursors}>
+          <span class="icon">
+            <i class="fas fa-mouse-pointer"></i>
+          </span>
+          <span>{cursorsActive ? 'Disable remote cursors' : 'Enable remote cursors'}</span>
+        </button>
+      </div>
+    </div>
+
   </div>
 </div>
diff --git a/src/renderer/src/Join.svelte b/src/renderer/src/Join.svelte
@@ -37,6 +37,7 @@
       const offer = getOfferFromUrl(connectionStringInput.value)
       await webRTCComponent.Connect(offer)
       remoteScreenContainer.classList.remove('is-hidden')
+      copyButton.classList.remove('is-hidden')
     })
     copyButton.addEventListener('click', async () => {
       copyButton.classList.add('is-loading')
@@ -66,12 +67,6 @@
 <div class="container p-5">
   <h1 class="title">Join a session</h1>
   <div class="form">
-    <div class="field">
-      <div class="control">
-        <button class="button is-link" bind:this={copyButton}>Copy my connection string</button>
-      </div>
-    </div>
-
     <div class="field">
       <label class="label" for="remote_connection_string">Host connection string</label>
       <div class="control has-icons-left has-icons-right">
@@ -103,6 +98,14 @@
     </div>
   </div>
 
+  <div class="field">
+    <div class="control">
+      <button class="button is-link is-hidden" bind:this={copyButton}
+        >Copy my connection string</button
+      >
+    </div>
+  </div>
+
   <div bind:this={remoteScreenContainer} class="field is-hidden">
     <label class="label" for="remote_screen">Remote screen</label>
     <div class="control">