diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-21 16:08:08 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-21 16:25:59 +0100 |
commit | e7d80fcfa91f92c712110d58151df0f8f1e6ed86 (patch) | |
tree | 9bc424729c8d9e6ef65d959cc0bfe7cc0f9145e8 /static/components/tab-element.ts | |
parent | Add basic rrule tab. (diff) | |
download | calp-e7d80fcfa91f92c712110d58151df0f8f1e6ed86.tar.gz calp-e7d80fcfa91f92c712110d58151df0f8f1e6ed86.tar.xz |
Rework popup components.
Previously popups were driven through some CSS hacks, which used labels
with specific positioning, and z-index changes. This never really
worked, and led the rest of the tree to be unmanagable. This commit
replaces that system with a simpler one, which is being driven by
javascript.
This also allowed a much simpler tree, which allowed us to
- make the popups rezisable (with a resize anchor)
- move the window handle to above (configurable)
- Add and remove tabs without having manually reflow where all labels
are
Diffstat (limited to '')
-rw-r--r-- | static/components/tab-element.ts | 28 |
1 files changed, 0 insertions, 28 deletions
diff --git a/static/components/tab-element.ts b/static/components/tab-element.ts deleted file mode 100644 index 9da6c504..00000000 --- a/static/components/tab-element.ts +++ /dev/null @@ -1,28 +0,0 @@ -export { TabElement } - -/* <tab-element /> */ -class TabElement extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - let template - = (document.getElementById('tab-template') as HTMLTemplateElement) - .content - // const shadowRoot = this.attachShadow({ mode: 'open' }) - // .appendChild(template.cloneNode(true)); - - let content = Array.from(this.children, (e) => e.cloneNode(true)) - - this.replaceChildren(template.cloneNode(true)); - - let label = this.querySelector('label') - if (!label) throw "Invalid tab" - - label.setAttribute('title', this.getAttribute('label-title') || '') - label.innerText = this.getAttribute('label') || 'T' - - this.querySelector('slot[name="content"]')!.replaceWith(...content); - } -} |