chore: Move toggleable settings to the top of the settings dropdown

Mitcheljager · Feb 10, 2024 · bb293dd · bb293dd
1 parent 1881eb4
commit bb293dd
Showing 1 changed file with 46 additions and 42 deletions.
diff --git a/app/javascript/src/components/editor/Settings.svelte b/app/javascript/src/components/editor/Settings.svelte
@@ -61,46 +61,9 @@
 
   {#if active}
     <div transition:fly={{ duration: 150, y: 20 }} use:escapeable on:escape={() => active = false} class="dropdown__content block p-1/4" style="width: 300px">
-      <h5 class="mt-0 mb-1/8">Font</h5>
-
-      <div class="form-group-inline">
-        <label for="" class="text-base">Family</label>
-        <input type="text" class="form-input bg-darker" bind:value={$settings["editor-font"]} />
-      </div>
-
-      <div class="form-group-inline mt-1/8">
-        <label for="" class="text-base nowrap">Size</label>
-        <input type="range" min=10 max=18 step=1 class="range" bind:value={$settings["editor-font-size"]} />
-      </div>
-
-      <hr>
-
-      <h5 class="mt-1/4 mb-1/8">Cursor</h5>
-
-      <div class="form-group-inline">
-        <label for="" class="text-base font-size nowrap">Color</label>
-        <input type="color" class="color-input" bind:value={$settings["editor-cursor-color"]} />
-      </div>
+      <h5 class="mt-0 mb-1/8">Settings</h5>
 
-      <div class="form-group-inline mt-1/8">
-        <label for="" class="text-base font-size nowrap">Size</label>
-        <input type="range" min=1 max=10 step=1 class="range" bind:value={$settings["editor-cursor-width"]} />
-      </div>
-
-      <hr>
-
-      <h5 class="mt-1/4 mb-0">Syntax Highlighting</h5>
-
-      {#each syntaxHighlight as color}
-        <div class="form-group-inline mt-1/8">
-          <label for="" class="text-base font-size nowrap">{color}</label>
-          <input type="color" class="color-input" bind:value={$settings[`color-${ color }`]} />
-        </div>
-      {/each}
-
-      <hr>
-
-      <div class="checkbox tooltip tooltip--top-left mt-1/8">
+      <div class="checkbox tooltip mt-1/8">
         <input id="show-line-indent-markers" type="checkbox" bind:checked={$settings["show-indent-markers"]} />
         <label for="show-line-indent-markers">Show line indent markers</label>
 
@@ -109,7 +72,7 @@
         </div>
       </div>
 
-      <div class="checkbox tooltip tooltip--top-left mt-1/8">
+      <div class="checkbox tooltip mt-1/8">
         <input id="word-wrap" type="checkbox" bind:checked={$settings["word-wrap"]} />
         <label for="word-wrap">Word wrap</label>
 
@@ -118,7 +81,7 @@
         </div>
       </div>
 
-      <div class="checkbox tooltip tooltip--top-left mt-1/8">
+      <div class="checkbox tooltip mt-1/8">
         <input id="autocomplete-parameter-objects" type="checkbox" bind:checked={$settings["autocomplete-parameter-objects"]} />
         <label for="autocomplete-parameter-objects">
           Autocomplete using parameter objects
@@ -130,7 +93,7 @@
       </div>
 
       {#if $settings["autocomplete-parameter-objects"]}
-        <div class="form-group mt-1/8 tooltip tooltip--top-left" transition:slide={{ duration: 100 }}>
+        <div class="form-group mt-1/8 tooltip" transition:slide|local={{ duration: 100 }}>
           <label for="" class="text-base nowrap">Minimum parameter length</label>
 
           <div class="flex align-center">
@@ -144,6 +107,47 @@
         </div>
       {/if}
 
+      <hr />
+
+      <h5 class="mt-0 mb-1/8">Font</h5>
+
+      <div class="form-group-inline">
+        <label for="" class="text-base">Family</label>
+        <input type="text" class="form-input bg-darker" bind:value={$settings["editor-font"]} />
+      </div>
+
+      <div class="form-group-inline mt-1/8">
+        <label for="" class="text-base nowrap">Size</label>
+        <input type="range" min=10 max=18 step=1 class="range" bind:value={$settings["editor-font-size"]} />
+      </div>
+
+      <hr>
+
+      <h5 class="mt-1/4 mb-1/8">Cursor</h5>
+
+      <div class="form-group-inline">
+        <label for="" class="text-base font-size nowrap">Color</label>
+        <input type="color" class="color-input" bind:value={$settings["editor-cursor-color"]} />
+      </div>
+
+      <div class="form-group-inline mt-1/8">
+        <label for="" class="text-base font-size nowrap">Size</label>
+        <input type="range" min=1 max=10 step=1 class="range" bind:value={$settings["editor-cursor-width"]} />
+      </div>
+
+      <hr>
+
+      <h5 class="mt-1/4 mb-0">Syntax Highlighting</h5>
+
+      {#each syntaxHighlight as color}
+        <div class="form-group-inline mt-1/8">
+          <label for="" class="text-base font-size nowrap">{color}</label>
+          <input type="color" class="color-input" bind:value={$settings[`color-${ color }`]} />
+        </div>
+      {/each}
+
+      <hr>
+
       <button class="button button--link button--small pb-0 mt-1/4" on:click={resetToDefault}>Reset all to default</button>
     </div>
   {/if}