forked from tsai/budibase
Martin McKeaveney
5 years ago
10 changed files with 220 additions and 89 deletions
@ -1,12 +1,58 @@ |
|||||
<script> |
<script> |
||||
import "@spectrum-css/avatar/dist/index-vars.css" |
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 url = "" |
||||
export let disabled = false |
export let disabled = false |
||||
|
export let name = "John Doe" |
||||
|
|
||||
|
function getInitials(name) { |
||||
|
let parts = name.split(" ") |
||||
|
return parts.map((name) => name[0]).join("") |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<img |
{#if url} |
||||
class:is-disabled={disabled} |
<img |
||||
class="spectrum-Avatar" |
class:is-disabled={disabled} |
||||
src={url} |
class="spectrum-Avatar" |
||||
alt="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