From 2c2f7bdf4eedca3995b6877bf974c76a07ba8ef5 Mon Sep 17 00:00:00 2001
From: Emi Wu <169206128+wu-emi@users.noreply.github.com>
Date: Wed, 21 Aug 2024 12:00:12 -0400
Subject: [PATCH] Adding Project Menu to Play (#33)
---
package.json | 4 +-
.../play-icon/icons/upload-outline.svg | 1 +
src/elements/play-icon/play-icon.ts | 4 +-
src/elements/play-pen-header.ts | 22 +-
src/elements/play-project-button.test.ts | 7 +
src/elements/play-project-button.ts | 197 ++++++++++++++++++
6 files changed, 223 insertions(+), 12 deletions(-)
create mode 100644 src/elements/play-icon/icons/upload-outline.svg
create mode 100644 src/elements/play-project-button.test.ts
create mode 100644 src/elements/play-project-button.ts
diff --git a/package.json b/package.json
index 8cbc113..7feb650 100644
--- a/package.json
+++ b/package.json
@@ -60,8 +60,8 @@
"gzip": "3.5 KB"
},
"dist/play-pen.js": {
- "none": "31900 KB",
- "gzip": "5150 KB"
+ "none": "32100 KB",
+ "gzip": "5190 KB"
}
},
"typesVersions": {
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 2b25704..8fd63e0 100644
--- a/src/elements/play-icon/play-icon.ts
+++ b/src/elements/play-icon/play-icon.ts
@@ -35,6 +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/upload-outline.svg'
export type PlayIconSVG = keyof typeof icons
@@ -62,7 +63,8 @@ const icons = {
'resize-horizontal-outline': resizeHorizontalOutline,
'restart-outline': restartOutline,
'share-ios-outline': unmountOutline,
- 'share-new-outline': shareNewOutline
+ 'share-new-outline': shareNewOutline,
+ 'upload-outline': uploadOutline
}
declare global {
diff --git a/src/elements/play-pen-header.ts b/src/elements/play-pen-header.ts
index 0d2d23a..e12c7ba 100644
--- a/src/elements/play-pen-header.ts
+++ b/src/elements/play-pen-header.ts
@@ -10,7 +10,6 @@ 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'
@@ -19,10 +18,12 @@ 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'
import {type AssetsState, emptyAssetsState} from './play-assets/play-assets.js'
+import type {PlayExportDialog} from './play-export-dialog.js'
declare global {
interface HTMLElementEventMap {
@@ -124,6 +125,12 @@ export class PlayPenHeader extends LitElement {
@query('play-settings-dialog')
private _settings!: PlaySettingsDialog
+ protected override firstUpdated(): void {
+ this.addEventListener('open-export-dialog', () => {
+ this._export.open()
+ })
+ }
+
protected override render(): TemplateResult {
return html`
@@ -149,14 +156,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..fc2a29b
--- /dev/null
+++ b/src/elements/play-project-button.ts
@@ -0,0 +1,197 @@
+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`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ this.dispatchEvent(
+ new CustomEvent('open-export-dialog', {
+ bubbles: true,
+ composed: true
+ })
+ )}
+ >
+
+