Skip to content

Commit

Permalink
add more settings inf frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
0-don committed Dec 22, 2024
1 parent 0a77026 commit 9a8a08f
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 23 deletions.
43 changes: 29 additions & 14 deletions src/components/elements/input.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,42 @@
import { Component } from "solid-js";
import { Component, JSX, createSignal } from "solid-js";

interface InputProps {
type InputProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
debounce?: number;
className?: string;
value: string;
onChange: (value: string) => void;
placeholder?: string;
type?: string;
}
};

export const Input: Component<InputProps> = ({ className, debounce = 0, onInput, value: initialValue = "", ...props }) => {
let timeoutId: number;
const [value, setValue] = createSignal(initialValue as string);

const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => {
const target = e.currentTarget;
setValue(target.value);

if (debounce > 0) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
// @ts-ignore
onInput?.(e);
}, debounce);
} else {
// @ts-ignore
onInput?.(e);
}
};

export const Input: Component<InputProps> = (props) => {
return (
<div
class={`${
props.className ? props.className : ""
className ? className : ""
} group flex items-center justify-between rounded-md border border-gray-300 p-1 px-1.5 text-sm focus-within:border-indigo-500 dark:border-dark-light dark:bg-dark-light`}
>
<input
type={props.type || "text"}
value={props.value}
onChange={(e) => props.onChange(e.currentTarget.value)}
placeholder={props.placeholder}
{...props}
onInput={handleInput}
value={value()}
class="w-full appearance-none bg-transparent text-sm focus:outline-none focus:ring-0 dark:text-white"
/>
</div>
);
};
};
25 changes: 17 additions & 8 deletions src/components/pages/settings/settings-general.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { HiSolidCog8Tooth } from "solid-icons/hi";
import { IoLanguageOutline } from "solid-icons/io";
import { RiDeviceKeyboardFill } from "solid-icons/ri";
import { VsRocket } from "solid-icons/vs";
import { Component, Show } from "solid-js";
import { Component, createEffect, Show } from "solid-js";
import { HotkeyStore } from "../../../store/hotkey-store";
import { SettingsStore } from "../../../store/settings-store";
import { HotkeyEvent, Language } from "../../../types/enums";
Expand All @@ -18,6 +18,9 @@ import { Shortcut } from "../../utils/shortcut";
interface SettingsGeneralProps {}

export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
createEffect(() => {
console.log("settings", SettingsStore.settings());
}, []);
return (
<Show when={SettingsStore.settings()}>
<TextBlock Icon={RiDeviceKeyboardFill} title="Keyboard shortcut">
Expand Down Expand Up @@ -51,7 +54,6 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
</div>

<Dropdown
className="w-16"
items={Object.entries(Language).map(([key, value]) => ({ value: value, label: key }))}
value={SettingsStore.settings()!.language}
onChange={(language) => {
Expand All @@ -67,18 +69,25 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
</div>

<Input
className="w-16"
value={SettingsStore.settings()!.display_scale.toString()}
onChange={(display_scale) => {
SettingsStore.updateSettings({ ...SettingsStore.settings()!, display_scale: parseInt(display_scale) });
}}
type="number"
step="0.01"
min={0.5}
max={2}
value={SettingsStore.settings()!.display_scale}
debounce={1000}
onInput={(e) =>
SettingsStore.updateSettings({
...SettingsStore.settings()!,
display_scale: Number(parseFloat(e.target.value).toFixed(2)),
})
}
/>
</div>

<div class="flex items-center justify-between space-x-2 px-5 pb-5">
<div class="flex items-center space-x-2 truncate">
<FiMoon class="dark:text-white" />
<h6 class="text-sm">Switch Theme.</h6>
<h6 class="text-sm">Switch Theme</h6>
</div>
<div>
<DarkMode />
Expand Down
2 changes: 1 addition & 1 deletion src/store/clipboard-store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function createClipboardStore() {
setWhere(initialWhere);
const clipboards = await getClipboards();
setClipboards(clipboards);
ClipboardStore.clipboardRef()!.scrollTo(0, 0);
ClipboardStore.clipboardRef()?.scrollTo(0, 0);
};

const resetClipboards = async () => {
Expand Down
1 change: 1 addition & 0 deletions src/store/settings-store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ function createSettingsStore() {
const initSettings = async () => {
const settings = await invokeCommand(InvokeCommand.GetSettings);
setSettings(settings);
console.log(settings);
};

const syncClipboard = async () => invokeCommand(InvokeCommand.SyncClipboardHistory);
Expand Down

0 comments on commit 9a8a08f

Please sign in to comment.