MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
budibase/packages/builder/src/components/design/Panel.svelte

126 lines
2.8 KiB
Svelte
Raw Normal View History

Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
<script>
Lint
2023-08-23 16:50:00 +02:00
import { Icon, Body } from "@budibase/bbui"
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
export let title
Add initial layouts panel and add explicit panels for theme and navigation tabs
2022-05-11 14:06:41 +02:00
export let icon
Add initial new 'add component' panel
2022-04-26 09:23:53 +02:00
export let showAddButton = false
export let showBackButton = false
Move new component panel to right side, animate via sliding in and remove add component button above preview
2022-07-25 11:20:59 +02:00
export let showCloseButton = false
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
export let onClickAddButton
Add initial new 'add component' panel
2022-04-26 09:23:53 +02:00
export let onClickBackButton
Move new component panel to right side, animate via sliding in and remove add component button above preview
2022-07-25 11:20:59 +02:00
export let onClickCloseButton
Add initial layouts panel and add explicit panels for theme and navigation tabs
2022-05-11 14:06:41 +02:00
export let borderLeft = false
export let borderRight = false
Update component settings to be left aligned and update long component settings labels to be shorter
2023-03-08 20:22:19 +01:00
export let wide = false
Slightly increase width of side panels and add expandable toggle for component tab
2022-04-27 09:06:09 +02:00
Component settings section tabs (#9895) * Added tabs to the component settings section in the builder * Review updates * Update setting tab buttons to be size M and use a lighter font color when selected --------- Co-authored-by: Andrew Kingston <andrew@kingston.dev>
2023-03-08 15:40:13 +01:00
$: customHeaderContent = $$slots["panel-header-content"]
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
</script>
Refactor design panels into core panel component and update usages
2022-05-11 14:09:21 +02:00
<div class="panel" class:wide class:borderLeft class:borderRight>
Component settings section tabs (#9895) * Added tabs to the component settings section in the builder * Review updates * Update setting tab buttons to be size M and use a lighter font color when selected --------- Co-authored-by: Andrew Kingston <andrew@kingston.dev>
2023-03-08 15:40:13 +01:00
<div class="header" class:custom={customHeaderContent}>
Add initial new 'add component' panel
2022-04-26 09:23:53 +02:00
{#if showBackButton}
<Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
{/if}
Add initial layouts panel and add explicit panels for theme and navigation tabs
2022-05-11 14:06:41 +02:00
{#if icon}
<Icon name={icon} />
{/if}
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
<div class="title">
Update panel headings to match new designs
2023-08-22 17:29:40 +02:00
<Body size="S">{title}</Body>
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
</div>
{#if showAddButton}
Add screen creation modal to screens tab
2022-04-25 15:37:14 +02:00
<div class="add-button" on:click={onClickAddButton}>
<Icon name="Add" />
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
</div>
{/if}
Move new component panel to right side, animate via sliding in and remove add component button above preview
2022-07-25 11:20:59 +02:00
{#if showCloseButton}
<Icon name="Close" hoverable on:click={onClickCloseButton} />
{/if}
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
</div>
Component settings section tabs (#9895) * Added tabs to the component settings section in the builder * Review updates * Update setting tab buttons to be size M and use a lighter font color when selected --------- Co-authored-by: Andrew Kingston <andrew@kingston.dev>
2023-03-08 15:40:13 +01:00
{#if customHeaderContent}
<span class="custom-content-wrap">
<slot name="panel-header-content" />
</span>
{/if}
Add back in working component tree with scrolling and dropdown menus
2022-04-26 14:44:21 +02:00
<div class="body">
<slot />
</div>
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
</div>
<style>
Refactor design panels into core panel component and update usages
2022-05-11 14:09:21 +02:00
.panel {
Reduce builder side panel width to 260px
2022-07-01 13:47:30 +02:00
width: 260px;
Builder data section routing refactor (#8996) * Improve theming with spectrum badges and dedupe spectrum label usage * Update data section nav to match designs and use panel component * Fix main content layout in data section * Update data section routing for tables * Improve data section routing for tables to account for edge cases * Update internal and sample datasource routing * Update external datasource routing * Update routing for queries and make a top level concept like everything else * Update routing for views * Fix undefined reference when deleting datasource * Reduce network calls and fix issues with stale datasourcenavigator state * Update routing for REST queries and unify routes for normal queries and REST queries * Lint * Fix links for queries from datasource details page * Remove redundant API calls and improve table deletion logic * Improve data entity deletion logic and redirection and fix query details keying * Improve determination of selected item in datasource tree * Lint * Fix BBUI import * Fix datasource navigator selected state not working for internal DB or sample data
2022-12-17 15:13:06 +01:00
flex: 0 0 260px;
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
background: var(--background);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
Slightly increase width of side panels and add expandable toggle for component tab
2022-04-27 09:06:09 +02:00
transition: width 130ms ease-out;
update fix: automation panel does not scroll Co-authored-by: jaysoni-ash42 <jsoni775566666@gmail.com>
2023-05-18 13:48:57 +02:00
overflow: hidden;
Add initial new 'add component' panel
2022-04-26 09:23:53 +02:00
}
Refactor design panels into core panel component and update usages
2022-05-11 14:09:21 +02:00
.panel.borderLeft {
Add initial layouts panel and add explicit panels for theme and navigation tabs
2022-05-11 14:06:41 +02:00
border-left: var(--border-light);
}
Refactor design panels into core panel component and update usages
2022-05-11 14:09:21 +02:00
.panel.borderRight {
Add initial layouts panel and add explicit panels for theme and navigation tabs
2022-05-11 14:06:41 +02:00
border-right: var(--border-light);
}
Refactor design panels into core panel component and update usages
2022-05-11 14:09:21 +02:00
.panel.wide {
Update component settings to be left aligned and update long component settings labels to be shorter
2023-03-08 20:22:19 +01:00
width: 310px;
flex: 0 0 310px;
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
}
.header {
Add initial new 'add component' panel
2022-04-26 09:23:53 +02:00
flex: 0 0 48px;
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
Update routify structure to prevent remounting full page when changing URL params and update nav item wrapping
2022-04-25 20:33:43 +02:00
padding: 0 var(--spacing-l);
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
border-bottom: var(--border-light);
Update panel headings to match new designs
2023-08-22 17:29:40 +02:00
gap: var(--spacing-m);
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
}
.title {
flex: 1 1 auto;
width: 0;
}
Update panel headings to match new designs
2023-08-22 17:29:40 +02:00
.title :global(p) {
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.add-button {
Add screen settings panel
2022-04-25 20:59:30 +02:00
flex: 0 0 30px;
height: 30px;
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
display: grid;
place-items: center;
border-radius: 4px;
position: relative;
cursor: pointer;
background: var(--spectrum-semantic-cta-color-background-default);
transition: background var(--spectrum-global-animation-duration-100, 130ms)
ease-out;
}
.add-button:hover {
background: var(--spectrum-semantic-cta-color-background-hover);
}
.add-button :global(svg) {
fill: white;
}
Add back in working component tree with scrolling and dropdown menus
2022-04-26 14:44:21 +02:00
.body {
flex: 1 1 auto;
overflow: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
Component settings section tabs (#9895) * Added tabs to the component settings section in the builder * Review updates * Update setting tab buttons to be size M and use a lighter font color when selected --------- Co-authored-by: Andrew Kingston <andrew@kingston.dev>
2023-03-08 15:40:13 +01:00
.header.custom {
border: none;
}
.custom-content-wrap {
border-bottom: var(--border-light);
}
Refactor routes and start updating core design UI into new components
2022-04-22 17:03:47 +02:00
</style>