gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-22 19:14:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

move Toggle and ToggleButton to UI

Browse Source
This commit is contained in:
Pavel Laptev 2024-10-21 12:07:19 +02:00
parent abdee0e5d0
commit 029b8e5b2c
14 changed files with 51 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/desktop/src/lib/branch/BranchLaneContextMenu.svelte
View File

@ -8,12 +8,12 @@
import { projectAiGenEnabled } from '$lib/config/config';
import { stackingFeature } from '$lib/config/uiFeatureFlags';
import TextBox from '$lib/shared/TextBox.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { BranchController } from '$lib/vbranches/branchController';
import { VirtualBranch } from '$lib/vbranches/types';
import { getContext, getContextStore } from '@gitbutler/shared/context';
import Button from '@gitbutler/ui/Button.svelte';
import Modal from '@gitbutler/ui/Modal.svelte';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import Tooltip from '@gitbutler/ui/Tooltip.svelte';
interface Props {
@ -157,7 +157,7 @@
<ContextMenuItem label="Allow rebasing" onclick={toggleAllowRebasing}>
{#snippet control()}
<Tooltip text={'Allows changing commits after push\n(force push needed)'}>
<Toggle small bind:checked={allowRebasing} on:click={toggleAllowRebasing} />
<Toggle small bind:checked={allowRebasing} onclick={toggleAllowRebasing} />
</Tooltip>
{/snippet}
</ContextMenuItem>

2
apps/desktop/src/lib/components/FilterBranchesButton.svelte
View File

@ -2,9 +2,9 @@
import ContextMenu from '$lib/components/contextmenu/ContextMenu.svelte';
import ContextMenuItem from '$lib/components/contextmenu/ContextMenuItem.svelte';
import ContextMenuSection from '$lib/components/contextmenu/ContextMenuSection.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import Button from '@gitbutler/ui/Button.svelte';
import Checkbox from '@gitbutler/ui/Checkbox.svelte';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import type { Writable, Readable } from 'svelte/store';
export let filtersActive: Readable<boolean>;

4
apps/desktop/src/lib/components/ProjectSetupTarget.svelte
View File

@ -8,12 +8,12 @@
import Select from '$lib/select/Select.svelte';
import SelectItem from '$lib/select/SelectItem.svelte';
import GithubIntegration from '$lib/settings/GithubIntegration.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { UserService } from '$lib/stores/user';
import { unique } from '$lib/utils/array';
import { getBestBranch, getBestRemote, getBranchRemoteFromRef } from '$lib/utils/branch';
import { getContext } from '@gitbutler/shared/context';
import Button from '@gitbutler/ui/Button.svelte';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import { createEventDispatcher } from 'svelte';
import type { RemoteBranchInfo } from '$lib/baseBranch/baseBranchService';
import { goto } from '$app/navigation';
@ -178,7 +178,7 @@
bind:this={aiGenCheckbox}
checked={$aiGenEnabled}
id="aiGenEnabled"
on:change={() => {
onclick={() => {
$aiGenEnabled = !$aiGenEnabled;
}}
/>

2
apps/desktop/src/lib/pr/PrDetailsModal.svelte
View File

@ -27,7 +27,6 @@
import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
import DropDownButton from '$lib/shared/DropDownButton.svelte';
import TextBox from '$lib/shared/TextBox.svelte';
import ToggleButton from '$lib/shared/ToggleButton.svelte';
import { getBranchNameFromRef } from '$lib/utils/branch';
import { KeyName, onMetaEnter } from '$lib/utils/hotkeys';
import { sleep } from '$lib/utils/sleep';
@ -39,6 +38,7 @@
import BorderlessTextarea from '@gitbutler/ui/BorderlessTextarea.svelte';
import Button from '@gitbutler/ui/Button.svelte';
import Modal from '@gitbutler/ui/Modal.svelte';
import ToggleButton from '@gitbutler/ui/ToggleButton.svelte';
import { tick } from 'svelte';
import type { DetailedPullRequest, PullRequest } from '$lib/gitHost/interface/types';

8
apps/desktop/src/lib/settings/AnalyticsSettings.svelte
View File

@ -6,7 +6,7 @@
appNonAnonMetricsEnabled
} from '$lib/config/appSettings';
import Link from '$lib/shared/Link.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import Toggle from '@gitbutler/ui/Toggle.svelte';
const errorReportingEnabled = appErrorReportingEnabled();
const metricsEnabled = appMetricsEnabled();
@ -46,7 +46,7 @@
<Toggle
id="errorReportingToggle"
checked={$errorReportingEnabled}
on:click={() => ($errorReportingEnabled = !$errorReportingEnabled)}
onclick={() => ($errorReportingEnabled = !$errorReportingEnabled)}
/>
</svelte:fragment>
</SectionCard>
@ -58,7 +58,7 @@
<Toggle
id="metricsEnabledToggle"
checked={$metricsEnabled}
on:click={() => ($metricsEnabled = !$metricsEnabled)}
onclick={() => ($metricsEnabled = !$metricsEnabled)}
/>
</svelte:fragment>
</SectionCard>
@ -72,7 +72,7 @@
<Toggle
id="nonAnonMetricsEnabledToggle"
checked={$nonAnonMetricsEnabled}
on:click={() => ($nonAnonMetricsEnabled = !$nonAnonMetricsEnabled)}
onclick={() => ($nonAnonMetricsEnabled = !$nonAnonMetricsEnabled)}
/>
</svelte:fragment>
</SectionCard>

4
apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte
View File

@ -6,10 +6,10 @@
import { projectAiGenEnabled } from '$lib/config/config';
import Section from '$lib/settings/Section.svelte';
import Spacer from '$lib/shared/Spacer.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { UserService } from '$lib/stores/user';
import { getContext } from '@gitbutler/shared/context';
import Button from '@gitbutler/ui/Button.svelte';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import { goto } from '$app/navigation';
const userService = getContext(UserService);
@ -44,7 +44,7 @@
<Toggle
id="aiGenEnabled"
checked={$aiGenEnabled}
on:click={() => {
onclick={() => {
$aiGenEnabled = !$aiGenEnabled;
}}
/>

4
apps/desktop/src/lib/settings/userPreferences/CommitSigningForm.svelte
View File

@ -9,9 +9,9 @@
import InfoMessage from '$lib/shared/InfoMessage.svelte';
import Link from '$lib/shared/Link.svelte';
import TextBox from '$lib/shared/TextBox.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { getContext } from '@gitbutler/shared/context';
import Button from '@gitbutler/ui/Button.svelte';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import { invoke } from '@tauri-apps/api/tauri';
import { onMount } from 'svelte';
@ -110,7 +110,7 @@
GitButler will sign commits as per your git configuration.
</svelte:fragment>
<svelte:fragment slot="actions">
<Toggle id="signCommits" checked={signCommits} on:click={handleSignCommitsClick} />
<Toggle id="signCommits" checked={signCommits} onclick={handleSignCommitsClick} />
</svelte:fragment>
</SectionCard>
{#if signCommits}

6
apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte
View File

@ -6,10 +6,10 @@
import Spacer from '$lib/shared/Spacer.svelte';
import TextArea from '$lib/shared/TextArea.svelte';
import TextBox from '$lib/shared/TextBox.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { User } from '$lib/stores/user';
import * as toasts from '$lib/utils/toasts';
import { getContext, getContextStore } from '@gitbutler/shared/context';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import { onMount } from 'svelte';
import { PUBLIC_API_BASE_URL } from '$env/static/public';
@ -112,7 +112,7 @@
<Toggle
id="historySync"
checked={project.api?.sync || false}
on:click={async () => await onSyncChange(!project.api?.sync)}
onclick={async () => await onSyncChange(!project.api?.sync)}
/>
</svelte:fragment>
</SectionCard>
@ -124,7 +124,7 @@
<Toggle
id="branchesySync"
checked={project.api?.sync_code || false}
on:click={async () => await onSyncCodeChange(!project.api?.sync_code)}
onclick={async () => await onSyncCodeChange(!project.api?.sync_code)}
/>
</svelte:fragment>
</SectionCard>

10
apps/desktop/src/lib/settings/userPreferences/PreferencesForm.svelte
View File

@ -4,8 +4,8 @@
import { projectRunCommitHooks } from '$lib/config/config';
import Section from '$lib/settings/Section.svelte';
import TextBox from '$lib/shared/TextBox.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { getContext } from '@gitbutler/shared/context';
import Toggle from '@gitbutler/ui/Toggle.svelte';
const projectsService = getContext(ProjectsService);
const project = getContext(Project);
@ -56,11 +56,7 @@
GitButler will never force push to the target branch.
</svelte:fragment>
<svelte:fragment slot="actions">
<Toggle
id="allowForcePush"
checked={allowForcePushing}
on:click={handleAllowForcePushClick}
/>
<Toggle id="allowForcePush" checked={allowForcePushing} onclick={handleAllowForcePushClick} />
</svelte:fragment>
</SectionCard>
@ -73,7 +69,7 @@
<Toggle
id="omitCertificateCheck"
checked={omitCertificateCheck}
on:click={handleOmitCertificateCheckClick}
onclick={handleOmitCertificateCheckClick}
/>
</svelte:fragment>
</SectionCard>

10
apps/desktop/src/routes/settings/appearance/+page.svelte
View File

@ -14,9 +14,9 @@
} from '$lib/settings/userSettings';
import RadioButton from '$lib/shared/RadioButton.svelte';
import TextBox from '$lib/shared/TextBox.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { type Hunk } from '$lib/vbranches/types';
import { getContextStoreBySymbol } from '@gitbutler/shared/context';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import type { ContentSection } from '$lib/utils/fileSections';
import type { Writable } from 'svelte/store';
@ -153,7 +153,7 @@
<Toggle
id="allowDiffLigatures"
checked={$userSettings.diffLigatures}
on:click={() => {
onclick={() => {
userSettings.update((s) => ({
...s,
diffLigatures: !$userSettings.diffLigatures
@ -199,7 +199,7 @@
<Toggle
id="wrapText"
checked={$userSettings.wrapText}
on:click={() => {
onclick={() => {
userSettings.update((s) => ({
...s,
wrapText: !s.wrapText
@ -219,7 +219,7 @@
<Toggle
id="inlineUnifiedDiffs"
checked={$userSettings.inlineUnifiedDiffs}
on:click={() => {
onclick={() => {
userSettings.update((s) => ({
...s,
inlineUnifiedDiffs: !s.inlineUnifiedDiffs
@ -288,7 +288,7 @@
<Toggle
id="branchLaneContents"
checked={$autoSelectBranchNameFeature}
on:click={() => ($autoSelectBranchNameFeature = !$autoSelectBranchNameFeature)}
onclick={() => ($autoSelectBranchNameFeature = !$autoSelectBranchNameFeature)}
/>
</svelte:fragment>
</SectionCard>

10
apps/desktop/src/routes/settings/experimental/+page.svelte
View File

@ -7,7 +7,7 @@
featureTopics
} from '$lib/config/uiFeatureFlags';
import SettingsPage from '$lib/layout/SettingsPage.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import Toggle from '@gitbutler/ui/Toggle.svelte';
const baseBranchSwitching = featureBaseBranchSwitching();
const topicsEnabled = featureTopics();
@ -30,7 +30,7 @@
<Toggle
id="baseBranchSwitching"
checked={$baseBranchSwitching}
on:click={() => ($baseBranchSwitching = !$baseBranchSwitching)}
onclick={() => ($baseBranchSwitching = !$baseBranchSwitching)}
/>
</svelte:fragment>
</SectionCard>
@ -45,7 +45,7 @@
<Toggle
id="stackingFeature"
checked={$stackingFeature}
on:click={() => ($stackingFeature = !$stackingFeature)}
onclick={() => ($stackingFeature = !$stackingFeature)}
/>
</svelte:fragment>
</SectionCard>
@ -64,7 +64,7 @@
<Toggle
id="stackingFeatureMultipleSeries"
checked={$stackingFeatureMultipleSeries}
on:click={() => ($stackingFeatureMultipleSeries = !$stackingFeatureMultipleSeries)}
onclick={() => ($stackingFeatureMultipleSeries = !$stackingFeatureMultipleSeries)}
/>
</svelte:fragment>
</SectionCard>
@ -79,7 +79,7 @@
<Toggle
id="topics"
checked={$topicsEnabled}
on:click={() => ($topicsEnabled = !$topicsEnabled)}
onclick={() => ($topicsEnabled = !$topicsEnabled)}
/>
</svelte:fragment>
</SectionCard>

4
apps/desktop/src/routes/settings/git/+page.svelte
View File

@ -3,8 +3,8 @@
import SectionCard from '$lib/components/SectionCard.svelte';
import SettingsPage from '$lib/layout/SettingsPage.svelte';
import Link from '$lib/shared/Link.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { getContext } from '@gitbutler/shared/context';
import Toggle from '@gitbutler/ui/Toggle.svelte';
import { onMount } from 'svelte';
const gitConfig = getContext(GitConfigService);
@ -36,7 +36,7 @@
</Link>
</svelte:fragment>
<svelte:fragment slot="actions">
<Toggle id="committerSigning" checked={annotateCommits} on:click={toggleCommitterSigning} />
<Toggle id="committerSigning" checked={annotateCommits} onclick={toggleCommitterSigning} />
</svelte:fragment>
</SectionCard>
</SettingsPage>

20
apps/desktop/src/lib/shared/Toggle.svelte → packages/ui/src/lib/Toggle.svelte
View File

@ -1,14 +1,22 @@
<script lang="ts">
export let small = false;
export let disabled = false;
export let checked = false;
export let value = '';
export let id = '';
interface Props {
small?: boolean;
disabled?: boolean;
checked?: boolean;
value?: string;
id?: string;
onclick?: (e: MouseEvent) => void;
}
let { small, disabled, checked = $bindable(), value, id, onclick }: Props = $props();
</script>
<input
bind:checked
on:click|stopPropagation
onclick={(e) => {
e.stopPropagation();
onclick?.(e);
}}
type="checkbox"
class="toggle"
class:small

10
apps/desktop/src/lib/shared/ToggleButton.svelte → packages/ui/src/lib/ToggleButton.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import Toggle from '$lib/shared/Toggle.svelte';
import Icon from '@gitbutler/ui/Icon.svelte';
import Tooltip from '@gitbutler/ui/Tooltip.svelte';
import iconsJson from '@gitbutler/ui/data/icons.json';
import Icon from '$lib/Icon.svelte';
import Toggle from '$lib/Toggle.svelte';
import Tooltip from '$lib/Tooltip.svelte';
import iconsJson from '$lib/data/icons.json';
interface Props {
id?: string;
@ -31,7 +31,7 @@
id={toggleId}
small
{checked}
on:click={(e) => {
onclick={(e) => {
onclick?.(e);
}}
/>