mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: deploment design
This commit is contained in:
Arman
@@ -3,6 +3,7 @@
|
||||
import { throttle } from '$lib/helpers/functions';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let alternativeTrim = false;
|
||||
let showTooltip = false;
|
||||
let container: HTMLSpanElement | null;
|
||||
|
||||
@@ -15,7 +16,7 @@
|
||||
|
||||
<svelte:window on:resize={throttle(onResize, 250)} />
|
||||
|
||||
<span class="text u-trim" bind:this={container}>
|
||||
<span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
|
||||
{#if showTooltip}
|
||||
<span
|
||||
use:tooltip={{
|
||||
|
||||
@@ -41,6 +41,7 @@
|
||||
import RedeployModal from './redeployModal.svelte';
|
||||
import DeploymentSource from './deploymentSource.svelte';
|
||||
import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
|
||||
import DeploymentDomains from './deploymentDomains.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
@@ -107,19 +108,6 @@
|
||||
{$func.deployment}
|
||||
</Id>
|
||||
</div>
|
||||
|
||||
<div class="u-flex u-gap-12 u-cross-center u-margin-block-start-12">
|
||||
<p><b>Domain</b></p>
|
||||
</div>
|
||||
|
||||
<div class="u-flex u-gap-12 u-cross-center">
|
||||
<a
|
||||
class="u-underline u-cursor-pointer"
|
||||
href={`https//${data.domain.rules[0].domain}`}
|
||||
target="_blank">
|
||||
{data.domain.rules[0].domain}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svelte:fragment slot="aside">
|
||||
@@ -129,14 +117,20 @@
|
||||
<div>
|
||||
<p><b>Build time:</b> {calculateTime(activeDeployment.buildTime)}</p>
|
||||
<p>
|
||||
<b>Created:</b>
|
||||
<b>Updated:</b>
|
||||
<DeploymentCreatedBy deployment={activeDeployment} />
|
||||
</p>
|
||||
<p><b>Size:</b> {fileSize.value + fileSize.unit}</p>
|
||||
<p>
|
||||
<p class="u-flex u-gap-4 u-cross-center">
|
||||
<b>Source:</b>
|
||||
<DeploymentSource deployment={activeDeployment} />
|
||||
</p>
|
||||
{#if data.domain?.rules?.length}
|
||||
<p class="u-flex u-gap-4 u-cross-center">
|
||||
<b>Domains:</b>
|
||||
<DeploymentDomains domain={data.domain} />
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="u-flex u-flex-vertical u-cross-end">
|
||||
<Pill
|
||||
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { DropList, DropListLink, Trim } from '$lib/components';
|
||||
import { Pill } from '$lib/elements';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
|
||||
export let domain: Models.ProxyRuleList;
|
||||
let showDropdown = false;
|
||||
</script>
|
||||
|
||||
<div class="u-flex u-gap-4 u-cross-center">
|
||||
<Trim alternativeTrim>
|
||||
<a href={`https//${domain.rules[0].domain}`} target="_blank">
|
||||
<span class="link">
|
||||
{domain.rules[0].domain}
|
||||
</span> <span class="icon-external-link" aria-hidden="true" />
|
||||
</a>
|
||||
</Trim>
|
||||
{#if domain.rules.length > 1}
|
||||
<DropList bind:show={showDropdown} scrollable>
|
||||
<Pill button on:click={() => (showDropdown = !showDropdown)}>
|
||||
+{domain.rules.length - 1}
|
||||
</Pill>
|
||||
<svelte:fragment slot="list">
|
||||
{#each domain.rules as rule, i}
|
||||
{#if i !== 0}
|
||||
<DropListLink href={`https//${rule.domain}`} external icon="external-link">
|
||||
{rule.domain}
|
||||
</DropListLink>
|
||||
{/if}
|
||||
{/each}
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
{/if}
|
||||
</div>
|
||||
+22
-45
@@ -1,55 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { tooltip } from '$lib/actions/tooltip';
|
||||
import { DropList, DropListLink } from '$lib/components';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
import { tick } from 'svelte';
|
||||
|
||||
export let deployment: Models.Deployment;
|
||||
let tooltipContent: HTMLDivElement;
|
||||
let showDropdown = false;
|
||||
</script>
|
||||
|
||||
{#if deployment.type === 'vcs'}
|
||||
<button
|
||||
class="u-cursor-pointer"
|
||||
use:tooltip={{
|
||||
interactive: true,
|
||||
allowHTML: true,
|
||||
trigger: 'click',
|
||||
disabled: false,
|
||||
onShow(instance) {
|
||||
tick().then(() => {
|
||||
instance.setContent(tooltipContent);
|
||||
});
|
||||
}
|
||||
}}><span class="icon-github" aria-hidden="true" /> <span class="link">Git</span></button>
|
||||
<DropList bind:show={showDropdown}>
|
||||
<button
|
||||
on:click={() => (showDropdown = !showDropdown)}
|
||||
type="button"
|
||||
class="u-flex u-gap-4 u-cross-center">
|
||||
<span class="icon-github" aria-hidden="true" /> <span class="link">Git</span>
|
||||
</button>
|
||||
<svelte:fragment slot="list">
|
||||
<DropListLink href={deployment.providerRepositoryUrl} external icon="github">
|
||||
{deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
|
||||
</DropListLink>
|
||||
<DropListLink href={deployment.providerBranchUrl} external icon="git-branch">
|
||||
{deployment.providerBranch}
|
||||
</DropListLink>
|
||||
<DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
|
||||
{deployment?.providerCommitHash?.substring(0, 7)}
|
||||
{deployment.providerCommitMessage}
|
||||
</DropListLink>
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
{:else if deployment.type === 'manual'}
|
||||
<span class="icon-code" aria-hidden="true" /> <span>Manual</span>
|
||||
{/if}
|
||||
|
||||
<div class="u-hide">
|
||||
<div bind:this={tooltipContent} class="u-flex u-flex-vertical u-gap-2">
|
||||
<span
|
||||
><span class="icon-github" aria-hidden="true" />
|
||||
<a
|
||||
class="u-underline u-cursor-pointer"
|
||||
target="_blank"
|
||||
href={deployment.providerRepositoryUrl}
|
||||
>{deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}</a
|
||||
></span>
|
||||
<span
|
||||
><span class="icon-git-branch" aria-hidden="true" />
|
||||
<a
|
||||
class="u-underline u-cursor-pointer"
|
||||
target="_blank"
|
||||
href={deployment.providerBranchUrl}>{deployment.providerBranch}</a
|
||||
></span>
|
||||
<span
|
||||
><span class="icon-git-commit" aria-hidden="true" />
|
||||
<a
|
||||
class="u-underline u-cursor-pointer"
|
||||
target="_blank"
|
||||
href={deployment.providerCommitUrl}
|
||||
>{deployment?.providerCommitHash?.substring(0, 7)}
|
||||
{deployment.providerCommitMessage}</a
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
</Label>
|
||||
</div>
|
||||
<div class="form u-grid u-gap-16">
|
||||
<ul class="form-list">
|
||||
<FormList>
|
||||
{#if headers}
|
||||
{#each headers as [name, value], index}
|
||||
<FormItem isMultiple>
|
||||
@@ -162,7 +162,7 @@
|
||||
</FormItem>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</FormList>
|
||||
<Button
|
||||
noMargin
|
||||
text
|
||||
|
||||
Reference in New Issue
Block a user