From 117b50f3ea40efcff016e3df15c9bfc3ca2518cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Mon, 29 Nov 2021 07:27:53 +0100 Subject: [PATCH] Add ha-faded (#10651) --- gallery/src/demos/demo-ha-faded.ts | 88 +++++++++++++++++++ .../update-available/update-available-card.ts | 6 +- src/components/ha-faded.ts | 84 ++++++++++++++++++ 3 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 gallery/src/demos/demo-ha-faded.ts create mode 100644 src/components/ha-faded.ts diff --git a/gallery/src/demos/demo-ha-faded.ts b/gallery/src/demos/demo-ha-faded.ts new file mode 100644 index 0000000000..65dcb4315d --- /dev/null +++ b/gallery/src/demos/demo-ha-faded.ts @@ -0,0 +1,88 @@ +import { css, html, LitElement, TemplateResult } from "lit"; +import { customElement } from "lit/decorators"; +import "../../../src/components/ha-card"; +import "../../../src/components/ha-faded"; +import "../../../src/components/ha-markdown"; + +const LONG_TEXT = ` +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum. + +Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci. + +Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo. + +In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla. + +Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim. +`; + +const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."; + +@customElement("demo-ha-faded") +export class DemoHaFaded extends LitElement { + protected render(): TemplateResult { + return html` + +
+

Long text directly as slotted content

+ ${LONG_TEXT} +

Long text with slotted element

+ ${LONG_TEXT} +

No text

+ +

Smal text

+ ${SMALL_TEXT} +

Long text in markdown

+ + + +

Missing 1px from hiding

+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + laoreet velit ut elit volutpat, eget ultrices odio lacinia. In + imperdiet malesuada est, nec sagittis metus ultricies quis. Sed + nisl ex, convallis porttitor ante quis, hendrerit tristique justo. + Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque + sed consequat risus. Suspendisse facilisis ligula a odio + consectetur condimentum. Curabitur vehicula elit nec augue mollis, + et volutpat massa dictum. Nam pellentesque auctor rutrum. + Suspendisse elit est, sodales vel diam nec, porttitor faucibus + massa. Ut pretium ac orci eu pharetra. + + +

1px over hiding point

+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc + laoreet velit ut elit volutpat, eget ultrices odio lacinia. In + imperdiet malesuada est, nec sagittis metus ultricies quis. Sed + nisl ex, convallis porttitor ante quis, hendrerit tristique justo. + Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque + sed consequat risus. Suspendisse facilisis ligula a odio + consectetur condimentum. Curabitur vehicula elit nec augue mollis, + et volutpat massa dictum. Nam pellentesque auctor rutrum. + Suspendisse elit est, sodales vel diam nec, porttitor faucibus + massa. Ut pretium ac orci eu pharetra. + + +
+ + `; + } + + static get styles() { + return css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "demo-ha-faded": DemoHaFaded; + } +} diff --git a/hassio/src/update-available/update-available-card.ts b/hassio/src/update-available/update-available-card.ts index 590cbb087f..e1643e223a 100644 --- a/hassio/src/update-available/update-available-card.ts +++ b/hassio/src/update-available/update-available-card.ts @@ -16,7 +16,7 @@ import "../../../src/components/ha-alert"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; import "../../../src/components/ha-checkbox"; -import "../../../src/components/ha-expansion-panel"; +import "../../../src/components/ha-faded"; import "../../../src/components/ha-formfield"; import "../../../src/components/ha-icon-button"; import "../../../src/components/ha-markdown"; @@ -136,10 +136,10 @@ class UpdateAvailableCard extends LitElement { ? html` ${this._changelogContent ? html` - + - + ` : ""}
diff --git a/src/components/ha-faded.ts b/src/components/ha-faded.ts new file mode 100644 index 0000000000..974956dcfd --- /dev/null +++ b/src/components/ha-faded.ts @@ -0,0 +1,84 @@ +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; + +@customElement("ha-faded") +class HaFaded extends LitElement { + @property({ type: Number, attribute: "faded-height" }) + public fadedHeight = 102; + + @state() _contentShown = false; + + protected render(): TemplateResult { + return html` +
+ +
+ `; + } + + get _slottedHeight(): number { + return ( + ( + this.shadowRoot!.querySelector(".container") + ?.firstElementChild as HTMLSlotElement + ) + .assignedElements() + .reduce( + (partial, element) => partial + (element as HTMLElement).offsetHeight, + 0 + ) || 0 + ); + } + + private _setShowContent() { + const height = this._slottedHeight; + if (height !== 0 && height <= this.fadedHeight + 50) { + this._contentShown = true; + } + } + + protected firstUpdated(changedProps) { + super.firstUpdated(changedProps); + this._setShowContent(); + } + + private _showContent(): void { + this._contentShown = true; + } + + static get styles(): CSSResultGroup { + return css` + .container { + display: block; + height: auto; + cursor: default; + } + .faded { + cursor: pointer; + -webkit-mask-image: linear-gradient( + to bottom, + black 25%, + transparent 100% + ); + mask-image: linear-gradient(to bottom, black 25%, transparent 100%); + overflow-y: hidden; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-faded": HaFaded; + } +}