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

Update multiple usages of tooltips to use new tooltip

This commit is contained in:
Andrew Kingston 2023-07-07 12:09:23 +01:00
parent 6aef0f2134
commit 35150af784
9 changed files with 118 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
packages/bbui/src/Button/Button.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import "@spectrum-css/button/dist/index-vars.css" import "@spectrum-css/button/dist/index-vars.css"
import Tooltip from "../Tooltip/Tooltip.svelte" import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
import { createEventDispatcher } from "svelte"
export let type export let type
export let disabled = false export let disabled = false
@ -16,48 +17,53 @@
export let tooltip = undefined export let tooltip = undefined
export let newStyles = true export let newStyles = true
export let id export let id
const dispatch = createEventDispatcher()
</script> </script>
<button <AbsTooltip text={tooltip}>
{id} <button
{type} {id}
class:spectrum-Button--cta={cta} {type}
class:spectrum-Button--primary={primary} class:spectrum-Button--cta={cta}
class:spectrum-Button--secondary={secondary} class:spectrum-Button--primary={primary}
class:spectrum-Button--warning={warning} class:spectrum-Button--secondary={secondary}
class:spectrum-Button--overBackground={overBackground} class:spectrum-Button--warning={warning}
class:spectrum-Button--quiet={quiet} class:spectrum-Button--overBackground={overBackground}
class:new-styles={newStyles} class:spectrum-Button--quiet={quiet}
class:active class:new-styles={newStyles}
class:disabled class:active
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" class:is-disabled={disabled}
{disabled} class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
on:click|preventDefault on:click|preventDefault={() => {
> if (!disabled) {
{#if icon} dispatch("click")
<svg }
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" }}
focusable="false" >
aria-hidden="true" {#if icon}
aria-label={icon} <svg
> class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
<use xlink:href="#spectrum-icon-18-{icon}" /> focusable="false"
</svg> aria-hidden="true"
{/if} aria-label={icon}
{#if $$slots} >
<span class="spectrum-Button-label"><slot /></span> <use xlink:href="#spectrum-icon-18-{icon}" />
{/if} </svg>
{#if tooltip} {/if}
<div class="tooltip"> {#if $$slots}
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} /> <span class="spectrum-Button-label"><slot /></span>
</div> {/if}
{/if} </button>
</button> </AbsTooltip>
<style> <style>
button { button {
position: relative; position: relative;
} }
button.is-disabled {
cursor: default;
}
.spectrum-Button-label { .spectrum-Button-label {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -66,23 +72,6 @@
.active { .active {
color: var(--spectrum-global-color-blue-600) !important; color: var(--spectrum-global-color-blue-600) !important;
} }
.tooltip {
position: absolute;
display: flex;
justify-content: center;
z-index: 100;
width: 160px;
text-align: center;
transform: translateX(-50%);
left: 50%;
top: 100%;
opacity: 0;
transition: opacity 130ms ease-out;
pointer-events: none;
}
button:hover .tooltip {
opacity: 1;
}
.spectrum-Button--primary.new-styles { .spectrum-Button--primary.new-styles {
background: var(--spectrum-global-color-gray-800); background: var(--spectrum-global-color-gray-800);
border-color: transparent; border-color: transparent;
@ -96,10 +85,10 @@
border-color: transparent; border-color: transparent;
color: var(--spectrum-global-color-gray-900); color: var(--spectrum-global-color-gray-900);
} }
.spectrum-Button--secondary.new-styles:not(.disabled):hover { .spectrum-Button--secondary.new-styles:not(.is-disabled):hover {
background: var(--spectrum-global-color-gray-300); background: var(--spectrum-global-color-gray-300);
} }
.spectrum-Button--secondary.new-styles.disabled { .spectrum-Button--secondary.new-styles.is-disabled {
color: var(--spectrum-global-color-gray-500); color: var(--spectrum-global-color-gray-500);
} }
</style> </style>

2
packages/bbui/src/Popover/Popover.svelte
View File

@ -90,6 +90,6 @@
.spectrum-Popover { .spectrum-Popover {
min-width: var(--spectrum-global-dimension-size-2000); min-width: var(--spectrum-global-dimension-size-2000);
border-color: var(--spectrum-global-color-gray-300); border-color: var(--spectrum-global-color-gray-300);
overflow: visible; overflow: auto;
} }
</style> </style>

56
packages/bbui/src/Tooltip/AbsTooltip.svelte
View File

@ -1,5 +1,5 @@
<script context="module"> <script context="module">
export const TooltipDirection = { export const TooltipPosition = {
Top: "top", Top: "top",
Right: "right", Right: "right",
Bottom: "bottom", Bottom: "bottom",
@ -19,8 +19,8 @@
import { fade } from "svelte/transition" import { fade } from "svelte/transition"
import "@spectrum-css/tooltip/dist/index-vars.css" import "@spectrum-css/tooltip/dist/index-vars.css"
export let direction = TooltipDirection.Top export let position = TooltipPosition.Top
export let type = TooltipType.Positive export let type = TooltipType.Default
export let text = "" export let text = ""
let wrapper let wrapper
@ -35,16 +35,16 @@
} }
const bounds = node.getBoundingClientRect() const bounds = node.getBoundingClientRect()
if (direction === TooltipDirection.Top) { if (position === TooltipPosition.Top) {
left = bounds.left + bounds.width / 2 left = bounds.left + bounds.width / 2
top = bounds.top top = bounds.top
} else if (direction === TooltipDirection.Right) { } else if (position === TooltipPosition.Right) {
left = bounds.left + bounds.width left = bounds.left + bounds.width
top = bounds.top + bounds.height / 2 top = bounds.top + bounds.height / 2
} else if (direction === TooltipDirection.Bottom) { } else if (position === TooltipPosition.Bottom) {
left = bounds.left + bounds.width / 2 left = bounds.left + bounds.width / 2
top = bounds.top + bounds.height top = bounds.top + bounds.height
} else if (direction === TooltipDirection.Left) { } else if (position === TooltipPosition.Left) {
left = bounds.left left = bounds.left
top = bounds.top + bounds.height / 2 top = bounds.top + bounds.height / 2
} else { } else {
@ -58,25 +58,29 @@
} }
</script> </script>
<div {#if text}
bind:this={wrapper} <div
class="abs-tooltip" bind:this={wrapper}
on:mouseover={show} class="abs-tooltip"
on:mouseleave={hide} on:mouseover={show}
> on:mouseleave={hide}
>
<slot />
</div>
{#if visible}
<Portal target=".spectrum">
<span
class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
style="left:{left}px;top:{top}px;"
transition:fade|local={{ duration: 130 }}
>
<span class="spectrum-Tooltip-label">{text}</span>
<span class="spectrum-Tooltip-tip" />
</span>
</Portal>
{/if}
{:else}
<slot /> <slot />
</div>
{#if visible}
<Portal target=".spectrum">
<span
class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{direction} is-open"
style="left:{left}px;top:{top}px;"
transition:fade|local={{ duration: 130 }}
>
<span class="spectrum-Tooltip-label">{text}</span>
<span class="spectrum-Tooltip-tip" />
</span>
</Portal>
{/if} {/if}
<style> <style>
@ -85,7 +89,7 @@
} }
.spectrum-Tooltip { .spectrum-Tooltip {
position: absolute; position: absolute;
z-index: 999; z-index: 9999;
pointer-events: none; pointer-events: none;
margin: 0; margin: 0;
max-width: 280px; max-width: 280px;

2
packages/bbui/src/index.js
View File

@ -38,7 +38,7 @@ export { default as Link } from "./Link/Link.svelte"
export { default as Tooltip } from "./Tooltip/Tooltip.svelte" export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
export { export {
default as AbsTooltip, default as AbsTooltip,
TooltipDirection, TooltipPosition,
TooltipType, TooltipType,
} from "./Tooltip/AbsTooltip.svelte" } from "./Tooltip/AbsTooltip.svelte"
export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte" export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"

22
packages/builder/src/components/deploy/AppActions.svelte
View File

@ -10,6 +10,7 @@
Link, Link,
Modal, Modal,
StatusLight, StatusLight,
AbsTooltip,
} from "@budibase/bbui" } from "@budibase/bbui"
import RevertModal from "components/deploy/RevertModal.svelte" import RevertModal from "components/deploy/RevertModal.svelte"
import VersionModal from "components/deploy/VersionModal.svelte" import VersionModal from "components/deploy/VersionModal.svelte"
@ -250,15 +251,20 @@
<Link quiet on:click={unpublishApp}>Unpublish</Link> <Link quiet on:click={unpublishApp}>Unpublish</Link>
</span> </span>
<span class="revert-link"> <span class="revert-link">
<Link <AbsTooltip
disabled={!$isOnlyUser} text={$isOnlyUser
quiet ? null
secondary : "Unavailable - another user is editing this app"}
on:click={revertApp}
tooltip="Unavailable - another user is editing this app"
> >
Revert <Link
</Link> disabled={!$isOnlyUser}
quiet
secondary
on:click={revertApp}
>
Revert
</Link>
</AbsTooltip>
</span> </span>
{:else} {:else}
<span class="status-text unpublished">Not published</span> <span class="status-text unpublished">Not published</span>

21
packages/builder/src/components/portal/page/SideNavItem.svelte
View File

@ -1,11 +1,8 @@
<script> <script>
import { Tooltip } from "@budibase/bbui"
export let text export let text
export let url export let url
export let active = false export let active = false
export let disabled = false export let disabled = false
export let tooltip = null
</script> </script>
<div class="side-nav-item"> <div class="side-nav-item">
@ -18,11 +15,6 @@
{text || ""} {text || ""}
</div> </div>
{/if} {/if}
{#if tooltip}
<div class="tooltip">
<Tooltip textWrapping direction="right" text={tooltip} />
</div>
{/if}
</div> </div>
<style> <style>
@ -45,17 +37,4 @@
pointer-events: none; pointer-events: none;
color: var(--spectrum-global-color-gray-500) !important; color: var(--spectrum-global-color-gray-500) !important;
} }
.tooltip {
position: absolute;
transform: translateY(-50%);
left: 100%;
top: 50%;
opacity: 0;
pointer-events: none;
transition: opacity 130ms ease-out;
z-index: 100;
}
.side-nav-item:hover .tooltip {
opacity: 1;
}
</style> </style>

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

@ -1,6 +1,6 @@
<script> <script>
import { Content, SideNav, SideNavItem } from "components/portal/page" import { Content, SideNav, SideNavItem } from "components/portal/page"
import { Page, Layout } from "@budibase/bbui" import { Page, Layout, AbsTooltip, TooltipPosition } from "@budibase/bbui"
import { url, isActive } from "@roxi/routify" import { url, isActive } from "@roxi/routify"
import DeleteModal from "components/deploy/DeleteModal.svelte" import DeleteModal from "components/deploy/DeleteModal.svelte"
import { isOnlyUser } from "builderStore" import { isOnlyUser } from "builderStore"
@ -45,16 +45,20 @@
active={$isActive("./version")} active={$isActive("./version")}
/> />
<div class="delete-action"> <div class="delete-action">
<SideNavItem <AbsTooltip
text="Delete app" position={TooltipPosition.Right}
on:click={() => { text={$isOnlyUser
deleteModal.show()
}}
disabled={!$isOnlyUser}
tooltip={$isOnlyUser
? null ? null
: "Unavailable - another user is editing this app"} : "Unavailable - another user is editing this app"}
/> >
<SideNavItem
text="Delete app"
disabled={!$isOnlyUser}
on:click={() => {
deleteModal.show()
}}
/>
</AbsTooltip>
</div> </div>
</SideNav> </SideNav>
<slot /> <slot />

22
packages/builder/src/pages/builder/app/[application]/settings/backups/_components/ActionsRenderer.svelte
View File

@ -6,6 +6,8 @@
Heading, Heading,
Body, Body,
Modal, Modal,
AbsTooltip,
TooltipPosition,
} from "@budibase/bbui" } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import CreateRestoreModal from "./CreateRestoreModal.svelte" import CreateRestoreModal from "./CreateRestoreModal.svelte"
@ -46,16 +48,18 @@
</div> </div>
{#if row.type !== "restore"} {#if row.type !== "restore"}
<MenuItem <AbsTooltip
on:click={restoreDialog.show} position={TooltipPosition.Left}
icon="Revert" text="Unavailable - another user is editing this app"
disabled={!$isOnlyUser}
tooltip={$isOnlyUser
? null
: "Unavailable - another user is editing this app"}
> >
Restore <MenuItem
</MenuItem> on:click={restoreDialog.show}
icon="Revert"
disabled={!$isOnlyUser}
>
Restore
</MenuItem>
</AbsTooltip>
<MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem> <MenuItem on:click={deleteDialog.show} icon="Delete">Delete</MenuItem>
<MenuItem on:click={downloadExport} icon="Download">Download</MenuItem> <MenuItem on:click={downloadExport} icon="Download">Download</MenuItem>
{/if} {/if}

4
packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
View File

@ -6,7 +6,7 @@
Icon, Icon,
AbsTooltip, AbsTooltip,
TooltipType, TooltipType,
TooltipDirection, TooltipPosition,
} from "@budibase/bbui" } from "@budibase/bbui"
const { const {
@ -37,7 +37,7 @@
{#if $config.allowSchemaChanges} {#if $config.allowSchemaChanges}
<AbsTooltip <AbsTooltip
text="Click here to create your first column" text="Click here to create your first column"
direction={TooltipDirection.Bottom} position={TooltipPosition.Bottom}
type={TooltipType.Info} type={TooltipType.Info}
> >
<div <div