Update publish icon with normal tooltips

This commit is contained in:
Andrew Kingston 2022-04-25 12:46:59 +01:00
parent 309e339222
commit 87dff13767
1 changed files with 14 additions and 24 deletions

View File

@ -11,6 +11,7 @@
Layout, Layout,
Button, Button,
Heading, Heading,
Body,
} from "@budibase/bbui" } from "@budibase/bbui"
import DeployModal from "components/deploy/DeployModal.svelte" import DeployModal from "components/deploy/DeployModal.svelte"
import RevertModal from "components/deploy/RevertModal.svelte" import RevertModal from "components/deploy/RevertModal.svelte"
@ -33,7 +34,6 @@
let promise = getPackage() let promise = getPackage()
let unpublishModal let unpublishModal
let publishPopover let publishPopover
let notPublishedPopover
$: enrichedApps = enrichApps($apps, $auth.user) $: enrichedApps = enrichApps($apps, $auth.user)
const enrichApps = (apps, user) => { const enrichApps = (apps, user) => {
@ -235,16 +235,17 @@
<Icon <Icon
size="M" size="M"
hoverable hoverable
name={isPublished ? "Globe" : "GlobeStrike"} name="Globe"
disabled={!isPublished} disabled={!isPublished}
tooltip="Your published app"
/> />
</div> </div>
<Layout gap="M"> <Layout gap="M">
<Heading size="XS">Your app is live!</Heading> <Heading size="XS">Your published app</Heading>
<div class="publish-popover-message"> <Body size="S">
{#if isPublished} {#if isPublished}
{processStringSync( {processStringSync(
"Last Published: {{ duration time 'millisecond' }} ago", "Last published {{ duration time 'millisecond' }} ago",
{ {
time: time:
new Date().getTime() - new Date().getTime() -
@ -252,7 +253,7 @@
} }
)} )}
{/if} {/if}
</div> </Body>
<div class="publish-popover-actions"> <div class="publish-popover-actions">
<Button <Button
warning={true} warning={true}
@ -263,30 +264,19 @@
> >
Unpublish Unpublish
</Button> </Button>
<Button cta on:click={viewApp}>View App</Button> <Button cta on:click={viewApp}>View app</Button>
</div> </div>
</Layout> </Layout>
</PopoverMenu> </PopoverMenu>
{/if} {/if}
{#if !isPublished} {#if !isPublished}
<PopoverMenu bind:this={notPublishedPopover} align="right"> <Icon
<div size="M"
slot="control" name="GlobeStrike"
class="icon app-status-icon" disabled
on:mouseenter={() => { tooltip="Your app has not been published yet"
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} {/if}
<DeployModal onOk={completePublish} /> <DeployModal onOk={completePublish} />