Et2Description: Fix missing styles from extending classes (Et2Url) while also keeping decrypt on hover working

This commit is contained in:
nathan 2022-04-20 16:23:53 -06:00
parent 234684061d
commit 416136dc24
3 changed files with 21 additions and 16 deletions

View File

@ -8,7 +8,7 @@
*/
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {css, html, LitElement} from "@lion/core";
import {css, html, LitElement, render} from "@lion/core";
import {et2_IDetachedDOM} from "../et2_core_interfaces";
import {activateLinks} from "../ActivateLinksDirective";
@ -19,15 +19,11 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
static get styles()
{
/**
* No styles for Et2Description due to how we're rendering content directly into light DOM
* anything added here won't work
*/
return [
...super.styles,
css`
:host {
white-space: pre-wrap;
white-space: pre-line;
}
:host a {
cursor: pointer;
@ -91,6 +87,17 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
this._handleClick = this._handleClick.bind(this);
}
connectedCallback()
{
super.connectedCallback();
// Put content directly in DOM
if(this.value)
{
render(this._renderContent(), this);
}
}
set_value(value)
{
this.value = value;
@ -125,7 +132,7 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
this.requestUpdate('value', oldValue);
}
render()
_renderContent()
{
let render = null;
@ -151,18 +158,16 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
{
render = html`${this._value}`;
}
return html`${render}`;
return render;
}
/**
* Put everything into the light DOM
* @returns {this}
*/
createRenderRoot()
render()
{
return this;
return html`
<slot></slot>`;
}
async firstUpdated()
{
this.removeEventListener('click.extra_link', this._handleClick);

View File

@ -47,7 +47,7 @@ const Et2InputWidgetMixin = (superclass) =>
static get styles()
{
return [
super.styles,
...super.styles,
css`
/* Needed so required can show through */
::slotted(input), input {

View File

@ -231,7 +231,7 @@ div.et2_hbox > div {
/**
* Label widget, and labels for other widgets
*/
.et2_label, et2-description {
.et2_label {
color: #101050;
white-space: pre-wrap;
}