mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
5 years ago
10 changed files with 220 additions and 89 deletions
@ -1,12 +1,58 @@ |
|||
<script> |
|||
import "@spectrum-css/avatar/dist/index-vars.css" |
|||
let sizes = new Map([ |
|||
["XXS", "--spectrum-alias-avatar-size-50"], |
|||
["XS", "--spectrum-alias-avatar-size-75"], |
|||
["S", "--spectrum-alias-avatar-size-200"], |
|||
["M", "--spectrum-alias-avatar-size-300"], |
|||
["L", "--spectrum-alias-avatar-size-500"], |
|||
["XL", "--spectrum-alias-avatar-size-600"], |
|||
["XXL", "--spectrum-alias-avatar-size-700"], |
|||
]) |
|||
export let size = "M" |
|||
export let url = "" |
|||
export let disabled = false |
|||
export let name = "John Doe" |
|||
|
|||
function getInitials(name) { |
|||
let parts = name.split(" ") |
|||
return parts.map((name) => name[0]).join("") |
|||
} |
|||
</script> |
|||
|
|||
<img |
|||
class:is-disabled={disabled} |
|||
class="spectrum-Avatar" |
|||
src={url} |
|||
alt="Avatar" |
|||
/> |
|||
{#if url} |
|||
<img |
|||
class:is-disabled={disabled} |
|||
class="spectrum-Avatar" |
|||
src={url} |
|||
alt="Avatar" |
|||
style="width: var({sizes.get(size)}); height: var({sizes.get(size)});" |
|||
/> |
|||
{:else} |
|||
<div |
|||
class:is-disabled={disabled} |
|||
style="width: var({sizes.get(size)}); height: var({sizes.get( |
|||
size |
|||
)}); font-size: calc(var({sizes.get(size)}) / 2)" |
|||
> |
|||
{getInitials(name)} |
|||
</div> |
|||
{/if} |
|||
|
|||
<style> |
|||
div { |
|||
color: white; |
|||
display: grid; |
|||
place-items: center; |
|||
font-weight: 500; |
|||
background: rgb(63, 94, 251); |
|||
background: linear-gradient( |
|||
155deg, |
|||
rgba(63, 94, 251, 1) 0%, |
|||
rgba(53, 199, 86, 1) 47% |
|||
); |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
user-select: none; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1 @@ |
|||
Index route |
|||
@ -0,0 +1,124 @@ |
|||
<script> |
|||
import { isActive } from "@roxi/routify" |
|||
import { onMount } from "svelte" |
|||
import { |
|||
Icon, |
|||
Avatar, |
|||
Search, |
|||
Layout, |
|||
ProgressCircle, |
|||
SideNavigation as Navigation, |
|||
SideNavigationItem as Item, |
|||
} from "@budibase/bbui" |
|||
|
|||
let orgName, orgLogo, onBoardingProgress, user |
|||
|
|||
async function getInfo() { |
|||
// fetch orgInfo |
|||
orgName = "ACME Inc." |
|||
orgLogo = "https://via.placeholder.com/150" |
|||
|
|||
// set onBoardingProgress |
|||
onBoardingProgress = 20 |
|||
user = { name: "John Doe" } |
|||
} |
|||
|
|||
onMount(getInfo) |
|||
|
|||
let menu = [ |
|||
{ title: "Apps", href: "/portal" }, |
|||
{ title: "Drafts", href: "/portal/drafts" }, |
|||
{ title: "Users", href: "/portal/users", heading: "Manage" }, |
|||
{ title: "Groups", href: "/portal/groups" }, |
|||
{ title: "Auth", href: "/portal/auth" }, |
|||
{ title: "Email", href: "/portal/email" }, |
|||
{ title: "General", href: "/portal/general", heading: "Settings" }, |
|||
{ title: "Theming", href: "/portal/theming" }, |
|||
{ title: "Account", href: "/portal/account" }, |
|||
] |
|||
</script> |
|||
|
|||
<div class="container"> |
|||
<Layout> |
|||
<div class="nav"> |
|||
<div class="branding"> |
|||
<div class="name"> |
|||
<img src={orgLogo} alt="Logotype" /> |
|||
<span>{orgName}</span> |
|||
</div> |
|||
<div class="onboarding"> |
|||
<ProgressCircle size="S" value={onBoardingProgress} /> |
|||
</div> |
|||
</div> |
|||
<div class="menu"> |
|||
<Navigation> |
|||
{#each menu as { title, href, heading }} |
|||
<Item selected={$isActive(href)} {href} {heading}>{title}</Item> |
|||
{/each} |
|||
</Navigation> |
|||
</div> |
|||
</div> |
|||
</Layout> |
|||
<div class="main"> |
|||
<div class="toolbar"> |
|||
<Search /> |
|||
<div class="avatar"> |
|||
<Avatar size="M" name="John Doe" /> |
|||
<Icon size="XL" name="ChevronDown" /> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<slot /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
min-height: 100vh; |
|||
display: grid; |
|||
grid-template-columns: 250px 1fr; |
|||
} |
|||
.main { |
|||
display: grid; |
|||
grid-template-rows: auto 1fr; |
|||
border-left: 2px solid var(--spectrum-alias-background-color-primary); |
|||
} |
|||
.branding { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: var(--spacing-xl); |
|||
} |
|||
.name { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
grid-gap: var(--spacing-m); |
|||
align-items: center; |
|||
} |
|||
.content { |
|||
padding: var(--spacing-m); |
|||
} |
|||
.avatar { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
place-items: center; |
|||
grid-gap: var(--spacing-xs); |
|||
} |
|||
.avatar:hover { |
|||
cursor: pointer; |
|||
filter: brightness(110%); |
|||
} |
|||
.toolbar { |
|||
border-bottom: 2px solid var(--spectrum-alias-background-color-primary); |
|||
display: grid; |
|||
grid-template-columns: 250px auto; |
|||
justify-content: space-between; |
|||
padding: var(--spacing-m) calc(var(--spacing-xl) * 2); |
|||
} |
|||
img { |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue