mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-10-07 09:27:26 +03:00
UI: empty board idle animation (#3204)
* refactor: `FullscreenLoading` to `FullviewLoading` in case we use this not only on pages but on components that are not fullscreen * refactor: remove unused import * idle animation for empty board added * min-height to the empty board suggestions panel
This commit is contained in:
Pavel Laptev
GitHub
parent
106697e3f6
commit
b7a0f7c593
@ -1,17 +1,16 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 237 202" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse opacity="0.14" cx="120.252" cy="194" rx="56.752" ry="8" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M156.177 98.2751L165.429 93.238C177.602 117.164 190.177 106.67 199.411 93.238L211.151 101.365C193.832 123.279 171.907 127.769 156.177 98.2751Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M233.459 76.528C226.114 87.9914 217.95 97.6385 213.264 100.372C213.319 107.54 204.376 102.423 201.93 100.792C199.087 98.7974 193.818 95.034 198.697 91.6099C197.906 91.1864 194.74 89.3879 193.327 86.1631C190.382 79.4441 194.138 74.8972 196.964 76.112C200.671 77.7056 197.575 82.232 200.251 84.4217C201.768 85.6622 205.708 85.6809 206.719 83.1448C207.589 80.9633 207.829 78.0315 204.869 76.4464C201.908 74.8612 199.457 77.4604 197.313 76.0266C194.102 73.8786 197.561 68.134 203.456 68.6845C206.364 68.956 210.279 70.7667 211.742 74.55C213.335 69.7364 213.859 68.1755 215.192 64.281C215.747 62.661 217.52 61.806 219.133 62.3819C220.751 62.9599 221.58 64.7553 220.981 66.3662C218.96 71.8049 217.964 74.6732 215.932 79.1743C218.25 75.1624 219.408 72.9852 221.764 68.2287C222.631 66.4796 224.805 65.8334 226.48 66.8354C228.01 67.7509 228.548 69.7087 227.718 71.2867C225.329 75.8233 224.906 76.8278 221.239 82.7427C224.605 78.7026 225.812 76.0128 228.107 72.724C229.139 71.2447 231.192 71.004 232.635 72.0863C234.027 73.1297 234.397 75.0638 233.459 76.528Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M213.683 82.7417C211.99 85.6232 211.08 86.9411 209.485 89.038M218.3 85.68C216.621 88.1985 214.522 90.717 213.263 91.9763" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M80.822 98.2751L71.5697 93.238C59.3969 117.164 46.822 106.67 37.5875 93.238L25.848 101.365C43.1669 123.279 65.0919 127.769 80.822 98.2751Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M3.54112 76.528C10.8861 87.9914 19.0495 97.6385 23.7361 100.372C23.6808 107.54 32.6236 102.423 35.0694 100.792C37.9132 98.7974 43.182 95.034 38.3027 91.6099C39.0936 91.1864 42.2598 89.3879 43.673 86.1631C46.6176 79.4441 42.8616 74.8972 40.0356 76.112C36.3286 77.7056 39.4252 82.232 36.7485 84.4217C35.232 85.6622 31.2916 85.6809 30.2807 83.1448C29.4112 80.9633 29.1708 78.0315 32.1312 76.4464C35.0915 74.8612 37.5431 77.4604 39.6866 76.0266C42.8978 73.8786 39.439 68.134 33.5439 68.6845C30.636 68.956 26.7208 70.7667 25.2574 74.55C23.6645 69.7364 23.1412 68.1755 21.8077 64.281C21.253 62.661 19.4797 61.806 17.8672 62.3819C16.2487 62.9599 15.4202 64.7553 16.0187 66.3662C18.0393 71.8049 19.0355 74.6732 21.0674 79.1743C18.75 75.1624 17.5922 72.9852 15.2353 68.2287C14.3686 66.4796 12.1951 65.8334 10.5199 66.8354C8.98952 67.7509 8.45126 69.7087 9.282 71.2867C11.6703 75.8233 12.0941 76.8278 15.7608 82.7427C12.3943 78.7026 11.1877 76.0128 8.89279 72.724C7.86055 71.2447 5.80738 71.004 4.36433 72.0863C2.97309 73.1297 2.60292 75.0638 3.54112 76.528Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M23.316 82.7417C25.0087 85.6232 25.9186 86.9411 27.5135 89.038M18.6987 85.68C20.3777 88.1985 22.4765 90.717 23.7357 91.9763" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M163.037 132.273L122.741 101.631L130.297 95.7546C148.486 102.611 183.354 120.772 177.309 138.569C171.265 156.367 126.957 146.283 104.57 138.867C97.1215 153.568 87.3598 158.596 73.9279 158.596L90.718 114.941L163.037 132.273Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M145.385 113.909L73.0655 133.321L88.2132 121.346L90.6769 115.036L95.0635 115.998L114.402 100.598L106.846 94.7219C88.6572 101.578 52.7492 122.861 58.7937 140.658C64.8381 158.456 108.185 146.212 130.572 138.796C138.02 153.496 147.782 158.524 161.214 158.524L145.385 113.909Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<rect x="64.9528" y="1.40234" width="107.173" height="99.8894" rx="12" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M106.572 96.0867V82.5601L118.861 87.7626L130.504 82.5601V96.0867L118.861 90.3639L106.572 96.0867Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<rect opacity="0.13" x="72.2352" y="8.68188" width="92.6058" height="69.7145" rx="7.86364" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M91.5356 31.6306C97.4875 35.6829 105.312 35.6829 111.264 31.6306" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M90.276 46.3193L98.7795 54.0498C109.666 63.947 126.293 63.947 137.18 54.0498L145.683 46.3193" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M123.856 31.6306C129.808 35.6829 137.633 35.6829 143.585 31.6306" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<svg width="100%" height="auto" viewBox="0 0 219 148" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M144.446 91.0235L153.027 86.3516C164.318 108.543 175.981 98.8099 184.546 86.3516L195.434 93.8895C179.371 114.215 159.035 118.379 144.446 91.0235Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M216.125 70.8527C209.313 81.4851 201.741 90.4328 197.394 92.9685C197.445 99.6163 189.151 94.8702 186.882 93.3578C184.245 91.5077 179.358 88.0172 183.884 84.8413C183.15 84.4485 180.213 82.7804 178.902 79.7894C176.171 73.5574 179.655 69.3402 182.276 70.4669C185.714 71.9449 182.842 76.1432 185.325 78.1741C186.732 79.3247 190.386 79.3421 191.324 76.9898C192.13 74.9665 192.353 72.2472 189.608 70.777C186.862 69.3067 184.588 71.7175 182.6 70.3876C179.622 68.3954 182.83 63.0672 188.297 63.5778C190.994 63.8296 194.626 65.5091 195.983 69.0181C197.461 64.5534 197.946 63.1057 199.183 59.4935C199.697 57.991 201.342 57.1979 202.838 57.7321C204.339 58.2682 205.107 59.9334 204.552 61.4276C202.678 66.472 201.754 69.1324 199.869 73.3072C202.019 69.5861 203.093 67.5667 205.279 63.155C206.083 61.5327 208.098 60.9333 209.652 61.8627C211.072 62.7118 211.571 64.5277 210.8 65.9913C208.585 70.1991 208.192 71.1308 204.791 76.6168C207.914 72.8697 209.033 70.3749 211.161 67.3244C212.119 65.9524 214.023 65.7291 215.362 66.733C216.652 67.7008 216.995 69.4946 216.125 70.8527Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M197.783 76.6162C196.213 79.2888 195.369 80.5112 193.89 82.4561M202.065 79.3415C200.508 81.6774 198.562 84.0134 197.394 85.1813" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M74.5533 91.0235L65.9718 86.3516C54.6814 108.543 43.0181 98.8099 34.453 86.3516L23.5645 93.8895C39.6279 114.215 59.9635 118.379 74.5533 91.0235Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M2.87464 70.8527C9.68713 81.4851 17.2588 90.4328 21.6056 92.9685C21.5543 99.6163 29.8488 94.8702 32.1174 93.3578C34.755 91.5077 39.6419 88.0172 35.1163 84.8413C35.8498 84.4485 38.7865 82.7804 40.0973 79.7894C42.8284 73.5574 39.3446 69.3402 36.7236 70.4669C33.2853 71.9449 36.1574 76.1432 33.6747 78.1741C32.2682 79.3247 28.6134 79.3421 27.6758 76.9898C26.8694 74.9665 26.6464 72.2472 29.3921 70.777C32.1379 69.3067 34.4117 71.7175 36.3999 70.3876C39.3782 68.3954 36.1702 63.0672 30.7025 63.5778C28.0053 63.8296 24.374 65.5091 23.0167 69.0181C21.5392 64.5534 21.0539 63.1057 19.8171 59.4935C19.3026 57.991 17.6578 57.1979 16.1621 57.7321C14.661 58.2682 13.8925 59.9334 14.4477 61.4276C16.3219 66.472 17.2458 69.1324 19.1304 73.3072C16.981 69.5861 15.9071 67.5667 13.7211 63.155C12.9172 61.5327 10.9013 60.9333 9.34753 61.8627C7.92807 62.7118 7.42883 64.5277 8.19934 65.9913C10.4145 70.1991 10.8076 71.1308 14.2085 76.6168C11.086 72.8697 9.96694 70.3749 7.83835 67.3244C6.88095 65.9524 4.97661 65.7291 3.63817 66.733C2.34778 67.7008 2.00445 69.4946 2.87464 70.8527Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M21.2161 76.6162C22.7861 79.2888 23.6301 80.5112 25.1094 82.4561M16.9336 79.3415C18.4909 81.6774 20.4375 84.0134 21.6055 85.1813" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M150.809 122.557L113.434 94.1361L120.442 88.6855C137.312 95.0445 169.652 111.889 164.046 128.397C158.44 144.904 117.344 135.551 96.5797 128.673C89.6712 142.308 80.6172 146.971 68.159 146.971L83.732 106.481L150.809 122.557Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M134.436 105.523L67.3591 123.529L81.4088 112.421L83.6939 106.569L87.7625 107.461L105.699 93.1781L98.6913 87.7275C81.8206 94.0865 48.5157 113.827 54.1219 130.334C59.7282 146.841 99.9326 135.485 120.697 128.607C127.605 142.241 136.659 146.905 149.117 146.905L134.436 105.523Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<rect x="59.8346" y="1.17285" width="99.4038" height="92.6482" rx="12" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M98.4368 88.9934V76.4473L109.835 81.2727L120.634 76.4473V88.9934L109.835 83.6854L98.4368 88.9934Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<rect opacity="0.13" x="66.5891" y="7.9248" width="85.8926" height="64.6607" rx="7.86364" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M84.4904 29.21C90.0107 32.9685 97.2682 32.9685 102.789 29.21" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M83.322 42.834L91.2091 50.004C101.307 59.1838 116.728 59.1838 126.826 50.004L134.713 42.834" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M114.468 29.21C119.988 32.9685 127.246 32.9685 132.766 29.21" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.1 KiB |
@ -1,5 +1,5 @@
|
||||
<script lang="ts" async="true">
|
||||
import FullscreenLoading from './FullscreenLoading.svelte';
|
||||
import FullviewLoading from './FullviewLoading.svelte';
|
||||
import NewBranchDropZone from './NewBranchDropZone.svelte';
|
||||
import dzenSvg from '$lib/assets/dzen-pc.svg?raw';
|
||||
import BranchLane from '$lib/components/BranchLane.svelte';
|
||||
@ -33,7 +33,7 @@
|
||||
{#if branchesError}
|
||||
<div class="p-4" data-tauri-drag-region>Something went wrong...</div>
|
||||
{:else if !branches}
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:else}
|
||||
<div
|
||||
class="board"
|
||||
@ -115,7 +115,11 @@
|
||||
{/each}
|
||||
|
||||
{#if branches.length == 0}
|
||||
<div data-tauri-drag-region class="empty-board__wrapper">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
class="empty-board__wrapper"
|
||||
class:transition-fly={branches.length == 0}
|
||||
>
|
||||
<div class="empty-board">
|
||||
<div class="empty-board__content">
|
||||
<div class="empty-board__about">
|
||||
@ -181,7 +185,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-tauri-drag-region class="empty-board__image-wrapper">
|
||||
<div data-tauri-drag-region class="empty-board__image-frame">
|
||||
<div class="empty-board__image">
|
||||
{@html dzenSvg}
|
||||
</div>
|
||||
@ -240,6 +244,7 @@
|
||||
width: 100%;
|
||||
gap: var(--size-48);
|
||||
max-width: 46rem;
|
||||
min-height: 20rem;
|
||||
padding: var(--size-32);
|
||||
}
|
||||
|
||||
@ -251,21 +256,66 @@
|
||||
padding-left: var(--size-4);
|
||||
}
|
||||
|
||||
.empty-board__image-wrapper {
|
||||
.empty-board__image-frame {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 11.2rem;
|
||||
height: auto;
|
||||
border-radius: var(--radius-l);
|
||||
background-color: var(--clr-theme-component-illustration-bg);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 12%;
|
||||
left: 50%;
|
||||
width: 6.5rem;
|
||||
height: 1.5rem;
|
||||
transform: translateX(-50%) scale(1.15);
|
||||
border-radius: 100%;
|
||||
background-color: var(--clr-theme-component-illustration-outline);
|
||||
opacity: 0.08;
|
||||
animation: shadow-scale 5.5s infinite ease-in-out;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-board__image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -70%) translateZ(0);
|
||||
width: 13.3rem;
|
||||
animation: hovering 5.5s infinite ease-in-out;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
@keyframes hovering {
|
||||
0% {
|
||||
transform: translate(-50%, -70%) translateZ(0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -65%) translateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -70%) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-scale {
|
||||
0% {
|
||||
opacity: 0.08;
|
||||
transform: translateX(-50%) scale(1.15);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.12;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.08;
|
||||
transform: translateX(-50%) scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-board__about {
|
||||
|
||||
@ -68,6 +68,7 @@
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<Resizer
|
||||
{viewport}
|
||||
direction="right"
|
||||
@ -158,6 +159,7 @@
|
||||
max-height: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.drag-region {
|
||||
flex-shrink: 0;
|
||||
height: var(--size-20);
|
||||
@ -183,6 +185,8 @@
|
||||
width: var(--size-4);
|
||||
}
|
||||
|
||||
/* FOLDING BUTTON */
|
||||
|
||||
.folding-button {
|
||||
z-index: 42;
|
||||
display: flex;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import { ProjectService } from '$lib/backend/projects';
|
||||
import AnalyticsConfirmation from '$lib/components/AnalyticsConfirmation.svelte';
|
||||
import DecorativeSplitView from '$lib/components/DecorativeSplitView.svelte';
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
|
||||
import Welcome from '$lib/components/Welcome.svelte';
|
||||
import { appAnalyticsConfirmed } from '$lib/config/appSettings';
|
||||
import { UserService } from '$lib/stores/user';
|
||||
@ -37,7 +37,7 @@
|
||||
</script>
|
||||
|
||||
{#if $redirect$ === undefined}
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:else if !$analyticsConfirmed}
|
||||
<DecorativeSplitView user={$user} img={analyticsSvg}>
|
||||
<AnalyticsConfirmation {analyticsConfirmed} />
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import { syncToCloud } from '$lib/backend/cloud';
|
||||
import { handleMenuActions } from '$lib/backend/menuActions';
|
||||
import { BranchService } from '$lib/branches/service';
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import Navigation from '$lib/components/Navigation.svelte';
|
||||
import NotOnGitButlerBranch from '$lib/components/NotOnGitButlerBranch.svelte';
|
||||
import ProblemLoadingRepo from '$lib/components/ProblemLoadingRepo.svelte';
|
||||
@ -81,13 +80,11 @@
|
||||
<ProblemLoadingRepo project={$project$} error={$branchesError} />
|
||||
{:else if !$gbBranchActive$ && $baseBranch}
|
||||
<NotOnGitButlerBranch project={$project$} baseBranch={$baseBranch} />
|
||||
{:else if $baseBranch}
|
||||
{:else}
|
||||
<div class="view-wrap" role="group" on:dragover|preventDefault>
|
||||
<Navigation project={$project$} user={$user$} />
|
||||
<slot />
|
||||
</div>
|
||||
{:else}
|
||||
<FullscreenLoading />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import BaseBranch from '$lib/components/BaseBranch.svelte';
|
||||
import FileCard from '$lib/components/FileCard.svelte';
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
|
||||
import Resizer from '$lib/components/Resizer.svelte';
|
||||
import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
|
||||
import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings';
|
||||
@ -49,7 +49,7 @@
|
||||
{#if $error$}
|
||||
<p>Error...</p>
|
||||
{:else if !$baseBranch}
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:else}
|
||||
<div class="base">
|
||||
<div
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
|
||||
import PullRequestPreview from '$lib/components/PullRequestPreview.svelte';
|
||||
import { GitHubService } from '$lib/github/service';
|
||||
import { getContextByClass } from '$lib/utils/context';
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="wrapper overflow-y-auto overscroll-none">
|
||||
<div class="inner flex">
|
||||
{#if !$pr$}
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:else if pr$}
|
||||
<PullRequestPreview pullrequest={$pr$} />
|
||||
{:else}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
|
||||
import RemoteBranchPreview from '$lib/components/RemoteBranchPreview.svelte';
|
||||
import { GitHubService } from '$lib/github/service';
|
||||
import { getContextByClass } from '$lib/utils/context';
|
||||
@ -20,7 +20,7 @@
|
||||
{#if $error}
|
||||
<p>Error...</p>
|
||||
{:else if !$branches}
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:else if branch}
|
||||
<RemoteBranchPreview
|
||||
projectId={$project$.id}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import CloudForm from '$lib/components/CloudForm.svelte';
|
||||
import DetailsForm from '$lib/components/DetailsForm.svelte';
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
|
||||
import KeysForm from '$lib/components/KeysForm.svelte';
|
||||
import PreferencesForm from '$lib/components/PreferencesForm.svelte';
|
||||
import RemoveProjectButton from '$lib/components/RemoveProjectButton.svelte';
|
||||
@ -69,7 +69,7 @@
|
||||
</script>
|
||||
|
||||
{#if !$project$}
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:else}
|
||||
<ContentWrapper title="Project settings">
|
||||
<CloudForm project={$project$} on:updated={onCloudUpdated} />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
|
||||
import ProblemLoadingRepo from '$lib/components/ProblemLoadingRepo.svelte';
|
||||
import ProjectSetup from '$lib/components/ProjectSetup.svelte';
|
||||
import { getRemoteBranches } from '$lib/vbranches/branchStoresCache';
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
{#await getRemoteBranches(projectId)}
|
||||
<!--TODO: Add project id -->
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:then remoteBranches}
|
||||
{#if remoteBranches.length == 0}
|
||||
<ProblemLoadingRepo
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import BranchLane from '$lib/components//BranchLane.svelte';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import FullscreenLoading from '$lib/components/FullscreenLoading.svelte';
|
||||
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { goto } from '$app/navigation';
|
||||
@ -23,7 +23,7 @@
|
||||
{#if $error}
|
||||
<p>{JSON.stringify($error)}</p>
|
||||
{:else if !$branches$}
|
||||
<FullscreenLoading />
|
||||
<FullviewLoading />
|
||||
{:else if branch}
|
||||
<BranchLane
|
||||
{branch}
|
||||
|
||||
@ -119,3 +119,20 @@ dialog::backdrop {
|
||||
.dark dialog::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* TRANSITION ANIMATION */
|
||||
|
||||
.transition-fly {
|
||||
animation: transition-fly 0.25s forwards ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes transition-fly {
|
||||
0% {
|
||||
transform: translateY(var(--size-6));
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user