MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

rework selector styles

This commit is contained in:
Keviin Åberg Kultalahti 2021-06-04 14:34:40 +02:00
parent ebdbbdc094
commit b8c7f6d298
1 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ModalSelect.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { ActionButton, Modal, ModalContent } from "@budibase/bbui" import { ActionButton, Body, Icon, Modal, ModalContent } from "@budibase/bbui"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -9,14 +9,26 @@
let modal let modal
let layoutMap = { let layoutMap = {
mainSidebar: "Main with Sidebar", mainSidebar: {
sidebarMain: "Sidebar with Main", name: "Main with Sidebar",
twoColumns: "Two columns", icon: "ColumnTwoB",
threeColumns: "Three columns", },
sidebarMain: {
name: "Sidebar with Main",
icon: "ColumnTwoC",
},
twoColumns: {
name: "Two columns",
icon: "ColumnTwoA",
},
threeColumns: {
name: "Three columns",
icon: "ViewColumn",
},
} }
</script> </script>
<ActionButton on:click={modal.show}>{layoutMap[value]}</ActionButton> <ActionButton on:click={modal.show}>{layoutMap[value].name}</ActionButton>
<Modal bind:this={modal}> <Modal bind:this={modal}>
<ModalContent <ModalContent
@ -31,7 +43,8 @@
on:click={() => (selected = key)} on:click={() => (selected = key)}
class="layout" class="layout"
> >
{value} <Icon color="white" size="L" name={value.icon} />
<Body size="XS">{value.name}</Body>
</button> </button>
{/each} {/each}
</div> </div>
@ -39,24 +52,26 @@
</Modal> </Modal>
<style> <style>
button {
border: none;
}
.container { .container {
display: grid; display: grid;
grid-gap: 16px; grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.layout { .layout {
color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color));
border: none;
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
place-items: center; place-items: center;
background: rebeccapurple; background: var(--background-alt);
color: white; border-radius: 3px;
height: 100px; grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
transition: 0.3s all;
border-radius: var(--spacing-s);
} }
.selected { .selected {
border: 3px dashed red; background: var(--spectrum-alias-background-color-tertiary);
} }
</style> </style>