Skip to content

Commit

Permalink
Add more conversions
Browse files Browse the repository at this point in the history
  • Loading branch information
@backspace
backspace committed Mar 28, 2024
1 parent e4cb71f commit 8dd2b7d
Show file tree
Hide file tree
Showing 16 changed files with 609 additions and 618 deletions.
104 changes: 52 additions & 52 deletions packages/host/app/components/ai-assistant/panel-popover.gts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Component from '@glimmer/component';
import type { TemplateOnlyComponent } from '@ember/component/template-only';

import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';

Expand All @@ -11,58 +11,58 @@ interface Signature {
Args: { onClose: () => void };
}

export default class AiAssistantPanelPopover extends Component<Signature> {
<template>
<style>
.panel-popover {
position: absolute;
top: 0;
left: 0;
margin-top: var(--boxel-sp-sm);
width: 24.5rem;
min-height: 12.5rem;
max-height: 75vh;
background-color: var(--boxel-light);
border-radius: var(--boxel-border-radius-xl);
color: var(--boxel-dark);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
z-index: 20;
display: flex;
flex-direction: column;
}
const AiAssistantPanelPopover: TemplateOnlyComponent<Signature> = <template>
<style>
.panel-popover {
position: absolute;
top: 0;
left: 0;
margin-top: var(--boxel-sp-sm);
width: 24.5rem;
min-height: 12.5rem;
max-height: 75vh;
background-color: var(--boxel-light);
border-radius: var(--boxel-border-radius-xl);
color: var(--boxel-dark);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
z-index: 20;
display: flex;
flex-direction: column;
}
.header {
position: relative;
padding: var(--boxel-sp);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: var(--boxel-lsp-xs);
line-height: 1.2;
}
.header :deep(button) {
transform: rotate(180deg);
position: absolute;
right: var(--boxel-sp-xs);
top: var(--boxel-sp-xs);
}
.header {
position: relative;
padding: var(--boxel-sp);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: var(--boxel-lsp-xs);
line-height: 1.2;
}
.header :deep(button) {
transform: rotate(180deg);
position: absolute;
right: var(--boxel-sp-xs);
top: var(--boxel-sp-xs);
}
.body {
overflow-y: auto;
flex-grow: 1;
}
</style>
.body {
overflow-y: auto;
flex-grow: 1;
}
</style>

<div
{{onClickOutside @onClose exceptSelector='.past-session-menu,.delete'}}
class='panel-popover'
...attributes
>
<div class='header'>
{{yield to='header'}}
</div>
<div class='body'>
{{yield to='body'}}
</div>
<div
{{onClickOutside @onClose exceptSelector='.past-session-menu,.delete'}}
class='panel-popover'
...attributes
>
<div class='header'>
{{yield to='header'}}
</div>
</template>
}
<div class='body'>
{{yield to='body'}}
</div>
</div>
</template>;

export default AiAssistantPanelPopover;
96 changes: 48 additions & 48 deletions packages/host/app/components/ai-assistant/past-sessions.gts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { TemplateOnlyComponent } from '@ember/component/template-only';
import { on } from '@ember/modifier';
import Component from '@glimmer/component';

import { IconButton } from '@cardstack/boxel-ui/components';
import { DropdownArrowFilled } from '@cardstack/boxel-ui/icons';
Expand All @@ -18,51 +18,51 @@ interface Signature {
Element: HTMLElement;
}

export default class AiAssistantPastSessionsList extends Component<Signature> {
<template>
<AiAssistantPanelPopover
@onClose={{@onClose}}
data-test-past-sessions
...attributes
>
<:header>
Past Sessions
<IconButton
@icon={{DropdownArrowFilled}}
@width='12px'
@height='12px'
{{on 'click' @onClose}}
aria-label='Close Past Sessions'
data-test-close-past-sessions
/>
</:header>
<:body>
{{#if @sessions}}
<ul class='past-sessions'>
{{#each @sessions as |session|}}
<PastSessionItem @room={{session}} @actions={{@roomActions}} />
{{/each}}
</ul>
{{else}}
<div class='empty-collection'>
No past sessions to show.
</div>
{{/if}}
</:body>
</AiAssistantPanelPopover>
const AiAssistantPastSessionsList: TemplateOnlyComponent<Signature> = <template>
<AiAssistantPanelPopover
@onClose={{@onClose}}
data-test-past-sessions
...attributes
>
<:header>
Past Sessions
<IconButton
@icon={{DropdownArrowFilled}}
@width='12px'
@height='12px'
{{on 'click' @onClose}}
aria-label='Close Past Sessions'
data-test-close-past-sessions
/>
</:header>
<:body>
{{#if @sessions}}
<ul class='past-sessions'>
{{#each @sessions as |session|}}
<PastSessionItem @room={{session}} @actions={{@roomActions}} />
{{/each}}
</ul>
{{else}}
<div class='empty-collection'>
No past sessions to show.
</div>
{{/if}}
</:body>
</AiAssistantPanelPopover>

<style>
.past-sessions {
list-style-type: none;
padding: 0;
margin: 0;
margin-bottom: var(--boxel-sp-xs);
}
.empty-collection {
padding: var(--boxel-sp-sm);
text-align: center;
color: var(--boxel-450);
}
</style>
</template>
}
<style>
.past-sessions {
list-style-type: none;
padding: 0;
margin: 0;
margin-bottom: var(--boxel-sp-xs);
}
.empty-collection {
padding: var(--boxel-sp-sm);
text-align: center;
color: var(--boxel-450);
}
</style>
</template>;

export default AiAssistantPastSessionsList;
96 changes: 48 additions & 48 deletions packages/host/app/components/card-catalog/results-header.gts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Component from '@glimmer/component';
import type { TemplateOnlyComponent } from '@ember/component/template-only';

import cssUrl from 'ember-css-url';

Expand All @@ -13,51 +13,51 @@ interface Signature {
};
}

export default class CardCatalogResultsHeader extends Component<Signature> {
<template>
<header class='catalog-results-header'>
<div
style={{if @realm.iconURL (cssUrl 'background-image' @realm.iconURL)}}
class={{cn 'realm-icon' realm-icon--empty=(not @realm.iconURL)}}
/>
<span class='realm-name' data-test-realm-name>
{{@realm.name}}
</span>
<span class='results-count' data-test-results-count>
{{#if (gt @resultsCount 1)}}
{{@resultsCount}}
results
{{else if (eq @resultsCount 1)}}
1 result
{{/if}}
</span>
</header>
const CardCatalogResultsHeader: TemplateOnlyComponent<Signature> = <template>
<header class='catalog-results-header'>
<div
style={{if @realm.iconURL (cssUrl 'background-image' @realm.iconURL)}}
class={{cn 'realm-icon' realm-icon--empty=(not @realm.iconURL)}}
/>
<span class='realm-name' data-test-realm-name>
{{@realm.name}}
</span>
<span class='results-count' data-test-results-count>
{{#if (gt @resultsCount 1)}}
{{@resultsCount}}
results
{{else if (eq @resultsCount 1)}}
1 result
{{/if}}
</span>
</header>

<style>
.catalog-results-header {
--realm-icon-size: 1.25rem;
display: flex;
align-items: center;
gap: var(--boxel-sp-xs);
}
.realm-icon {
width: var(--realm-icon-size);
height: var(--realm-icon-size);
background-size: contain;
background-position: center;
}
.realm-icon--empty {
border: 1px solid var(--boxel-dark);
border-radius: 100px;
}
.realm-name {
display: inline-block;
font: 700 var(--boxel-font);
}
.results-count {
display: inline-block;
font: var(--boxel-font);
}
</style>
</template>
}
<style>
.catalog-results-header {
--realm-icon-size: 1.25rem;
display: flex;
align-items: center;
gap: var(--boxel-sp-xs);
}
.realm-icon {
width: var(--realm-icon-size);
height: var(--realm-icon-size);
background-size: contain;
background-position: center;
}
.realm-icon--empty {
border: 1px solid var(--boxel-dark);
border-radius: 100px;
}
.realm-name {
display: inline-block;
font: 700 var(--boxel-font);
}
.results-count {
display: inline-block;
font: var(--boxel-font);
}
</style>
</template>;

export default CardCatalogResultsHeader;
56 changes: 28 additions & 28 deletions packages/host/app/components/card-error.gts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Component from '@glimmer/component';
import type { TemplateOnlyComponent } from '@ember/component/template-only';

import { eq } from '@cardstack/boxel-ui/helpers';

Expand All @@ -10,32 +10,32 @@ interface Signature {
};
}

export default class CardError extends Component<Signature> {
<template>
<div data-card-error class='container'>
{{#if (eq @type 'index')}}
<b>Cannot load index card.</b>
{{else if (eq @type 'stack')}}
<b>Cannot load stack.</b>
{{else}}
<b>Cannot load card.</b>
{{/if}}
<pre class='error'>{{@message}}</pre>
const CardError: TemplateOnlyComponent<Signature> = <template>
<div data-card-error class='container'>
{{#if (eq @type 'index')}}
<b>Cannot load index card.</b>
{{else if (eq @type 'stack')}}
<b>Cannot load stack.</b>
{{else}}
<b>Cannot load card.</b>
{{/if}}
<pre class='error'>{{@message}}</pre>

{{#if @operatorModeState}}
<pre class='error'>Operator mode state: {{@operatorModeState}}</pre>
{{/if}}
</div>
<style>
.container {
margin: 5em;
}
{{#if @operatorModeState}}
<pre class='error'>Operator mode state: {{@operatorModeState}}</pre>
{{/if}}
</div>
<style>
.container {
margin: 5em;
}
.error {
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</template>
}
.error {
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</template>;

export default CardError;
Loading

0 comments on commit 8dd2b7d

Please sign in to comment.