Skip to content

Commit

Permalink
Merge branch 'next-windows' of https://github.com/ItsEeleeya/Cap into…
Browse files Browse the repository at this point in the history
… next-windows
  • Loading branch information
ItsEeleeya committed Nov 16, 2024
2 parents cf12dd9 + c106552 commit 168a5cd
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 84 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentProps, JSX, Show, splitProps } from "solid-js";
import { ComponentProps, createEffect, JSX, Show, splitProps } from "solid-js";
import { WindowControlButton as ControlButton } from "./WindowControlButton";
import { getCurrentWindow } from "@tauri-apps/api/window";
import titlebarState from "~/utils/titlebar-state";
Expand All @@ -7,7 +7,11 @@ import { cx } from "cva";
export default function (props: ComponentProps<"div">) {
const [local, otherProps] = splitProps(props, ["class"]);
const window = getCurrentWindow();


createEffect(() => {
console.log(`Maximizable? ${titlebarState.maximizable}`);
});

return (
<div
class={`h-full align-baseline select-none *:outline-none *:transition-all *:duration-200 ${local.class}`}
Expand All @@ -21,7 +25,7 @@ export default function (props: ComponentProps<"div">) {
? "text-black/90 dark:text-white"
: "text-gray-50 dark:text-white",
titlebarState.minimizable
? "hover:bg-[#0000000D] active:bg-[#00000008] dark:hover:bg-[#FFFFFF1A] dark:active:bg-[#FFFFFF0D]"
? "hover:bg-[#0000000D] active:bg-[#00000008]"
: "[&>*]:opacity-30"
)}
>
Expand All @@ -42,7 +46,7 @@ export default function (props: ComponentProps<"div">) {
? "text-black/90 dark:text-white"
: "text-gray-50 dark:text-white",
titlebarState.maximizable
? "hover:bg-[#0000000D] active:bg-[#00000008] dark:hover:bg-[#FFFFFF1A] dark:active:bg-[#FFFFFF0D]"
? "hover:bg-[#0000000D] active:bg-[#00000008]"
: "[&>*]:opacity-30"
)}
>
Expand Down
165 changes: 85 additions & 80 deletions apps/desktop/src/routes/(window-chrome)/settings/general.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,51 +6,54 @@ import {
isPermissionGranted,
requestPermission,
} from "@tauri-apps/plugin-notification";
import { OsType, Platform, type } from "@tauri-apps/plugin-os";

const settingsList = [
{
key: "uploadIndividualFiles",
label: "Upload individual recording files when creating shareable link",
description:
'Warning: this will cause shareable link uploads to become significantly slower, since all individual recording files will be uploaded. Shows "Download Assets" button in Share page.',
},
{
key: "openEditorAfterRecording",
label: "Open editor automatically after recording stops",
description:
"The editor will be shown immediately after you finish recording.",
},
{
key: "hideDockIcon",
label: "Hide dock icon",
description:
"The dock icon will be hidden when there are no windows available to close.",
},
{
key: "autoCreateShareableLink",
label: "Cap Pro: Automatically create shareable link after recording",
description:
"When enabled, a shareable link will be created automatically after stopping the recording. You'll be redirected to the URL while the upload continues in the background.",
},
{
key: "disableAutoOpenLinks",
label: "Cap Pro: Disable automatic link opening",
description:
"When enabled, Cap will not automatically open links in your browser (e.g. after creating a shareable link).",
},
{
key: "enableNotifications",
label: "Enable System Notifications",
description:
"Show system notifications for events like copying to clipboard, saving files, and more. You may need to manually allow Cap access via your system's notification settings.",
requiresPermission: true,
},
] satisfies Array<{
const settingsList: Array<{
key: keyof GeneralSettingsStore;
label: string;
description: string;
platforms?: OsType[],
requiresPermission?: boolean;
}>;
}> = [
{
key: "uploadIndividualFiles",
label: "Upload individual recording files when creating shareable link",
description:
'Warning: this will cause shareable link uploads to become significantly slower, since all individual recording files will be uploaded. Shows "Download Assets" button in Share page.',
},
{
key: "openEditorAfterRecording",
label: "Open editor automatically after recording stops",
description:
"The editor will be shown immediately after you finish recording.",
},
{
key: "hideDockIcon",
label: "Hide dock icon",
platforms: ["macos"],
description:
"The dock icon will be hidden when there are no windows available to close.",
},
{
key: "autoCreateShareableLink",
label: "Cap Pro: Automatically create shareable link after recording",
description:
"When enabled, a shareable link will be created automatically after stopping the recording. You'll be redirected to the URL while the upload continues in the background.",
},
{
key: "disableAutoOpenLinks",
label: "Cap Pro: Disable automatic link opening",
description:
"When enabled, Cap will not automatically open links in your browser (e.g. after creating a shareable link).",
},
{
key: "enableNotifications",
label: "Enable System Notifications",
description:
"Show system notifications for events like copying to clipboard, saving files, and more. You may need to manually allow Cap access via your system's notification settings.",
requiresPermission: true,
},
];

export default function GeneralSettings() {
const [store] = createResource(() => generalSettingsStore.get());
Expand Down Expand Up @@ -101,61 +104,63 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
generalSettingsStore.set({ [key]: value });
};

const ostype: OsType = type();

return (
<div class="flex flex-col w-full h-full">
<div class="flex-1 overflow-y-auto">
<div class="p-4 space-y-2 divide-y divide-gray-200">
<For each={settingsList}>
{(setting) => (
<div class="space-y-2 py-3">
<div class="flex items-center justify-between">
<p>{setting.label}</p>
<button
type="button"
role="switch"
aria-checked={
settings[setting.key as keyof GeneralSettingsStore]
}
data-state={
settings[setting.key as keyof GeneralSettingsStore]
? "checked"
: "unchecked"
}
value={
settings[setting.key as keyof GeneralSettingsStore]
? "on"
: "off"
}
class={`peer inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ${
settings[setting.key as keyof GeneralSettingsStore]
? "bg-blue-400 border-blue-400"
: "bg-gray-300 border-gray-300"
}`}
onClick={() =>
handleChange(
setting.key,
!settings[setting.key as keyof GeneralSettingsStore]
)
}
>
<span
<Show when={!setting.platforms || setting.platforms.includes(ostype)}>
<div class="space-y-2 py-3">
<div class="flex items-center justify-between">
<p>{setting.label}</p>
<button
type="button"
role="switch"
aria-checked={
settings[setting.key as keyof GeneralSettingsStore]
}
data-state={
settings[setting.key as keyof GeneralSettingsStore]
? "checked"
: "unchecked"
}
class={`pointer-events-none block h-4 w-4 rounded-full bg-gray-50 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 border-2 ${
value={
settings[setting.key as keyof GeneralSettingsStore]
? "on"
: "off"
}
class={`peer inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ${settings[setting.key as keyof GeneralSettingsStore]
? "bg-blue-400 border-blue-400"
: "bg-gray-300 border-gray-300"
}`}
onClick={() =>
handleChange(
setting.key,
!settings[setting.key as keyof GeneralSettingsStore]
)
}
>
<span
data-state={
settings[setting.key as keyof GeneralSettingsStore]
? "checked"
: "unchecked"
}
class={`pointer-events-none block h-4 w-4 rounded-full bg-gray-50 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 border-2 ${settings[setting.key as keyof GeneralSettingsStore]
? "border-blue-400"
: "border-gray-300"
}`}
/>
</button>
}`}
/>
</button>
</div>
{setting.description && (
<p class="text-xs text-gray-400">{setting.description}</p>
)}
</div>
{setting.description && (
<p class="text-xs text-gray-400">{setting.description}</p>
)}
</div>
</Show>
)}
</For>
</div>
Expand Down

0 comments on commit 168a5cd

Please sign in to comment.