budibase/packages/builder/src/userInterface/UserInterfaceRoot.svelte

<script>

import ComponentsHierarchy from "./ComponentsHierarchy.svelte";
import PagesList from "./PagesList.svelte"
import PropsView from "./PropsView.svelte";
import { store } from "../builderStore";
import getIcon from "../common/icon";
import { isRootComponent } from "./pagesParsing/searchComponents";
import IconButton from "../common/IconButton.svelte";
import Modal from "../common/Modal.svelte";
import NewComponent from "./NewComponent.svelte";

let isCreatingNewComponent = false;
const newComponent = () => {
    isCreatingNewComponent = true;
}

</script>

<div class="root">
    
    <div class="ui-nav">

        <div class="components-list-container">
            <div class="nav-group-header">
                <div>{@html getIcon("sidebar","18")}</div>
                <span>COMPONENTS</span>
                <div>
                    <IconButton icon="plus" 
                                on:click={newComponent} />
                </div>
            </div>
            <div class="nav-items-container">
                <ComponentsHierarchy components={$store.allComponents}/>
            </div>
        </div>

        <div class="pages-list-container">
            <div class="nav-group-header">
                <div>{@html getIcon("grid","18")}</div>
                <span>PAGES</span>
            </div>
            <div class="nav-items-container">
                <PagesList />
            </div>
        </div>

    </div>

    <div class="component-preview">
        {#if $store.currentFrontEndItem}
        <div class="component-container">
            <h1>{$store.currentFrontEndItem.name}</h1>
        </div>
        {/if} 
    </div>

    <div class="properties-pane">
        {#if $store.currentFrontEndItem && !isRootComponent($store.currentFrontEndItem)}
        <PropsView allComponents={$store.allComponents}
                   props={$store.currentFrontEndItem.props}/>
        {/if}
    </div>

</div>


<NewComponent {isCreatingNewComponent}/>


<style>

.root {
    display: grid;
    grid-template-columns: [uiNav] 250px [preview] auto [properties] 250px;
    height: 100%;
    width: 100%;
}

.ui-nav {
    grid-column-start: uiNav;
    background-color: var(--primary10);
    height: 100%;
}

.component-preview {
    display: grid;
    grid-template-rows: [top] 1fr [middle] auto [bottom] 1fr;
    grid-template-columns: [left] 1fr [middle] auto [right] 1fr;
    grid-column-start: preview;
}

.component-container {
    grid-row-start: middle;
    grid-column-start: middle;
}

.properties-pane {
    grid-column-start: properties;
    background-color: var(--primary10);
    height: 100%;
}

.pages-list-container {
    padding-top: 20px;
}

.nav-group-header {
    font-size: 10pt;
    padding-left: 10px;
}

.nav-items-container {
    padding-top: 10px;
}

.nav-group-header {
    display:grid;
    grid-template-columns: [icon] auto [title] 1fr [button] auto;
    padding: 10px 2px 0px 7px;
}

.nav-group-header>div:nth-child(1) {
    padding:0px 7px 0px 0px;
    vertical-align: bottom;
    grid-column-start: icon;
    margin-right: 5px;
}

.nav-group-header>span:nth-child(2) {
    margin-left:5px;
    vertical-align: bottom;
    grid-column-start: title;
    margin-top:auto;
}

.nav-group-header>div:nth-child(3) {
    vertical-align: bottom;
    grid-column-start: button;
    cursor: pointer;
    color: var(--slate);
}

.nav-group-header>div:nth-child(3):hover {
    color: var(--primary75);   
}

</style>