Fixing ShadowDOM situation with CSS
This commit is contained in:
Mehdi Benadel
parent
de974eae22
commit
fb3a5d26aa
@ -47,7 +47,7 @@
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-buttons-cloned {
|
||||
// Hidding buttons when cloned by the ConverseJS mini-muc-head plugin.
|
||||
// Hiding buttons when cloned by the ConverseJS mini-muc-head plugin.
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -3,16 +3,15 @@ import { html, LitElement } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import { ptTr } from '../directives/translation'
|
||||
import './dynamic-table-form'
|
||||
import './plugin-configuration-row'
|
||||
import './configuration-row'
|
||||
import './help-button'
|
||||
import { Task } from '@lit/task';
|
||||
import type { ChannelConfiguration } from 'shared/lib/types'
|
||||
import { ChannelDetailsService } from '../services/channel-details'
|
||||
import { provide } from '@lit/context'
|
||||
import { getGlobalStyleSheets } from '../../global-styles'
|
||||
import { channelConfigurationContext, channelDetailsServiceContext, registerClientOptionsContext } from '../contexts/channel'
|
||||
|
||||
@customElement('channel-configuration')
|
||||
@customElement('livechat-channel-configuration')
|
||||
export class ChannelConfigurationElement extends LitElement {
|
||||
|
||||
@provide({ context: registerClientOptionsContext })
|
||||
@ -29,16 +28,16 @@ export class ChannelConfigurationElement extends LitElement {
|
||||
@provide({ context: channelDetailsServiceContext })
|
||||
private _channelDetailsService: ChannelDetailsService | undefined
|
||||
|
||||
static styles = [
|
||||
...getGlobalStyleSheets()
|
||||
];
|
||||
protected createRenderRoot = (): HTMLElement | DocumentFragment => {
|
||||
return this
|
||||
}
|
||||
|
||||
@state()
|
||||
public _formStatus: boolean | any = undefined
|
||||
|
||||
private _asyncTaskRender = new Task(this, {
|
||||
|
||||
task: async ([registerClientOptions], {signal}) => {
|
||||
task: async ([registerClientOptions], { signal }) => {
|
||||
if (this.registerClientOptions) {
|
||||
this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
|
||||
this._channelConfiguration = await this._channelDetailsService.fetchConfiguration(this.channelId ?? 0)
|
||||
@ -50,18 +49,18 @@ export class ChannelConfigurationElement extends LitElement {
|
||||
});
|
||||
|
||||
private _saveConfig = () => {
|
||||
if(this._channelDetailsService && this._channelConfiguration) {
|
||||
if (this._channelDetailsService && this._channelConfiguration) {
|
||||
this._channelDetailsService.saveOptions(this._channelConfiguration.channel.id, this._channelConfiguration.configuration)
|
||||
.then((value) => {
|
||||
this._formStatus = { success: true }
|
||||
console.log(`Configuration has been updated`)
|
||||
this.requestUpdate('_formStatus')
|
||||
})
|
||||
.catch((error) => {
|
||||
this._formStatus = error
|
||||
console.log(`An error occurred : ${JSON.stringify(this._formStatus)}`)
|
||||
this.requestUpdate('_formStatus')
|
||||
});
|
||||
.then((value) => {
|
||||
this._formStatus = { success: true }
|
||||
console.log(`Configuration has been updated`)
|
||||
this.requestUpdate('_formStatus')
|
||||
})
|
||||
.catch((error) => {
|
||||
this._formStatus = error
|
||||
console.log(`An error occurred : ${JSON.stringify(this._formStatus)}`)
|
||||
this.requestUpdate('_formStatus')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -181,142 +180,178 @@ export class ChannelConfigurationElement extends LitElement {
|
||||
<span>${this._channelConfiguration?.channel.displayName}</span>
|
||||
<span>${this._channelConfiguration?.channel.name}</span>
|
||||
</span>
|
||||
<help-button .page="documentation/user/streamers/channel">
|
||||
</help-button>
|
||||
<livechat-help-button .page="documentation/user/streamers/channel">
|
||||
</livechat-help-button>
|
||||
</h1>
|
||||
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}</p>
|
||||
<form livechat-configuration-channel-options role="form">
|
||||
<div class="row mt-3">
|
||||
<plugin-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
|
||||
.helpPage=${"documentation/user/streamers/slow_mode"}>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="number"
|
||||
name="slow_mode_duration"
|
||||
class="form-control"
|
||||
min="0"
|
||||
max="1000"
|
||||
id="peertube-livechat-slow-mode-duration"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.slowMode.duration = Number((event.target as HTMLInputElement).value)
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
value="${this._channelConfiguration?.configuration.slowMode.duration}"
|
||||
/>
|
||||
</label>
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
|
||||
.helpPage=${"documentation/user/streamers/slow_mode"}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
</plugin-configuration-row>
|
||||
<plugin-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
|
||||
.description=${''}
|
||||
.helpPage=${"documentation/user/streamers/channel"}>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="bot"
|
||||
id="peertube-livechat-bot"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.bot.enabled = (event.target as HTMLInputElement).checked
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="number"
|
||||
name="slow_mode_duration"
|
||||
class="form-control"
|
||||
min="0"
|
||||
max="1000"
|
||||
id="peertube-livechat-slow-mode-duration"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.slowMode.duration = Number((event.target as HTMLInputElement).value)
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
}
|
||||
.value=${this._channelConfiguration?.configuration.bot.enabled}
|
||||
?checked=${this._channelConfiguration?.configuration.bot.enabled}
|
||||
/>
|
||||
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
|
||||
</label>
|
||||
value="${this._channelConfiguration?.configuration.slowMode.duration}"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
${this._channelConfiguration?.configuration.bot.enabled ?
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
|
||||
.description=${''}
|
||||
.helpPage=${"documentation/user/streamers/channel"}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="bot"
|
||||
id="peertube-livechat-bot"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.bot.enabled = (event.target as HTMLInputElement).checked
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
.value=${this._channelConfiguration?.configuration.bot.enabled}
|
||||
?checked=${this._channelConfiguration?.configuration.bot.enabled}
|
||||
/>
|
||||
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
|
||||
</label>
|
||||
</div>
|
||||
${this._channelConfiguration?.configuration.bot.enabled ?
|
||||
html`<div class="form-group">
|
||||
<label for="peertube-livechat-bot-nickname">${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="bot_nickname"
|
||||
class="form-control"
|
||||
id="peertube-livechat-bot-nickname"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.bot.nickname = (event.target as HTMLInputElement).value
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
<label for="peertube-livechat-bot-nickname">${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}</label>
|
||||
<input
|
||||
type="text"
|
||||
name="bot_nickname"
|
||||
class="form-control"
|
||||
id="peertube-livechat-bot-nickname"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.bot.nickname = (event.target as HTMLInputElement).value
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
}
|
||||
value="${this._channelConfiguration?.configuration.bot.nickname}"
|
||||
/>
|
||||
</div>`
|
||||
value="${this._channelConfiguration?.configuration.bot.nickname}"
|
||||
/>
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
</plugin-configuration-row>
|
||||
</div>
|
||||
</div>
|
||||
${this._channelConfiguration?.configuration.bot.enabled ?
|
||||
html`<plugin-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/forbidden_words"}>
|
||||
<dynamic-table-form
|
||||
.header=${tableHeaderList.forbiddenWords}
|
||||
.schema=${tableSchema.forbiddenWords}
|
||||
.rows=${this._channelConfiguration?.configuration.bot.forbiddenWords}
|
||||
@update=${(e: CustomEvent) => {
|
||||
if (this._channelConfiguration) this._channelConfiguration.configuration.bot.forbiddenWords = e.detail
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
html`<div class="row mt-5">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/forbidden_words"}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<livechat-dynamic-table-form
|
||||
.header=${tableHeaderList.forbiddenWords}
|
||||
.schema=${tableSchema.forbiddenWords}
|
||||
.rows=${this._channelConfiguration?.configuration.bot.forbiddenWords}
|
||||
@update=${(e: CustomEvent) => {
|
||||
if (this._channelConfiguration) {
|
||||
this._channelConfiguration.configuration.bot.forbiddenWords = e.detail
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.formName=${'forbidden-words'}>
|
||||
</dynamic-table-form>
|
||||
</plugin-configuration-row>
|
||||
<plugin-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/quotes"}>
|
||||
<dynamic-table-form
|
||||
.formName=${'forbidden-words'}>
|
||||
</livechat-dynamic-table-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/quotes"}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<livechat-dynamic-table-form
|
||||
.header=${tableHeaderList.quotes}
|
||||
.schema=${tableSchema.quotes}
|
||||
.rows=${this._channelConfiguration?.configuration.bot.quotes}
|
||||
@update=${(e: CustomEvent) => {
|
||||
if (this._channelConfiguration) this._channelConfiguration.configuration.bot.quotes = e.detail
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
if (this._channelConfiguration) {
|
||||
this._channelConfiguration.configuration.bot.quotes = e.detail
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
}
|
||||
.formName=${'quote'}>
|
||||
</dynamic-table-form>
|
||||
</plugin-configuration-row>
|
||||
<plugin-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/commands"}>
|
||||
<dynamic-table-form
|
||||
</livechat-dynamic-table-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/commands"}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<livechat-dynamic-table-form
|
||||
.header=${tableHeaderList.commands}
|
||||
.schema=${tableSchema.commands}
|
||||
.rows=${this._channelConfiguration?.configuration.bot.commands}
|
||||
@update=${(e: CustomEvent) => {
|
||||
if (this._channelConfiguration) this._channelConfiguration.configuration.bot.commands = e.detail
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
if (this._channelConfiguration) {
|
||||
this._channelConfiguration.configuration.bot.commands = e.detail
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
}
|
||||
.formName=${'command'}>
|
||||
</dynamic-table-form>
|
||||
</plugin-configuration-row>`
|
||||
</livechat-dynamic-table-form>
|
||||
</div>
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
<div class="form-group mt-5">
|
||||
<button type="button" class="orange-button" @click=${this._saveConfig}>${ptTr(LOC_SAVE)}</button>
|
||||
</div>
|
||||
${(this._formStatus && this._formStatus.success === undefined) ?
|
||||
html`<div class="alert alert-warning" role="alert">
|
||||
An error occurred : ${JSON.stringify(this._formStatus)}
|
||||
</div>`
|
||||
html`<div class="alert alert-warning" role="alert">
|
||||
An error occurred : ${JSON.stringify(this._formStatus)}
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
${(this._formStatus && this._formStatus.success === true) ?
|
||||
html`<div class="alert alert-success" role="alert">
|
||||
Configuration has been updated
|
||||
</div>`
|
||||
html`<div class="alert alert-success" role="alert">
|
||||
Configuration has been updated
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
</form>
|
||||
|
||||
@ -7,10 +7,9 @@ import { Task } from '@lit/task';
|
||||
import type { ChannelLiveChatInfos } from 'shared/lib/types'
|
||||
import { ChannelDetailsService } from '../services/channel-details'
|
||||
import { provide } from '@lit/context'
|
||||
import { getGlobalStyleSheets } from '../../global-styles'
|
||||
import { channelDetailsServiceContext, registerClientOptionsContext } from '../contexts/channel'
|
||||
|
||||
@customElement('channel-home')
|
||||
@customElement('livechat-channel-home')
|
||||
export class ChannelHomeElement extends LitElement {
|
||||
|
||||
@provide({ context: registerClientOptionsContext })
|
||||
@ -23,9 +22,9 @@ export class ChannelHomeElement extends LitElement {
|
||||
@provide({ context: channelDetailsServiceContext })
|
||||
private _channelDetailsService: ChannelDetailsService | undefined
|
||||
|
||||
static styles = [
|
||||
...getGlobalStyleSheets()
|
||||
];
|
||||
protected createRenderRoot = (): HTMLElement | DocumentFragment => {
|
||||
return this
|
||||
}
|
||||
|
||||
@state()
|
||||
public _formStatus: boolean | any = undefined
|
||||
@ -55,8 +54,8 @@ export class ChannelHomeElement extends LitElement {
|
||||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
|
||||
<h1>
|
||||
${ptTr(LOC_LIVECHAT_CONFIGURATION_TITLE)}
|
||||
<help-button .page="documentation/user/streamers/channel">
|
||||
</help-button>
|
||||
<livechat-help-button .page="documentation/user/streamers/channel">
|
||||
</livechat-help-button>
|
||||
</h1>
|
||||
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_DESC)}</p>
|
||||
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_PLEASE_SELECT)}</p>
|
||||
|
||||
29
client/common/configuration/elements/configuration-row.ts
Normal file
29
client/common/configuration/elements/configuration-row.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { html, LitElement } from 'lit'
|
||||
import { customElement, property } from 'lit/decorators.js'
|
||||
import './help-button'
|
||||
|
||||
@customElement('livechat-configuration-row')
|
||||
export class ConfigurationRowElement extends LitElement {
|
||||
|
||||
@property({ attribute: false })
|
||||
public title: string = `title`
|
||||
|
||||
@property({ attribute: false })
|
||||
public description: string = `Here's a description`
|
||||
|
||||
@property({ attribute: false })
|
||||
public helpPage: string = 'documentation'
|
||||
|
||||
protected createRenderRoot = (): HTMLElement | DocumentFragment => {
|
||||
return this
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h2>${this.title}</h2>
|
||||
<p>${this.description}</p>
|
||||
<livechat-help-button .page=${this.helpPage}>
|
||||
</livechat-help-button>
|
||||
`
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,6 @@ import { css, html, LitElement, nothing, TemplateResult } from 'lit'
|
||||
import { repeat } from 'lit/directives/repeat.js'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import { ifDefined } from 'lit/directives/if-defined.js'
|
||||
import { getGlobalStyleSheets } from '../../global-styles'
|
||||
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
|
||||
|
||||
// This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
|
||||
@ -57,7 +56,7 @@ interface CellDataSchema {
|
||||
default?: DynamicTableAcceptedTypes
|
||||
}
|
||||
|
||||
@customElement('dynamic-table-form')
|
||||
@customElement('livechat-dynamic-table-form')
|
||||
export class DynamicTableFormElement extends LitElement {
|
||||
|
||||
@property({ attribute: false })
|
||||
@ -82,37 +81,47 @@ export class DynamicTableFormElement extends LitElement {
|
||||
@property({ attribute: false })
|
||||
private _colOrder: string[] = []
|
||||
|
||||
static styles = [
|
||||
...getGlobalStyleSheets(),
|
||||
css`
|
||||
:host table {
|
||||
static styles = css`
|
||||
table {
|
||||
table-layout: fixed;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host table td, table th {
|
||||
table td, table th {
|
||||
word-wrap:break-word;
|
||||
vertical-align: top;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
|
||||
:host table tbody > :nth-child(odd) {
|
||||
table tbody > :nth-child(odd) {
|
||||
background-color: var(--greySecondaryBackgroundColor);
|
||||
}
|
||||
|
||||
:host button {
|
||||
button {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
:host .dynamic-table-add-row {
|
||||
.dynamic-table-add-row {
|
||||
background-color: var(--bs-green);
|
||||
}
|
||||
|
||||
:host .dynamic-table-remove-row {
|
||||
.dynamic-table-remove-row {
|
||||
background-color: var(--bs-orange);
|
||||
}
|
||||
`
|
||||
];
|
||||
`;
|
||||
|
||||
protected createRenderRoot = (): HTMLElement | DocumentFragment => {
|
||||
if (document.head.querySelector(`style[data-tagname="${this.tagName}"]`)) {
|
||||
return this;
|
||||
}
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = DynamicTableFormElement.styles.toString();
|
||||
style.setAttribute("data-tagname", this.tagName);
|
||||
document.head.append(style);
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
// fixes situations when list has been reinitialized or changed outside of CustomElement
|
||||
private _updateLastRowId = () => {
|
||||
@ -197,7 +206,7 @@ export class DynamicTableFormElement extends LitElement {
|
||||
${Object.entries(rowData.row).filter(([k, v]) => k != '_id')
|
||||
.sort(([k1,_1], [k2,_2]) => this._colOrder.indexOf(k1) - this._colOrder.indexOf(k2))
|
||||
.map((data) => this.renderDataCell(data, rowData._id))}
|
||||
<td class="form-group"><button class="btn dynamic-table-remove-row" @click=${() => this._removeRow(rowData._id)}>${unsafeHTML(RemoveSVG)}</button></td>
|
||||
<td class="form-group"><button type="button" class="btn dynamic-table-remove-row" @click=${() => this._removeRow(rowData._id)}>${unsafeHTML(RemoveSVG)}</button></td>
|
||||
</tr>`
|
||||
|
||||
}
|
||||
@ -206,7 +215,7 @@ export class DynamicTableFormElement extends LitElement {
|
||||
return html`<tfoot>
|
||||
<tr>
|
||||
${Object.values(this.header).map(() => html`<td></td>`)}
|
||||
<td><button class="btn dynamic-table-add-row" @click=${this._addRow}>${unsafeHTML(AddSVG)}</button></td>
|
||||
<td><button type="button" class="btn dynamic-table-add-row" @click=${this._addRow}>${unsafeHTML(AddSVG)}</button></td>
|
||||
</tr>
|
||||
</tfoot>`
|
||||
}
|
||||
|
||||
@ -9,12 +9,11 @@ import { Task } from '@lit/task'
|
||||
import { localizedHelpUrl } from '../../../utils/help'
|
||||
import { ptTr } from '../directives/translation'
|
||||
import { DirectiveResult } from 'lit/directive'
|
||||
import { getGlobalStyleSheets } from '../../global-styles'
|
||||
|
||||
@customElement('help-button')
|
||||
@customElement('livechat-help-button')
|
||||
export class HelpButtonElement extends LitElement {
|
||||
|
||||
@consume({context: registerClientOptionsContext})
|
||||
@consume({ context: registerClientOptionsContext, subscribe: true })
|
||||
public registerClientOptions: RegisterClientOptions | undefined
|
||||
|
||||
@property({ attribute: false })
|
||||
@ -26,9 +25,9 @@ export class HelpButtonElement extends LitElement {
|
||||
@state()
|
||||
public url: URL = new URL('https://lmddgtfy.net/')
|
||||
|
||||
static styles = [
|
||||
...getGlobalStyleSheets()
|
||||
];
|
||||
protected createRenderRoot = (): HTMLElement | DocumentFragment => {
|
||||
return this
|
||||
}
|
||||
|
||||
private _asyncTaskRender = new Task(this, {
|
||||
task: async ([registerClientOptions], {signal}) => {
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import { html, LitElement } from 'lit'
|
||||
import { customElement, property } from 'lit/decorators.js'
|
||||
import './help-button'
|
||||
import { getGlobalStyleSheets } from '../../global-styles'
|
||||
|
||||
@customElement('plugin-configuration-row')
|
||||
export class PluginConfigurationRowElement extends LitElement {
|
||||
|
||||
@property({ attribute: false })
|
||||
public title: string = `title`
|
||||
|
||||
@property({ attribute: false })
|
||||
public description: string = `Here's a description`
|
||||
|
||||
@property({ attribute: false })
|
||||
public helpPage: string = 'documentation'
|
||||
|
||||
static styles = [
|
||||
...getGlobalStyleSheets()
|
||||
];
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<h2>${this.title}</h2>
|
||||
<p>${this.description}</p>
|
||||
<help-button .page=${this.helpPage}>
|
||||
</help-button>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
<slot><p>Nothing in this row.</p></slot>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
@ -20,7 +20,7 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
|
||||
registerClientRoute({
|
||||
route: 'livechat/configuration',
|
||||
onMount: async ({ rootEl }) => {
|
||||
render(html`<channel-home .registerClientOptions=${clientOptions}></channel-home>`, rootEl)
|
||||
render(html`<livechat-channel-home .registerClientOptions=${clientOptions}></livechat-channel-home>`, rootEl)
|
||||
}
|
||||
})
|
||||
|
||||
@ -29,8 +29,8 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
|
||||
onMount: async ({ rootEl }) => {
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
const channelId = urlParams.get('channelId') ?? ''
|
||||
render(html`<channel-configuration .registerClientOptions=${clientOptions}
|
||||
.channelId=${channelId}></channel-configuration>`, rootEl)
|
||||
render(html`<livechat-channel-configuration .registerClientOptions=${clientOptions}
|
||||
.channelId=${channelId}></livechat-channel-configuration>`, rootEl)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user