mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-18 06:22:28 +03:00
fix layout on project setup
- fix text when open `login page` in a browser - remove `name` from Toggle. We didn't use it - fields layout updated
This commit is contained in:
Pavel Laptev
parent
88f840174f
commit
09113fec2f
@ -1,14 +1,13 @@
|
||||
<script lang="ts">
|
||||
import Button from './Button.svelte';
|
||||
import Link from './Link.svelte';
|
||||
import { showError } from '$lib/notifications/toasts';
|
||||
import { UserService, type LoginToken } from '$lib/stores/user';
|
||||
import { getContext } from '$lib/utils/context';
|
||||
import { openExternalUrl } from '$lib/utils/url';
|
||||
|
||||
const userService = getContext(UserService);
|
||||
const user = userService.user;
|
||||
|
||||
export let minimal = false;
|
||||
export let wide = false;
|
||||
|
||||
let signUpOrLoginLoading = false;
|
||||
@ -26,19 +25,18 @@
|
||||
}}>Log out</Button
|
||||
>
|
||||
{:else if token}
|
||||
{#if minimal}
|
||||
<p class="helper-text text-base-body-12">
|
||||
Your browser should have been opened. Please log into your GitButler account there.
|
||||
{:else}
|
||||
<div class="text-light-700">
|
||||
Your browser should have been opened. Please log into your GitButler account there.
|
||||
</div>
|
||||
<p>
|
||||
If you were not redirected automatically, you can
|
||||
<button class="underline" on:click={() => token && openExternalUrl(token.url)}>
|
||||
Click here
|
||||
</button>
|
||||
</p>
|
||||
{/if}
|
||||
{#if token}
|
||||
If you were not redirected automatically, open <Link
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={token.url}
|
||||
>
|
||||
this link
|
||||
</Link>
|
||||
{/if}
|
||||
</p>
|
||||
{:else}
|
||||
<div>
|
||||
<Button
|
||||
@ -64,3 +62,9 @@
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.helper-text {
|
||||
color: var(--clr-text-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,10 +15,8 @@
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-4);
|
||||
padding: var(--size-2) var(--size-4) var(--size-2) var(--size-2);
|
||||
gap: var(--size-6);
|
||||
border-radius: var(--radius-s);
|
||||
background: oklch(from var(--clr-scale-ntrl-30) l c h / 0.08);
|
||||
color: var(--clr-scale-ntrl-50);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -86,29 +86,38 @@
|
||||
<div class="project-setup__info">
|
||||
<ProjectNameLabel {projectName} />
|
||||
<h3 class="text-base-body-14 text-bold">Target trunk branch</h3>
|
||||
<p class="text-base-body-12">
|
||||
This is the branch that you consider "production", normally something like "origin/master" or
|
||||
"upstream/main".
|
||||
</p>
|
||||
</div>
|
||||
<Select items={remoteBranches} bind:value={selectedBranch} itemId="name" labelId="name">
|
||||
<SelectItem slot="template" let:item let:selected {selected}>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
{#if remotes.length > 1}
|
||||
<p class="text-base-body-12">
|
||||
You have branches from multiple remotes. If you want to specify a push target for creating
|
||||
branches that is different from your production branch, change it here.
|
||||
</p>
|
||||
<Select items={remotes} bind:value={selectedRemote} itemId="name" labelId="name">
|
||||
<SelectItem slot="template" let:item let:selected {selected}>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
{/if}
|
||||
|
||||
<div class="project-setup__fields">
|
||||
<div class="project-setup__field-wrap">
|
||||
<Select items={remoteBranches} bind:value={selectedBranch} itemId="name" labelId="name">
|
||||
<SelectItem slot="template" let:item let:selected {selected}>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
<p class="project-setup__description-text text-base-body-12">
|
||||
This is the branch that you consider "production", normally something like "origin/master"
|
||||
or "upstream/main".
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if remotes.length > 1}
|
||||
<div class="project-setup__field-wrap">
|
||||
<Select items={remotes} bind:value={selectedRemote} itemId="name" labelId="name">
|
||||
<SelectItem slot="template" let:item let:selected {selected}>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
</Select>
|
||||
<p class="project-setup__description-text text-base-body-12">
|
||||
You have branches from multiple remotes. If you want to specify a push target for creating
|
||||
branches that is different from your production branch, change it here.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card features-wrapper">
|
||||
<SetupFeature>
|
||||
<SetupFeature labelFor="aiGenEnabled">
|
||||
<svelte:fragment slot="icon">
|
||||
<svg
|
||||
width="20"
|
||||
@ -147,20 +156,15 @@
|
||||
<svelte:fragment slot="title">GitButler features</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="body">
|
||||
{#if $user}
|
||||
<label class="project-setup__toggle-label" for="aiGenEnabled"
|
||||
>Enable automatic branch and commit message generation (uses OpenAI's API).</label
|
||||
>
|
||||
{:else}
|
||||
Enable automatic branch and commit message generation (uses OpenAI's API).
|
||||
{/if}
|
||||
Enable automatic creation of branches and automatic generation of commit messages (using
|
||||
OpenAI's API).
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="toggle">
|
||||
{#if $user}
|
||||
<Toggle
|
||||
name="aiGenEnabled"
|
||||
bind:this={aiGenCheckbox}
|
||||
checked={$aiGenEnabled}
|
||||
id="aiGenEnabled"
|
||||
on:change={() => {
|
||||
$aiGenEnabled = !$aiGenEnabled;
|
||||
$aiGenAutoBranchNamingEnabled = $aiGenEnabled;
|
||||
@ -263,6 +267,23 @@
|
||||
gap: var(--size-12);
|
||||
}
|
||||
|
||||
.project-setup__fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-16);
|
||||
padding-bottom: var(--size-10);
|
||||
}
|
||||
|
||||
.project-setup__description-text {
|
||||
color: var(--clr-text-2);
|
||||
}
|
||||
|
||||
.project-setup__field-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-12);
|
||||
}
|
||||
|
||||
.floating-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -2,10 +2,20 @@
|
||||
export let disabled = false;
|
||||
export let success = false;
|
||||
export let topBorder = false;
|
||||
|
||||
export let labelFor = '';
|
||||
|
||||
const SLOTS = $$props.$$slots;
|
||||
</script>
|
||||
|
||||
<div class="setup-feature" class:success class:disabled class:top-border={topBorder}>
|
||||
<label
|
||||
for={labelFor}
|
||||
class="setup-feature"
|
||||
class:success
|
||||
class:disabled
|
||||
class:top-border={topBorder}
|
||||
class:clickable={labelFor !== '' && !SLOTS.actions}
|
||||
>
|
||||
<div class="setup-feature__icon">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
@ -31,7 +41,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<style lang="postcss">
|
||||
.setup-feature {
|
||||
@ -86,7 +96,13 @@
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
/* MODIFIERS */
|
||||
|
||||
.top-border {
|
||||
border-top: 1px solid var(--clr-border-2);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
import { tooltip } from '$lib/utils/tooltip';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let name = '';
|
||||
|
||||
export let small = false;
|
||||
export let disabled = false;
|
||||
export let checked = false;
|
||||
@ -26,7 +24,6 @@
|
||||
class="toggle"
|
||||
class:small
|
||||
{value}
|
||||
{name}
|
||||
{id}
|
||||
{disabled}
|
||||
use:tooltip={help}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user