Skip to content

Commit

Permalink
open inside edit view
Browse files Browse the repository at this point in the history
  • Loading branch information
@tintinthong
tintinthong committed Jan 11, 2025
1 parent 6c66b2d commit 45f353f
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 134 deletions.
285 changes: 152 additions & 133 deletions packages/base/catalog-entry.gts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,152 @@ export class SpecType extends StringField {
static displayName = 'Spec Type';
}

interface PreviewSignature {
Element: HTMLElement;
Args: {
model: any;
fields: any;
};
}
class Preview extends GlimmerComponent<PreviewSignature> {
get icon() {
return this.args.model.constructor?.icon;
}

<template>
<div class='container'>
<div class='header'>
<div class='header-icon-container'>
<this.icon class='box' />
</div>
<div class='header-info-container'>
<div class='box'>
<h1 data-test-title><@fields.title /></h1>
<em data-test-description><@fields.description /></em>
</div>
</div>
</div>
<div class='readme section'>
<div class='row-header'>
<BookOpenText />
Read Me
</div>
{{#if @model.readMe}}
<div class='box'>
<@fields.readMe />
</div>
{{/if}}
</div>
<div class='examples section'>
<div class='row-header'>
<LayersSubtract />
Examples
</div>
<@fields.examples />
</div>
<div class='module section'>
<div class='row-header'>
<GitBranch />
Module</div>
<div class='container-code-ref'>
<div class='row-code-ref'>
<div class='row-code-ref-label'>URL</div>
<div class='row-code-ref-value box'>
{{@model.moduleHref}}
</div>
</div>
<div class='row-code-ref'>
<div class='row-code-ref-label'>Exported Name</div>
<div class='row-code-ref-value box'>
<div class='exported-row'>
<div class='exported-name'>
<DiagonalArrowLeftUp class='exported-arrow' />
{{@model.ref.name}}
</div>
<div class='exported-type'>
{{@model.type}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style scoped>
.container {
background-color: var(--boxel-200);
}
.box {
height: 100%;
width: 100%;
border: 2px solid var(--boxel-border-color);
border-radius: var(--boxel-border-radius-lg);
padding: var(--boxel-sp-xs);
background-color: var(--boxel-light);
}
.header {
display: grid;
grid-template-columns: 1fr 3fr;
}
.section {
padding: var(--boxel-sp-sm);
}
.header-icon-container {
padding: var(--boxel-sp-sm);
}
.header-icon-svg {
width: 100%;
height: 100%;
border: 2px solid var(--boxel-border-color);
border-radius: var(--boxel-border-radius-lg);
}
.header-info-container {
padding: var(--boxel-sp-sm);
}
.row-header {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--boxel-sp-xs);
font-weight: 600;
}
.container-code-ref {
display: flex;
flex-direction: column;
gap: var(--boxel-sp-xs);
}
.row-code-ref {
display: flex;
flex-direction: column;
gap: var(--boxel-sp-xs);
}
.row-code-ref-value {
background-color: var(--boxel-300);
}
.exported-row {
display: flex;
justify-content: space-between;
}
.exported-name {
display: inline-flex;
align-items: center;
gap: var(--boxel-sp-xxs);
}
.exported-type {
text-transform: uppercase;
font: 500 var(--boxel-font-xs);
color: var(--boxel-450);
letter-spacing: var(--boxel-lsp-xl);
}
.exported-arrow {
width: 10px;
height: 10px;
--icon-color: var(--boxel-teal);
}
</style>
</template>
}

export class CatalogEntry extends CardDef {
static displayName = 'Catalog Entry';
static icon = BoxModel;
Expand Down Expand Up @@ -85,141 +231,14 @@ export class CatalogEntry extends CardDef {
};

static isolated = class Isolated extends Component<typeof this> {
get icon() {
return this.args.model.constructor?.icon;
}
<template>
<Preview @model={{this.args.model}} @fields={{this.args.fields}} />
</template>
};

static edit = class Edit extends Component<typeof this> {
<template>
<div class='container'>
<div class='header'>
<div class='header-icon-container'>
<this.icon class='box' />
</div>
<div class='header-info-container'>
<div class='box'>
<h1 data-test-title><@fields.title /></h1>
<em data-test-description><@fields.description /></em>
</div>
</div>
</div>
<div class='readme section'>
<div class='row-header'>
<BookOpenText />
Read Me
</div>
{{#if @model.readMe}}
<div class='box'>
<@fields.readMe />
</div>
{{/if}}
</div>
<div class='examples section'>
<div class='row-header'>
<LayersSubtract />
Examples
</div>
<@fields.examples />
</div>
<div class='module section'>
<div class='row-header'>
<GitBranch />
Module</div>
<div class='container-code-ref'>
<div class='row-code-ref'>
<div class='row-code-ref-label'>URL</div>
<div class='row-code-ref-value box'>
{{@model.moduleHref}}
</div>
</div>
<div class='row-code-ref'>
<div class='row-code-ref-label'>Exported Name</div>
<div class='row-code-ref-value box'>
<div class='exported-row'>
<div class='exported-name'>
<DiagonalArrowLeftUp class='exported-arrow' />
{{@model.ref.name}}
</div>
<div class='exported-type'>
{{@model.type}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style scoped>
.container {
background-color: var(--boxel-200);
}
.box {
height: 100%;
width: 100%;
border: 2px solid var(--boxel-border-color);
border-radius: var(--boxel-border-radius-lg);
padding: var(--boxel-sp-xs);
background-color: var(--boxel-light);
}
.header {
display: grid;
grid-template-columns: 1fr 3fr;
}
.section {
padding: var(--boxel-sp-sm);
}
.header-icon-container {
padding: var(--boxel-sp-sm);
}
.header-icon-svg {
width: 100%;
height: 100%;
border: 2px solid var(--boxel-border-color);
border-radius: var(--boxel-border-radius-lg);
}
.header-info-container {
padding: var(--boxel-sp-sm);
}
.row-header {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--boxel-sp-xs);
font-weight: 600;
}
.container-code-ref {
display: flex;
flex-direction: column;
gap: var(--boxel-sp-xs);
}
.row-code-ref {
display: flex;
flex-direction: column;
gap: var(--boxel-sp-xs);
}
.row-code-ref-value {
background-color: var(--boxel-300);
}
.exported-row {
display: flex;
justify-content: space-between;
}
.exported-name {
display: inline-flex;
align-items: center;
gap: var(--boxel-sp-xxs);
}
.exported-type {
text-transform: uppercase;
font: 500 var(--boxel-font-xs);
color: var(--boxel-450);
letter-spacing: var(--boxel-lsp-xl);
}
.exported-arrow {
width: 10px;
height: 10px;
--icon-color: var(--boxel-teal);
}
</style>
<Preview @model={{this.args.model}} @fields={{this.args.fields}} />
</template>
};
}
Expand Down
2 changes: 1 addition & 1 deletion packages/host/app/components/operator-mode/code-submode/boxel-spec-preview.gts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ class BoxelSpecPreviewContent extends GlimmerComponent<ContentSignature> {
</div>
{{#if @selectedInstance}}
{{#let (getComponent @selectedInstance) as |CardComponent|}}
<CardComponent />
<CardComponent @format='edit' />
{{/let}}
{{/if}}
</div>
Expand Down

0 comments on commit 45f353f

Please sign in to comment.