mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-24 18:12:48 +03:00
Improved project remove UX, updated text styles
This commit is contained in:
parent
85407d14ec
commit
0c11f68943
@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
.s-default {
|
||||
max-width: calc(var(--space-64) * 10);
|
||||
max-width: calc(var(--space-64) * 9);
|
||||
}
|
||||
|
||||
.s-small {
|
||||
|
@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Button from './Button.svelte';
|
||||
import DecorativeSplitView from './DecorativeSplitView.svelte';
|
||||
import Modal from './Modal.svelte';
|
||||
import ProjectSwitcher from './ProjectSwitcher.svelte';
|
||||
import RemoveProjectButton from './RemoveProjectButton.svelte';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import * as toasts from '$lib/utils/toasts';
|
||||
import type { Project, ProjectService } from '$lib/backend/projects';
|
||||
@ -17,7 +16,7 @@
|
||||
$: user$ = userService.user$;
|
||||
|
||||
let loading = false;
|
||||
let deleteConfirmationModal: Modal;
|
||||
let deleteConfirmationModal: RemoveProjectButton;
|
||||
|
||||
async function onDeleteClicked() {
|
||||
loading = true;
|
||||
@ -49,44 +48,26 @@
|
||||
There was a problem loading this repo
|
||||
</p>
|
||||
|
||||
{#if error}
|
||||
<div class="problem__error text-base-body-12">
|
||||
<Icon name="error" color="error" />
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="problem__error text-base-body-12">
|
||||
<Icon name="error" color="error" />
|
||||
{error ? error.message : 'An unknown error occurred'}
|
||||
</div>
|
||||
|
||||
<div class="remove-project-btn">
|
||||
<RemoveProjectButton
|
||||
bind:this={deleteConfirmationModal}
|
||||
projectTitle={project.title}
|
||||
isDeleting={loading}
|
||||
{onDeleteClicked}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="problem__switcher">
|
||||
<ProjectSwitcher {projectService} {project} />
|
||||
</div>
|
||||
|
||||
<div class="problem__delete">
|
||||
<Button
|
||||
wide
|
||||
on:click={() => deleteConfirmationModal.show()}
|
||||
{loading}
|
||||
kind="outlined"
|
||||
color="error"
|
||||
icon="bin-small"
|
||||
>
|
||||
Remove project from GitButler
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DecorativeSplitView>
|
||||
|
||||
<Modal bind:this={deleteConfirmationModal} title="Delete {project.title}?">
|
||||
<p>
|
||||
Are you sure you want to delete
|
||||
<span class="font-bold">{project.title}</span>? This can’t be undone.
|
||||
</p>
|
||||
|
||||
<svelte:fragment slot="controls" let:close>
|
||||
<Button kind="outlined" on:click={close}>Cancel</Button>
|
||||
<Button color="error" {loading} on:click={onDeleteClicked}>Delete project</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style lang="postcss">
|
||||
.problem__project {
|
||||
display: flex;
|
||||
@ -104,9 +85,7 @@
|
||||
|
||||
.problem__switcher {
|
||||
text-align: right;
|
||||
margin-top: var(--space-10);
|
||||
padding-bottom: var(--space-32);
|
||||
border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60);
|
||||
margin-top: var(--space-24);
|
||||
}
|
||||
|
||||
.problem__error {
|
||||
@ -116,10 +95,13 @@
|
||||
padding: var(--space-20);
|
||||
background-color: var(--clr-theme-err-container);
|
||||
border-radius: var(--radius-m);
|
||||
margin-bottom: var(--space-24);
|
||||
margin-bottom: var(--space-12);
|
||||
}
|
||||
|
||||
.problem__delete {
|
||||
margin-top: var(--space-32);
|
||||
.remove-project-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: var(--space-24);
|
||||
border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60);
|
||||
}
|
||||
</style>
|
||||
|
67
gitbutler-ui/src/lib/components/RemoveProjectButton.svelte
Normal file
67
gitbutler-ui/src/lib/components/RemoveProjectButton.svelte
Normal file
@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
export let projectTitle: string = '#';
|
||||
export let isDeleting = false;
|
||||
export let onDeleteClicked: () => Promise<void>;
|
||||
|
||||
export function show() {
|
||||
modal.show();
|
||||
}
|
||||
export function close() {
|
||||
modal.close();
|
||||
}
|
||||
|
||||
let modal: Modal;
|
||||
</script>
|
||||
|
||||
<Button
|
||||
color="error"
|
||||
kind="outlined"
|
||||
icon="bin-small"
|
||||
iconAlign="left"
|
||||
on:click={() => {
|
||||
modal.show();
|
||||
}}
|
||||
>
|
||||
Remove this project …
|
||||
</Button>
|
||||
|
||||
<Modal bind:this={modal} title="Remove from GitButler">
|
||||
<div class="remove-project-description">
|
||||
<p class="text-base-body-14">
|
||||
Are you sure you want to remove
|
||||
<span class="font-bold">{projectTitle}</span> from GitButler?
|
||||
</p>
|
||||
|
||||
<p class="text-base-body-12 details-text">
|
||||
When you delete your project from GitButler, your repository doesn't get deleted. It
|
||||
just removes the project from the list, keeping your repository safe and easy to access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="controls" let:close>
|
||||
<Button
|
||||
color="error"
|
||||
kind="outlined"
|
||||
iconAlign="left"
|
||||
loading={isDeleting}
|
||||
icon="bin-small"
|
||||
on:click={onDeleteClicked}>Remove</Button
|
||||
>
|
||||
<Button on:click={close}>Cancel</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style lang="postcss">
|
||||
.remove-project-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.details-text {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
@ -72,7 +72,12 @@
|
||||
/>
|
||||
{/await}
|
||||
{:else if $branchesError$}
|
||||
<ProblemLoadingRepo {projectService} {userService} project={$project$} error={$branchesError$} />
|
||||
<ProblemLoadingRepo
|
||||
{projectService}
|
||||
{userService}
|
||||
project={$project$}
|
||||
error={$branchesError$}
|
||||
/>
|
||||
{:else if !$gbBranchActive$ && $baseBranch$}
|
||||
<NotOnGitButlerBranch
|
||||
{userService}
|
||||
|
@ -1,10 +1,9 @@
|
||||
<script lang="ts">
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import CloudForm from '$lib/components/CloudForm.svelte';
|
||||
import DetailsForm from '$lib/components/DetailsForm.svelte';
|
||||
import KeysForm from '$lib/components/KeysForm.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import PreferencesForm from '$lib/components/PreferencesForm.svelte';
|
||||
import RemoveProjectButton from '$lib/components/RemoveProjectButton.svelte';
|
||||
import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
|
||||
import Spacer from '$lib/components/Spacer.svelte';
|
||||
import * as toasts from '$lib/utils/toasts';
|
||||
@ -21,7 +20,7 @@
|
||||
$: user$ = data.user$;
|
||||
$: cloud = data.cloud;
|
||||
|
||||
let deleteConfirmationModal: Modal;
|
||||
let deleteConfirmationModal: RemoveProjectButton;
|
||||
let isDeleting = false;
|
||||
|
||||
const onDeleteClicked = () =>
|
||||
@ -76,7 +75,12 @@
|
||||
<span class="card_title text-base-16 text-semibold">Project settings</span>
|
||||
</div>
|
||||
<div class="card__content">
|
||||
<CloudForm project={$project$} user={$user$} {userService} on:updated={onCloudUpdated} />
|
||||
<CloudForm
|
||||
project={$project$}
|
||||
user={$user$}
|
||||
{userService}
|
||||
on:updated={onCloudUpdated}
|
||||
/>
|
||||
<Spacer />
|
||||
<DetailsForm project={$project$} on:updated={onDetailsUpdated} />
|
||||
<Spacer />
|
||||
@ -90,7 +94,7 @@
|
||||
href="https://discord.gg/wDKZCPEjXC"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="flex-1 rounded border border-light-200 bg-white p-4 dark:border-dark-400 dark:bg-dark-700"
|
||||
class="border-light-200 dark:border-dark-400 dark:bg-dark-700 flex-1 rounded border bg-white p-4"
|
||||
>
|
||||
<p class="mb-2 font-medium">Join our Discord</p>
|
||||
<p class="text-light-700 dark:text-dark-200">
|
||||
@ -100,7 +104,7 @@
|
||||
<a
|
||||
href="mailto:hello@gitbutler.com?subject=Feedback or question!"
|
||||
target="_blank"
|
||||
class="flex-1 rounded border border-light-200 bg-white p-4 dark:border-dark-400 dark:bg-dark-700"
|
||||
class="border-light-200 dark:border-dark-400 dark:bg-dark-700 flex-1 rounded border bg-white p-4"
|
||||
>
|
||||
<p class="mb-2 font-medium">Contact us</p>
|
||||
<p class="text-light-700 dark:text-dark-200">
|
||||
@ -110,27 +114,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__footer">
|
||||
<Button color="error" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
|
||||
Delete project
|
||||
</Button>
|
||||
<RemoveProjectButton
|
||||
bind:this={deleteConfirmationModal}
|
||||
projectTitle={$project$?.title}
|
||||
{isDeleting}
|
||||
{onDeleteClicked}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollableContainer>
|
||||
|
||||
<Modal bind:this={deleteConfirmationModal} title="Delete {$project$?.title}?">
|
||||
<p>
|
||||
Are you sure you want to delete
|
||||
<span class="font-bold">{$project$?.title}</span>? This can’t be undone.
|
||||
</p>
|
||||
|
||||
<svelte:fragment slot="controls" let:close>
|
||||
<Button kind="outlined" on:click={close}>Cancel</Button>
|
||||
<Button color="error" loading={isDeleting} on:click={onDeleteClicked}>Delete project</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style lang="postcss">
|
||||
.settings {
|
||||
display: flex;
|
||||
|
@ -9,7 +9,7 @@
|
||||
.card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-12);
|
||||
padding: var(--space-16);
|
||||
gap: var(--space-8);
|
||||
border-bottom: 1px solid var(--clr-theme-container-outline-light);
|
||||
}
|
||||
@ -27,7 +27,7 @@
|
||||
.card__footer {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
padding: var(--space-12);
|
||||
padding: var(--space-16);
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--clr-theme-container-outline-light);
|
||||
}
|
||||
|
@ -5,7 +5,7 @@
|
||||
--semidold-font-weight: 600;
|
||||
--bold-font-weight: 700;
|
||||
--base-line-height: 120%;
|
||||
--text-body-line-height: 140%;
|
||||
--text-body-line-height: 150%;
|
||||
}
|
||||
|
||||
/* text Base Classes */
|
||||
|
Loading…
Reference in New Issue
Block a user