mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
Buttons, user settings page, command K input size.
This commit is contained in:
Ian Donahue
parent
7266f1a854
commit
e5de6bcf7b
@ -56,7 +56,7 @@ button {
|
||||
|
||||
/* COMMAND PALETTE */
|
||||
|
||||
.commnand-palette-section-header {
|
||||
.command-palette-section-header {
|
||||
@apply mx-2 mb-2 mt-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300;
|
||||
}
|
||||
|
||||
|
||||
@ -78,8 +78,9 @@
|
||||
<style lang="postcss">
|
||||
a,
|
||||
button {
|
||||
@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline;
|
||||
@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline transition duration-150 ease-out hover:ease-in;
|
||||
text-underline-offset: 3px;
|
||||
|
||||
}
|
||||
|
||||
.basic {
|
||||
|
||||
@ -186,14 +186,14 @@
|
||||
</script>
|
||||
|
||||
<Modal on:close bind:this={modal}>
|
||||
<div class="commnand-palette flex max-h-[360px] w-[640px] flex-col rounded text-zinc-400">
|
||||
<div class="command-palette flex max-h-[360px] w-[640px] flex-col rounded text-zinc-400">
|
||||
<!-- Search input area -->
|
||||
<div class="search-input flex items-center border-b border-zinc-400/20 py-2">
|
||||
<div class="ml-4 mr-2 flex flex-grow items-center">
|
||||
<!-- Project scope -->
|
||||
{#if scopeToProject}
|
||||
<div class="mr-1 flex items-center">
|
||||
<span class="font-semibold text-zinc-300">{$project?.title}</span>
|
||||
<span class="text-lg font-semibold text-zinc-300">{$project?.title}</span>
|
||||
<span class="ml-1 text-lg">/</span>
|
||||
</div>
|
||||
{/if}
|
||||
@ -201,7 +201,7 @@
|
||||
<div class="mr-1 flex-grow">
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
class="w-full bg-transparent text-zinc-300 focus:outline-none"
|
||||
class="command-palette-input w-full bg-transparent text-zinc-300 text-lg leading-10 focus:outline-none"
|
||||
bind:value={userInput}
|
||||
on:input|stopPropagation={updateMatchFilesQuery}
|
||||
type="text"
|
||||
@ -218,7 +218,7 @@
|
||||
{#each commandGroups as group, groupIdx}
|
||||
{#if group.visible}
|
||||
<div class="w-full cursor-default select-none px-2">
|
||||
<p class="commnand-palette-section-header result-section-header">
|
||||
<p class="command-palette-section-header result-section-header">
|
||||
<span>{group.name}</span>
|
||||
{#if group.description}
|
||||
<span class="ml-2 font-light italic text-zinc-300/70">({group.description})</span>
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
<Modal on:close bind:this={modal}>
|
||||
<div class="mx-2 mb-2 w-full cursor-default select-none">
|
||||
<p
|
||||
class="commnand-palette-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300"
|
||||
class="command-palette-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300"
|
||||
>
|
||||
Replay working history
|
||||
</p>
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
$: isCommitEnabled = summary.length > 0 && $statuses.filter(({ staged }) => staged).length > 0;
|
||||
</script>
|
||||
|
||||
<div id="commit-page" class="flex h-full w-full gap-2">
|
||||
<div id="commit-page" class="flex h-full w-full">
|
||||
<div class="commit-panel-container border-r border-zinc-700 p-4">
|
||||
<h1 class="px-2 py-1 text-xl font-bold">Commit</h1>
|
||||
|
||||
@ -180,14 +180,19 @@
|
||||
required
|
||||
/>
|
||||
|
||||
<textarea
|
||||
name="description"
|
||||
disabled={isGeneratingCommitMessage || isCommitting}
|
||||
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100 focus:border-blue-600"
|
||||
rows="10"
|
||||
placeholder="Description (optional)"
|
||||
bind:value={description}
|
||||
/>
|
||||
<div class="commit-description-container relative">
|
||||
<div class="generating-commit bg-zinc-600 px-3 py-1 absolute top-1 left-1 rounded">
|
||||
✨ Summarizing changes...
|
||||
</div>
|
||||
<textarea
|
||||
name="description"
|
||||
disabled={isGeneratingCommitMessage || isCommitting}
|
||||
class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100 focus:border-blue-600"
|
||||
rows="10"
|
||||
placeholder="Description (optional)"
|
||||
bind:value={description}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
{#if isGeneratingCommitMessage}
|
||||
@ -234,7 +239,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="preview" class="m-2 flex flex-auto cursor-text select-text overflow-auto">
|
||||
<div id="preview" class="m-4 flex flex-auto cursor-text select-text overflow-auto border rounded p-4 border-gb-700 bg-card-default">
|
||||
{#if $selectedDiffPath !== undefined}
|
||||
{#if $selectedDiff !== undefined}
|
||||
<DiffViewer diff={$selectedDiff} path={$selectedDiffPath} />
|
||||
|
||||
@ -69,6 +69,35 @@
|
||||
on:submit={onSubmit}
|
||||
class="user-form flex flex-row items-start justify-between gap-12 rounded-lg py-2"
|
||||
>
|
||||
|
||||
|
||||
<fields id="right" class="pt-6 flex flex-col items-center gap-2">
|
||||
{#if $user.picture}
|
||||
<img
|
||||
class="h-28 w-28 rounded-full border-zinc-300"
|
||||
src={userPicture}
|
||||
alt="Your avatar"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<label
|
||||
title="Edit profile photo"
|
||||
for="picture"
|
||||
class="font-sm -mt-6 -ml-16 cursor-default rounded-lg border border-zinc-600 bg-zinc-800 px-2 text-center text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50"
|
||||
>
|
||||
Edit
|
||||
<input
|
||||
on:change={onPictureChange}
|
||||
type="file"
|
||||
id="picture"
|
||||
name="picture"
|
||||
accept={fileTypes.join('')}
|
||||
class="hidden"
|
||||
/>
|
||||
</label>
|
||||
</fields>
|
||||
|
||||
|
||||
<fields id="left" class="flex flex-1 flex-col gap-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="name" class="text-zinc-400">Name</label>
|
||||
@ -94,36 +123,12 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer class="pt-4">
|
||||
<footer class="pt-4 flex justify-end">
|
||||
<Button loading={saving} role="primary" type="submit">Update profile</Button>
|
||||
</footer>
|
||||
</fields>
|
||||
|
||||
<fields id="right" class="flex flex-col items-center gap-2">
|
||||
{#if $user.picture}
|
||||
<img
|
||||
class="h-28 w-28 rounded-full border-zinc-300"
|
||||
src={userPicture}
|
||||
alt="Your avatar"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<label
|
||||
title="Edit profile photo"
|
||||
for="picture"
|
||||
class="font-sm -mt-6 -ml-16 cursor-default rounded-lg border border-zinc-600 bg-zinc-800 px-2 text-center text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50"
|
||||
>
|
||||
Edit
|
||||
<input
|
||||
on:change={onPictureChange}
|
||||
type="file"
|
||||
id="picture"
|
||||
name="picture"
|
||||
accept={fileTypes.join('')}
|
||||
class="hidden"
|
||||
/>
|
||||
</label>
|
||||
</fields>
|
||||
</form>
|
||||
</div>
|
||||
{:else}
|
||||
@ -195,12 +200,26 @@
|
||||
{/if}
|
||||
|
||||
<div class="mt-8 flex flex-col border-t border-zinc-400 pt-4">
|
||||
<h2 class="text-lg font-medium text-zinc-100">Get Support</h2>
|
||||
<div class="text-sm text-zinc-300">
|
||||
If you have an issue or any questions, please email us.
|
||||
<div class="mt-4">
|
||||
<a
|
||||
class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default hover:bg-card-active shadow p-3 text-zinc-400 transition duration-150 ease-out hover:ease-in"
|
||||
href="mailto:hello@gitbutler.com?subject=Feedback or question!">
|
||||
<h2 class="text-lg text-zinc-300">Get Support</h2>
|
||||
<div>If you have an issue or any questions, please email us.</div>
|
||||
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a class="text-blue-200" href="mailto:hello@gitbutler.com">hello@gitbutler.com</a>
|
||||
<a
|
||||
class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default hover:bg-card-active shadow p-3 text-zinc-400 transition duration-150 ease-out hover:ease-in"
|
||||
href="https://discord.gg/wDKZCPEjXC"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<h2 class="text-lg text-zinc-300">Join our Discord</h2>
|
||||
<div class="text-sm text-zinc-500">Share feedback, request, or ask questions</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user