mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-10-27 05:27:16 +03:00
QuickCommitModal: basic looks
This commit is contained in:
Nikita Galaiko
parent
32c32f881d
commit
f6bff2f07e
55
src/lib/components/QuickCommitModal.svelte
Normal file
55
src/lib/components/QuickCommitModal.svelte
Normal file
@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import { Button, Modal, Link } from '$lib/components';
|
||||
import { onMount } from 'svelte';
|
||||
import { IconGitBranch } from './icons';
|
||||
|
||||
export const show = () => modal.show();
|
||||
|
||||
let modal: Modal;
|
||||
|
||||
onMount(() => {
|
||||
modal.show();
|
||||
});
|
||||
</script>
|
||||
|
||||
<Modal bind:this={modal} let:close>
|
||||
<form
|
||||
class="font-modal-stroke/50 flex w-[680px] flex-col gap-6 rounded-lg border-[0.5px] border-modal-stroke bg-modal-background p-4"
|
||||
>
|
||||
<header class="flex w-full items-center justify-between">
|
||||
<h2 class="flex items-center gap-4">
|
||||
<IconGitBranch class="h-5 w-5" />
|
||||
<span class="line-height-5 text-white">ian/gb-1234-this-is-a-big-update</span>
|
||||
</h2>
|
||||
|
||||
<Button role="purple" height="small">Autowrite</Button>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<input
|
||||
name="commit-message"
|
||||
class="border-none bg-transparent p-0 text-xl text-zinc-100"
|
||||
type="text"
|
||||
placeholder="Commit message (required)"
|
||||
required
|
||||
/>
|
||||
|
||||
<textarea
|
||||
name="commit-description"
|
||||
class="border-none bg-transparent p-0 text-lg text-zinc-400"
|
||||
placeholder="Commit description (optional)"
|
||||
rows="6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer class="flex items-center justify-between">
|
||||
<div class="text-zinc-400">
|
||||
<Link href="/">8 files changed</Link>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button filled={false} outlined={true} on:click={close}>Cancel</Button>
|
||||
<Button role="primary" on:click={() => alert('commit!')}>Commit</Button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</Modal>
|
||||
@ -5,14 +5,14 @@
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
width="12"
|
||||
height="15"
|
||||
viewBox="0 0 12 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
stroke-width="1"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
|
||||
d="M7.50003 2.24999C7.50015 1.83752 7.61366 1.43303 7.82813 1.08071C8.04261 0.728386 8.34981 0.441801 8.71615 0.252272C9.0825 0.0627427 9.49389 -0.022437 9.90538 0.00604163C10.3169 0.0345203 10.7126 0.175562 11.0493 0.413751C11.3861 0.651941 11.6509 0.978112 11.8148 1.35662C11.9787 1.73513 12.0354 2.1514 11.9787 2.55996C11.922 2.96851 11.7541 3.35362 11.4933 3.67319C11.2325 3.99276 10.8889 4.2345 10.5 4.37199V4.99999C10.5 5.66303 10.2366 6.29892 9.76779 6.76776C9.29895 7.2366 8.66307 7.49999 8.00003 7.49999H4.00003C3.73481 7.49999 3.48046 7.60535 3.29292 7.79289C3.10539 7.98042 3.00003 8.23478 3.00003 8.49999V9.62799C3.50072 9.80492 3.92273 10.1532 4.19148 10.6112C4.46023 11.0692 4.5584 11.6075 4.46864 12.1308C4.37888 12.6542 4.10698 13.129 3.70099 13.4713C3.29499 13.8136 2.78106 14.0014 2.25003 14.0014C1.719 14.0014 1.20506 13.8136 0.799071 13.4713C0.393079 13.129 0.121173 12.6542 0.0314159 12.1308C-0.0583415 11.6075 0.0398295 11.0692 0.308576 10.6112C0.577323 10.1532 0.999339 9.80492 1.50003 9.62799V4.37199C0.999618 4.19507 0.577862 3.84694 0.309304 3.38913C0.0407465 2.93132 -0.0573222 2.39331 0.0324313 1.87019C0.122185 1.34707 0.393982 0.87252 0.799783 0.530414C1.20558 0.188307 1.71926 0.000672082 2.25003 0.000672082C2.78079 0.000672082 3.29447 0.188307 3.70027 0.530414C4.10607 0.87252 4.37787 1.34707 4.46762 1.87019C4.55738 2.39331 4.45931 2.93132 4.19075 3.38913C3.92219 3.84694 3.50044 4.19507 3.00003 4.37199V6.20799C3.31543 6.07039 3.65591 5.99957 4.00003 5.99999H8.00003C8.26524 5.99999 8.5196 5.89464 8.70713 5.7071C8.89467 5.51956 9.00003 5.26521 9.00003 4.99999V4.37199C8.56124 4.21686 8.18136 3.92947 7.91271 3.54943C7.64407 3.16939 7.49989 2.7154 7.50003 2.24999ZM1.50003 2.24999C1.50003 2.4489 1.57905 2.63967 1.7197 2.78032C1.86035 2.92097 2.05112 2.99999 2.25003 2.99999C2.44894 2.99999 2.63971 2.92097 2.78036 2.78032C2.92101 2.63967 3.00003 2.4489 3.00003 2.24999C3.00003 2.05108 2.92101 1.86031 2.78036 1.71966C2.63971 1.57901 2.44894 1.49999 2.25003 1.49999C2.05112 1.49999 1.86035 1.57901 1.7197 1.71966C1.57905 1.86031 1.50003 2.05108 1.50003 2.24999ZM9.75003 1.49999C9.55112 1.49999 9.36035 1.57901 9.2197 1.71966C9.07905 1.86031 9.00003 2.05108 9.00003 2.24999C9.00003 2.4489 9.07905 2.63967 9.2197 2.78032C9.36035 2.92097 9.55112 2.99999 9.75003 2.99999C9.94894 2.99999 10.1397 2.92097 10.2804 2.78032C10.421 2.63967 10.5 2.4489 10.5 2.24999C10.5 2.05108 10.421 1.86031 10.2804 1.71966C10.1397 1.57901 9.94894 1.49999 9.75003 1.49999ZM2.25003 11C2.05112 11 1.86035 11.079 1.7197 11.2197C1.57905 11.3603 1.50003 11.5511 1.50003 11.75C1.50003 11.9489 1.57905 12.1397 1.7197 12.2803C1.86035 12.421 2.05112 12.5 2.25003 12.5C2.44894 12.5 2.63971 12.421 2.78036 12.2803C2.92101 12.1397 3.00003 11.9489 3.00003 11.75C3.00003 11.5511 2.92101 11.3603 2.78036 11.2197C2.63971 11.079 2.44894 11 2.25003 11Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { IconSearch, IconSettings, IconTerminal } from '$lib/components/icons';
|
||||
import QuickCommitModal from '$lib/components/QuickCommitModal.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let data: LayoutData;
|
||||
const { project } = data;
|
||||
@ -118,3 +120,5 @@
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<QuickCommitModal />
|
||||
|
||||
@ -18,6 +18,10 @@ const config = {
|
||||
'4xl': '32px'
|
||||
},
|
||||
colors: {
|
||||
modal: {
|
||||
background: '#242429',
|
||||
stroke: '#3f3f3f'
|
||||
},
|
||||
gb: {
|
||||
700: '#52525B'
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user