mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-25 02:26:14 +03:00
Improved project remove UX, updated text styles
This commit is contained in:
parent
85407d14ec
commit
0c11f68943
@ -63,7 +63,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.s-default {
|
.s-default {
|
||||||
max-width: calc(var(--space-64) * 10);
|
max-width: calc(var(--space-64) * 9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-small {
|
.s-small {
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Button from './Button.svelte';
|
|
||||||
import DecorativeSplitView from './DecorativeSplitView.svelte';
|
import DecorativeSplitView from './DecorativeSplitView.svelte';
|
||||||
import Modal from './Modal.svelte';
|
|
||||||
import ProjectSwitcher from './ProjectSwitcher.svelte';
|
import ProjectSwitcher from './ProjectSwitcher.svelte';
|
||||||
|
import RemoveProjectButton from './RemoveProjectButton.svelte';
|
||||||
import Icon from '$lib/components/Icon.svelte';
|
import Icon from '$lib/components/Icon.svelte';
|
||||||
import * as toasts from '$lib/utils/toasts';
|
import * as toasts from '$lib/utils/toasts';
|
||||||
import type { Project, ProjectService } from '$lib/backend/projects';
|
import type { Project, ProjectService } from '$lib/backend/projects';
|
||||||
@ -17,7 +16,7 @@
|
|||||||
$: user$ = userService.user$;
|
$: user$ = userService.user$;
|
||||||
|
|
||||||
let loading = false;
|
let loading = false;
|
||||||
let deleteConfirmationModal: Modal;
|
let deleteConfirmationModal: RemoveProjectButton;
|
||||||
|
|
||||||
async function onDeleteClicked() {
|
async function onDeleteClicked() {
|
||||||
loading = true;
|
loading = true;
|
||||||
@ -49,44 +48,26 @@
|
|||||||
There was a problem loading this repo
|
There was a problem loading this repo
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{#if error}
|
<div class="problem__error text-base-body-12">
|
||||||
<div class="problem__error text-base-body-12">
|
<Icon name="error" color="error" />
|
||||||
<Icon name="error" color="error" />
|
{error ? error.message : 'An unknown error occurred'}
|
||||||
{error}
|
</div>
|
||||||
</div>
|
|
||||||
{/if}
|
<div class="remove-project-btn">
|
||||||
|
<RemoveProjectButton
|
||||||
|
bind:this={deleteConfirmationModal}
|
||||||
|
projectTitle={project.title}
|
||||||
|
isDeleting={loading}
|
||||||
|
{onDeleteClicked}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="problem__switcher">
|
<div class="problem__switcher">
|
||||||
<ProjectSwitcher {projectService} {project} />
|
<ProjectSwitcher {projectService} {project} />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DecorativeSplitView>
|
</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">
|
<style lang="postcss">
|
||||||
.problem__project {
|
.problem__project {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -104,9 +85,7 @@
|
|||||||
|
|
||||||
.problem__switcher {
|
.problem__switcher {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-top: var(--space-10);
|
margin-top: var(--space-24);
|
||||||
padding-bottom: var(--space-32);
|
|
||||||
border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.problem__error {
|
.problem__error {
|
||||||
@ -116,10 +95,13 @@
|
|||||||
padding: var(--space-20);
|
padding: var(--space-20);
|
||||||
background-color: var(--clr-theme-err-container);
|
background-color: var(--clr-theme-err-container);
|
||||||
border-radius: var(--radius-m);
|
border-radius: var(--radius-m);
|
||||||
margin-bottom: var(--space-24);
|
margin-bottom: var(--space-12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.problem__delete {
|
.remove-project-btn {
|
||||||
margin-top: var(--space-32);
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-bottom: var(--space-24);
|
||||||
|
border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60);
|
||||||
}
|
}
|
||||||
</style>
|
</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}
|
{/await}
|
||||||
{:else if $branchesError$}
|
{:else if $branchesError$}
|
||||||
<ProblemLoadingRepo {projectService} {userService} project={$project$} error={$branchesError$} />
|
<ProblemLoadingRepo
|
||||||
|
{projectService}
|
||||||
|
{userService}
|
||||||
|
project={$project$}
|
||||||
|
error={$branchesError$}
|
||||||
|
/>
|
||||||
{:else if !$gbBranchActive$ && $baseBranch$}
|
{:else if !$gbBranchActive$ && $baseBranch$}
|
||||||
<NotOnGitButlerBranch
|
<NotOnGitButlerBranch
|
||||||
{userService}
|
{userService}
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Button from '$lib/components/Button.svelte';
|
|
||||||
import CloudForm from '$lib/components/CloudForm.svelte';
|
import CloudForm from '$lib/components/CloudForm.svelte';
|
||||||
import DetailsForm from '$lib/components/DetailsForm.svelte';
|
import DetailsForm from '$lib/components/DetailsForm.svelte';
|
||||||
import KeysForm from '$lib/components/KeysForm.svelte';
|
import KeysForm from '$lib/components/KeysForm.svelte';
|
||||||
import Modal from '$lib/components/Modal.svelte';
|
|
||||||
import PreferencesForm from '$lib/components/PreferencesForm.svelte';
|
import PreferencesForm from '$lib/components/PreferencesForm.svelte';
|
||||||
|
import RemoveProjectButton from '$lib/components/RemoveProjectButton.svelte';
|
||||||
import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
|
import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
|
||||||
import Spacer from '$lib/components/Spacer.svelte';
|
import Spacer from '$lib/components/Spacer.svelte';
|
||||||
import * as toasts from '$lib/utils/toasts';
|
import * as toasts from '$lib/utils/toasts';
|
||||||
@ -21,7 +20,7 @@
|
|||||||
$: user$ = data.user$;
|
$: user$ = data.user$;
|
||||||
$: cloud = data.cloud;
|
$: cloud = data.cloud;
|
||||||
|
|
||||||
let deleteConfirmationModal: Modal;
|
let deleteConfirmationModal: RemoveProjectButton;
|
||||||
let isDeleting = false;
|
let isDeleting = false;
|
||||||
|
|
||||||
const onDeleteClicked = () =>
|
const onDeleteClicked = () =>
|
||||||
@ -76,7 +75,12 @@
|
|||||||
<span class="card_title text-base-16 text-semibold">Project settings</span>
|
<span class="card_title text-base-16 text-semibold">Project settings</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card__content">
|
<div class="card__content">
|
||||||
<CloudForm project={$project$} user={$user$} {userService} on:updated={onCloudUpdated} />
|
<CloudForm
|
||||||
|
project={$project$}
|
||||||
|
user={$user$}
|
||||||
|
{userService}
|
||||||
|
on:updated={onCloudUpdated}
|
||||||
|
/>
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<DetailsForm project={$project$} on:updated={onDetailsUpdated} />
|
<DetailsForm project={$project$} on:updated={onDetailsUpdated} />
|
||||||
<Spacer />
|
<Spacer />
|
||||||
@ -90,7 +94,7 @@
|
|||||||
href="https://discord.gg/wDKZCPEjXC"
|
href="https://discord.gg/wDKZCPEjXC"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
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="mb-2 font-medium">Join our Discord</p>
|
||||||
<p class="text-light-700 dark:text-dark-200">
|
<p class="text-light-700 dark:text-dark-200">
|
||||||
@ -100,7 +104,7 @@
|
|||||||
<a
|
<a
|
||||||
href="mailto:hello@gitbutler.com?subject=Feedback or question!"
|
href="mailto:hello@gitbutler.com?subject=Feedback or question!"
|
||||||
target="_blank"
|
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="mb-2 font-medium">Contact us</p>
|
||||||
<p class="text-light-700 dark:text-dark-200">
|
<p class="text-light-700 dark:text-dark-200">
|
||||||
@ -110,27 +114,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card__footer">
|
<div class="card__footer">
|
||||||
<Button color="error" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
|
<RemoveProjectButton
|
||||||
Delete project
|
bind:this={deleteConfirmationModal}
|
||||||
</Button>
|
projectTitle={$project$?.title}
|
||||||
|
{isDeleting}
|
||||||
|
{onDeleteClicked}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ScrollableContainer>
|
</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">
|
<style lang="postcss">
|
||||||
.settings {
|
.settings {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
.card__header {
|
.card__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: var(--space-12);
|
padding: var(--space-16);
|
||||||
gap: var(--space-8);
|
gap: var(--space-8);
|
||||||
border-bottom: 1px solid var(--clr-theme-container-outline-light);
|
border-bottom: 1px solid var(--clr-theme-container-outline-light);
|
||||||
}
|
}
|
||||||
@ -27,7 +27,7 @@
|
|||||||
.card__footer {
|
.card__footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-6);
|
gap: var(--space-6);
|
||||||
padding: var(--space-12);
|
padding: var(--space-16);
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-top: 1px solid var(--clr-theme-container-outline-light);
|
border-top: 1px solid var(--clr-theme-container-outline-light);
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
--semidold-font-weight: 600;
|
--semidold-font-weight: 600;
|
||||||
--bold-font-weight: 700;
|
--bold-font-weight: 700;
|
||||||
--base-line-height: 120%;
|
--base-line-height: 120%;
|
||||||
--text-body-line-height: 140%;
|
--text-body-line-height: 150%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* text Base Classes */
|
/* text Base Classes */
|
||||||
|
Loading…
Reference in New Issue
Block a user