Skip to content

Commit

Permalink
refactor: Abstract modal into its own component
Browse files Browse the repository at this point in the history
  • Loading branch information
@amanharwara
amanharwara committed Sep 27, 2021
1 parent e9a3b18 commit 73eb202
Show file tree
Hide file tree
Showing 7 changed files with 355 additions and 391 deletions.
36 changes: 17 additions & 19 deletions src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
import { onMount } from "svelte";
import CustomTitlebar from "./components/CustomTitlebar.svelte";
import NewChatModal from "./components/NewChatModal.svelte";
import SettingsManager from "./components/SettingsManager.svelte";
import TabBar from "./components/TabBar.svelte";
import TabConfigModal from "./components/TabConfigModal.svelte";
import TabContent from "./components/TabContent.svelte";
import ThemeManager from "./components/ThemeManager.svelte";
import { paths, modals, settings, tabs } from "./store";
import { paths, currentModal, ModalType, settings } from "./store";
import defaultTabSettings from "./util/defaultTabSettings";
const { ipcRenderer } = require("electron");
Expand All @@ -19,18 +20,22 @@
});
};
ipcRenderer.on("new-chat", () => {
currentModal.set(ModalType.NewChatModal);
});
ipcRenderer.on("open-theme-manager", () => {
$modals.themeManagerVisible = true;
currentModal.set(ModalType.ThemeManager);
});
ipcRenderer.on("open-settings", () => {
$modals.settingsManagerVisible = true;
currentModal.set(ModalType.SettingsManager);
});
ipcRenderer.on("userDataPath", (path) => {
$paths = {
...$paths,
userData: path,
userData: path as any,
};
});
Expand Down Expand Up @@ -65,37 +70,30 @@
>
<TabBar
on:add-tab={() => {
$modals.tabConfigModalVisible = true;
currentModal.set(ModalType.TabConfig);
tabSettings = defaultTabSettings();
}}
on:edit-tab={(e) => {
tabSettings = e.detail.tabToEdit;
$modals.tabConfigModalVisible = true;
currentModal.set(ModalType.TabConfig);
}}
/>
<TabContent />
</div>
<SettingsManager
visible={$modals.settingsManagerVisible}
visible={$currentModal === ModalType.SettingsManager}
on:settings-changed={settingsChanged}
on:close-settings-manager={() => {
$modals.settingsManagerVisible = false;
}}
/>
<ThemeManager
visible={$modals.themeManagerVisible}
on:close-theme-manager={() => {
$modals.themeManagerVisible = false;
}}
/>
<ThemeManager visible={$currentModal === ModalType.ThemeManager} />
<TabConfigModal
visible={$modals.tabConfigModalVisible}
visible={$currentModal === ModalType.TabConfig}
{tabSettings}
on:close-tab-config-modal={() => {
$modals.tabConfigModalVisible = false;
on:close-modal={() => {
currentModal.set(null);
tabSettings = defaultTabSettings();
}}
/>
<NewChatModal visible={$currentModal === ModalType.NewChatModal} />
</div>
</main>

Expand Down
178 changes: 74 additions & 104 deletions src/components/SettingsManager.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte";
import { fade } from "svelte/transition";
import Close from "./svg/Close.svelte";
import Spinner from "./svg/Spinner.svelte";
import Toggle from "./common/Toggle.svelte";
import { settings } from "../store";
import { currentModal, settings } from "../store";
import { get } from "svelte/store";
import Import from "./svg/Import.svelte";
import Export from "./svg/Export.svelte";
import { migrateSettings } from "../store/settings";
import Modal from "./common/Modal.svelte";
const { ipcRenderer } = require("electron");
export let visible = false;
Expand Down Expand Up @@ -55,7 +54,7 @@
const closeSettingsManager = () => {
changedSettings = [];
dispatchEvent("close-settings-manager");
currentModal.set(null);
};
onMount(() => {
Expand All @@ -66,111 +65,82 @@
})
);
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
closeSettingsManager();
}
});
</script>

{#if visible}
<div class="modal-container" transition:fade={{ duration: 100 }}>
<div class="modal">
<div class="header">
<div class="title">Settings</div>
<button class="close" on:click={() => closeSettingsManager()}>
<Close />
</button>
</div>
<div class="search-box">
<input
type="text"
placeholder="Search..."
bind:value={search}
bind:this={searchBoxRef}
/>
</div>
<div class="settings">
{#each Object.keys(currentSettings)
.map((key) => {
return { id: key, ...currentSettings[key] };
})
.filter((setting) => setting.name
.toLowerCase()
.includes(search) || setting.description
.toLowerCase()
.includes(search)) as setting}
<div class="setting">
<div class="info">
<label class="name" for={setting.id}>{setting.name}</label>
<div class="description">{setting.description}</div>
</div>
{#if typeof setting.value === "boolean"}
<Toggle
id={setting.id}
bind:value={currentSettings[setting.id].value}
on:toggle={settingToggled}
/>
{:else if setting.options}
<select
id={setting.id}
name={setting.id}
bind:value={currentSettings[setting.id].value}
>
{#each setting.options as option}
<option value={option}>{option}</option>
{/each}
</select>
{:else}
<input
type="text"
id={setting.id}
bind:value={currentSettings[setting.id].value}
/>
{/if}
</div>
{/each}
</div>
<div class="controls">
<button on:click={saveSettings} class:spinning={isSavingSettings}>
{#if isSavingSettings}
<Spinner />
{:else}
Save
{/if}
</button>
<button
title="Import Settings"
class="outlined"
on:click={importSettings}
>
<Import />
</button>
<button
title="Export Settings"
class="outlined"
on:click={exportSettings}
>
<Export />
</button>
<Modal
modalTitle="Settings Manager"
{visible}
width="max(385px, 40vw)"
height="max(400px, 60vh)"
on:close-modal={closeSettingsManager}
>
<div class="search-box">
<input
type="text"
placeholder="Search..."
bind:value={search}
bind:this={searchBoxRef}
/>
</div>
<div class="settings">
{#each Object.keys(currentSettings)
.map((key) => {
return { id: key, ...currentSettings[key] };
})
.filter((setting) => setting.name
.toLowerCase()
.includes(search) || setting.description
.toLowerCase()
.includes(search)) as setting}
<div class="setting">
<div class="info">
<label class="name" for={setting.id}>{setting.name}</label>
<div class="description">{setting.description}</div>
</div>
{#if typeof setting.value === "boolean"}
<Toggle
id={setting.id}
bind:value={currentSettings[setting.id].value}
on:toggle={settingToggled}
/>
{:else if setting.options}
<select
id={setting.id}
name={setting.id}
bind:value={currentSettings[setting.id].value}
>
{#each setting.options as option}
<option value={option}>{option}</option>
{/each}
</select>
{:else}
<input
type="text"
id={setting.id}
bind:value={currentSettings[setting.id].value}
/>
{/if}
</div>
</div>
<div class="overlay" on:click={() => closeSettingsManager()} />
{/each}
</div>
<div class="controls">
<button on:click={saveSettings} class:spinning={isSavingSettings}>
{#if isSavingSettings}
<Spinner />
{:else}
Save
{/if}
</button>
<button title="Import Settings" class="outlined" on:click={importSettings}>
<Import />
</button>
<button title="Export Settings" class="outlined" on:click={exportSettings}>
<Export />
</button>
</div>
{/if}
</Modal>

<style lang="scss">
.modal-container {
z-index: 3;
}
.modal {
width: max(385px, 40vw);
height: max(400px, 60vh);
}
.header {
margin-bottom: 0.5rem;
}
input {
width: 100%;
font-family: inherit;
Expand All @@ -182,7 +152,7 @@
color: #fff;
}
.search-box {
margin-bottom: 0.5rem;
margin: 0.5rem 0 1rem;
}
.settings {
flex-grow: 1;
Expand Down
15 changes: 8 additions & 7 deletions src/components/TabBar.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<script lang="ts">
import Tab from "./Tab.svelte";
import { modals, previouslyClosedTab, settings, tabs } from "../store";
import {
currentModal,
ModalType,
previouslyClosedTab,
settings,
tabs,
} from "../store";
import Add from "./svg/Add.svelte";
import { createEventDispatcher, onMount } from "svelte";
import arrayMove from "../util/arrayMove";
Expand Down Expand Up @@ -151,12 +157,7 @@
])
);
previouslyClosedTab.set(null);
modals.update((modals) => {
return {
...modals,
tabConfigModalVisible: false,
};
});
currentModal.set(null);
}
});
Expand Down
Loading

0 comments on commit 73eb202

Please sign in to comment.