162 lines
3.5 KiB
Svelte
162 lines
3.5 KiB
Svelte
<script>
|
|
import { Heading, Body, Button, Icon } from "@budibase/bbui"
|
|
import { processStringSync } from "@budibase/string-templates"
|
|
import { goto } from "@roxi/routify"
|
|
import { UserAvatar } from "@budibase/frontend-core"
|
|
|
|
export let app
|
|
export let lockedAction
|
|
|
|
$: editing = app?.lockedBy != null
|
|
|
|
const handleDefaultClick = () => {
|
|
if (window.innerWidth < 640) {
|
|
goToOverview()
|
|
} else {
|
|
goToBuilder()
|
|
}
|
|
}
|
|
|
|
const goToBuilder = () => {
|
|
$goto(`../../app/${app.devId}`)
|
|
}
|
|
|
|
const goToOverview = () => {
|
|
$goto(`../../app/${app.devId}/settings`)
|
|
}
|
|
</script>
|
|
|
|
<div class="app-row" on:click={lockedAction || handleDefaultClick}>
|
|
<div class="title">
|
|
<div class="app-icon">
|
|
<Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
|
|
</div>
|
|
<div class="name">
|
|
<Heading size="S">
|
|
{app.name}
|
|
</Heading>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="updated">
|
|
{#if editing}
|
|
Currently editing
|
|
<UserAvatar user={app.lockedBy} />
|
|
{:else if app.updatedAt}
|
|
{processStringSync("Updated {{ duration time 'millisecond' }} ago", {
|
|
time: new Date().getTime() - new Date(app.updatedAt).getTime(),
|
|
})}
|
|
{:else}
|
|
Never updated
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="title app-status" class:deployed={app.deployed}>
|
|
<Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
|
|
<Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
|
|
</div>
|
|
|
|
<div class="app-row-actions">
|
|
<Button size="S" secondary on:click={lockedAction || goToOverview}>
|
|
Manage
|
|
</Button>
|
|
<Button size="S" primary on:click={lockedAction || goToBuilder}>
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.app-row {
|
|
background: var(--background);
|
|
padding: 24px 32px;
|
|
border-radius: 8px;
|
|
display: grid;
|
|
grid-template-columns: 35% 25% 15% auto;
|
|
align-items: center;
|
|
gap: var(--spacing-m);
|
|
transition: border 130ms ease-out;
|
|
border: 1px solid transparent;
|
|
}
|
|
.app-row:hover {
|
|
cursor: pointer;
|
|
border-color: var(--spectrum-global-color-gray-300);
|
|
}
|
|
|
|
.updated {
|
|
color: var(--spectrum-global-color-gray-700);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.title,
|
|
.name {
|
|
flex: 1 1 auto;
|
|
}
|
|
.name {
|
|
width: 0;
|
|
}
|
|
.title,
|
|
.app-status {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.title :global(.spectrum-Heading),
|
|
.title :global(.spectrum-Icon),
|
|
.title :global(.spectrum-Body) {
|
|
color: var(--spectrum-global-color-gray-900);
|
|
}
|
|
|
|
.app-status:not(.deployed) :global(.spectrum-Icon),
|
|
.app-status:not(.deployed) :global(.spectrum-Body) {
|
|
color: var(--spectrum-global-color-gray-600);
|
|
}
|
|
|
|
.app-row-actions {
|
|
gap: var(--spacing-m);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.name {
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
}
|
|
.name :global(.spectrum-Heading) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.app-row {
|
|
grid-template-columns: 45% 30% auto;
|
|
}
|
|
.updated {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 800px) {
|
|
.app-row {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
.app-status {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.app-row {
|
|
padding: 20px;
|
|
}
|
|
.app-row-actions {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|