adds tab to left sidebar on design section
This commit is contained in:
parent
6696f1007a
commit
2255fdad64
3 changed files with 48 additions and 41 deletions
|
@ -13,7 +13,7 @@
|
||||||
import Layout from "components/design/NavigationPanel/Layout.svelte"
|
import Layout from "components/design/NavigationPanel/Layout.svelte"
|
||||||
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
|
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
|
||||||
import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
|
import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
|
||||||
import { Modal, Switcher, Select, Input } from "@budibase/bbui"
|
import { Modal, Switcher, Select, Input, Tabs, Tab } from "@budibase/bbui"
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{
|
{
|
||||||
|
@ -28,13 +28,11 @@
|
||||||
|
|
||||||
let modal
|
let modal
|
||||||
let routes = {}
|
let routes = {}
|
||||||
$: tab = $params.assetType
|
$: selected = tabs.find(t => t.key === $params.assetType).title
|
||||||
|
|
||||||
const navigate = ({ detail }) => {
|
const navigate = ({detail}) => {
|
||||||
if (!detail) {
|
const { key } = tabs.find(t => t.title === detail)
|
||||||
return
|
$goto(`../${key}`)
|
||||||
}
|
|
||||||
$goto(`../${detail.heading.key}`)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateAccessRole = event => {
|
const updateAccessRole = event => {
|
||||||
|
@ -68,12 +66,9 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Switcher headings={tabs} bind:value={tab} on:change={navigate}>
|
<Tabs {selected} on:select={navigate}>
|
||||||
{#if tab === FrontendTypes.SCREEN}
|
<Tab title="Screens">
|
||||||
<i
|
<div class="tab-content-padding">
|
||||||
on:click={modal.show}
|
|
||||||
data-cy="new-screen"
|
|
||||||
class="ri-add-circle-fill" />
|
|
||||||
<div class="role-select">
|
<div class="role-select">
|
||||||
<Select
|
<Select
|
||||||
extraThin
|
extraThin
|
||||||
|
@ -102,7 +97,10 @@
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
<NewScreenModal />
|
<NewScreenModal />
|
||||||
</Modal>
|
</Modal>
|
||||||
{:else if tab === FrontendTypes.LAYOUT}
|
</div>
|
||||||
|
</Tab>
|
||||||
|
<Tab title="Layouts">
|
||||||
|
<div class="tab-content-padding">
|
||||||
<i
|
<i
|
||||||
on:click={modal.show}
|
on:click={modal.show}
|
||||||
data-cy="new-layout"
|
data-cy="new-layout"
|
||||||
|
@ -113,8 +111,13 @@
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
<NewLayoutModal />
|
<NewLayoutModal />
|
||||||
</Modal>
|
</Modal>
|
||||||
{/if}
|
</div>
|
||||||
</Switcher>
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
<i
|
||||||
|
on:click={modal.show}
|
||||||
|
data-cy="new-screen"
|
||||||
|
class="ri-add-circle-fill" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -128,8 +131,8 @@
|
||||||
.title i {
|
.title i {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: var(--spacing-l);
|
||||||
right: 0;
|
right: var(--spacing-l);
|
||||||
}
|
}
|
||||||
.title i:hover {
|
.title i:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -145,6 +148,10 @@
|
||||||
gap: var(--spacing-m);
|
gap: var(--spacing-m);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab-content-padding {
|
||||||
|
padding: 0 var(--spacing-s);
|
||||||
|
}
|
||||||
|
|
||||||
.search-screens {
|
.search-screens {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
@ -105,7 +105,7 @@
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: var(--spacing-l);
|
top: var(--spacing-l);
|
||||||
right: var(--spacing-xl);
|
right: var(--spacing-l);
|
||||||
}
|
}
|
||||||
|
|
||||||
i:hover {
|
i:hover {
|
||||||
|
|
|
@ -177,7 +177,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-l);
|
gap: var(--spacing-l);
|
||||||
padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl);
|
padding: 0 0 60px 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-right: var(--border-light);
|
border-right: var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue