- Footer + + Send +

diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-button.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-button.ts new file mode 100644 index 000000000..94d651f7d --- /dev/null +++ b/static/2024-05-30-app-skeleton-lit/src/components/com-button.ts @@ -0,0 +1,35 @@ +import {LitElement, html, css} from 'lit-element' +import {customElement} from 'lit/decorators.js' +import {base} from '../styles' + +const styles = css` + :host { + display: inline-block; + } + + .button { + --color-button: var(--color-green); + --color-button-text: var(--color-green-2); + --height: calc(var(--unit) * 11); + appearance: none; + background-color: var(--color-button); + border: 0; + border-radius: var(--radius); + color: var(--color-button-text); + display: block; + font-size: var(--body-size); + font-weight: bold; + height: var(--height); + line-height: var(--height); + padding: 0 calc(var(--unit) * 5); + } +` + +@customElement('com-button') +export class ComButton extends LitElement { + static styles = [base, styles] + + render() { + return html`` + } +} diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts index af0353bce..bfcf03145 100644 --- a/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts +++ b/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts @@ -37,7 +37,9 @@ export class ComAppGrid extends LitElement { - + + + ` } diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-content.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-content.ts index ea0ae91e6..d1fea4efc 100644 --- a/static/2024-05-30-app-skeleton-lit/src/components/com-content.ts +++ b/static/2024-05-30-app-skeleton-lit/src/components/com-content.ts @@ -5,15 +5,11 @@ import {base} from '../styles' const styles = css` :host { display: block; - container-type: inline-size; - height: 100cqh; } .container { max-width: var(--content-width); display: block; - height: 100cqh; - container-type: inline-size; margin: 0 auto; padding-left: var(--gap); padding-right: var(--gap); diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts new file mode 100644 index 000000000..00632185c --- /dev/null +++ b/static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts @@ -0,0 +1,50 @@ +import {LitElement, html, css} from 'lit-element' +import {customElement} from 'lit/decorators.js' +import {base} from '../styles' + +const styles = css` + :host { + display: block; + } + + .unibox { + display: grid; + grid-template-columns: min-content 1fr min-content; + grid-template-areas: "start main end"; + gap: var(--gap); + } + + .unibox-main { + grid-area: main; + } + + .unibox-start { + grid-area: start; + } + + .unibox-end { + grid-area: end; + } +` + +@customElement('com-unibox') +export class ComUnibox extends LitElement { + static styles = [base, styles] + + render() { + return html` + +

+ +

+

+ +

+

+ +

+ + ` + } +} + diff --git a/static/2024-05-30-app-skeleton-lit/src/main.ts b/static/2024-05-30-app-skeleton-lit/src/main.ts index ec51f76ee..359b38fca 100644 --- a/static/2024-05-30-app-skeleton-lit/src/main.ts +++ b/static/2024-05-30-app-skeleton-lit/src/main.ts @@ -4,4 +4,6 @@ export * as ComChat from './components/com-chat' export * as ComThread from './components/com-thread' export * as ComPrompt from './components/com-prompt' export * as ComResponse from './components/com-response' -export * as ComThreadGroup from './components/com-thread-group' \ No newline at end of file +export * as ComThreadGroup from './components/com-thread-group' +export * as ComButton from './components/com-button' +export * as ComUnibox from './components/com-unibox' \ No newline at end of file From ae9265bb55275177f3c0f0f290bfcf393749e31f Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Thu, 30 May 2024 12:18:45 -0700 Subject: [PATCH 09/11] Stub out unibox --- static/2024-05-30-app-skeleton-lit/index.html | 9 ++--- .../src/components/com-chat.ts | 34 +++++++++++-------- .../src/components/com-editor.ts | 30 ++++++++++++++++ .../src/components/com-unibox.ts | 27 +++++++-------- .../2024-05-30-app-skeleton-lit/src/main.ts | 3 +- 5 files changed, 69 insertions(+), 34 deletions(-) create mode 100644 static/2024-05-30-app-skeleton-lit/src/components/com-editor.ts diff --git a/static/2024-05-30-app-skeleton-lit/index.html b/static/2024-05-30-app-skeleton-lit/index.html index ce0e09618..89e06c09a 100644 --- a/static/2024-05-30-app-skeleton-lit/index.html +++ b/static/2024-05-30-app-skeleton-lit/index.html @@ -13,23 +13,24 @@ - Hello world + - Henlo world + - Hello world + - Henlo world +

+ Send

diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts index bfcf03145..bed6a1bbb 100644 --- a/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts +++ b/static/2024-05-30-app-skeleton-lit/src/components/com-chat.ts @@ -5,42 +5,48 @@ import {base} from '../styles' const styles = css` :host { display: block; + } + .layout { display: grid; grid-template-rows: 1fr min-content; grid-template-areas: "main" "footer"; - height: 100cqh; + height: 100cqh; + } - > com-chat-main { - grid-area: main; - overflow-y: auto; - overflow-x: hidden; - } + .main { + grid-area: main; + overflow-y: auto; + overflow-x: hidden; + padding: var(--gap); + } - > com-chat-footer { - grid-area: footer; - } + .footer { + grid-area: footer; + padding: 0 var(--gap) var(--gap); } ` @customElement('com-chat') -export class ComAppGrid extends LitElement { +export class ComChat extends LitElement { static styles = [base, styles] render() { return html` - +

+

- - +

+

- +

+

` } } diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-editor.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-editor.ts new file mode 100644 index 000000000..174116d2a --- /dev/null +++ b/static/2024-05-30-app-skeleton-lit/src/components/com-editor.ts @@ -0,0 +1,30 @@ +import {LitElement, html, css} from 'lit-element' +import {customElement, property} from 'lit/decorators.js' +import {base} from '../styles' + +const styles = css` + :host { + display: block; + } + + .editor { + display: block; + + &:focus { + outline: none; + } + } +` + +@customElement('com-editor') +export class ComEditor extends LitElement { + static styles = [base, styles] + + @property({type: String}) value = '' + + render() { + return html` +

${this.value}

+ ` + } +} diff --git a/static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts b/static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts index 00632185c..0730a2d1c 100644 --- a/static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts +++ b/static/2024-05-30-app-skeleton-lit/src/components/com-unibox.ts @@ -9,17 +9,17 @@ const styles = css` .unibox { display: grid; - grid-template-columns: min-content 1fr min-content; - grid-template-areas: "start main end"; + background-color: var(--color-white); + border-radius: var(--radius); + grid-template-columns: 1fr min-content; + grid-template-areas: "main end"; gap: var(--gap); + padding: calc(var(--unit) * 2); } .unibox-main { grid-area: main; - } - - .unibox-start { - grid-area: start; + align-self: center; } .unibox-end { @@ -33,17 +33,14 @@ export class ComUnibox extends LitElement { render() { return html` - -

- -

-

+

+

-

-

+