forked from tsai/budibase
Peter Clement
5 years ago
committed by
GitHub
GitHub
13 changed files with 317 additions and 154 deletions
@ -0,0 +1,127 @@ |
|||
<script> |
|||
import { ModalContent, Modal, Icon, ColorPicker, Label } from "@budibase/bbui" |
|||
import { apps } from "stores/portal" |
|||
|
|||
export let app |
|||
let modal |
|||
$: selectedIcon = app?.icon?.name |
|||
$: selectedColor = app?.icon?.color |
|||
|
|||
let iconsList = [ |
|||
"Actions", |
|||
"ConversionFunnel", |
|||
"App", |
|||
"Briefcase", |
|||
"Money", |
|||
"ShoppingCart", |
|||
"Form", |
|||
"Help", |
|||
"Monitoring", |
|||
"Sandbox", |
|||
"Project", |
|||
"Organisations", |
|||
"Magnify", |
|||
"Launch", |
|||
"Car", |
|||
"Camera", |
|||
"Bug", |
|||
"Channel", |
|||
"Calculator", |
|||
"Calendar", |
|||
"GraphDonut", |
|||
"GraphBarHorizontal", |
|||
"Demographic", |
|||
"Apps", |
|||
] |
|||
export const show = () => { |
|||
modal.show() |
|||
} |
|||
export const hide = () => { |
|||
modal.hide() |
|||
} |
|||
|
|||
const onCancel = () => { |
|||
selectedIcon = "" |
|||
selectedColor = "" |
|||
hide() |
|||
} |
|||
|
|||
const changeColor = val => { |
|||
selectedColor = val |
|||
} |
|||
|
|||
const save = async () => { |
|||
await apps.update(app.instance._id, { |
|||
icon: { |
|||
name: selectedIcon, |
|||
color: selectedColor, |
|||
}, |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<Modal bind:this={modal} on:hide={onCancel}> |
|||
<ModalContent |
|||
title={"Edit Icon"} |
|||
confirmText={"Save"} |
|||
onConfirm={() => save()} |
|||
> |
|||
<div class="scrollable-icons"> |
|||
<div class="title-spacing"> |
|||
<Label>Select an Icon</Label> |
|||
</div> |
|||
<div class="grid"> |
|||
{#each iconsList as item} |
|||
<div |
|||
class="icon-item" |
|||
style="color: {item === selectedIcon ? selectedColor : ''}" |
|||
on:click={() => (selectedIcon = item)} |
|||
> |
|||
<Icon name={item} /> |
|||
</div> |
|||
{/each} |
|||
</div> |
|||
</div> |
|||
<div class="color-selection"> |
|||
<div> |
|||
<Label>Select a Color</Label> |
|||
</div> |
|||
<div class="color-selection-item"> |
|||
<ColorPicker |
|||
bind:value={selectedColor} |
|||
on:change={e => changeColor(e.detail)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</ModalContent> |
|||
</Modal> |
|||
|
|||
<style> |
|||
.scrollable-icons { |
|||
overflow-y: auto; |
|||
height: 230px; |
|||
} |
|||
|
|||
.grid { |
|||
display: grid; |
|||
grid-gap: 20px; |
|||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; |
|||
} |
|||
|
|||
.color-selection { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.color-selection-item { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.title-spacing { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.icon-item { |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,19 @@ |
|||
import { writable } from "svelte/store" |
|||
import api from "builderStore/api" |
|||
|
|||
export function templatesStore() { |
|||
const { subscribe, set } = writable([]) |
|||
|
|||
async function load() { |
|||
const response = await api.get("/api/templates?type=app") |
|||
const json = await response.json() |
|||
set(json) |
|||
} |
|||
|
|||
return { |
|||
subscribe, |
|||
load, |
|||
} |
|||
} |
|||
|
|||
export const templates = templatesStore() |
|||
Loading…
Reference in new issue