gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-08-16 07:40:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

nicer project settings page

Browse Source
This commit is contained in:
Scott Chacon 2023-02-21 14:49:37 +01:00
parent 7433712fbd
commit af24341623
2 changed files with 131 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/routes/projects/[projectId]/settings/+page.svelte
View File

@ -2,10 +2,22 @@
import { derived } from "svelte/store";
import { Login } from "$lib/components";
import type { PageData } from "./$types";
import hi from "date-fns/locale/hi";
export let data: PageData;
const { project, user, api } = data;
function repo_id(url: string) {
const hurl = new URL(url);
const path = hurl.pathname.split("/");
return path[path.length - 1];
}
function hostname(url: string) {
const hurl = new URL(url);
return hurl.hostname;
}
const isSyncing = derived(project, (project) => project?.api?.sync);
const onSyncChange = async (event: Event) => {
@ -27,26 +39,115 @@
};
</script>
<article class="">
<header>
<h2>{$project?.title}</h2>
</header>
{#if $user}
<form disabled={$user === undefined}>
<label for="sync">Sync</label>
<input
disabled={$user === undefined}
type="checkbox"
checked={$isSyncing}
on:change={onSyncChange}
/>
</form>
{:else}
<div><Login {user} {api} /> to sync</div>
{/if}
<code class="whitespace-pre">
{JSON.stringify($project, null, 2)}
</code>
</article>
<div class="p-4 mx-auto h-full overflow-auto">
<div class="max-w-2xl mx-auto p-4">
<div class="flex flex-col text-zinc-100 space-y-6">
<div class="space-y-0">
<div class="text-lg font-medium">Project Settings</div>
<div class="text-sm text-zinc-400">
Manage your project settings for <strong
>{$project?.title}</strong
>
</div>
</div>
<hr class="border-zinc-600" />
{#if $user}
<div class="space-y-2">
<div class="ml-1">GitButler Cloud</div>
<div
class="flex flex-row justify-between border border-zinc-600 rounded-lg p-2 items-center"
>
<div class="flex flex-row space-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="white"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
/>
</svg>
<div class="flex flex-row">
{#if $project?.api?.git_url}
<div class="flex flex-col">
<div class="text-zinc-300">
Git Host
</div>
<div
class="text-sm text-zinc-400 font-mono"
>
{hostname($project?.api?.git_url)}
</div>
<div class="text-zinc-300 mt-3">
Repository ID
</div>
<div
class="text-sm text-zinc-400 font-mono"
>
{repo_id($project?.api?.git_url)}
</div>
</div>
{/if}
<div>
<form disabled={$user === undefined}>
<input
class="mr-1"
disabled={$user === undefined}
type="checkbox"
checked={$isSyncing}
on:change={onSyncChange}
/>
<label for="sync"
>Send Data to Server</label
>
</form>
</div>
</div>
</div>
</div>
</div>
{:else}
<div class="space-y-2">
<div class="flex flex-row space-x-2 items-end">
<div class="">GitButler Cloud</div>
<div class="text-xs text-zinc-400">
backup your work and access advanced features
</div>
</div>
<div class="flex flex-row items-center space-x-2">
<Login {user} {api} />
</div>
</div>
{/if}
<div class="space-y-2">
<div class="ml-1">Path</div>
<div class="text-sm text-zinc-400 font-mono">
{$project?.path}
</div>
</div>
<div class="space-y-2">
<div class="ml-1">Project Name</div>
<!-- text box -->
<input
type="text"
class="p-2 text-zinc-300 bg-black border border-zinc-600 rounded-lg w-full"
value={$project?.title}
/>
</div>
<div class="space-y-2">
<div class="ml-1">Project Description</div>
<!-- text box -->
<textarea
rows="3"
class="p-2 text-zinc-300 bg-black border border-zinc-600 rounded-lg w-full"
value={$project?.api?.description}
/>
</div>
</div>
</div>
</div>

12
src/routes/users/+page.svelte
View File

@ -19,11 +19,13 @@
class="flex flex-row justify-between border border-zinc-600 rounded-lg p-2 items-center"
>
<div class="flex flex-row space-x-3">
<img
class="h-12 w-12 rounded-full border-2 border-zinc-300"
src={$user.picture}
alt="avatar"
/>
{#if $user.picture}
<img
class="h-12 w-12 rounded-full border-2 border-zinc-300"
src={$user.picture}
alt="avatar"
/>
{/if}
<div>
<div>{$user.name}</div>
<div class="text-zinc-400">{$user.email}</div>