GAUD-9843 - Skeleton of the panel mixin and the three components #6928
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js'; | ||
|
|
||
| /** | ||
| * Component to be placed in the main default slot of d2l-page, providing a panel with optional header | ||
| * @slot - The main content of the main page panel | ||
| * @slot header-start - Optional start content of the main page header | ||
| * @slot header-end - Optional end content of the main page header | ||
| */ | ||
| class PageMain extends PagePanelMixin(LitElement) { | ||
|
|
||
| static styles = [pagePanelStyles, css` | ||
| .panel-header { | ||
| top: var(--d2l-page-header-height, 0); | ||
|
Member
There was a problem hiding this comment. Could also set a variable that the mixin uses to avoid these subclasses knowing much about the internals of the base class.
Contributor
Author
There was a problem hiding this comment. Not sure what you mean? Like set a different css property with this value like
Member
There was a problem hiding this comment. Yeah, or just
Contributor
Author
There was a problem hiding this comment. I need to adjust this/add a few more uses and variables to fix the sticky stuff (next draft PR going up), so we can figure it out there. It's a bit confusing and I don't love what I have |
||
| } | ||
| `]; | ||
|
|
||
| render() { | ||
| return this._renderPanel(html`<slot></slot>`); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| customElements.define('d2l-page-main', PageMain); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import '../colors/colors.js'; | ||
| import { css, html } from 'lit'; | ||
| import { classMap } from 'lit/directives/class-map.js'; | ||
|
|
||
| export const pagePanelStyles = css` | ||
| .panel-header:not([hidden]) { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
| .panel-header { | ||
| background-color: white; | ||
| border-bottom: 1px solid var(--d2l-color-mica); | ||
| height: 70px; | ||
| overflow: hidden; | ||
| padding: 0 30px; | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 14; /* To be over sticky content of our core components, but not over the header shadow */ | ||
| } | ||
|
|
||
| .header-start, | ||
| .header-end { | ||
| display: flex; | ||
| gap: 6px; | ||
| } | ||
|
|
||
| .panel { | ||
| padding: 30px; | ||
| } | ||
| `; | ||
|
|
||
| export const PagePanelMixin = superclass => class extends superclass { | ||
|
|
||
| static properties = { | ||
| _hasHeader: { state: true }, | ||
| _slotVisibility: { state: true } | ||
| }; | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this._hasHeader = false; | ||
| this._slotVisibility = {}; | ||
| } | ||
|
|
||
| _renderPanel(content) { | ||
| const panelClasses = { | ||
| 'panel': true, | ||
| 'header-sticky': this._hasHeader | ||
| }; | ||
| const header = html` | ||
| <div ?hidden="${!this._hasHeader}" class="panel-header"> | ||
| <div class="header-start"><slot name="header-start" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div> | ||
| <div class="header-end"><slot name="header-end" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div> | ||
| </div>`; | ||
|
|
||
| return html` | ||
| <div> | ||
| ${header} | ||
| <div class="${classMap(panelClasses)}">${content}</div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| #handleSlotVisibilityChange(e) { | ||
| const key = e.target.name; | ||
| const nodes = e.target.assignedNodes(); | ||
| this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 }; | ||
|
|
||
| this._hasHeader = this._slotVisibility['header-start'] || this._slotVisibility['header-end']; | ||
| } | ||
|
|
||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { html, LitElement } from 'lit'; | ||
| import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js'; | ||
|
|
||
| /** | ||
| * Component to be placed in the side-nav slot of d2l-page, providing a panel with optional header | ||
| * @slot - The main content of the side-nav page panel | ||
| * @slot header-start - Optional start content of the side-nav page header | ||
| * @slot header-end - Optional end content of the side-nav page header | ||
| */ | ||
| class PageSideNav extends PagePanelMixin(LitElement) { | ||
|
|
||
| static styles = [pagePanelStyles]; | ||
|
|
||
| render() { | ||
| return this._renderPanel(html`<slot></slot>`); | ||
| } | ||
| } | ||
|
|
||
| customElements.define('d2l-page-side-nav', PageSideNav); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { html, LitElement } from 'lit'; | ||
| import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js'; | ||
|
|
||
| /** | ||
| * Component to be placed in the supporting slot of d2l-page, providing a panel with optional header | ||
| * @slot - The main content of the supporting page panel | ||
| * @slot header-start - Optional start content of the supporting page header | ||
| * @slot header-end - Optional end content of the supporting page header | ||
| */ | ||
| class PageSupporting extends PagePanelMixin(LitElement) { | ||
|
|
||
| static styles = [pagePanelStyles]; | ||
|
|
||
| render() { | ||
| return this._renderPanel(html`<slot></slot>`); | ||
| } | ||
| } | ||
|
|
||
| customElements.define('d2l-page-supporting', PageSupporting); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -44,10 +44,14 @@ class Page extends LocalizeCoreElement(LitElement) { | |
| --d2l-page-footer-max-width: 100%; | ||
| } | ||
|
|
||
| .header { | ||
| position: relative; | ||
| z-index: 15; /* To be over sticky content of our core components */ | ||
| } | ||
|
|
||
| .page.header-sticky .header { | ||
| position: sticky; | ||
| top: 0; | ||
| } | ||
|
Comment on lines
+47
to
55
Contributor
Author
There was a problem hiding this comment. Instead of this, we could implement one of the strategies @dbatiste describes in this comment, making the panel headers only apply |
||
|
|
||
| .content { | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the stuff added in the headers for these demos could be a bit better, but I've run out of time 😅