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

Clean up and use existing components

This commit is contained in:
Andrew Kingston 2023-09-06 14:15:43 +01:00
parent dd8b89d4e0
commit fdfe09f8d0
3 changed files with 33 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/pages/builder/portal/apps/[appId].svelte
View File

@ -58,14 +58,14 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-s); padding: 0 var(--spacing-l) var(--spacing-l) var(--spacing-l);
padding: var(--spacing-s) var(--spacing-l) var(--spacing-l) var(--spacing-l);
} }
.header { .header {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: var(--spacing-xs);
flex: 0 0 50px;
} }
iframe { iframe {
flex: 1 1 auto; flex: 1 1 auto;

52
packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
View File

@ -1,9 +1,9 @@
<script> <script>
import { Icon, Body } from "@budibase/bbui" import { Icon, Body } from "@budibase/bbui"
import PortalSideNavItem from "./PortalSideNavItem.svelte"
import { apps, sideBarCollapsed } from "stores/portal" import { apps, sideBarCollapsed } from "stores/portal"
import { params, goto } from "@roxi/routify" import { params, goto } from "@roxi/routify"
import { tick } from "svelte" import { tick } from "svelte"
import NavItem from "components/common/NavItem.svelte"
let searchInput let searchInput
let searchString let searchString
@ -35,29 +35,34 @@
<input <input
bind:this={searchInput} bind:this={searchInput}
bind:value={searchString} bind:value={searchString}
placeholder="Search" placeholder="Search for apps"
/> />
<Icon hoverable on:click={stopSearching} name="Close" size="S" />
{:else} {:else}
<Body size="S">Apps</Body> <Body size="S">Apps</Body>
<Icon name="Search" size="S" hoverable on:click={startSearching} /> <Icon name="Search" size="S" hoverable on:click={startSearching} />
{/if} {/if}
<Icon name="Add" hoverable on:click={() => $goto("./create")} /> <div class="rotational" class:rotated={searching}>
<Icon
name="Add"
hoverable
on:click={searching ? stopSearching : () => $goto("./create")}
/>
</div>
</div> </div>
<div class="side-bar-nav"> <div class="side-bar-nav">
<PortalSideNavItem <NavItem
icon="WebPages" icon="WebPages"
text="All apps" text="All apps"
url="./" on:click={() => $goto("./")}
selected={!$params.appId} selected={!$params.appId}
/> />
{#each filteredApps as app} {#each filteredApps as app}
<PortalSideNavItem <NavItem
text={app.name}
icon={app.icon?.name || "Apps"} icon={app.icon?.name || "Apps"}
iconColor={app.icon?.color} iconColor={app.icon?.color}
text={app.name}
url={`./${app.appId}`}
selected={$params.appId === app.appId} selected={$params.appId === app.appId}
on:click={() => $goto(`./${app.appId}`)}
/> />
{/each} {/each}
</div> </div>
@ -65,7 +70,7 @@
<style> <style>
.side-bar { .side-bar {
flex: 0 0 300px; flex: 0 0 260px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
@ -75,25 +80,29 @@
transition: margin-left 300ms ease-out; transition: margin-left 300ms ease-out;
} }
.side-bar.collapsed { .side-bar.collapsed {
margin-left: -302px; margin-left: -262px;
}
@media (max-width: 640px) {
.side-bar {
margin-left: -262px;
}
} }
.side-bar-controls { .side-bar-controls {
flex: 0 0 32px; flex: 0 0 50px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-l); gap: var(--spacing-l);
padding: 0 var(--spacing-l); padding: 0 var(--spacing-l);
margin: var(--spacing-s);
} }
.side-bar-controls :global(.spectrum-Body), .side-bar-controls :global(.spectrum-Body),
.side-bar-controls input { .side-bar-controls input {
flex: 1 1 auto; flex: 1 1 auto;
} }
.side-bar-controls :global(.spectrum-Icon) { .side-bar-controls :global(.spectrum-Icon) {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-700);
} }
input { input {
@ -101,9 +110,9 @@
border: none; border: none;
max-width: none; max-width: none;
flex: 1 1 auto; flex: 1 1 auto;
padding: 0 38px 0 0;
color: var(--spectrum-global-color-gray-800); color: var(--spectrum-global-color-gray-800);
font-size: 14px; font-size: 14px;
padding: 0;
transition: border 130ms ease-out; transition: border 130ms ease-out;
font-family: var(--font-sans); font-family: var(--font-sans);
background: inherit; background: inherit;
@ -118,13 +127,14 @@
.side-bar-nav { .side-bar-nav {
flex: 1 1 auto; flex: 1 1 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
justify-items: flex-start;
align-items: stretch;
gap: 6px;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
} }
div.rotational {
transition: transform 130ms ease-out;
}
div.rotational.rotated {
transform: rotate(45deg);
}
</style> </style>

42
packages/builder/src/pages/builder/portal/apps/_components/PortalSideNavItem.svelte
View File

@ -1,42 +0,0 @@
<script>
import { Icon } from "@budibase/bbui"
import { goto } from "@roxi/routify"
export let icon = null
export let iconColor = null
export let text = ""
export let selected = false
export let url = null
</script>
<div class="container" on:click={() => $goto(url)} class:selected>
<Icon name={icon} color={iconColor} />
<div class="text">{text}</div>
</div>
<style>
.container {
padding: 8px 12px;
border-radius: var(--spacing-s);
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--spacing-l);
transition: background 130ms ease-out;
}
.container:hover {
background: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
.container.selected {
background: var(--spectrum-global-color-gray-300);
}
.container :global(.spectrum-Icon) {
color: var(--spectrm-global-color-gray-600);
}
.text {
flex: 1 1 auto;
font-size: 14px;
color: var(--spectrm-global-color-gray-900);
}
</style>