From 80b24ee6ffcae1b6fbbdaaeb155f24dd89baaccc Mon Sep 17 00:00:00 2001 From: Emi Wu Date: Mon, 19 Aug 2024 16:40:30 -0400 Subject: [PATCH 1/5] initial commit --- src/elements/play-export-dialog.test.ts | 7 - src/elements/play-export-dialog.ts | 140 ----------------- src/elements/play-pen-header.ts | 19 +-- src/elements/play-project-button.test.ts | 7 + src/elements/play-project-button.ts | 187 +++++++++++++++++++++++ 5 files changed, 200 insertions(+), 160 deletions(-) delete mode 100644 src/elements/play-export-dialog.test.ts delete mode 100644 src/elements/play-export-dialog.ts create mode 100644 src/elements/play-project-button.test.ts create mode 100644 src/elements/play-project-button.ts diff --git a/src/elements/play-export-dialog.test.ts b/src/elements/play-export-dialog.test.ts deleted file mode 100644 index e65fb02..0000000 --- a/src/elements/play-export-dialog.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {assert} from '@esm-bundle/chai' -import {PlayExportDialog} from './play-export-dialog.js' - -test('tag is defined', () => { - const el = document.createElement('play-export-dialog') - assert.instanceOf(el, PlayExportDialog) -}) diff --git a/src/elements/play-export-dialog.ts b/src/elements/play-export-dialog.ts deleted file mode 100644 index c5e9a73..0000000 --- a/src/elements/play-export-dialog.ts +++ /dev/null @@ -1,140 +0,0 @@ -import { - css, - type CSSResultGroup, - html, - LitElement, - type TemplateResult -} from 'lit' -import {customElement, property, query} from 'lit/decorators.js' -import type {PlayToast} from './play-toast.js' -import {PlayDialog} from './play-dialog/play-dialog.js' -import {cssReset} from '../utils/css-reset.js' - -import './play-button.js' -import './play-dialog/play-dialog.js' -import './play-toast.js' - -declare global { - interface HTMLElementTagNameMap { - 'play-export-dialog': PlayExportDialog - } -} - -@customElement('play-export-dialog') -export class PlayExportDialog extends LitElement { - static override readonly styles: CSSResultGroup = css` - ${cssReset} - - legend { - font-weight: bold; - } - - ol { - margin-bottom: 0; - padding-left: 0; - - /* Moves the numbers inside the element */ - list-style-position: inside; - } - - li { - margin-top: var(--space); - } - - pre { - overflow-y: auto; - margin-top: var(--space); - margin-bottom: var(--space); - word-break: break-all; - white-space: pre-line; - max-height: 100px; - font-family: var(--font-family-mono); - font-size: 14px; - line-height: 1.5; - background-color: var(--color-secondary-background); - color: inherit; - - border-bottom-left-radius: var(--radius); - border-bottom-right-radius: var(--radius); - border-top-left-radius: var(--radius); - border-top-right-radius: var(--radius); - - padding-left: var(--space); - padding-top: var(--space); - padding-right: var(--space); - padding-bottom: var(--space); - - margin-top: var(--space); - margin-bottom: var(--space); - } - - p, - li { - color: inherit; - /* RPL/Body Regular/14-BodyReg */ - font-family: var(--font-family-sans); - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 20px; - } - - a, - a:visited { - color: var(--color-link); - } - - a:hover { - color: var(--color-link-hovered); - } - ` - - @property() url: string = '' - - @query('play-toast') _toast!: PlayToast - - @query('play-dialog', true) - private _dialog!: PlayDialog - - open(): void { - this._dialog.open() - } - - close(): void { - this._dialog.close() - } - - protected override render(): TemplateResult { - const cmd = `devvit new --template='${this.url}'` - return html` -
    -
  1. - Install Node.js and the Devvit command-line tool. -
    2. -
  2. - Copy the new project command: - 
    ${cmd}
    - { - await navigator.clipboard.writeText(cmd) - this._toast.open() - }} - > -
    3. -
  3. Paste the command into a terminal and press enter.
    4. -
- - Copied the command!` - } -} diff --git a/src/elements/play-pen-header.ts b/src/elements/play-pen-header.ts index 0d2d23a..3dd33e3 100644 --- a/src/elements/play-pen-header.ts +++ b/src/elements/play-pen-header.ts @@ -10,15 +10,14 @@ import {defaultSettings} from '../storage/settings-save.js' import {Bubble} from '../utils/bubble.js' import {cssReset} from '../utils/css-reset.js' import {openURL} from '../utils/open-url.js' -import type {PlayExportDialog} from './play-export-dialog.js' import type {PlaySettingsDialog} from './play-settings-dialog.js' import type {PlayAssetsDialog} from './play-assets-dialog.js' import './play-button.js' -import './play-export-dialog.js' import './play-icon/play-icon.js' import './play-logo/play-logo.js' import './play-new-pen-button.js' +import './play-project-button.js' import './play-resizable-text-input.js' import './play-settings-dialog.js' import './play-assets-dialog.js' @@ -118,9 +117,6 @@ export class PlayPenHeader extends LitElement { @query('play-assets-dialog') private _assets!: PlayAssetsDialog - @query('play-export-dialog') - private _export!: PlayExportDialog - @query('play-settings-dialog') private _settings!: PlaySettingsDialog @@ -149,14 +145,11 @@ export class PlayPenHeader extends LitElement { label="Docs" @click=${() => openURL('https://developers.reddit.com/docs')} > this._export.open()} - > { + const el = document.createElement('play-project-button') + assert.instanceOf(el, PlayProjectButton) +}) diff --git a/src/elements/play-project-button.ts b/src/elements/play-project-button.ts new file mode 100644 index 0000000..1332507 --- /dev/null +++ b/src/elements/play-project-button.ts @@ -0,0 +1,187 @@ +import { + LitElement, + css, + html, + type CSSResultGroup, + type TemplateResult +} from 'lit' +import {customElement, property} from 'lit/decorators.js' +import {Bubble} from '../utils/bubble.js' + +import {cssReset} from '../utils/css-reset.js' +import './play-dropdown-menu.js' +import './play-icon/play-icon.js' +import './play-list-item.js' + +export type SizeOptions = 'small' | 'medium' +const iconSizes: {[key in SizeOptions]: string} = { + small: '16px', + medium: '20px' +} + +declare global { + interface HTMLElementEventMap { + 'edit-src': CustomEvent + } + interface HTMLElementTagNameMap { + 'play-project-button': PlayProjectButton + } +} + +@customElement('play-project-button') +export class PlayProjectButton extends LitElement { + static override readonly styles: CSSResultGroup = css` + ${cssReset} + + .container { + display: flex; + flex-direction: row; + column-gap: 0; + justify-content: space-between; + align-items: center; + box-shadow: inset 0px 0px 0px var(--border-width) + var(--color-secondary-border); + border-radius: var(--radius-full); + } + + button { + font-family: var(--font-family-sans); + color: var(--color-secondary-plain); + background-color: transparent; + border: none; + cursor: pointer; + } + + :host([size='small']) button { + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: -0.1px; + } + + :host([size='medium']) button { + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; + letter-spacing: -0.3px; + } + + .project-pen { + display: flex; + flex-direction: row; + } + + :host([size='small']) .project-pen { + column-gap: 8px; + padding-top: 8px; + padding-right: 8px; + padding-bottom: 8px; + padding-left: 12px; + border-top-left-radius: 16px; + border-bottom-left-radius: 16px; + } + + :host([size='medium']) .project-pen { + column-gap: 8px; + padding-top: 10px; + padding-right: 12px; + padding-bottom: 10px; + padding-left: 16px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + } + + :host([size='small']) .new-from-template { + padding-top: 8px; + padding-right: 8px; + padding-bottom: 8px; + padding-left: 8px; + border-top-right-radius: 16px; + border-bottom-right-radius: 16px; + } + + :host([size='medium']) .project-options { + padding-top: 10px; + padding-right: 10px; + padding-bottom: 10px; + padding-left: 8px; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + } + + .project-options:hover, + .project-template:hover { + background-color: var(--color-secondary-background-hovered); + } + + .project-pen:active, + .project-options:active { + background-color: var(--color-secondary-background-active); + } + + .project-pen:focus, + .project-options:focus { + outline-color: var(--color-brand-background); + } + + .divider { + width: 1px; + background-color: var(--color-secondary-background-decor); + } + + :host([size='small']) .divider { + height: 16px; + } + + :host([size='medium']) .divider { + height: 20px; + } + ` + + @property({attribute: false}) srcByLabel?: {readonly [key: string]: string} + @property() size: SizeOptions = 'medium' + + protected override render(): TemplateResult { + return html` +
+ +
+ +
+ +
+
+ + +
+ +
+ ` + } +} From 90d27da604fe7634e2554e23e9da22099af49d42 Mon Sep 17 00:00:00 2001 From: Emi Wu Date: Tue, 20 Aug 2024 14:20:28 -0400 Subject: [PATCH 2/5] yay --- src/elements/play-project-button.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/elements/play-project-button.ts b/src/elements/play-project-button.ts index 1332507..1a78192 100644 --- a/src/elements/play-project-button.ts +++ b/src/elements/play-project-button.ts @@ -149,9 +149,9 @@ export class PlayProjectButton extends LitElement {
- + + + + + + + + + this.dispatchEvent( + new CustomEvent('open-export-dialog', { + bubbles: true, + composed: true + }) + )} >
From b77def882e71eaeae76812e22f7a92c79001afd0 Mon Sep 17 00:00:00 2001 From: Emi Wu Date: Tue, 20 Aug 2024 16:05:28 -0400 Subject: [PATCH 4/5] adding different upload icon --- src/elements/play-icon/icons/icon-upload-outline.svg | 1 - src/elements/play-icon/icons/upload-outline.svg | 1 + src/elements/play-icon/play-icon.ts | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) delete mode 100644 src/elements/play-icon/icons/icon-upload-outline.svg create mode 100644 src/elements/play-icon/icons/upload-outline.svg diff --git a/src/elements/play-icon/icons/icon-upload-outline.svg b/src/elements/play-icon/icons/icon-upload-outline.svg deleted file mode 100644 index ad6c2a3..0000000 --- a/src/elements/play-icon/icons/icon-upload-outline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/elements/play-icon/icons/upload-outline.svg b/src/elements/play-icon/icons/upload-outline.svg new file mode 100644 index 0000000..8691190 --- /dev/null +++ b/src/elements/play-icon/icons/upload-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/elements/play-icon/play-icon.ts b/src/elements/play-icon/play-icon.ts index b5cc507..8fd63e0 100644 --- a/src/elements/play-icon/play-icon.ts +++ b/src/elements/play-icon/play-icon.ts @@ -35,7 +35,7 @@ import resizeHorizontalOutline from './icons/resize-horizontal-outline.svg' import restartOutline from './icons/restart-outline.svg' import shareNewOutline from './icons/share-new-outline.svg' import unmountOutline from './icons/unmount-outline.svg' -import uploadOutline from './icons/icon-upload-outline.svg' +import uploadOutline from './icons/upload-outline.svg' export type PlayIconSVG = keyof typeof icons From 738160e0e2a1531532b8844219270ac64097b60e Mon Sep 17 00:00:00 2001 From: Emi Wu Date: Wed, 21 Aug 2024 10:05:22 -0400 Subject: [PATCH 5/5] changing back to _export.open --- src/elements/play-pen-header.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/elements/play-pen-header.ts b/src/elements/play-pen-header.ts index bc82715..e12c7ba 100644 --- a/src/elements/play-pen-header.ts +++ b/src/elements/play-pen-header.ts @@ -23,6 +23,7 @@ import './play-resizable-text-input.js' import './play-settings-dialog.js' import './play-assets-dialog.js' import {type AssetsState, emptyAssetsState} from './play-assets/play-assets.js' +import type {PlayExportDialog} from './play-export-dialog.js' declare global { interface HTMLElementEventMap { @@ -118,12 +119,15 @@ export class PlayPenHeader extends LitElement { @query('play-assets-dialog') private _assets!: PlayAssetsDialog + @query('play-export-dialog') + private _export!: PlayExportDialog + @query('play-settings-dialog') private _settings!: PlaySettingsDialog protected override firstUpdated(): void { this.addEventListener('open-export-dialog', () => { - this.shadowRoot?.querySelector('play-export-dialog')?.open() + this._export.open() }) }