Skip to content

Commit fafa6fe

Browse files
backspacebackspace
committedMar 28, 2024
Convert some template-only components
1 parent b23e625 commit fafa6fe

File tree

3 files changed

+131
-130
lines changed

3 files changed

+131
-130
lines changed
 

‎packages/host/app/components/ai-assistant/apply-button/index.gts

+65-65
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Component from '@glimmer/component';
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
22

33
import { BoxelButton, CircleSpinner } from '@cardstack/boxel-ui/components';
44
import { cn, eq } from '@cardstack/boxel-ui/helpers';
@@ -14,67 +14,67 @@ interface Signature {
1414
};
1515
}
1616

17-
export default class AiAssistantApplyButton extends Component<Signature> {
18-
<template>
19-
<BoxelButton
20-
@kind='primary'
21-
@size='small'
22-
class={{cn 'apply-button' @state}}
23-
{{setCssVar boxel-button-text-color='var(--boxel-dark)'}}
24-
...attributes
25-
>
26-
{{#if (eq @state 'ready')}}
27-
Apply
28-
{{else if (eq @state 'applying')}}
29-
<CircleSpinner class='spinner' />
30-
{{else if (eq @state 'applied')}}
31-
<CheckMark class='checkmark' />
32-
{{else if (eq @state 'failed')}}
33-
<Exclamation class='exclamation' />
34-
{{/if}}
35-
</BoxelButton>
36-
<style>
37-
.apply-button {
38-
--boxel-button-font: 700 var(--boxel-font-xs);
39-
--boxel-button-min-height: 1.5rem;
40-
--boxel-button-padding: 0;
41-
position: relative;
42-
min-width: 58px;
43-
max-height: 1.5rem;
44-
transition: min-width 0.2s ease-in-out;
45-
}
46-
.apply-button.applied,
47-
.apply-button.failed {
48-
min-width: 0;
49-
aspect-ratio: 1;
50-
padding: 0;
51-
}
52-
.apply-button.failed {
53-
background: var(--boxel-error-200);
54-
border-color: var(--boxel-error-200);
55-
}
56-
.spinner {
57-
--spinner-circle-size: 18px;
58-
width: var(--spinner-circle-size);
59-
height: var(--spinner-circle-size);
60-
--icon-color: var(--boxel-dark);
61-
--icon-stroke-width: 5;
62-
}
63-
.checkmark {
64-
width: 24px;
65-
height: 24px;
66-
--icon-color: var(--boxel-dark);
67-
}
68-
.exclamation {
69-
width: 17px;
70-
height: 17px;
71-
--icon-color: var(--boxel-light);
72-
}
73-
.apply-button:hover:not(:disabled),
74-
.apply-button:focus:not(:disabled) {
75-
--boxel-button-color: var(--boxel-highlight);
76-
filter: brightness(1.1);
77-
}
78-
</style>
79-
</template>
80-
}
17+
const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
18+
<BoxelButton
19+
@kind='primary'
20+
@size='small'
21+
class={{cn 'apply-button' @state}}
22+
{{setCssVar boxel-button-text-color='var(--boxel-dark)'}}
23+
...attributes
24+
>
25+
{{#if (eq @state 'ready')}}
26+
Apply
27+
{{else if (eq @state 'applying')}}
28+
<CircleSpinner class='spinner' />
29+
{{else if (eq @state 'applied')}}
30+
<CheckMark class='checkmark' />
31+
{{else if (eq @state 'failed')}}
32+
<Exclamation class='exclamation' />
33+
{{/if}}
34+
</BoxelButton>
35+
<style>
36+
.apply-button {
37+
--boxel-button-font: 700 var(--boxel-font-xs);
38+
--boxel-button-min-height: 1.5rem;
39+
--boxel-button-padding: 0;
40+
position: relative;
41+
min-width: 58px;
42+
max-height: 1.5rem;
43+
transition: min-width 0.2s ease-in-out;
44+
}
45+
.apply-button.applied,
46+
.apply-button.failed {
47+
min-width: 0;
48+
aspect-ratio: 1;
49+
padding: 0;
50+
}
51+
.apply-button.failed {
52+
background: var(--boxel-error-200);
53+
border-color: var(--boxel-error-200);
54+
}
55+
.spinner {
56+
--spinner-circle-size: 18px;
57+
width: var(--spinner-circle-size);
58+
height: var(--spinner-circle-size);
59+
--icon-color: var(--boxel-dark);
60+
--icon-stroke-width: 5;
61+
}
62+
.checkmark {
63+
width: 24px;
64+
height: 24px;
65+
--icon-color: var(--boxel-dark);
66+
}
67+
.exclamation {
68+
width: 17px;
69+
height: 17px;
70+
--icon-color: var(--boxel-light);
71+
}
72+
.apply-button:hover:not(:disabled),
73+
.apply-button:focus:not(:disabled) {
74+
--boxel-button-color: var(--boxel-highlight);
75+
filter: brightness(1.1);
76+
}
77+
</style>
78+
</template>;
79+
80+
export default AiAssistantApplyButton;

‎packages/host/app/components/ai-assistant/button.gts

+50-50
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Component from '@glimmer/component';
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
22

33
import { cn } from '@cardstack/boxel-ui/helpers';
44

@@ -9,56 +9,56 @@ interface Signature {
99
};
1010
}
1111

12-
export default class AiAssistantButton extends Component<Signature> {
13-
<template>
14-
<button
15-
class={{cn 'ai-assistant-button' is-active=@isActive}}
16-
data-test-open-ai-assistant
17-
...attributes
18-
/>
19-
<style>
20-
.ai-assistant-button {
21-
width: var(--container-button-size);
22-
height: var(--container-button-size);
12+
const AiAssistantButton: TemplateOnlyComponent<Signature> = <template>
13+
<button
14+
class={{cn 'ai-assistant-button' is-active=@isActive}}
15+
data-test-open-ai-assistant
16+
...attributes
17+
/>
18+
<style>
19+
.ai-assistant-button {
20+
width: var(--container-button-size);
21+
height: var(--container-button-size);
2322
24-
position: absolute;
25-
bottom: var(--boxel-sp);
26-
right: var(--boxel-sp);
27-
border-radius: var(--boxel-border-radius);
28-
background-color: var(--boxel-dark);
29-
border: 1px solid rgba(255, 255, 255, 0.35);
23+
position: absolute;
24+
bottom: var(--boxel-sp);
25+
right: var(--boxel-sp);
26+
border-radius: var(--boxel-border-radius);
27+
background-color: var(--boxel-dark);
28+
border: 1px solid rgba(255, 255, 255, 0.35);
3029
31-
background-image: image-set(
32-
url('./ai-assist-icon.webp') 1x,
33-
url('./ai-assist-icon@2x.webp') 2x,
34-
url('./ai-assist-icon@3x.webp')
30+
background-image: image-set(
31+
url('./ai-assist-icon.webp') 1x,
32+
url('./ai-assist-icon@2x.webp') 2x,
33+
url('./ai-assist-icon@3x.webp')
34+
);
35+
background-size: 26px 26px;
36+
background-position: center;
37+
background-repeat: no-repeat;
38+
}
39+
.ai-assistant-button:hover {
40+
cursor: pointer;
41+
}
42+
43+
.ai-assistant-button.is-active {
44+
background-image: image-set(
45+
url('./ai-assist-icon-bw.png') 1x,
46+
url('./ai-assist-icon-bw@2x.png') 2x,
47+
url('./ai-assist-icon-bw@3x.png')
48+
),
49+
image-set(
50+
url('./ai-assist-button-active-bg.webp') 1x,
51+
url('./ai-assist-button-active-bg@2x.webp') 2x,
52+
url('./ai-assist-button-active-bg@3x.webp')
3553
);
36-
background-size: 26px 26px;
37-
background-position: center;
38-
background-repeat: no-repeat;
39-
}
40-
.ai-assistant-button:hover {
41-
cursor: pointer;
42-
}
54+
background-size:
55+
26px 26px,
56+
40px 40px;
57+
background-position: center, center;
58+
background-repeat: no-repeat, no-repeat;
59+
border: 1px solid rgba(0, 0, 0, 0.35);
60+
}
61+
</style>
62+
</template>;
4363

44-
.ai-assistant-button.is-active {
45-
background-image: image-set(
46-
url('./ai-assist-icon-bw.png') 1x,
47-
url('./ai-assist-icon-bw@2x.png') 2x,
48-
url('./ai-assist-icon-bw@3x.png')
49-
),
50-
image-set(
51-
url('./ai-assist-button-active-bg.webp') 1x,
52-
url('./ai-assist-button-active-bg@2x.webp') 2x,
53-
url('./ai-assist-button-active-bg@3x.webp')
54-
);
55-
background-size:
56-
26px 26px,
57-
40px 40px;
58-
background-position: center, center;
59-
background-repeat: no-repeat, no-repeat;
60-
border: 1px solid rgba(0, 0, 0, 0.35);
61-
}
62-
</style>
63-
</template>
64-
}
64+
export default AiAssistantButton;

‎packages/host/app/components/ai-assistant/message/index.gts

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
12
import { on } from '@ember/modifier';
23
import { service } from '@ember/service';
34
import type { SafeString } from '@ember/template';
@@ -241,18 +242,18 @@ interface AiAssistantConversationSignature {
241242
};
242243
}
243244

244-
export class AiAssistantConversation extends Component<AiAssistantConversationSignature> {
245-
<template>
246-
<div class='ai-assistant-conversation'>
247-
{{yield}}
248-
</div>
249-
<style>
250-
.ai-assistant-conversation {
251-
display: flex;
252-
flex-direction: column;
253-
padding: var(--boxel-sp);
254-
overflow-y: auto;
255-
}
256-
</style>
257-
</template>
258-
}
245+
const AiAssistantConversation: TemplateOnlyComponent<AiAssistantConversationSignature> = <template>
246+
<div class='ai-assistant-conversation'>
247+
{{yield}}
248+
</div>
249+
<style>
250+
.ai-assistant-conversation {
251+
display: flex;
252+
flex-direction: column;
253+
padding: var(--boxel-sp);
254+
overflow-y: auto;
255+
}
256+
</style>
257+
</template>;
258+
259+
export { AiAssistantConversation };

0 commit comments

Comments
 (0)