gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 10:33:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

The most basic updates to the terminal page experience

Browse Source
This commit is contained in:
Ian Donahue 2023-04-05 17:48:44 +02:00
parent ea09ccd2d5
commit e8ee1b26af
5 changed files with 63 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app.postcss
View File

@ -88,3 +88,26 @@ input:focus {
.inner-diff {
border-radius: 2px;
}
/* Terminal */
#terminal {
padding-right: 4px;
background-color: black;
}
.terminal {
height: 100%;
width: 100%;
@apply p-8;
}
.xtrem {
height: 100%;
width: 100%;
}
.xterm-viewport {
}
.xterm-scroll-area {
padding: 24px;
}
.xterm-screen {
wdith: 100% !important;
}

12
src/lib/components/Button/Button.svelte
View File

@ -9,7 +9,7 @@
export let outlined = false;
export let disabled = false;
export let height: 'basic' | 'small' = 'basic';
export let width: 'basic' | 'long' = 'basic';
export let width: 'basic' | 'full-width' = 'basic';
export let type: 'button' | 'submit' = 'button';
export let href: string | undefined = undefined;
export let icon: ComponentType | undefined = undefined;
@ -30,7 +30,7 @@
class={role}
bind:this={element}
class:small={height === 'small'}
class:long={width === 'long'}
class:full-width={width === 'full-width'}
class:filled
class:pointer-events-none={loading}
class:outlined
@ -58,7 +58,7 @@
<button
class={role}
class:small={height === 'small'}
class:long={width === 'long'}
class:full-width={width === 'full-width'}
class:pointer-events-none={loading}
bind:this={element}
class:filled
@ -179,8 +179,8 @@
@apply py-[1px];
}
.filled.long,
.outlined.long {
@apply px-[42px];
.filled.full-width,
.outlined.full-width {
@apply w-full;
}
</style>

11
src/lib/components/Terminal.svelte
View File

@ -27,7 +27,7 @@
</script>
<!-- Actual terminal -->
<div class="flex h-full w-full flex-row">
<div class="terminal-component flex h-full w-full flex-row">
<div
id="terminal"
class="h-full w-full"
@ -37,3 +37,12 @@
/>
<ResizeObserver on:resize={handleTermResize} />
</div>
<style>
.terminal-component {
@apply flex h-full w-full flex-row;
}
.terminal-component #terminal {
@apply h-full w-full;
}
</style>

16
src/routes/projects/[projectId]/+layout.svelte
View File

@ -70,15 +70,19 @@
>
&#8984;K
</div>
<a href="/projects/{$project?.id}/terminal">
<IconTerminal class="h-6 w-6" />
</a>
</div>
<ul>
<ul class="flex gap-2">
<li>
<Tooltip label="Terminal">
<a class="block rounded p-1 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200" href="/projects/{$project?.id}/terminal">
<IconTerminal class="h-6 w-6" />
</a>
</Tooltip>
</li>
<li>
<Tooltip label="Project settings">
<Button filled={false} href="/projects/{$project?.id}/settings">
<a class="block rounded p-1 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200" href="/projects/{$project?.id}/settings">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -98,7 +102,7 @@
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</Button>
</a>
</Tooltip>
</li>
</ul>

25
src/routes/projects/[projectId]/terminal/+page.svelte
View File

@ -3,6 +3,7 @@
import type { LayoutData } from '../$types';
import Terminal from '$lib/components/Terminal.svelte';
import * as terminals from '$lib/terminals';
import Button from '$lib/components/Button/Button.svelte';
export let data: LayoutData;
const { project, statuses } = data;
@ -22,15 +23,20 @@
</script>
<!-- Actual terminal -->
<div class="flex h-full w-full flex-row">
<div class="h-full w-80 p-2">
<div class="p-2 font-bold">Git Status</div>
<div class="terminal-page flex flex h-full w-full flex-row">
<div class="main-content h-full w-2/3">
{#if terminalSession}
<Terminal session={terminalSession} bind:this={terminal} />
{/if}
</div>
<div class="right-panel h-full w-1/3 p-2">
<h2 class="p-2 pb-4 text-lg font-bold text-zinc-300">Git Status</h2>
{#if $statuses.length == 0}
<div class="rounded border border-green-400 bg-green-600 p-2 font-mono text-green-900">
No changes
</div>
{:else}
<ul class="rounded border border-yellow-400 bg-yellow-500 p-2 font-mono text-yellow-900">
<ul class="mx-2 rounded border border-yellow-400 bg-yellow-500 p-2 font-mono text-yellow-900">
{#each $statuses as activity}
<li class="flex w-full gap-2">
<span
@ -44,14 +50,11 @@
</ul>
{/if}
<div class="mt-4 p-2 font-bold">Commands</div>
<ul class="px-2">
<ul class="px-2 ">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li class="cursor-pointer" on:click={() => runCommand('git push')}>Push Commit</li>
<Button role="primary" width="full-width" on:click={() => runCommand('git push')}
>Push Commit</Button
>
</ul>
</div>
<div class="h-full w-full">
{#if terminalSession}
<Terminal session={terminalSession} bind:this={terminal} />
{/if}
</div>
</div>