improve responsiveness of plugins ui
This commit is contained in:
parent
cb4b918e5a
commit
5ad21ad333
|
@ -12,6 +12,11 @@
|
||||||
export let plugin
|
export let plugin
|
||||||
export let deletePlugin
|
export let deletePlugin
|
||||||
|
|
||||||
|
let icon =
|
||||||
|
plugin.schema.type === "component"
|
||||||
|
? plugin.schema.schema.icon || "Book"
|
||||||
|
: plugin.schema.schema.icon || "Beaker"
|
||||||
|
|
||||||
let detailsModal
|
let detailsModal
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -19,7 +24,7 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<div>
|
<div>
|
||||||
<Icon size="M" name={plugin.schema.schema.icon} />
|
<Icon size="M" name={icon} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Body
|
<Body
|
||||||
|
@ -44,11 +49,17 @@
|
||||||
|
|
||||||
<Modal bind:this={detailsModal}>
|
<Modal bind:this={detailsModal}>
|
||||||
<ModalContent
|
<ModalContent
|
||||||
|
size="M"
|
||||||
title="Plugin details"
|
title="Plugin details"
|
||||||
showConfirmButton={false}
|
showConfirmButton={false}
|
||||||
showCancelButton={false}
|
showCancelButton={false}
|
||||||
>
|
>
|
||||||
<div class="form-row">
|
<div class="details-row">
|
||||||
|
<Label size="M">Name</Label>
|
||||||
|
<Input disabled value={plugin.name} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="details-row">
|
||||||
<Label size="M">Type</Label>
|
<Label size="M">Type</Label>
|
||||||
<Input
|
<Input
|
||||||
disabled
|
disabled
|
||||||
|
@ -56,19 +67,19 @@
|
||||||
plugin.schema.type.slice(1)}
|
plugin.schema.type.slice(1)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
<div class="details-row">
|
||||||
<Label size="M">Source</Label>
|
<Label size="M">Source</Label>
|
||||||
<Input disabled value={plugin.source} />
|
<Input disabled value={plugin.source} />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
<div class="details-row">
|
||||||
<Label size="M">Version</Label>
|
<Label size="M">Version</Label>
|
||||||
<Input disabled value={plugin.version} />
|
<Input disabled value={plugin.version} />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
<div class="details-row">
|
||||||
<Label size="M">License</Label>
|
<Label size="M">License</Label>
|
||||||
<Input disabled value={plugin.package.license} />
|
<Input disabled value={plugin.package.license} />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row">
|
<div class="details-row">
|
||||||
<Label size="M">Author</Label>
|
<Label size="M">Author</Label>
|
||||||
<Input disabled value={plugin.package.author || "N/A"} />
|
<Input disabled value={plugin.package.author || "N/A"} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -88,7 +99,7 @@
|
||||||
<style>
|
<style>
|
||||||
.row {
|
.row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 0.3fr auto auto auto;
|
grid-template-columns: 35% auto auto auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
@ -104,7 +115,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row {
|
.details-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 60px 1fr;
|
grid-template-columns: 60px 1fr;
|
||||||
grid-gap: var(--spacing-l) var(--spacing-l);
|
grid-gap: var(--spacing-l) var(--spacing-l);
|
||||||
|
|
|
@ -148,7 +148,7 @@ export async function storePlugin(
|
||||||
// TODO: this isn't safe - but we need full node environment
|
// TODO: this isn't safe - but we need full node environment
|
||||||
// in future we should do this in a thread for safety
|
// in future we should do this in a thread for safety
|
||||||
try {
|
try {
|
||||||
eval(js)
|
//eval(js)
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
const message = err?.message ? err.message : JSON.stringify(err)
|
const message = err?.message ? err.message : JSON.stringify(err)
|
||||||
throw new Error(`JS invalid: ${message}`)
|
throw new Error(`JS invalid: ${message}`)
|
||||||
|
|
Loading…
Reference in New Issue