8cd7ba1fdf
* Add full undo/redo support for screens * Add loading states to disable spamming undo/redo * Add keyboard shortcuts for undo and redo * Fix modals not closing in design section when escape is pressed * Remove log * Add smart metadata saving to undo/redo * Add error handling to undo/redo * Add active state to hoverable icons * Fix screen deletion * Always attempt to get latest doc version before deleting in case rev has changed * Move undo listener top level, hide controls when on certain tabs, and improve selection state * Add tooltips to undo/redo control * Update automation section nav to match other sections * Fix automation list padding * Fix some styles in create automation modal * Improve automation section styles and add undo/redo * Update styles in add action modal * Fix button size when creating admin user * Fix styles in add automation step modal * Fix issue selecting disabled automation steps * Reset automation history store when changing app * Reduce spammy unnecessary API calls when editing cron trigger * WIP automation refactor * Rewrite most automation state * Rewrite most of the rest of automation state * Finish refactor of automation state * Fix selection state when selecting new doc after history recreates it * Prune nullish or empty block inputs from automations and avoid sending API requests when no changes have been made * Fix animation issues with automations * Sort automations and refetch list when adding or deleting * Fix formatting * Add back in ability to swap between values and bindings for block inputs * Lint * Format * Fix potential issue in design section when selected screen is unset * Fix automation arrow directions everywhere, tidy up logic and fix crash when using invalid looping * Lint * Fix more cases of automation errors * Fix implicity any TS error * Respect _id specified when creating automations * Fix crash in history store when reverting a change on a doc whose ID has changed * Lint * Ensure cloneDeep helper doesn't crash when a nullish value is passed in * Remove deprecated frontend automation test --------- Co-authored-by: Rory Powell <rory.codes@gmail.com>
94 lines
2.1 KiB
Svelte
94 lines
2.1 KiB
Svelte
<script context="module">
|
|
export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
|
|
</script>
|
|
|
|
<script>
|
|
import Tooltip from "../Tooltip/Tooltip.svelte"
|
|
import { fade } from "svelte/transition"
|
|
|
|
export let direction = "n"
|
|
export let name = "Add"
|
|
export let hidden = false
|
|
export let size = "M"
|
|
export let hoverable = false
|
|
export let disabled = false
|
|
export let color
|
|
export let tooltip
|
|
|
|
$: rotation = getRotation(direction)
|
|
|
|
let showTooltip = false
|
|
|
|
const getRotation = direction => {
|
|
return directions.indexOf(direction) * 45
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="icon"
|
|
on:mouseover={() => (showTooltip = true)}
|
|
on:focus={() => (showTooltip = true)}
|
|
on:mouseleave={() => (showTooltip = false)}
|
|
on:click={() => (showTooltip = false)}
|
|
>
|
|
<svg
|
|
on:click
|
|
class:hoverable
|
|
class:disabled
|
|
class="spectrum-Icon spectrum-Icon--size{size}"
|
|
focusable="false"
|
|
aria-hidden={hidden}
|
|
aria-label={name}
|
|
style={`transform: rotate(${rotation}deg); ${
|
|
color ? `color: ${color};` : ""
|
|
}`}
|
|
>
|
|
<use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
|
|
</svg>
|
|
{#if tooltip && showTooltip}
|
|
<div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
|
|
<Tooltip textWrapping direction="bottom" text={tooltip} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.icon {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
svg.hoverable {
|
|
pointer-events: all;
|
|
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
|
}
|
|
svg.hoverable:hover {
|
|
color: var(--spectrum-alias-icon-color-selected-hover) !important;
|
|
cursor: pointer;
|
|
}
|
|
svg.hoverable:active {
|
|
color: var(--spectrum-global-color-blue-400) !important;
|
|
}
|
|
|
|
svg.disabled {
|
|
color: var(--spectrum-global-color-gray-500) !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
left: 50%;
|
|
top: calc(100% + 4px);
|
|
width: 100vw;
|
|
max-width: 150px;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.spectrum-Icon--sizeXS {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
</style>
|