CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 04:21:06 +12:00
Code Issues Projects Releases Wiki Activity

Update buttons in settings, improve preview styles

Browse source
This commit is contained in:
Andrew Kingston 2021-06-18 09:59:28 +01:00
parent 6ccb851e0d
commit feef8dd30f
7 changed files with 29 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/builder/src/components/design/AppPreview/iframeTemplate.js
View file

@ -12,16 +12,24 @@ export default `
rel="stylesheet" rel="stylesheet"
/> />
<style> <style>
html, html, body {
body {
margin: 0;
padding: 0; padding: 0;
height: 100%; margin: 0;
width: 100%; }
html {
height: calc(100% - 16px);
width: calc(100% - 16px);
overflow: hidden; overflow: hidden;
margin: 8px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
} }
body { body {
padding: 2px; flex: 1 1 auto;
overflow: hidden;
} }
*, *,

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { Button, Drawer } from "@budibase/bbui" import { ActionButton, Button, Drawer } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import EventEditor from "./EventEditor.svelte" import EventEditor from "./EventEditor.svelte"
@ -51,7 +51,7 @@
} }
</script> </script>
<Button secondary on:click={drawer.show}>Define Actions</Button> <ActionButton on:click={drawer.show}>Define Actions</ActionButton>
<Drawer bind:this={drawer} title={"Actions"}> <Drawer bind:this={drawer} title={"Actions"}>
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Define what actions to run. Define what actions to run.

3
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
View file

@ -1,6 +1,7 @@
<script> <script>
import { import {
notifications, notifications,
ActionButton,
Button, Button,
Drawer, Drawer,
Body, Body,
@ -46,7 +47,7 @@
} }
</script> </script>
<Button secondary on:click={drawer.show}>Define Filters</Button> <ActionButton on:click={drawer.show}>Define Filters</ActionButton>
<Drawer bind:this={drawer} title="Filtering"> <Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<DrawerContent slot="body"> <DrawerContent slot="body">

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
View file

@ -8,7 +8,7 @@
</script> </script>
<script> <script>
import { Popover, Button, Input } from "@budibase/bbui" import { Popover, ActionButton, Button, Input } from "@budibase/bbui"
import { createEventDispatcher, tick } from "svelte" import { createEventDispatcher, tick } from "svelte"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -117,7 +117,7 @@
</script> </script>
<div bind:this={buttonAnchor}> <div bind:this={buttonAnchor}>
<Button secondary small on:click={dropdown.show}>{displayValue}</Button> <ActionButton on:click={dropdown.show}>{displayValue}</ActionButton>
</div> </div>
<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}> <Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
<div class="container"> <div class="container">

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { Button, Drawer } from "@budibase/bbui" import { Button, ActionButton, Drawer } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import NavigationDrawer from "./NavigationDrawer.svelte" import NavigationDrawer from "./NavigationDrawer.svelte"
@ -13,7 +13,7 @@
} }
</script> </script>
<Button secondary on:click={drawer.show}>Configure Links</Button> <ActionButton on:click={drawer.show}>Configure Links</ActionButton>
<Drawer bind:this={drawer} title={"Navigation Links"}> <Drawer bind:this={drawer} title={"Navigation Links"}>
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Configure the links in your navigation bar. Configure the links in your navigation bar.

5
packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
View file

@ -190,11 +190,10 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-m);
padding: var(--spacing-l) 40px var(--spacing-xl) 40px; padding: var(--spacing-xl) 40px;
} }
.preview-content { .preview-content {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
flex: 1 1 auto; flex: 1 1 auto;
} }

10
packages/standard-components/manifest.json
View file

@ -214,15 +214,15 @@
"label": "Text", "label": "Text",
"key": "text" "key": "text"
}, },
{
"type": "boolean",
"label": "Disabled",
"key": "disabled"
},
{ {
"type": "event", "type": "event",
"label": "On Click", "label": "On Click",
"key": "onClick" "key": "onClick"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled"
} }
] ]
}, },