Skip to content

Commit

Permalink
Merge pull request #63 from lightningrodlabs/feat/embed-bare
Browse files Browse the repository at this point in the history 
Add "bare" option to embed
  • Loading branch information
@matthme
matthme authored Aug 2, 2024
2 parents 84c658d + ac25b7f commit e255f1a
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 122 deletions.
37 changes: 26 additions & 11 deletions example/ui/src/applet-main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ export class AppletMain extends LitElement {
@query('#wal-embed-input-field')
walEmbedInputField!: HTMLInputElement;

@query('#wal-embed-bare-field')
walEmbedBareField!: HTMLInputElement;

@state()
mediumInterval: number | null = null;

Expand All @@ -58,6 +61,9 @@ export class AppletMain extends LitElement {
@state()
walEmbedLink: string = '';

@state()
bare: boolean = true;

@state()
groupPermissionType: GroupPermissionType | undefined;
// @state()
Expand Down Expand Up @@ -85,6 +91,10 @@ export class AppletMain extends LitElement {
this.walEmbedLink = this.walEmbedInputField.value;
}

updateWalEmbedBare() {
this.bare = this.walEmbedBareField.checked;
}

sendUrgentNotification(delay: number) {
const notification: FrameNotification = {
title: 'Title',
Expand Down Expand Up @@ -246,24 +256,29 @@ export class AppletMain extends LitElement {
<input id="wal-embed-input-field" type="text" rows="4" cols="50" />
<button
@click=${() => {
this.updateWalEmbedBare();
this.updateWalEmbedLink();
}}
style="width: 100px; margin-left: 5px;"
>
Embed
</button>
</div>
${this.walEmbedLink !== ''
? html`
<wal-embed
style="margin-top: 20px;"
.src=${this.walEmbedLink}
closable
@open-in-sidebar=${() => console.log('Opening in sidebar')}
@close=${() => console.log('Closing requested')}
></wal-embed>
`
: html``}
<input id="wal-embed-bare-field" type="checkbox">bare embed</input>
${
this.walEmbedLink !== ''
? html`
<wal-embed
style="margin-top: 20px;"
.src=${this.walEmbedLink}
?bare=${this.bare}
closable
@open-in-sidebar=${() => console.log('Opening in sidebar')}
@close=${() => console.log('Closing requested')}
></wal-embed>
`
: html``
}
</div>
</div>
<div class="row" style="flex-wrap: wrap;">
Expand Down
232 changes: 121 additions & 111 deletions libs/we-elements/src/elements/wal-embed.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ export class WalEmbed extends LitElement {
@property({ type: Boolean })
collapsed = false;

@property({ type: Boolean })
bare = false;

@state()
assetStatus: AssetStatus = { type: 'loading' };

Expand Down Expand Up @@ -125,6 +128,117 @@ export class WalEmbed extends LitElement {
}
}

renderHeader() {
return html`
<div class="top-bar row" style="align-items: center;">
${this.assetStatus.type === 'success'
? html`
<div class="row" style="align-items: center;">
<div class="row">
<sl-icon
style="font-size: 24px;"
.src=${this.assetStatus.assetInfo.assetInfo.icon_src}
></sl-icon>
</div>
<div
class="column"
style="font-size: 18px; margin-left: 3px; height: 20px; overflow: hidden;"
title=${this.assetStatus.assetInfo.assetInfo.name}
>
${this.assetStatus.assetInfo.assetInfo.name}
</div>
</div>
`
: html``}
<span style="display: flex; flex: 1;"></span>
${this.appletInfo
? html`
<div
class="row"
style="align-items: center; ${this.groupProfiles
? 'border-right: 2px solid black;'
: ''}"
>
<sl-tooltip .content=${this.appletInfo.appletName}>
<img
style="height: 26px; margin-right: 4px; border-radius: 3px;"
.src=${this.appletInfo.appletIcon}
/>
</sl-tooltip>
</div>
`
: html``}
${this.groupProfiles
? html` <div class="row" style="align-items: center; margin-left: 4px;">
${Array.from(this.groupProfiles.values()).map(
(groupProfile) => html`
<sl-tooltip .content=${groupProfile.name}>
<img
src=${groupProfile.icon_src}
style="height: 26px; width: 26px; border-radius: 50%; margin-right: 2px;"
/>
</sl-tooltip>
`,
)}
</div>`
: html``}
${this.collapsable
? html`
<sl-tooltip .content=${msg(this.collapsed ? 'Expand' : 'Collapse')}>
<div
class="column center-content open-btn"
tabindex="0"
@click=${async () => await this.toggleCollapse()}
@keypress=${async (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
await this.toggleCollapse();
}
}}
>
<sl-icon
.src=${wrapPathInSvg(this.collapsed ? mdiArrowExpand : mdiArrowCollapse)}
style="font-size: 24px;"
></sl-icon>
</div>
</sl-tooltip>
`
: ''}
<sl-tooltip .content=${msg('Open in sidebar')}>
<div
class="column center-content open-btn"
tabindex="0"
@click=${async () => await this.openInSidebar()}
@keypress=${async (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
await this.openInSidebar();
}
}}
>
<sl-icon .src=${wrapPathInSvg(mdiOpenInNew)} style="font-size: 24px;"></sl-icon>
</div>
</sl-tooltip>
${this.closable
? html`
<sl-tooltip .content=${msg('Close')}>
<div
class="column center-content close-btn"
tabindex="0"
@click=${async () => await this.emitClose()}
@keypress=${async (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
await this.emitClose();
}
}}
>
<sl-icon .src=${wrapPathInSvg(mdiClose)} style="font-size: 24px;"></sl-icon>
</div>
</sl-tooltip>
`
: html``}
</div>
`;
}

renderContent() {
switch (this.assetStatus.type) {
case 'not found':
Expand Down Expand Up @@ -159,117 +273,13 @@ export class WalEmbed extends LitElement {
}

render() {
return html`
<div class="container">
<div class="top-bar row" style="align-items: center;">
${this.assetStatus.type === 'success'
? html`
<div class="row" style="align-items: center;">
<div class="row">
<sl-icon
style="font-size: 24px;"
.src=${this.assetStatus.assetInfo.assetInfo.icon_src}
></sl-icon>
</div>
<div
class="column"
style="font-size: 18px; margin-left: 3px; height: 20px; overflow: hidden;"
title=${this.assetStatus.assetInfo.assetInfo.name}
>
${this.assetStatus.assetInfo.assetInfo.name}
</div>
</div>
`
: html``}
<span style="display: flex; flex: 1;"></span>
${this.appletInfo
? html`
<div
class="row"
style="align-items: center; ${this.groupProfiles
? 'border-right: 2px solid black;'
: ''}"
>
<sl-tooltip .content=${this.appletInfo.appletName}>
<img
style="height: 26px; margin-right: 4px; border-radius: 3px;"
.src=${this.appletInfo.appletIcon}
/>
</sl-tooltip>
</div>
`
: html``}
${this.groupProfiles
? html` <div class="row" style="align-items: center; margin-left: 4px;">
${Array.from(this.groupProfiles.values()).map(
(groupProfile) => html`
<sl-tooltip .content=${groupProfile.name}>
<img
src=${groupProfile.icon_src}
style="height: 26px; width: 26px; border-radius: 50%; margin-right: 2px;"
/>
</sl-tooltip>
`,
)}
</div>`
: html``}
${this.collapsable
? html`
<sl-tooltip .content=${msg(this.collapsed ? 'Expand' : 'Collapse')}>
<div
class="column center-content open-btn"
tabindex="0"
@click=${async () => await this.toggleCollapse()}
@keypress=${async (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
await this.toggleCollapse();
}
}}
>
<sl-icon
.src=${wrapPathInSvg(this.collapsed ? mdiArrowExpand : mdiArrowCollapse)}
style="font-size: 24px;"
></sl-icon>
</div>
</sl-tooltip>
`
: ''}
<sl-tooltip .content=${msg('Open in sidebar')}>
<div
class="column center-content open-btn"
tabindex="0"
@click=${async () => await this.openInSidebar()}
@keypress=${async (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
await this.openInSidebar();
}
}}
>
<sl-icon .src=${wrapPathInSvg(mdiOpenInNew)} style="font-size: 24px;"></sl-icon>
</div>
</sl-tooltip>
${this.closable
? html`
<sl-tooltip .content=${msg('Close')}>
<div
class="column center-content close-btn"
tabindex="0"
@click=${async () => await this.emitClose()}
@keypress=${async (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
await this.emitClose();
}
}}
>
<sl-icon .src=${wrapPathInSvg(mdiClose)} style="font-size: 24px;"></sl-icon>
</div>
</sl-tooltip>
`
: html``}
</div>
${this.collapsed ? '' : this.renderContent()}
</div>
`;
return this.bare
? this.renderContent()
: html`
<div class="container">
${this.renderHeader()} ${this.collapsed ? '' : this.renderContent()}
</div>
`;
}

static styles = [
Expand Down

0 comments on commit e255f1a

Please sign in to comment.