Update screen list to match designs. Update nav items to make text clearer. Update screen picker
This commit is contained in:
Andrew Kingston
parent
83305530cd
commit
61481fd50b
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Icon, StatusLight } from "@budibase/bbui"
|
||||
import { Icon } from "@budibase/bbui"
|
||||
import { createEventDispatcher, getContext } from "svelte"
|
||||
|
||||
export let icon
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
export let iconText
|
||||
export let iconColor
|
||||
export let scrollable = false
|
||||
export let color
|
||||
export let highlighted = false
|
||||
export let rightAlignIcon = false
|
||||
|
||||
const scrollApi = getContext("scroll")
|
||||
const dispatch = createEventDispatcher()
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
{iconText}
|
||||
</div>
|
||||
{:else if icon}
|
||||
<div class="icon">
|
||||
<div class="icon" class:right={rightAlignIcon}>
|
||||
<Icon color={iconColor} size="S" name={icon} />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -88,9 +88,9 @@
|
|||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
{#if color}
|
||||
<div class="light">
|
||||
<StatusLight size="L" {color} />
|
||||
{#if $$slots.right}
|
||||
<div class="right">
|
||||
<slot name="right" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
.nav-item.scrollable {
|
||||
flex-direction: column;
|
||||
|
|
@ -135,10 +135,8 @@
|
|||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
width: max-content;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-left: var(--spacing-l);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Needed to fully display the actions icon */
|
||||
|
|
@ -153,10 +151,15 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
order: 1;
|
||||
}
|
||||
.icon.right {
|
||||
order: 4;
|
||||
}
|
||||
.icon.arrow {
|
||||
flex: 0 0 20px;
|
||||
pointer-events: all;
|
||||
order: 0;
|
||||
}
|
||||
.icon.arrow.absolute {
|
||||
position: absolute;
|
||||
|
|
@ -183,16 +186,19 @@
|
|||
|
||||
.text {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 1 auto;
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
order: 2;
|
||||
width: 0;
|
||||
}
|
||||
.scrollable .text {
|
||||
flex: 0 0 auto;
|
||||
max-width: 160px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
|
@ -201,18 +207,17 @@
|
|||
display: grid;
|
||||
place-items: center;
|
||||
visibility: hidden;
|
||||
}
|
||||
.actions,
|
||||
.light :global(.spectrum-StatusLight) {
|
||||
order: 3;
|
||||
opacity: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: var(--spacing-s);
|
||||
margin-left: var(--spacing-xs);
|
||||
}
|
||||
.light {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.nav-item.withActions:hover .actions {
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-item.withActions:hover .light {
|
||||
display: none;
|
||||
|
||||
.right {
|
||||
order: 10;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script>
|
||||
import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
|
||||
import AppPreview from "./AppPreview.svelte"
|
||||
import { store, selectedScreen, sortedScreens } from "builderStore"
|
||||
import { Button, Select } from "@budibase/bbui"
|
||||
import { store, sortedScreens } from "builderStore"
|
||||
import { Select } from "@budibase/bbui"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
import { goto } from "@roxi/routify"
|
||||
</script>
|
||||
|
||||
<div class="app-panel">
|
||||
|
|
@ -15,10 +14,11 @@
|
|||
options={$sortedScreens}
|
||||
getOptionLabel={x => x.routing.route}
|
||||
getOptionValue={x => x._id}
|
||||
getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
|
||||
getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
|
||||
value={$store.selectedScreenId}
|
||||
on:change={e => store.actions.screens.select(e.detail)}
|
||||
quiet
|
||||
autoWidth
|
||||
/>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
|
|
@ -62,7 +62,8 @@
|
|||
gap: var(--spacing-l);
|
||||
}
|
||||
.header-left :global(.spectrum-Picker) {
|
||||
width: 250px;
|
||||
font-weight: 600;
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
let newOffsets = {}
|
||||
|
||||
// Calculate left offset
|
||||
const offsetX = bounds.left + bounds.width + scrollLeft - 58
|
||||
const offsetX = bounds.left + bounds.width + scrollLeft - 39
|
||||
if (offsetX > sidebarWidth) {
|
||||
newOffsets.left = offsetX - sidebarWidth
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
import NavItem from "components/common/NavItem.svelte"
|
||||
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
|
||||
import ScreenWizard from "./ScreenWizard.svelte"
|
||||
import RoleIndicator from "./RoleIndicator.svelte"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
|
||||
let searchString
|
||||
|
|
@ -52,14 +53,15 @@
|
|||
</Layout>
|
||||
{#each filteredScreens as screen (screen._id)}
|
||||
<NavItem
|
||||
icon={screen.routing.homeScreen ? "Home" : "WebPage"}
|
||||
icon={screen.routing.homeScreen ? "Home" : null}
|
||||
indentLevel={0}
|
||||
selected={$store.selectedScreenId === screen._id}
|
||||
text={screen.routing.route}
|
||||
on:click={() => store.actions.screens.select(screen._id)}
|
||||
color={RoleUtils.getRoleColour(screen.routing.roleId)}
|
||||
rightAlignIcon
|
||||
>
|
||||
<ScreenDropdownMenu screenId={screen._id} />
|
||||
<RoleIndicator slot="right" roleId={screen.routing.roleId} />
|
||||
</NavItem>
|
||||
{/each}
|
||||
{#if !filteredScreens?.length}
|
||||
|
|
|
|||
Loading…
Reference in New Issue