Small UI fixes (#4950)

* fix the hunk header font-weight * Text case fix * Update sections order * Fix "Full data synchronization" layout and toggles
gitbutlerapp · Sep 19, 2024 · edbc8eb · edbc8eb
1 parent ed85637
commit edbc8eb
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 92 deletions.
diff --git a/apps/desktop/src/lib/hunk/HunkDiff.svelte b/apps/desktop/src/lib/hunk/HunkDiff.svelte
@@ -553,6 +553,7 @@
 		height: calc(100% + var(--border-width) * 2);
 		box-sizing: border-box;
 		font-family: var(--mono-font-family);
+		font-weight: 400;
 		font-size: 12px;
 		padding: 4px 6px;
 		text-wrap: nowrap;

diff --git a/apps/desktop/src/lib/settings/userPreferences/BaseBranchSwitch.svelte b/apps/desktop/src/lib/settings/userPreferences/BaseBranchSwitch.svelte
@@ -6,7 +6,6 @@
 	import Select from '$lib/select/Select.svelte';
 	import SelectItem from '$lib/select/SelectItem.svelte';
 	import InfoMessage from '$lib/shared/InfoMessage.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext, getContextStore } from '$lib/utils/context';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { VirtualBranchService } from '$lib/vbranches/virtualBranch';
@@ -125,7 +124,6 @@
 				</Button>
 			{/if}
 		</SectionCard>
-		<Spacer />
 	{/if}
 {:catch}
 	<InfoMessage filled outlined={true} style="error" icon="error">

diff --git a/apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte b/apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte
@@ -5,16 +5,13 @@
 	import WelcomeSigninAction from '$lib/components/WelcomeSigninAction.svelte';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import Section from '$lib/settings/Section.svelte';
-	import Link from '$lib/shared/Link.svelte';
 	import Spacer from '$lib/shared/Spacer.svelte';
 	import Toggle from '$lib/shared/Toggle.svelte';
 	import { UserService } from '$lib/stores/user';
 	import { getContext } from '$lib/utils/context';
-	import * as toasts from '$lib/utils/toasts';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
-	import { PUBLIC_API_BASE_URL } from '$env/static/public';
 
 	const userService = getContext(UserService);
 	const projectService = getContext(ProjectService);
@@ -34,42 +31,6 @@
 		project.api = { ...cloudProject, sync: project.api.sync, sync_code: project.api.sync_code };
 		projectService.updateProject(project);
 	});
-
-	async function onSyncChange(sync: boolean) {
-		if (!$user) return;
-		try {
-			const cloudProject =
-				project.api ??
-				(await projectService.createCloudProject($user.access_token, {
-					name: project.title,
-					description: project.description,
-					uid: project.id
-				}));
-			project.api = { ...cloudProject, sync, sync_code: project.api?.sync_code };
-			projectService.updateProject(project);
-		} catch (error) {
-			console.error(`Failed to update project sync status: ${error}`);
-			toasts.error('Failed to update project sync status');
-		}
-	}
-	// These functions are disgusting
-	async function onSyncCodeChange(sync_code: boolean) {
-		if (!$user) return;
-		try {
-			const cloudProject =
-				project.api ??
-				(await projectService.createCloudProject($user.access_token, {
-					name: project.title,
-					description: project.description,
-					uid: project.id
-				}));
-			project.api = { ...cloudProject, sync: project.api?.sync || false, sync_code: sync_code };
-			projectService.updateProject(project);
-		} catch (error) {
-			console.error(`Failed to update project sync status: ${error}`);
-			toasts.error('Failed to update project sync status');
-		}
-	}
 </script>
 
 <Section>
@@ -123,58 +84,10 @@
 	</SectionCard>
 </Section>
 
-{#if $user?.role === 'admin'}
-	<Section>
-		<svelte:fragment slot="title">Full data synchronization</svelte:fragment>
-
-		<SectionCard labelFor="historySync" orientation="row">
-			<svelte:fragment slot="caption">
-				Sync this project's operations log with GitButler Web services. The operations log includes
-				snapshots of the repository state, including non-committed code changes.
-			</svelte:fragment>
-			<svelte:fragment slot="actions">
-				<Toggle
-					id="historySync"
-					checked={project.api?.sync || false}
-					on:click={async (e) => await onSyncChange(!!e.detail)}
-				/>
-			</svelte:fragment>
-		</SectionCard>
-		<SectionCard labelFor="historySync" orientation="row">
-			<svelte:fragment slot="caption">
-				Sync this repository's branches with the GitButler Remote.
-			</svelte:fragment>
-			<svelte:fragment slot="actions">
-				<Toggle
-					id="historySync"
-					checked={project.api?.sync_code || false}
-					on:click={async (e) => await onSyncCodeChange(!!e.detail)}
-				/>
-			</svelte:fragment>
-		</SectionCard>
-
-		{#if project.api}
-			<div class="api-link">
-				<Link
-					target="_blank"
-					rel="noreferrer"
-					href="{PUBLIC_API_BASE_URL}projects/{project.api?.repository_id}"
-					>Go to GitButler Cloud Project</Link
-				>
-			</div>
-		{/if}
-	</Section>
-{/if}
-
 <style lang="postcss">
 	.options {
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
 	}
-
-	.api-link {
-		display: flex;
-		justify-content: flex-end;
-	}
 </style>
diff --git a/apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte b/apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
 	import { Project, ProjectService } from '$lib/backend/projects';
 	import SectionCard from '$lib/components/SectionCard.svelte';
+	import Section from '$lib/settings/Section.svelte';
+	import Link from '$lib/shared/Link.svelte';
 	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 { getContext, getContextStore } from '$lib/utils/context';
+	import * as toasts from '$lib/utils/toasts';
+	import { PUBLIC_API_BASE_URL } from '$env/static/public';
 
 	const project = getContext(Project);
 	const user = getContextStore(User);
@@ -25,12 +30,48 @@
 		project.api = api ? { ...api, sync: false, sync_code: undefined } : undefined;
 		projectService.updateProject(project);
 	}
+
+	async function onSyncChange(sync: boolean) {
+		if (!$user) return;
+		try {
+			const cloudProject =
+				project.api ??
+				(await projectService.createCloudProject($user.access_token, {
+					name: project.title,
+					description: project.description,
+					uid: project.id
+				}));
+			project.api = { ...cloudProject, sync, sync_code: project.api?.sync_code };
+			projectService.updateProject(project);
+		} catch (error) {
+			console.error(`Failed to update project sync status: ${error}`);
+			toasts.error('Failed to update project sync status');
+		}
+	}
+	// These functions are disgusting
+	async function onSyncCodeChange(sync_code: boolean) {
+		if (!$user) return;
+		try {
+			const cloudProject =
+				project.api ??
+				(await projectService.createCloudProject($user.access_token, {
+					name: project.title,
+					description: project.description,
+					uid: project.id
+				}));
+			project.api = { ...cloudProject, sync: project.api?.sync || false, sync_code: sync_code };
+			projectService.updateProject(project);
+		} catch (error) {
+			console.error(`Failed to update project sync status: ${error}`);
+			toasts.error('Failed to update project sync status');
+		}
+	}
 </script>
 
 <SectionCard>
 	<form>
 		<fieldset class="fields-wrapper">
-			<TextBox label="Path" readonly id="path" value={project?.path} />
+			<TextBox label="Project path" readonly id="path" value={project?.path} />
 			<section class="description-wrapper">
 				<TextBox
 					label="Project name"
@@ -58,6 +99,50 @@
 		</fieldset>
 	</form>
 </SectionCard>
+
+{#if $user?.role === 'admin'}
+	<Spacer />
+	<Section>
+		<svelte:fragment slot="title">Full data synchronization</svelte:fragment>
+
+		<SectionCard labelFor="historySync" orientation="row">
+			<svelte:fragment slot="caption">
+				Sync this project's operations log with GitButler Web services. The operations log includes
+				snapshots of the repository state, including non-committed code changes.
+			</svelte:fragment>
+			<svelte:fragment slot="actions">
+				<Toggle
+					id="historySync"
+					checked={project.api?.sync || false}
+					on:click={async (e) => await onSyncChange(!!e.detail)}
+				/>
+			</svelte:fragment>
+		</SectionCard>
+		<SectionCard labelFor="branchesySync" orientation="row">
+			<svelte:fragment slot="caption">
+				Sync this repository's branches with the GitButler Remote.
+			</svelte:fragment>
+			<svelte:fragment slot="actions">
+				<Toggle
+					id="branchesySync"
+					checked={project.api?.sync_code || false}
+					on:click={async (e) => await onSyncCodeChange(!!e.detail)}
+				/>
+			</svelte:fragment>
+		</SectionCard>
+
+		{#if project.api}
+			<div class="api-link text-12">
+				<Link
+					target="_blank"
+					rel="noreferrer"
+					href="{PUBLIC_API_BASE_URL}projects/{project.api?.repository_id}"
+					>Go to GitButler Cloud Project</Link
+				>
+			</div>
+		{/if}
+	</Section>
+{/if}
 <Spacer />
 
 <style>
@@ -72,4 +157,9 @@
 		flex-direction: column;
 		gap: 8px;
 	}
+
+	.api-link {
+		display: flex;
+		justify-content: flex-end;
+	}
 </style>
diff --git a/apps/desktop/src/lib/settings/userPreferences/PullRequestTemplateForm.svelte b/apps/desktop/src/lib/settings/userPreferences/PullRequestTemplateForm.svelte
@@ -56,7 +56,7 @@
 			orientation="row"
 			labelFor="use-pull-request-template-boolean"
 		>
-			<svelte:fragment slot="title">Enable Pull Request Templates</svelte:fragment>
+			<svelte:fragment slot="title">Enable pull request templates</svelte:fragment>
 			<svelte:fragment slot="actions">
 				<Toggle
 					id="use-pull-request-template-boolean"

diff --git a/apps/desktop/src/lib/shared/Link.svelte b/apps/desktop/src/lib/shared/Link.svelte
@@ -75,5 +75,6 @@
 
 	.link-icon {
 		flex-shrink: 0;
+		opacity: 0.7;
 	}
 </style>
diff --git a/apps/desktop/src/routes/[projectId]/settings/+page.svelte b/apps/desktop/src/routes/[projectId]/settings/+page.svelte
@@ -43,10 +43,11 @@
 		</TabContent>
 		<TabContent value="project">
 			<Section>
+				<DetailsForm />
 				{#if $baseBranchSwitching}
 					<BaseBranchSwitch />
 				{/if}
-				<DetailsForm />
+
 				<PullRequestTemplateForm />
 				<RemoveProjectForm />
 			</Section>