forked from tsai/budibase
Andrew Kingston
4 years ago
committed by
GitHub
GitHub
28 changed files with 404 additions and 271 deletions
@ -1,7 +1,4 @@ |
|||||
<script> |
<!-- |
||||
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte" |
Placeholder file so that routify works. |
||||
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte" |
No unique content is needed in this index page. |
||||
</script> |
--> |
||||
|
|
||||
<ComponentListPanel /> |
|
||||
<ComponentSettingsPanel /> |
|
||||
|
|||||
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
import NewComponentPanel from "./_components/NewComponentPanel.svelte" |
||||
|
</script> |
||||
|
|
||||
|
<NewComponentPanel /> |
||||
@ -1,21 +0,0 @@ |
|||||
<script> |
|
||||
import Panel from "components/design/Panel.svelte" |
|
||||
import { Body, Layout } from "@budibase/bbui" |
|
||||
import { selectedComponent, selectedScreen, store } from "builderStore" |
|
||||
|
|
||||
$: componentDefinition = store.actions.components.getDefinition( |
|
||||
$selectedComponent?._component |
|
||||
) |
|
||||
$: isScreen = $selectedComponent?._id === $selectedScreen?.props._id |
|
||||
$: title = isScreen ? "Screen" : $selectedComponent?._instanceName |
|
||||
$: position = componentDefinition?.hasChildren ? "inside" : "below" |
|
||||
</script> |
|
||||
|
|
||||
<Panel {title} icon={componentDefinition?.icon} borderLeft> |
|
||||
<Layout paddingX="L" paddingY="XL"> |
|
||||
<Body size="S"> |
|
||||
Components that you add will be placed {position} |
|
||||
{title} |
|
||||
</Body> |
|
||||
</Layout> |
|
||||
</Panel> |
|
||||
@ -1,26 +0,0 @@ |
|||||
<script> |
|
||||
import NewComponentPanel from "./_components/NewComponentPanel.svelte" |
|
||||
import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte" |
|
||||
import { onMount } from "svelte" |
|
||||
import { store, selectedComponent, selectedScreen } from "builderStore" |
|
||||
import { redirect } from "@roxi/routify" |
|
||||
|
|
||||
// Select the screen slot as the target to add to, if no component |
|
||||
// is selected |
|
||||
onMount(() => { |
|
||||
if (!$selectedComponent) { |
|
||||
if ($selectedScreen) { |
|
||||
store.update(state => { |
|
||||
state.selectedComponentId = $selectedScreen.props._id |
|
||||
return state |
|
||||
}) |
|
||||
} else { |
|
||||
// Otherwise go back out of the add screen |
|
||||
$redirect("../") |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<NewComponentPanel /> |
|
||||
<NewComponentTargetPanel /> |
|
||||
@ -0,0 +1,58 @@ |
|||||
|
<script> |
||||
|
import { RoleUtils } from "@budibase/frontend-core" |
||||
|
import { Tooltip, StatusLight } from "@budibase/bbui" |
||||
|
import { roles } from "stores/backend" |
||||
|
import { Roles } from "constants/backend" |
||||
|
|
||||
|
export let roleId |
||||
|
|
||||
|
let showTooltip = false |
||||
|
|
||||
|
$: color = RoleUtils.getRoleColour(roleId) |
||||
|
$: role = $roles.find(role => role._id === roleId) |
||||
|
$: tooltip = |
||||
|
roleId === Roles.PUBLIC |
||||
|
? "This screen is open to the public" |
||||
|
: `Requires at least ${role?.name} access` |
||||
|
</script> |
||||
|
|
||||
|
<div |
||||
|
class="container" |
||||
|
on:mouseover={() => (showTooltip = true)} |
||||
|
on:mouseleave={() => (showTooltip = false)} |
||||
|
style="--color: {color};" |
||||
|
> |
||||
|
<StatusLight square {color} /> |
||||
|
{#if showTooltip} |
||||
|
<div class="tooltip"> |
||||
|
<Tooltip textWrapping text={tooltip} direction="left" /> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
position: relative; |
||||
|
} |
||||
|
.tooltip { |
||||
|
z-index: 1; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: calc(50% - 8px); |
||||
|
transform: translateX(-100%) translateY(-50%); |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
width: 130px; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.tooltip :global(.spectrum-Tooltip) { |
||||
|
background: var(--color); |
||||
|
color: white; |
||||
|
font-weight: 600; |
||||
|
max-width: 130px; |
||||
|
} |
||||
|
.tooltip :global(.spectrum-Tooltip-tip) { |
||||
|
border-top-color: var(--color); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue