1
0
Fork 0
mirror of synced 2024-06-17 18:04:42 +12:00

Refactor client component structure, fix select bar z index, add titles to container bar settings

This commit is contained in:
Andrew Kingston 2021-06-10 18:42:41 +01:00
parent bfc5e03861
commit 2bb4576eb6
8 changed files with 34 additions and 22 deletions

View file

@ -14,9 +14,9 @@
builderStore,
} from "../store"
import { TableNames, ActionTypes } from "../constants"
import SettingsBar from "./SettingsBar.svelte"
import SelectionIndicator from "./SelectionIndicator.svelte"
import HoverIndicator from "./HoverIndicator.svelte"
import SettingsBar from "./preview/SettingsBar.svelte"
import SelectionIndicator from "./preview/SelectionIndicator.svelte"
import HoverIndicator from "./preview/HoverIndicator.svelte"
// Provide contexts
setContext("sdk", SDK)

View file

@ -1,7 +1,7 @@
<script>
import { onMount, onDestroy } from "svelte"
import IndicatorSet from "./IndicatorSet.svelte"
import { builderStore } from "../store"
import { builderStore } from "../../store"
let componentId
$: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920

View file

@ -1,7 +1,7 @@
<script>
import { onMount, onDestroy } from "svelte"
import Indicator from "./Indicator.svelte"
import { domDebounce } from "../utils/domDebounce"
import { domDebounce } from "../../utils/domDebounce"
export let componentId
export let color

View file

@ -1,5 +1,5 @@
<script>
import { builderStore } from "../store"
import { builderStore } from "../../store"
import IndicatorSet from "./IndicatorSet.svelte"
</script>

View file

@ -1,8 +1,8 @@
<script>
import { onMount, onDestroy } from "svelte"
import SettingsButton from "./SettingsButton.svelte"
import { builderStore } from "../store"
import { domDebounce } from "../utils/domDebounce"
import { builderStore } from "../../store"
import { domDebounce } from "../../utils/domDebounce"
const verticalOffset = 28
const horizontalOffset = 2
@ -107,7 +107,7 @@
.bar {
display: flex;
position: absolute;
z-index: 920;
z-index: 930;
padding: 6px 8px;
opacity: 0;
flex-direction: row;

View file

@ -1,6 +1,6 @@
<script>
import { Icon } from "@budibase/bbui"
import { builderStore } from "../store"
import { builderStore } from "../../store"
export let prop
export let value

View file

@ -17,12 +17,14 @@
{
"label": "Column",
"value": "column",
"barIcon": "ViewRow"
"barIcon": "ViewRow",
"barTitle": "Column layout"
},
{
"label": "Row",
"value": "row",
"barIcon": "ViewColumn"
"barIcon": "ViewColumn",
"barTitle": "Row layout"
}
],
"defaultValue": "column"
@ -36,22 +38,26 @@
{
"label": "Left",
"value": "left",
"barIcon": "AlignLeft"
"barIcon": "AlignLeft",
"barTitle": "Align left"
},
{
"label": "Center",
"value": "center",
"barIcon": "AlignCenter"
"barIcon": "AlignCenter",
"barTitle": "Align center"
},
{
"label": "Right",
"value": "right",
"barIcon": "AlignRight"
"barIcon": "AlignRight",
"barTitle": "Align right"
},
{
"label": "Stretch",
"value": "stretch",
"barIcon": "MoveLeftRight"
"barIcon": "MoveLeftRight",
"barTitle": "Align stretched horizontally"
}
],
"defaultValue": "stretch"
@ -65,22 +71,26 @@
{
"label": "Top",
"value": "top",
"barIcon": "AlignTop"
"barIcon": "AlignTop",
"barTitle": "Align top"
},
{
"label": "Middle",
"value": "middle",
"barIcon": "AlignMiddle"
"barIcon": "AlignMiddle",
"barTitle": "Align middle"
},
{
"label": "Bottom",
"value": "bottom",
"barIcon": "AlignBottom"
"barIcon": "AlignBottom",
"barTitle": "Align bottom"
},
{
"label": "Stretch",
"value": "stretch",
"barIcon": "MoveUpDown"
"barIcon": "MoveUpDown",
"barTitle": "Align stretched vertically"
}
],
"defaultValue": "top"
@ -94,12 +104,14 @@
{
"label": "Shrink",
"value": "shrink",
"barIcon": "Minimize"
"barIcon": "Minimize",
"barTitle": "Shrink container"
},
{
"label": "Grow",
"value": "grow",
"barIcon": "Maximize"
"barIcon": "Maximize",
"barTitle": "Grow container"
}
],
"defaultValue": "shrink"