change layout controls to dropdown

tutors-sdk · Dec 15, 2024 · f409684 · f409684
1 parent 7efa8e7
commit f409684
Showing 1 changed file with 23 additions and 40 deletions.
diff --git a/src/lib/ui/themes/LayoutMenu.svelte b/src/lib/ui/themes/LayoutMenu.svelte
@@ -7,19 +7,24 @@
   import { themeService } from "./theme-controller.svelte";
   import { courseService } from "$lib/services/course.svelte";
   import { markdownService } from "$lib/services/markdown.svelte";
-  import { Segment } from "@skeletonlabs/skeleton-svelte";
+  import { Combobox } from "@skeletonlabs/skeleton-svelte";
 
-  let theme = $state(currentTheme.value);
-  let codeTheme = $state(currentCodeTheme.value);
-
-  function changeTheme(theme: string): void {
-    themeService.setTheme(theme);
+  interface ComboxData {
+    label: string;
+    value: string;
   }
 
-  function codeThemeChange(codeTheme: string): void {
-    markdownService.setCodeTheme(codeTheme);
-    courseService.refreshAllLabs(codeTheme);
-  }
+  const themeCombo: ComboxData[] = [];
+  themeService.themes.forEach((element) => {
+    themeCombo.push({ label: element.name, value: element.name });
+  });
+  let theme = $state([currentTheme.value]);
+
+  const codeThemeCombo: ComboxData[] = [];
+  markdownService.codeThemes.forEach((element: { displayName: string; name: string }) => {
+    codeThemeCombo.push({ label: element.displayName, value: element.name });
+  });
+  let codeTheme = $state([currentCodeTheme.value]);
 
   function toggleDisplayMode(): void {
     if (lightMode.value === "dark") {
@@ -38,9 +43,9 @@
   }
 
   $effect(() => {
-    markdownService.setCodeTheme(codeTheme);
-    courseService.refreshAllLabs(codeTheme);
-    themeService.setTheme(theme);
+    themeService.setTheme(theme[0]);
+    markdownService.setCodeTheme(codeTheme[0]);
+    courseService.refreshAllLabs(codeTheme[0]);
   });
 </script>
 
@@ -50,6 +55,7 @@
 
 {#snippet menuContent()}
   <h6>Appearance</h6>
+
   <ul>
     <MenuItem
       type={lightMode.value}
@@ -59,35 +65,12 @@
     <MenuItem type={layout.value} text={layout.value === "compacted" ? "Expand" : "Compact"} onClick={toggleLayout} />
   </ul>
   <hr />
-  <h6>Themes</h6>
-  <ul class="list">
-    <Segment name="theme" bind:value={theme} orientation="vertical" classes="flex w-full" indicatorBg="bg-primary-500">
-      {#each themeService.themes as theme}
-        <Segment.Item value={theme.name}>
-          <span class="flex-grow">{theme.name}</span>
-        </Segment.Item>
-      {/each}
-    </Segment>
-  </ul>
+  <h6>Theme:</h6>
+  <Combobox data={themeCombo} bind:value={theme} />
   <hr />
   <h6>Code Style</h6>
-  <ul class="list">
-    <Segment
-      name="codeTheme"
-      bind:value={codeTheme}
-      orientation="vertical"
-      indicatorBg="bg-primary-500"
-      classes="flex w-full"
-    >
-      {#each markdownService.codeThemes as codeTheme}
-        <Segment.Item value={codeTheme.name}>
-          <div class="flex w-full justify-between">
-            <span class="text-left">{codeTheme.displayName}</span>
-          </div>
-        </Segment.Item>
-      {/each}
-    </Segment>
-  </ul>
+  <Combobox data={codeThemeCombo} bind:value={codeTheme} />
+  <ul class="list"></ul>
 {/snippet}
 
 <Menu {menuSelector} {menuContent} />