workflow icons added
replace icons with spectrum workflow icons 4.0.0 - design icons replaced - nav items replaced to do - portal - data grid - automation canvas
This commit is contained in:
Joe
parent
799e44c0d8
commit
f811d28d0b
|
|
@ -28,7 +28,7 @@
|
|||
"dist"
|
||||
],
|
||||
"dependencies": {
|
||||
"@adobe/spectrum-css-workflow-icons": "1.2.1",
|
||||
"@adobe/spectrum-css-workflow-icons": "4.0.0",
|
||||
"@budibase/shared-core": "0.0.0",
|
||||
"@budibase/string-templates": "0.0.0",
|
||||
"@spectrum-css/accordion": "3.0.24",
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
aria-hidden="true"
|
||||
aria-label={icon}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if $$slots}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
<div class="spectrum-Toast-body">
|
||||
<div class="spectrum-Toast-content row-content">
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
aria-hidden="true"
|
||||
aria-label={icon}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if $$slots && !reverse}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<Button
|
||||
bind:ref={anchor}
|
||||
{size}
|
||||
icon="ChevronDown"
|
||||
icon="chevron-down-size300"
|
||||
{quiet}
|
||||
primary={quiet}
|
||||
cta={!quiet}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="property-group-name" on:click={onHeaderClick}>
|
||||
<div class="name">{name}</div>
|
||||
{#if collapsible}
|
||||
<Icon size="S" name={show ? "Remove" : "Add"} />
|
||||
<Icon size="S" name={show ? "remove" : "add"} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
</div>
|
||||
|
||||
<div class="align arrow-alignment">
|
||||
<Icon name="ChevronDown" />
|
||||
<Icon name="chevron-down-size300" />
|
||||
</div>
|
||||
</FancyField>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Alert" />
|
||||
<use xlink:href="#icon-Alert" />
|
||||
</svg>
|
||||
{/if}
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
enableTime={false}
|
||||
/>
|
||||
<div class="arrow">
|
||||
<Icon name="ChevronRight" />
|
||||
<Icon name="chevron-right" />
|
||||
</div>
|
||||
<CoreDatePicker
|
||||
value={toDate}
|
||||
|
|
|
|||
|
|
@ -197,14 +197,14 @@
|
|||
class:visible={selectedImageIdx > 0}
|
||||
on:click={navigateLeft}
|
||||
>
|
||||
<Icon name="ChevronLeft" />
|
||||
<Icon name="chevron-left" />
|
||||
</div>
|
||||
<div
|
||||
class="nav right"
|
||||
class:visible={selectedImageIdx < fileCount - 1}
|
||||
on:click={navigateRight}
|
||||
>
|
||||
<Icon name="ChevronRight" />
|
||||
<Icon name="chevron-right" />
|
||||
</div>
|
||||
{#if maximum !== 1}
|
||||
<div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
|
||||
|
|
|
|||
|
|
@ -114,9 +114,7 @@
|
|||
hbsValue.length ? removeVariable() : openPopover()
|
||||
}}
|
||||
>
|
||||
<use
|
||||
xlink:href={`#spectrum-icon-18-${!hbsValue.length ? "Key" : "Close"}`}
|
||||
/>
|
||||
<use xlink:href={`#icon-${!hbsValue.length ? "Key" : "Close"}`} />
|
||||
</svg>
|
||||
|
||||
<input
|
||||
|
|
@ -190,7 +188,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Add" />
|
||||
<use xlink:href="#icon-Add" />
|
||||
</svg>
|
||||
<div class="primary-text">Add Variable</div>
|
||||
</div>
|
||||
|
|
@ -201,7 +199,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-ArrowUp" />
|
||||
<use xlink:href="#icon-order-one-up" />
|
||||
</svg>
|
||||
<div class="primary-text">Upgrade plan</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@
|
|||
{#if option.tag}
|
||||
<span class="option-tag">
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">{option.tag}</Tag>
|
||||
<Tag icon="lock">{option.tag}</Tag>
|
||||
</Tags>
|
||||
</span>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@
|
|||
style="color: {iconData?.color}"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{iconData?.icon}" />
|
||||
<use xlink:href="#icon-{iconData?.icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Magnify" />
|
||||
<use xlink:href="#icon-search" />
|
||||
</svg>
|
||||
<input
|
||||
{disabled}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="error">{error}</div>
|
||||
{:else if helpText}
|
||||
<div class="helpText">
|
||||
<Icon name="HelpOutline" /> <span>{helpText}</span>
|
||||
<Icon name="help-circle" /> <span>{helpText}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
TooltipType,
|
||||
} from "../Tooltip/AbsTooltip.svelte"
|
||||
|
||||
export let name = "Add"
|
||||
export let name = "add"
|
||||
export let hidden = false
|
||||
export let size = "M"
|
||||
export let hoverable = false
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
>
|
||||
<use
|
||||
style="pointer-events: none;"
|
||||
xlink:href="#spectrum-icon-18-{name}"
|
||||
xlink:href="#icon-{name.toLowerCase()}"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
"Sandbox",
|
||||
"Project",
|
||||
"Organisations",
|
||||
"Magnify",
|
||||
"search",
|
||||
"Launch",
|
||||
"Car",
|
||||
"Camera",
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
<div class="spectrum-InLineAlert-header">{header}</div>
|
||||
<slot>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<div class="list-item__right">
|
||||
<slot name="right" />
|
||||
{#if showArrow}
|
||||
<Icon name="ChevronRight" />
|
||||
<Icon name="chevron-right" />
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<div class="spectrum-Toast-body" class:actionBody={!!action}>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -370,7 +370,7 @@
|
|||
class="spectrum-Icon spectrum-Table-autoIcon"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-MagicWand" />
|
||||
<use xlink:href="#icon-MagicWand" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if sortColumn === field}
|
||||
|
|
@ -388,7 +388,7 @@
|
|||
focusable="false"
|
||||
on:click={e => editColumn(e, field)}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Edit" />
|
||||
<use xlink:href="#icon-edit" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -462,7 +462,7 @@
|
|||
class="spectrum-Icon spectrum-Icon--sizeXXL"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
<use xlink:href="#icon-table" />
|
||||
</svg>
|
||||
<div>{placeholderText}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
aria-hidden="true"
|
||||
aria-label="Folder"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="spectrum-Tabs-itemLabel">{title}</span>
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
aria-hidden="true"
|
||||
aria-label="Folder"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="spectrum-Tabs-itemLabel">{title}</span>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
aria-hidden="true"
|
||||
aria-label="Tag"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-24-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="spectrum-Tags-itemLabel"><slot /></span>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
class:icon-small={size === "M" || size === "S"}
|
||||
on:focus
|
||||
>
|
||||
<Icon name="InfoOutline" size="S" {disabled} hoverable />
|
||||
<Icon name="info-circle" size="S" {disabled} hoverable />
|
||||
</div>
|
||||
</AbsTooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
aria-hidden="true"
|
||||
aria-label="Layers"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="spectrum-TreeView-itemLabel">{title}</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg?raw"
|
||||
import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"
|
||||
import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/assets/svg-spriteSheet/icons.svg?raw"
|
||||
|
||||
export default () => {
|
||||
loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@
|
|||
{#if isDisabled && !syncAutomationsEnabled && !triggerAutomationRunEnabled && lockedFeatures.includes(action.stepId)}
|
||||
<div class="tag-color">
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">Premium</Tag>
|
||||
<Tag icon="lock">Premium</Tag>
|
||||
</Tags>
|
||||
</div>
|
||||
{:else if isDisabled}
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@
|
|||
tooltipPosition={TooltipPosition.Top}
|
||||
hoverable
|
||||
disabled={branchIdx == 0}
|
||||
name="ArrowLeft"
|
||||
name="chevron-left"
|
||||
/>
|
||||
<Icon
|
||||
on:click={() => {
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
tooltipPosition={TooltipPosition.Top}
|
||||
hoverable
|
||||
disabled={isLast}
|
||||
name="ArrowRight"
|
||||
name="chevron-right"
|
||||
/>
|
||||
</div>
|
||||
</FlowItemHeader>
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
</PropField>
|
||||
<div class="footer">
|
||||
<Icon
|
||||
name="InfoOutline"
|
||||
name="info-circle"
|
||||
size="S"
|
||||
color="var(--spectrum-global-color-gray-700)"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -85,8 +85,8 @@
|
|||
|
||||
<div class="zoom">
|
||||
<div class="group">
|
||||
<ActionButton icon="Add" quiet on:click={draggable.zoomIn} />
|
||||
<ActionButton icon="Remove" quiet on:click={draggable.zoomOut} />
|
||||
<ActionButton icon="zoom-in" quiet on:click={draggable.zoomIn} />
|
||||
<ActionButton icon="zoom-out" quiet on:click={draggable.zoomOut} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -101,7 +101,6 @@
|
|||
</div>
|
||||
<div class="controls">
|
||||
<Button
|
||||
icon={"Play"}
|
||||
cta
|
||||
disabled={!automation?.definition?.trigger}
|
||||
on:click={() => {
|
||||
|
|
@ -111,7 +110,11 @@
|
|||
Run test
|
||||
</Button>
|
||||
<div class="buttons">
|
||||
<Icon disabled={!$automationStore.testResults} size="M" name="Multiple" />
|
||||
<Icon
|
||||
disabled={!$automationStore.testResults}
|
||||
size="M"
|
||||
name="list-multi-select"
|
||||
/>
|
||||
<div
|
||||
class:disabled={!$automationStore.testResults}
|
||||
on:click={() => {
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@
|
|||
style="color:var(--spectrum-global-color-gray-700);"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Reuse" />
|
||||
<use xlink:href="#icon-refresh" />
|
||||
</svg>
|
||||
<div class="iconAlign">
|
||||
<Detail size="S">Looping</Detail>
|
||||
|
|
@ -243,17 +243,15 @@
|
|||
|
||||
<div class="blockTitle">
|
||||
<AbsTooltip type="negative" text="Remove looping">
|
||||
<Icon
|
||||
on:click={removeLooping}
|
||||
hoverable
|
||||
name="DeleteOutline"
|
||||
/>
|
||||
<Icon on:click={removeLooping} hoverable name="delete" />
|
||||
</AbsTooltip>
|
||||
|
||||
<div style="margin-left: 10px;" on:click={() => {}}>
|
||||
<Icon
|
||||
hoverable
|
||||
name={showLooping ? "ChevronDown" : "ChevronUp"}
|
||||
name={showLooping
|
||||
? "chevron-down-size300"
|
||||
: "chevron-right"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -324,7 +322,7 @@
|
|||
<InfoDisplay
|
||||
title={triggerInfo.title}
|
||||
body="This trigger is tied to your '{triggerInfo.tableName}' table"
|
||||
icon="InfoOutline"
|
||||
icon="info-circle"
|
||||
/>
|
||||
{/if}
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
{#if !block.branchNode}
|
||||
<Icon
|
||||
hoverable
|
||||
name="Branch3"
|
||||
name="share-android"
|
||||
on:click={() => {
|
||||
dispatch("branch")
|
||||
}}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
{/if}
|
||||
<Icon
|
||||
hoverable
|
||||
name="AddCircle"
|
||||
name="add-circle"
|
||||
on:click={() => {
|
||||
actionModal.show()
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
style="color:var(--spectrum-global-color-gray-700);"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{block.icon}" />
|
||||
<use xlink:href="#icon-{block.icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
<div class="iconAlign">
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
dispatch("toggle")
|
||||
}}
|
||||
hoverable
|
||||
name={open ? "ChevronUp" : "ChevronDown"}
|
||||
name={open ? "chevron-down-size300" : "chevron-right"}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -201,12 +201,12 @@
|
|||
{#if !showTestStatus}
|
||||
{#if !isHeaderTrigger && !isLooped && !isBranch && (block?.features?.[Features.LOOPING] || !block.features)}
|
||||
<AbsTooltip type="info" text="Add looping">
|
||||
<Icon on:click={addLooping} hoverable name="RotateCW" />
|
||||
<Icon on:click={addLooping} hoverable name="rotate-cw" />
|
||||
</AbsTooltip>
|
||||
{/if}
|
||||
{#if !isHeaderTrigger}
|
||||
<AbsTooltip type="negative" text="Delete step">
|
||||
<Icon on:click={deleteStep} hoverable name="DeleteOutline" />
|
||||
<Icon on:click={deleteStep} hoverable name="delete" />
|
||||
</AbsTooltip>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
dispatch("toggle")
|
||||
}}
|
||||
hoverable
|
||||
name={open ? "ChevronUp" : "ChevronDown"}
|
||||
name={open ? "chevron-down-size300" : "chevron-right"}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -228,7 +228,7 @@
|
|||
<div class="error-container">
|
||||
<AbsTooltip type="negative" text={automationNameError}>
|
||||
<div class="error-icon">
|
||||
<Icon size="S" name="Alert" />
|
||||
<Icon size="S" name="alert-triangle" />
|
||||
</div>
|
||||
</AbsTooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
{#if isBranch}
|
||||
<div class="split-branch-btn">
|
||||
<ActionButton
|
||||
icon="AddCircle"
|
||||
icon="add-circle"
|
||||
on:click={() => {
|
||||
automationStore.actions.branchAutomation(pathToCurrentNode, automation)
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@
|
|||
selectedBy={$userSelectedResourceMap[automation._id]}
|
||||
disabled={automation.disabled}
|
||||
>
|
||||
<Icon on:click={openContextMenu} size="S" hoverable name="MoreSmallList" />
|
||||
<Icon on:click={openContextMenu} size="S" hoverable name="more" />
|
||||
</NavItem>
|
||||
|
||||
<ConfirmDialog
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
target="_blank"
|
||||
href="https://docs.budibase.com/docs/automation-steps"
|
||||
>
|
||||
<Icon name="InfoOutline" />
|
||||
<Icon name="info-circle" />
|
||||
<span>Learn about automations</span>
|
||||
</a>
|
||||
</ModalContent>
|
||||
|
|
|
|||
|
|
@ -695,7 +695,7 @@
|
|||
"_blank"
|
||||
)}
|
||||
size="XS"
|
||||
name="InfoOutline"
|
||||
name="info-circle"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -302,7 +302,7 @@
|
|||
bind:this={popoverAnchor}
|
||||
>
|
||||
<ActionButton
|
||||
icon="Add"
|
||||
icon="add"
|
||||
fullWidth
|
||||
on:click={() => {
|
||||
customPopover.show()
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
/>
|
||||
</div>
|
||||
{/each}
|
||||
<Button quiet secondary icon="Add" on:click={addField}>Add field</Button>
|
||||
<Button quiet secondary icon="add" on:click={addField}>Add field</Button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
target="_blank"
|
||||
href="https://docs.budibase.com/docs/trigger"
|
||||
>
|
||||
<Icon name="InfoOutline" />
|
||||
<Icon name="info-circle" />
|
||||
<span>Learn about webhooks</span>
|
||||
</a>
|
||||
</ModalContent>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
<DetailPopover title="Import data" bind:this={popover}>
|
||||
<svelte:fragment slot="anchor" let:open>
|
||||
<ActionButton
|
||||
icon="DataUpload"
|
||||
icon="upload"
|
||||
quiet
|
||||
on:click={openPopover}
|
||||
{disabled}
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
<DetailPopover title="Select access role" {showPopover}>
|
||||
<svelte:fragment slot="anchor" let:open>
|
||||
<ActionButton
|
||||
icon="LockClosed"
|
||||
icon="lock"
|
||||
selected={open || highlight}
|
||||
quiet
|
||||
accentColor={highlight ? "#ff0000" : null}
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@
|
|||
relationshipPanelAnchor = e.currentTarget
|
||||
}}
|
||||
size="S"
|
||||
icon="ChevronRight"
|
||||
icon="chevron-right"
|
||||
quiet
|
||||
selected={relationshipFieldName === column.name}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
<div>
|
||||
<ListItem
|
||||
title="Row is created"
|
||||
icon="TableRowAddBottom"
|
||||
icon="add"
|
||||
hoverable
|
||||
on:click={() => createAutomation(TriggerStepID.ROW_SAVED)}
|
||||
iconColor="var(--spectrum-global-color-gray-600)"
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
<div>
|
||||
<ListItem
|
||||
title="Row is updated"
|
||||
icon="Refresh"
|
||||
icon="refresh"
|
||||
hoverable
|
||||
on:click={() => createAutomation(TriggerStepID.ROW_UPDATED)}
|
||||
iconColor="var(--spectrum-global-color-gray-600)"
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<DetailPopover title="Screens" bind:this={popover}>
|
||||
<svelte:fragment slot="anchor" let:open>
|
||||
<ActionButton
|
||||
icon="WebPage"
|
||||
icon="web-page"
|
||||
selected={open || screenCount}
|
||||
quiet
|
||||
accentColor="#364800"
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</List>
|
||||
{/if}
|
||||
<div>
|
||||
<Button secondary icon="WebPage" on:click={generateScreen}>
|
||||
<Button secondary icon="web-page" on:click={generateScreen}>
|
||||
Generate app screen
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</script>
|
||||
|
||||
<div bind:this={anchor}>
|
||||
<ActionButton on:click={() => (open = true)} icon="Help" quiet>
|
||||
<ActionButton on:click={() => (open = true)} icon="help-circle" quiet>
|
||||
Why can't I edit this table?
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
|
||||
<DetailPopover bind:this={popover} title="Configure calculations" width={480}>
|
||||
<svelte:fragment slot="anchor" let:open>
|
||||
<ActionButton icon="WebPage" quiet on:click={openPopover} selected={open}>
|
||||
<ActionButton icon="web-page" quiet on:click={openPopover} selected={open}>
|
||||
Configure calculations{count ? `: ${count}` : ""}
|
||||
</ActionButton>
|
||||
</svelte:fragment>
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
<div class="buttons">
|
||||
<ActionButton
|
||||
quiet
|
||||
icon="Add"
|
||||
icon="add"
|
||||
on:click={addCalc}
|
||||
disabled={calculations.length >= 5}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -645,7 +645,7 @@
|
|||
type="info"
|
||||
text={"Rich text includes support for images, link"}
|
||||
>
|
||||
<Icon size="XS" name="InfoOutline" />
|
||||
<Icon size="XS" name="info-circle" />
|
||||
</AbsTooltip>
|
||||
</div>
|
||||
|
||||
|
|
@ -698,7 +698,7 @@
|
|||
? null
|
||||
: "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
|
||||
>
|
||||
<Icon size="XS" name="InfoOutline" />
|
||||
<Icon size="XS" name="info-circle" />
|
||||
</AbsTooltip>
|
||||
</div>
|
||||
<Toggle
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
<div on:click={addNewInput} class="add-option">
|
||||
<Icon name="Add" />
|
||||
<Icon name="add" />
|
||||
<div>Add option</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
/>
|
||||
</div>
|
||||
{#if datasource._id !== BUDIBASE_INTERNAL_DB_ID}
|
||||
<Icon on:click={openContextMenu} size="S" hoverable name="MoreSmallList" />
|
||||
<Icon on:click={openContextMenu} size="S" hoverable name="more" />
|
||||
{/if}
|
||||
</NavItem>
|
||||
<UpdateDatasourceModal {datasource} bind:this={editModal} />
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
<div class="hierarchy-items-container">
|
||||
{#if showAppUsersTable}
|
||||
<NavItem
|
||||
icon="UserGroup"
|
||||
icon="user-group"
|
||||
text={appUsersTableName}
|
||||
selected={$isActive("./table/:tableId") &&
|
||||
$tables.selected?._id === TableNames.USERS}
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
/>
|
||||
{/if}
|
||||
<NavItem
|
||||
icon="UserAdmin"
|
||||
icon="users-lock"
|
||||
text="Manage roles"
|
||||
selected={$isActive("./roles")}
|
||||
on:click={() => $goto("./roles")}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
on:click={() => goto(`./query/${query._id}`)}
|
||||
selectedBy={$userSelectedResourceMap[query._id]}
|
||||
>
|
||||
<Icon size="S" hoverable name="MoreSmallList" on:click={openContextMenu} />
|
||||
<Icon size="S" hoverable name="more" on:click={openContextMenu} />
|
||||
</NavItem>
|
||||
|
||||
<ConfirmDialog
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@
|
|||
<div class="control top-right">
|
||||
<div class="group">
|
||||
<ActionButton
|
||||
icon="Add"
|
||||
icon="zoom-in"
|
||||
quiet
|
||||
on:click={() => flow.zoomIn({ duration: ZoomDuration })}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="Remove"
|
||||
icon="zoom-out"
|
||||
quiet
|
||||
on:click={() => flow.zoomOut({ duration: ZoomDuration })}
|
||||
/>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<Button secondary on:click={layoutAndFit}>Auto layout</Button>
|
||||
</div>
|
||||
<div class="control bottom-right">
|
||||
<Button icon="Add" cta on:click={createRole}>Add role</Button>
|
||||
<Button icon="add" cta on:click={createRole}>Add role</Button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
on:click
|
||||
>
|
||||
{#if table._id !== TableNames.USERS}
|
||||
<Icon s on:click={openContextMenu} hoverable name="MoreSmallList" />
|
||||
<Icon s on:click={openContextMenu} hoverable name="more" />
|
||||
{/if}
|
||||
</NavItem>
|
||||
<EditModal {table} bind:this={editModal} />
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
{
|
||||
type: "Support",
|
||||
name: "Raise Github Discussion",
|
||||
icon: "Help",
|
||||
icon: "help-circle",
|
||||
action: () =>
|
||||
window.open(`https://github.com/Budibase/budibase/discussions/new`),
|
||||
},
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
...$sortedScreens.map(screen => ({
|
||||
type: "Screen",
|
||||
name: screen.routing.route,
|
||||
icon: "WebPage",
|
||||
icon: "web-page",
|
||||
action: () => {
|
||||
$goto(`./design/${screen._id}/${screen._id}-screen`)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const toSpectrumIcon = name => {
|
|||
aria-label="${name}-section-icon"
|
||||
style="color:var(--spectrum-global-color-gray-700)"
|
||||
>
|
||||
<use style="pointer-events: none;" xlink:href="#spectrum-icon-18-${name}" />
|
||||
<use style="pointer-events: none;" xlink:href="#icon-${name}" />
|
||||
</svg>`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
class="addButton"
|
||||
class:rotate={search}
|
||||
>
|
||||
<Icon name="Add" hoverable hoverColor="var(--ink)" />
|
||||
<Icon name="add" hoverable hoverColor="var(--ink)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
class="icon arrow"
|
||||
on:click={onIconClick}
|
||||
>
|
||||
<Icon size="S" name="ChevronRight" />
|
||||
<Icon size="S" name="chevron-right" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
style="color: white"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
<use xlink:href="#icon-{icon}" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@
|
|||
{#if showButtonGroup}
|
||||
<div class="group">
|
||||
<ActionButton
|
||||
icon="Undo"
|
||||
icon="undo"
|
||||
quiet
|
||||
on:click={store.undo}
|
||||
disabled={!$store.canUndo}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="Redo"
|
||||
icon="redo"
|
||||
quiet
|
||||
on:click={store.redo}
|
||||
disabled={!$store.canRedo}
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
</div>
|
||||
{:else}
|
||||
<Icon
|
||||
name="Undo"
|
||||
name="undo"
|
||||
hoverable
|
||||
on:click={store.undo}
|
||||
disabled={!$store.canUndo}
|
||||
/>
|
||||
<Icon
|
||||
name="Redo"
|
||||
name="redo"
|
||||
hoverable
|
||||
on:click={store.redo}
|
||||
disabled={!$store.canRedo}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
JavaScript: "JavaScript",
|
||||
}
|
||||
const SidePanels = {
|
||||
Bindings: "FlashOn",
|
||||
Bindings: "effects",
|
||||
Evaluation: "Play",
|
||||
Snippets: "Code",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
{#if selectedCategory}
|
||||
<div class="header">
|
||||
<Icon
|
||||
name="BackAndroid"
|
||||
name="step-backward"
|
||||
hoverable
|
||||
size="S"
|
||||
on:click={() => (selectedCategory = null)}
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
name={categoryIcons[categoryName]}
|
||||
/>
|
||||
<span class="category-name">{categoryName} </span>
|
||||
<span class="category-chevron"><Icon name="ChevronRight" /></span>
|
||||
<span class="category-chevron"><Icon name="chevron-right" /></span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
/>
|
||||
{#if !disabled}
|
||||
<div class="icon" on:click={bindingDrawer.show}>
|
||||
<Icon size="S" name="FlashOn" />
|
||||
<Icon size="S" name="effects" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
bindingDrawer.show()
|
||||
}}
|
||||
>
|
||||
<Icon size="S" name="FlashOn" />
|
||||
<Icon size="S" name="effects" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@
|
|||
bindingDrawer.show()
|
||||
}}
|
||||
>
|
||||
<Icon size="S" name="FlashOn" />
|
||||
<Icon size="S" name="effects" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@
|
|||
<div class="title">
|
||||
Snippets
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">Premium</Tag>
|
||||
<Tag icon="lock">Premium</Tag>
|
||||
</Tags>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@
|
|||
<div class="app-action" id="builder-app-users-button">
|
||||
<ActionButton
|
||||
quiet
|
||||
icon="UserGroup"
|
||||
icon="user-group"
|
||||
on:click={() => {
|
||||
builderStore.showBuilderSidePanel()
|
||||
}}
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
<ActionButton
|
||||
disabled={$sortedScreens.length === 0}
|
||||
quiet
|
||||
icon="PlayCircle"
|
||||
icon="play"
|
||||
on:click={previewApp}
|
||||
>
|
||||
Preview
|
||||
|
|
@ -200,12 +200,14 @@
|
|||
>
|
||||
<div bind:this={appActionPopoverAnchor}>
|
||||
<div class="app-action">
|
||||
<Icon name={$appPublished ? "GlobeCheck" : "GlobeStrike"} />
|
||||
<Icon name={$appPublished ? "publish" : "publish-no"} />
|
||||
<TourWrap stepKeys={[TOUR_STEP_KEYS.BUILDER_APP_PUBLISH]}>
|
||||
<span class="publish-open" id="builder-app-publish-button">
|
||||
Publish
|
||||
<Icon
|
||||
name={appActionPopoverOpen ? "ChevronUp" : "ChevronDown"}
|
||||
name={appActionPopoverOpen
|
||||
? "chevron-right"
|
||||
: "chevron-down-size300"}
|
||||
size="M"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -239,7 +241,7 @@
|
|||
>
|
||||
{$appStore.url}
|
||||
{#if $appPublished}
|
||||
<Icon size="S" name="LinkOut" />
|
||||
<Icon size="S" name="open-in" />
|
||||
{/if}
|
||||
</span>
|
||||
</Body>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
</div>
|
||||
{#if showAddButton}
|
||||
<div class="add-button" on:click={onClickAddButton}>
|
||||
<Icon name="Add" />
|
||||
<Icon name="add" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if showCloseButton}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
/>
|
||||
{/each}
|
||||
<div style="margin-top: 10px">
|
||||
<Button icon="AddCircle" secondary on:click={addField}>
|
||||
<Button icon="add-circle" secondary on:click={addField}>
|
||||
Add
|
||||
{fieldLabel}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@
|
|||
{/if}
|
||||
<div class="column">
|
||||
<div class="buttons wide">
|
||||
<Button secondary icon="Add" on:click={addColumn}>Add column</Button>
|
||||
<Button secondary icon="add" on:click={addColumn}>Add column</Button>
|
||||
<Button secondary quiet on:click={addAllColumns}>
|
||||
Add all columns
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<ActionButton
|
||||
size="S"
|
||||
secondary
|
||||
icon="ChevronLeft"
|
||||
icon="chevron-left"
|
||||
disabled={currentStep === 0}
|
||||
on:click={() => {
|
||||
stepAction("previousStep")
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
size="S"
|
||||
secondary
|
||||
disabled={currentStep === stepCount - 1}
|
||||
icon="ChevronRight"
|
||||
icon="chevron-right"
|
||||
on:click={() => {
|
||||
stepAction("nextStep")
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<Button icon="AddCircle" size="M" on:click={addOption} secondary>
|
||||
<Button icon="add-circle" size="M" on:click={addOption} secondary>
|
||||
Add Option
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<div>
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">{title}</Tag>
|
||||
<Tag icon="lock">{title}</Tag>
|
||||
</Tags>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<Button secondary icon="Add" on:click={addCondition}>
|
||||
<Button secondary icon="add" on:click={addCondition}>
|
||||
Add condition
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -378,7 +378,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
<div class="button">
|
||||
<Button secondary icon="Add" on:click={addRule}>Add Rule</Button>
|
||||
<Button secondary icon="add" on:click={addRule}>Add Rule</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
{#if menuItems?.length > 0 && showMenu}
|
||||
<ActionMenu>
|
||||
<div slot="control" class="control icon">
|
||||
<Icon size="S" hoverable name="MoreSmallList" />
|
||||
<Icon size="S" hoverable name="more" />
|
||||
</div>
|
||||
{#each menuItems as item}
|
||||
<MenuItem on:click={() => item.onClick(field)}>
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
<div>
|
||||
<ActionButton
|
||||
disabled={actionButtonDisabled}
|
||||
icon="Add"
|
||||
icon="add"
|
||||
secondary
|
||||
thin
|
||||
outline
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<Panel
|
||||
showCloseButton
|
||||
closeButtonIcon="RailRightClose"
|
||||
closeButtonIcon="step-forward"
|
||||
onClickCloseButton={onClose}
|
||||
title="Query results"
|
||||
icon={"SQLQuery"}
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
query.fields.steps[index].key
|
||||
query.fields.steps[index].key = target
|
||||
}}
|
||||
icon="ChevronUp"
|
||||
icon="chevron-up"
|
||||
/>
|
||||
{/if}
|
||||
{#if index < query.fields.steps.length - 1}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
query.fields.steps[index].key
|
||||
query.fields.steps[index].key = target
|
||||
}}
|
||||
icon="ChevronDown"
|
||||
icon="chevron-down-size300"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
<Icon
|
||||
disabled={!editable}
|
||||
hoverable
|
||||
name="AddCircle"
|
||||
name="add-circle"
|
||||
size="S"
|
||||
readOnly={!editable}
|
||||
on:click={() => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<a href={url}>
|
||||
{text}
|
||||
</a>
|
||||
<Icon name="ChevronRight" />
|
||||
<Icon name="chevron-right" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -111,12 +111,7 @@
|
|||
</Button>
|
||||
</div>
|
||||
<div class="row-action">
|
||||
<Icon
|
||||
on:click={openContextMenu}
|
||||
size="S"
|
||||
hoverable
|
||||
name="MoreSmallList"
|
||||
/>
|
||||
<Icon on:click={openContextMenu} size="S" hoverable name="more" />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- this can happen if an app builder has app user access to an app -->
|
||||
|
|
|
|||
|
|
@ -18,29 +18,47 @@
|
|||
|
||||
let iconsList = [
|
||||
"Apps",
|
||||
"Actions",
|
||||
"ConversionFunnel",
|
||||
"App",
|
||||
"Briefcase",
|
||||
"Money",
|
||||
"ShoppingCart",
|
||||
"Form",
|
||||
"Help",
|
||||
"Monitoring",
|
||||
"Sandbox",
|
||||
"animation",
|
||||
"interaction",
|
||||
"text-numbers",
|
||||
"Apps-all",
|
||||
"briefcase",
|
||||
"shopping-cart",
|
||||
"radio-button",
|
||||
"Help-circle",
|
||||
"Project",
|
||||
"Organisations",
|
||||
"Magnify",
|
||||
"Launch",
|
||||
"Car",
|
||||
"Camera",
|
||||
"Bug",
|
||||
"Channel",
|
||||
"Calculator",
|
||||
"Calendar",
|
||||
"GraphDonut",
|
||||
"GraphBarHorizontal",
|
||||
"Demographic",
|
||||
"buildings",
|
||||
"search",
|
||||
"promote",
|
||||
"camera",
|
||||
"bug",
|
||||
"channel",
|
||||
"calendar",
|
||||
"check-box",
|
||||
"clock",
|
||||
"collection",
|
||||
"comment",
|
||||
"community",
|
||||
"data",
|
||||
"email",
|
||||
"emoji",
|
||||
"file",
|
||||
"filmstrip",
|
||||
"flag",
|
||||
"heart",
|
||||
"image",
|
||||
"lightbulb",
|
||||
"lighten",
|
||||
"logo",
|
||||
"pattern",
|
||||
"publish",
|
||||
"ribbon",
|
||||
"social-network",
|
||||
"stamp-clone",
|
||||
"star",
|
||||
"table",
|
||||
"template",
|
||||
"web-page",
|
||||
]
|
||||
|
||||
const save = async () => {
|
||||
|
|
@ -61,9 +79,17 @@
|
|||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
|
||||
<div class="color-selection">
|
||||
<div>
|
||||
<Label size="XL">Select a color</Label>
|
||||
</div>
|
||||
<div class="color-selection-item">
|
||||
<ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrollable-icons">
|
||||
<div class="title-spacing">
|
||||
<Label>Select an icon</Label>
|
||||
<Label size="XL">Select an icon</Label>
|
||||
</div>
|
||||
<div class="grid">
|
||||
{#each iconsList as item}
|
||||
|
|
@ -72,50 +98,51 @@
|
|||
class:selected={item === name}
|
||||
on:click={() => (name = item)}
|
||||
>
|
||||
<Icon name={item} />
|
||||
<Icon name={item} {color} size="XL" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-selection">
|
||||
<div>
|
||||
<Label>Select a color</Label>
|
||||
</div>
|
||||
<div class="color-selection-item">
|
||||
<ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
|
||||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.scrollable-icons {
|
||||
overflow-y: auto;
|
||||
height: 230px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.color-selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.color-selection-item {
|
||||
margin-left: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.title-spacing {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.icon-item.selected {
|
||||
color: var(--spectrum-global-color-blue-600);
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const getAppContextMenuItems = ({
|
|||
callback: onDuplicate,
|
||||
},
|
||||
{
|
||||
icon: "Export",
|
||||
icon: "download",
|
||||
name: "Export latest edited app",
|
||||
keyBind: null,
|
||||
visible: true,
|
||||
|
|
@ -23,7 +23,7 @@ const getAppContextMenuItems = ({
|
|||
callback: onExportDev,
|
||||
},
|
||||
{
|
||||
icon: "Export",
|
||||
icon: "download",
|
||||
name: "Export latest published app",
|
||||
keyBind: null,
|
||||
visible: true,
|
||||
|
|
|
|||
|
|
@ -761,7 +761,7 @@ const getRoleBindings = () => {
|
|||
runtimeBinding: `'${role._id}'`,
|
||||
readableBinding: `Role.${role.uiMetadata.displayName}`,
|
||||
category: "Role",
|
||||
icon: "UserGroup",
|
||||
icon: "user-group",
|
||||
display: { type: "string", name: role.uiMetadata.displayName },
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -559,7 +559,7 @@
|
|||
class="header"
|
||||
>
|
||||
{#if invitingFlow}
|
||||
<Icon name="BackAndroid" />
|
||||
<Icon name="step-backward" />
|
||||
{/if}
|
||||
<Heading size="S">{invitingFlow ? "Invite new user" : "Users"}</Heading>
|
||||
</div>
|
||||
|
|
@ -569,7 +569,7 @@
|
|||
{/if}
|
||||
<Icon
|
||||
color="var(--spectrum-global-color-gray-600)"
|
||||
name="RailRightClose"
|
||||
name="step-forward"
|
||||
hoverable
|
||||
on:click={() => {
|
||||
builderStore.hideBuilderSidePanel()
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
{#if $appStore.initialised}
|
||||
<div class="topleftnav">
|
||||
<a href={$url("../../portal/apps")} class="linkWrapper back-to-apps">
|
||||
<Icon size="S" hoverable name="BackAndroid" />
|
||||
<Icon size="XL" hoverable name="home" />
|
||||
</a>
|
||||
<Tabs {selected} size="M">
|
||||
{#each $layout.children as { path, title }}
|
||||
|
|
@ -204,8 +204,7 @@
|
|||
display: contents;
|
||||
}
|
||||
.back-to-apps :global(.icon) {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.loading {
|
||||
min-height: 100%;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
class="spectrum-Icon"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-WorkflowAdd" />
|
||||
<use xlink:href="#icon-add" />
|
||||
</svg>
|
||||
<Heading size="M">You have no automations</Heading>
|
||||
<Body size="M">Let's fix that. Call the bots!</Body>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
/>
|
||||
{/if}
|
||||
<div>
|
||||
<ActionButton on:click={() => openConfigModal()} icon="Add"
|
||||
<ActionButton on:click={() => openConfigModal()} icon="add"
|
||||
>Add authentication</ActionButton
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
bindings={restBindings}
|
||||
/>
|
||||
<div>
|
||||
<ActionButton icon="Add" on:click={() => addHeader.addEntry()}>
|
||||
<ActionButton icon="add" on:click={() => addHeader.addEntry()}>
|
||||
Add header
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
{:else}
|
||||
<div class="icon" class:open>
|
||||
<Icon
|
||||
name="Add"
|
||||
name="add"
|
||||
size="L"
|
||||
color="var(--spectrum-global-color-gray-600)"
|
||||
/>
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
hoverable
|
||||
on:click={() => (calculation = false)}
|
||||
selected={!calculation}
|
||||
icon="Rail"
|
||||
icon="step-forward"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@
|
|||
<Icon
|
||||
on:click={openTableContextMenu}
|
||||
hoverable
|
||||
name="MoreSmallList"
|
||||
name="more"
|
||||
color="var(--spectrum-global-color-gray-600)"
|
||||
hoverColor="var(--spectrum-global-color-gray-900)"
|
||||
/>
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
<Icon
|
||||
on:click={e => openViewContextMenu(e, view)}
|
||||
hoverable
|
||||
name="MoreSmallList"
|
||||
name="more"
|
||||
color="var(--spectrum-global-color-gray-600)"
|
||||
hoverColor="var(--spectrum-global-color-gray-900)"
|
||||
/>
|
||||
|
|
@ -256,7 +256,7 @@
|
|||
<Icon
|
||||
on:click={e => openViewContextMenu(e, view)}
|
||||
hoverable
|
||||
name="MoreSmallList"
|
||||
name="more"
|
||||
color="var(--spectrum-global-color-gray-600)"
|
||||
hoverColor="var(--spectrum-global-color-gray-900)"
|
||||
/>
|
||||
|
|
@ -273,7 +273,11 @@
|
|||
{#if overflowedViews.length}
|
||||
<ActionMenu align="right" bind:this={overflowMenu}>
|
||||
<div slot="control" let:open>
|
||||
<ActionButton icon="ChevronDown" quiet selected={open || viewHidden}>
|
||||
<ActionButton
|
||||
icon="chevron-down-size300"
|
||||
quiet
|
||||
selected={open || viewHidden}
|
||||
>
|
||||
{overflowedViews.length} more
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
|
@ -293,7 +297,7 @@
|
|||
>
|
||||
<MenuItem icon={viewHidden ? "Checkmark" : null}>
|
||||
{view.name}
|
||||
<Icon slot="right" name="ChevronRight" />
|
||||
<Icon slot="right" name="chevron-right" />
|
||||
</MenuItem>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@
|
|||
<Body size="S">Add your first condition to get started.</Body>
|
||||
{/if}
|
||||
<div>
|
||||
<Button secondary icon="Add" on:click={addCondition}>
|
||||
<Button secondary icon="add" on:click={addCondition}>
|
||||
Add condition
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
export let title
|
||||
export let body
|
||||
export let icon = "HelpOutline"
|
||||
export let icon = "help-circle"
|
||||
export let quiet = false
|
||||
export let warning = false
|
||||
export let error = false
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<ActionButton quiet icon="Add" on:click={addSubLink}>
|
||||
<ActionButton quiet icon="add" on:click={addSubLink}>
|
||||
Add link
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@
|
|||
import { getBindableProperties } from "dataBinding"
|
||||
|
||||
const positionOptions = [
|
||||
{ value: "Top", barIcon: "PaddingTop" },
|
||||
{ value: "Left", barIcon: "PaddingLeft" },
|
||||
{ value: "Top", barIcon: "web-page" },
|
||||
{ value: "Left", barIcon: "layout" },
|
||||
]
|
||||
const alignmentOptions = [
|
||||
{ value: "Left", barIcon: "TextAlignLeft" },
|
||||
{ value: "Center", barIcon: "TextAlignCenter" },
|
||||
{ value: "Right", barIcon: "TextAlignRight" },
|
||||
{ value: "Left", barIcon: "text-align-left" },
|
||||
{ value: "Center", barIcon: "text-align-center" },
|
||||
{ value: "Right", barIcon: "text-align-right" },
|
||||
]
|
||||
const widthOptions = ["Max", "Large", "Medium", "Small"]
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</script>
|
||||
|
||||
<div class="info">
|
||||
<Icon name="InfoOutline" size="S" />
|
||||
<Icon name="info-circle" size="S" />
|
||||
<Body size="S">These settings apply to all screens</Body>
|
||||
</div>
|
||||
<Layout noPadding gap="S">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
{#if $selectedScreen}
|
||||
<Panel
|
||||
title={$selectedScreen.routing.route}
|
||||
icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
|
||||
icon={$selectedScreen.routing.route === "/" ? "Home" : "web-page"}
|
||||
borderLeft
|
||||
wide
|
||||
>
|
||||
|
|
|
|||
|
|
@ -289,7 +289,7 @@
|
|||
class:active={isAddingComponent}
|
||||
on:click={toggleAddComponent}
|
||||
>
|
||||
<Icon size="XL" name="Add">Component</Icon>
|
||||
<Icon size="XL" name="add">Component</Icon>
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
<Icon
|
||||
size="S"
|
||||
hoverable
|
||||
name="MoreSmallList"
|
||||
name="more"
|
||||
on:click={e => openContextMenu(e, component, opened)}
|
||||
/>
|
||||
</NavItem>
|
||||
|
|
|
|||
|
|
@ -24,23 +24,23 @@ const getContextMenuItems = (component, componentCollapsed) => {
|
|||
{
|
||||
icon: "Delete",
|
||||
name: "Delete",
|
||||
keyBind: "!BackAndroid",
|
||||
keyBind: "⌫",
|
||||
visible: true,
|
||||
disabled: false,
|
||||
callback: () => keyboardEvent("Delete"),
|
||||
},
|
||||
{
|
||||
icon: "ChevronUp",
|
||||
icon: "order-one-up",
|
||||
name: "Move up",
|
||||
keyBind: "Ctrl+!ArrowUp",
|
||||
keyBind: "Ctrl+↑",
|
||||
visible: true,
|
||||
disabled: false,
|
||||
callback: () => keyboardEvent("ArrowUp", true),
|
||||
},
|
||||
{
|
||||
icon: "ChevronDown",
|
||||
icon: "order-one-down",
|
||||
name: "Move down",
|
||||
keyBind: "Ctrl+!ArrowDown",
|
||||
keyBind: "Ctrl+↓",
|
||||
visible: true,
|
||||
disabled: false,
|
||||
callback: () => keyboardEvent("ArrowDown", true),
|
||||
|
|
@ -70,7 +70,7 @@ const getContextMenuItems = (component, componentCollapsed) => {
|
|||
callback: () => keyboardEvent("c", true),
|
||||
},
|
||||
{
|
||||
icon: "LayersSendToBack",
|
||||
icon: "paste",
|
||||
name: "Paste",
|
||||
keyBind: "Ctrl+V",
|
||||
visible: true,
|
||||
|
|
@ -78,7 +78,7 @@ const getContextMenuItems = (component, componentCollapsed) => {
|
|||
callback: () => keyboardEvent("v", true),
|
||||
},
|
||||
{
|
||||
icon: "Export",
|
||||
icon: "download",
|
||||
name: "Eject block",
|
||||
keyBind: "Ctrl+E",
|
||||
visible: isBlock && canEject,
|
||||
|
|
@ -86,33 +86,33 @@ const getContextMenuItems = (component, componentCollapsed) => {
|
|||
callback: () => keyboardEvent("e", true),
|
||||
},
|
||||
{
|
||||
icon: "TreeExpand",
|
||||
icon: "maximize",
|
||||
name: "Expand",
|
||||
keyBind: "!ArrowRight",
|
||||
keyBind: "→",
|
||||
visible: hasChildren,
|
||||
disabled: !componentCollapsed,
|
||||
callback: () => keyboardEvent("ArrowRight", false),
|
||||
},
|
||||
{
|
||||
icon: "TreeExpandAll",
|
||||
icon: "maximize",
|
||||
name: "Expand All",
|
||||
keyBind: "Ctrl+!ArrowRight",
|
||||
keyBind: "Ctrl+→",
|
||||
visible: hasChildren,
|
||||
disabled: !componentCollapsed,
|
||||
callback: () => keyboardEvent("ArrowRight", true),
|
||||
},
|
||||
{
|
||||
icon: "TreeCollapse",
|
||||
icon: "minimize",
|
||||
name: "Collapse",
|
||||
keyBind: "!ArrowLeft",
|
||||
keyBind: "←",
|
||||
visible: hasChildren,
|
||||
disabled: componentCollapsed,
|
||||
callback: () => keyboardEvent("ArrowLeft", false),
|
||||
},
|
||||
{
|
||||
icon: "TreeCollapseAll",
|
||||
icon: "minimize",
|
||||
name: "Collapse All",
|
||||
keyBind: "Ctrl+!ArrowLeft",
|
||||
keyBind: "Ctrl+←",
|
||||
visible: hasChildren,
|
||||
disabled: componentCollapsed,
|
||||
callback: () => keyboardEvent("ArrowLeft", true),
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const getContextMenuItems = (component, showCopy) => {
|
|||
callback: () => storeComponentForCopy(false),
|
||||
},
|
||||
{
|
||||
icon: "LayersSendToBack",
|
||||
icon: "paste",
|
||||
name: "Paste",
|
||||
keyBind: "Ctrl+V",
|
||||
visible: true,
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue