MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adds tab to left sidebar on design section

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-16 11:18:39 +02:00
parent af2b3198a5
commit 65309a5b98
3 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View File

@ -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;
} }

2
packages/builder/src/pages/builder/[application]/data/_layout.svelte
View File

@ -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 {

2
packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
View File

@ -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);
} }