MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added the hover message for the publish menu icon

This commit is contained in:
Dean 2022-04-20 14:37:24 +01:00
parent 0305719fe3
commit 103511bc40
1 changed files with 62 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
packages/builder/src/pages/builder/app/[application]/_layout.svelte
View File

@ -33,7 +33,7 @@
let promise = getPackage() let promise = getPackage()
let unpublishModal let unpublishModal
let publishPopover let publishPopover
// let notPublishedPopover let notPublishedPopover
$: enrichedApps = enrichApps($apps, $auth.user) $: enrichedApps = enrichApps($apps, $auth.user)
const enrichApps = (apps, user) => { const enrichApps = (apps, user) => {
@ -224,47 +224,69 @@
<RevertModal /> <RevertModal />
<Icon name="Play" hoverable on:click={previewApp} /> <Icon name="Play" hoverable on:click={previewApp} />
<PopoverMenu {#if isPublished}
bind:this={publishPopover} <PopoverMenu
align="right" bind:this={publishPopover}
disabled={!isPublished} align="right"
> disabled={!isPublished}
<div slot="control" class="icon"> >
<Icon <div slot="control" class="icon">
size="M" <Icon
hoverable size="M"
name={isPublished ? "Globe" : "GlobeStrike"} hoverable
disabled={!isPublished} name={isPublished ? "Globe" : "GlobeStrike"}
/>
</div>
<Layout gap="M">
<Heading size="XS">Your app is live!</Heading>
<div class="publish-popover-message">
{#if isPublished}
{processStringSync(
"Last Published: {{ duration time 'millisecond' }} ago",
{
time:
new Date().getTime() -
new Date(latestDeployments[0].updatedAt).getTime(),
}
)}
{/if}
</div>
<div class="publish-popover-actions">
<Button
warning={true}
icon="Globe"
disabled={!isPublished} disabled={!isPublished}
on:click={unpublishApp} />
dataCy="publish-popover-action"
>
Unpublish
</Button>
<Button cta on:click={viewApp}>View App</Button>
</div> </div>
</Layout> <Layout gap="M">
</PopoverMenu> <Heading size="XS">Your app is live!</Heading>
<div class="publish-popover-message">
{#if isPublished}
{processStringSync(
"Last Published: {{ duration time 'millisecond' }} ago",
{
time:
new Date().getTime() -
new Date(latestDeployments[0].updatedAt).getTime(),
}
)}
{/if}
</div>
<div class="publish-popover-actions">
<Button
warning={true}
icon="GlobeStrike"
disabled={!isPublished}
on:click={unpublishApp}
dataCy="publish-popover-action"
>
Unpublish
</Button>
<Button cta on:click={viewApp}>View App</Button>
</div>
</Layout>
</PopoverMenu>
{/if}
{#if !isPublished}
<PopoverMenu bind:this={notPublishedPopover} align="right">
<div
slot="control"
class="icon"
on:mouseenter={() => {
notPublishedPopover.show()
}}
on:mouseout={() => {
notPublishedPopover.hide()
}}
on:blur={() => void 0}
disabled={true}
>
<Icon size="M" name={"GlobeStrike"} disabled={true} />
</div>
This app has not been published yet
</PopoverMenu>
{/if}
<DeployModal onOk={completePublish} /> <DeployModal onOk={completePublish} />
</div> </div>