forked from tsai/budibase
kevmodrome
7 years ago
3 changed files with 239 additions and 246 deletions
@ -1,240 +0,0 @@ |
|||||
<script> |
|
||||
import ComponentsHierarchy from "./ComponentsHierarchy.svelte" |
|
||||
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte" |
|
||||
import PageLayout from "./PageLayout.svelte" |
|
||||
import PagesList from "./PagesList.svelte" |
|
||||
import { store } from "builderStore" |
|
||||
import IconButton from "components/common/IconButton.svelte" |
|
||||
import NewScreen from "./NewScreen.svelte" |
|
||||
import CurrentItemPreview from "./CurrentItemPreview.svelte" |
|
||||
import SettingsView from "./SettingsView.svelte" |
|
||||
import PageView from "./PageView.svelte" |
|
||||
import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte" |
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte" |
|
||||
import { last } from "lodash/fp" |
|
||||
import { AddIcon } from "components/common/Icons" |
|
||||
|
|
||||
let newScreenPicker |
|
||||
let confirmDeleteDialog |
|
||||
let componentToDelete = "" |
|
||||
|
|
||||
const newScreen = () => { |
|
||||
newScreenPicker.show() |
|
||||
} |
|
||||
|
|
||||
let settingsView |
|
||||
const settings = () => { |
|
||||
settingsView.show() |
|
||||
} |
|
||||
|
|
||||
const confirmDeleteComponent = component => { |
|
||||
componentToDelete = component |
|
||||
confirmDeleteDialog.show() |
|
||||
} |
|
||||
|
|
||||
const lastPartOfName = c => (c ? last(c.split("/")) : "") |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
<div class="ui-nav"> |
|
||||
|
|
||||
<div class="pages-list-container"> |
|
||||
<div class="nav-header"> |
|
||||
<span class="navigator-title">Navigator</span> |
|
||||
<div class="border-line" /> |
|
||||
|
|
||||
<span class="components-nav-page">Pages</span> |
|
||||
</div> |
|
||||
|
|
||||
<div class="nav-items-container"> |
|
||||
<PagesList /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="border-line" /> |
|
||||
|
|
||||
<PageLayout layout={$store.pages[$store.currentPageName]} /> |
|
||||
|
|
||||
<div class="border-line" /> |
|
||||
|
|
||||
<div class="components-list-container"> |
|
||||
<div class="nav-group-header"> |
|
||||
<span class="components-nav-header" style="margin-top: 0;"> |
|
||||
Screens |
|
||||
</span> |
|
||||
<div> |
|
||||
<button on:click={newScreen}> |
|
||||
<AddIcon /> |
|
||||
</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="nav-items-container"> |
|
||||
<ComponentsHierarchy screens={$store.screens} /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<div class="preview-pane"> |
|
||||
<CurrentItemPreview /> |
|
||||
</div> |
|
||||
|
|
||||
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'} |
|
||||
<div class="components-pane"> |
|
||||
<ComponentsPaneSwitcher /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<NewScreen bind:this={newScreenPicker} /> |
|
||||
<SettingsView bind:this={settingsView} /> |
|
||||
|
|
||||
<ConfirmDialog |
|
||||
bind:this={confirmDeleteDialog} |
|
||||
title="Confirm Delete" |
|
||||
body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`} |
|
||||
okText="Delete Component" |
|
||||
onOk={() => store.deleteComponent(componentToDelete)} /> |
|
||||
|
|
||||
<style> |
|
||||
button { |
|
||||
cursor: pointer; |
|
||||
outline: none; |
|
||||
border: none; |
|
||||
border-radius: 5px; |
|
||||
width: 20px; |
|
||||
padding-bottom: 10px; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.root { |
|
||||
display: grid; |
|
||||
grid-template-columns: 275px 1fr 275px; |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
background: #fafafa; |
|
||||
} |
|
||||
|
|
||||
@media only screen and (min-width: 1800px) { |
|
||||
.root { |
|
||||
display: grid; |
|
||||
grid-template-columns: 300px 1fr 300px; |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
background: #fafafa; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.ui-nav { |
|
||||
grid-column: 1; |
|
||||
background-color: var(--white); |
|
||||
height: calc(100vh - 49px); |
|
||||
padding: 0; |
|
||||
overflow: scroll; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.preview-pane { |
|
||||
grid-column: 2; |
|
||||
margin: 40px; |
|
||||
background: #fff; |
|
||||
border-radius: 5px; |
|
||||
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05); |
|
||||
} |
|
||||
|
|
||||
.components-pane { |
|
||||
grid-column: 3; |
|
||||
background-color: var(--white); |
|
||||
min-height: 0px; |
|
||||
overflow-y: scroll; |
|
||||
} |
|
||||
|
|
||||
.components-nav-page { |
|
||||
font-size: 13px; |
|
||||
color: #000333; |
|
||||
text-transform: uppercase; |
|
||||
padding-left: 20px; |
|
||||
margin-top: 20px; |
|
||||
font-weight: 600; |
|
||||
opacity: 0.4; |
|
||||
letter-spacing: 1px; |
|
||||
} |
|
||||
|
|
||||
.components-nav-header { |
|
||||
font-size: 13px; |
|
||||
color: #000333; |
|
||||
text-transform: uppercase; |
|
||||
margin-top: 20px; |
|
||||
font-weight: 600; |
|
||||
opacity: 0.4; |
|
||||
letter-spacing: 1px; |
|
||||
} |
|
||||
|
|
||||
.nav-header { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
|
|
||||
.nav-items-container { |
|
||||
padding: 1rem 0rem 0rem 0rem; |
|
||||
} |
|
||||
|
|
||||
.nav-group-header { |
|
||||
display: flex; |
|
||||
padding: 0px 20px 0px 20px; |
|
||||
font-size: 0.9rem; |
|
||||
font-weight: bold; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.nav-group-header > div:nth-child(1) { |
|
||||
padding: 0rem 0.5rem 0rem 0rem; |
|
||||
vertical-align: bottom; |
|
||||
grid-column-start: icon; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
|
|
||||
.nav-group-header > span:nth-child(3) { |
|
||||
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(--primary75); |
|
||||
} |
|
||||
|
|
||||
.nav-group-header > div:nth-child(3):hover { |
|
||||
color: var(--primary75); |
|
||||
} |
|
||||
|
|
||||
.navigator-title { |
|
||||
font-size: 14px; |
|
||||
color: var(--secondary100); |
|
||||
font-weight: 600; |
|
||||
text-transform: uppercase; |
|
||||
padding: 0 20px 20px 20px; |
|
||||
line-height: 1rem !important; |
|
||||
letter-spacing: 1px; |
|
||||
} |
|
||||
|
|
||||
.border-line { |
|
||||
border-bottom: 1px solid #d8d8d8; |
|
||||
} |
|
||||
|
|
||||
.components-list-container { |
|
||||
padding: 20px 0px 0 0; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,5 +0,0 @@ |
|||||
<script> |
|
||||
import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte" |
|
||||
</script> |
|
||||
|
|
||||
<UserInterfaceRoot /> |
|
||||
Loading…
Reference in new issue