- ${this.label ? html`
${this.label}
` : html``}
+
{
+ return html`
+
+ `;
+}
\ No newline at end of file
diff --git a/ts_web/elements/dees-label.ts b/ts_web/elements/dees-label.ts
new file mode 100644
index 0000000..80ef4d9
--- /dev/null
+++ b/ts_web/elements/dees-label.ts
@@ -0,0 +1,70 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+
+import {
+ customElement,
+ html,
+ css,
+ cssManager,
+ DeesElement,
+ property,
+ unsafeCSS,
+ query,
+} from '@design.estate/dees-element';
+
+import { demoFunc } from './dees-label.demo.js';
+
+@customElement('dees-label')
+export class DeesLabel extends DeesElement {
+ public static demo = demoFunc;
+
+ // INSTANCE
+
+ @property({
+ type: String,
+ reflect: true,
+ })
+ public label = '';
+
+ @property({
+ type: String,
+ reflect: true,
+ })
+ public description: string;
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ .label {
+ color: ${cssManager.bdTheme('#333', '#ccc')};
+ font-size: 14px;
+ margin-bottom: 8px;
+ cursor: default;
+ user-select: none;
+ }
+ dees-icon {
+ display: inline-block;
+ font-size: 14px;
+ transform: translateY(1.5px);
+ }
+ `,
+ ];
+
+ public render() {
+ return html`
+ ${this.label
+ ? html`
+
+ ${this.label}
+ ${this.description
+ ? html`
+
+
+ `
+ : html``}
+
+ `
+ : html``}
+ `;
+ }
+}
diff --git a/ts_web/elements/dees-speechbubble.demo.ts b/ts_web/elements/dees-speechbubble.demo.ts
new file mode 100644
index 0000000..408502d
--- /dev/null
+++ b/ts_web/elements/dees-speechbubble.demo.ts
@@ -0,0 +1,23 @@
+import { html, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+ return html`
+
+
+
+ `;
+};
\ No newline at end of file
diff --git a/ts_web/elements/dees-speechbubble.ts b/ts_web/elements/dees-speechbubble.ts
index 47269d2..2edfbaa 100644
--- a/ts_web/elements/dees-speechbubble.ts
+++ b/ts_web/elements/dees-speechbubble.ts
@@ -1,3 +1,7 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
+import { demoFunc } from './dees-speechbubble.demo.js';
import {
customElement,
html,
@@ -8,9 +12,11 @@ import {
css,
type CSSResult,
unsafeCSS,
+ domtools,
+ directives,
+ unsafeHTML,
} from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
+import { DeesWindowLayer } from './dees-windowlayer.js';
declare global {
interface HTMLElementTagNameMap {
@@ -20,26 +26,53 @@ declare global {
@customElement('dees-speechbubble')
export class DeesSpeechbubble extends DeesElement {
- public static demo = () => html`
`;
+ public static demo = demoFunc;
- @property()
+ // STATIC
+ public static async createAndShow(refElement: HTMLElement, textArg: string) {
+ const windowLayer = await DeesWindowLayer.createAndShow({
+ blur: false,
+ });
+ const speechbubble = document.createElement('dees-speechbubble');
+ speechbubble.windowLayer = windowLayer;
+ speechbubble.reffedElement = refElement;
+ speechbubble.text = textArg;
+ speechbubble.manifested = true;
+ windowLayer.appendChild(speechbubble);
+ windowLayer.style.pointerEvents = 'none';
+ (windowLayer.shadowRoot.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
+ return speechbubble;
+ }
+
+ // INSTANCE
+ @property({
+ type: Object,
+ })
+ reffedElement: HTMLElement;
+
+ @property({
+ type: String,
+ reflect: true,
+ })
public text: string;
@property({
type: Boolean,
})
- public disabled = false;
+ public wave: boolean = false;
@property({
type: Boolean,
})
- public isHidden = false;
+ public manifested = false;
@property({
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+ public windowLayer: DeesWindowLayer;
+
constructor() {
super();
}
@@ -48,27 +81,22 @@ export class DeesSpeechbubble extends DeesElement {
cssManager.defaultStyles,
css`
:host {
- position: relative;
- display: block;
box-sizing: border-box;
color: ${cssManager.bdTheme('#333', '#fff')};
user-select: none;
}
- :host([hidden]) {
- display: none;
- }
.maincontainer {
+ position: relative;
will-change: transform;
transition: transform 0.2s;
transform: translateX(0px);
- position: relative;
transition: all 0.2s;
margin-left: 0px;
- }
-
- .maincontainer:hover {
- transform: translateX(3px);
+ filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
+ pointer-events: none;
+ opacity: 0;
+ transition: all 0.2s;
}
.arrow {
@@ -77,17 +105,17 @@ export class DeesSpeechbubble extends DeesElement {
background: ${cssManager.bdTheme('#fff', '#333')};
height: 15px;
width: 15px;
- left: 4px;
- top: 5px;
- border-radius: 2px;
+ left: 2px;
+ top: 12px;
+ border-radius: 3px;
}
.speechbubble {
background: ${cssManager.bdTheme('#fff', '#333')};
- padding: 0px 10px;
+ padding: 0px 16px;
border-radius: 3px;
position: absolute;
- line-height: 25px;
+ min-width: 240px;
font-size: 12px;
top: 0px;
left: 8px;
@@ -132,25 +160,70 @@ export class DeesSpeechbubble extends DeesElement {
public render(): TemplateResult {
return html`
-
-
-
👋 We build with launch.sh, and you can too.
-
+ ${this.manifested
+ ? html`
+
+
+
+ ${this.wave ? html`👋` : html``}
+ ${directives.resolve(this.getHtml())}
+
+
+ `
+ : html``}
`;
}
public async handleClick() {
- if (this.disabled) {
- return;
- }
-
- globalThis.location.href = "https://launch.sh"
+ console.log('speechbubble got clicked.');
}
public async firstUpdated() {
- if (!this.textContent) {
- this.textContent = 'Button';
- this.performUpdate();
+ // lets make sure we have a ref
+ if (!this.reffedElement) {
+ this.reffedElement = this.previousElementSibling as HTMLElement;
+ }
+ if (this.manifested) {
+ await this.updatePosition();
+ (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
+ } else {
+ // lets make sure we instrument it
+ let speechbubble: DeesSpeechbubble;
+ this.reffedElement.addEventListener('mouseenter', async () => {
+ speechbubble = await DeesSpeechbubble.createAndShow(this.reffedElement, this.text);
+ });
+ this.reffedElement.addEventListener('mouseleave', () => {
+ speechbubble.destroy();
+ });
}
}
+
+ public async updatePosition() {
+ const refElement = this.reffedElement;
+ const boundingClientRect = refElement.getBoundingClientRect();
+ this.style.position = 'fixed';
+ this.style.top = `${boundingClientRect.top - 13}px`;
+ this.style.left = `${boundingClientRect.left + refElement.clientWidth + 4}px`;
+ if (boundingClientRect.right > 250) {
+ this.style.width = `250px`;
+ }
+ }
+
+ public async getHtml(): Promise
{
+ if (!this.text) {
+ return '';
+ }
+ const normalized = domtools.plugins.smartstring.normalize.standard(this.text);
+ const result = await domtools.plugins.smartmarkdown.SmartMarkdown.easyMarkdownToHtml(
+ normalized
+ );
+ return unsafeHTML(result);
+ }
+
+ public async show() {}
+
+ public async destroy() {
+ (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
+ this.windowLayer.destroy();
+ }
}
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index 2068dc3..8bb8264 100644
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -218,6 +218,12 @@ export class DeesTable extends DeesElement {
margin-right: 8px;
}
+ .searchGrid {
+ display: grid;
+ grid-gap: 16px;
+ grid-template-columns: 1fr 200px;
+ }
+
table,
.noDataSet {
margin-top: 16px;
@@ -237,7 +243,6 @@ export class DeesTable extends DeesElement {
text-align: left;
}
tr:hover {
-
}
tr:hover td {
background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
@@ -369,7 +374,6 @@ export class DeesTable extends DeesElement {
}
.footerActions .footerAction:hover dees-icon {
-
}
`,
];
@@ -410,8 +414,13 @@ export class DeesTable extends DeesElement {