Btp layout #3486
Btp layout #3486
Conversation
vertical nav mainly working in expanded state
hardl
requested review from
JohannesDoberer,
ndricimrr,
VincentUllal and
camelCaseChris
as code owners
| height: 100%; | ||
| } | ||
|
|
||
| :global(.fd-tool-layout .fd-app__sidebar) { |
There was a problem hiding this comment.
Since fd-tool-layout is used in this component, I think this will still work but still be scoped to this component. At least we have similar things in our Svelte 4-based app. Might be worth a try.
| :global(.fd-tool-layout .fd-app__sidebar) { | |
| .fd-tool-layout :global(.fd-app__sidebar) { |
| @@ -2623,6 +2790,16 @@ | |||
| left: calc(#{$leftNavWidthCollapsed} + #{$globalNavWidth}); | |||
| } | |||
| } | |||
| :global(.lui-semiCollapsible:not(.semiCollapsed)) { | |||
There was a problem hiding this comment.
Not sure if it still matters at this point - but I just saw this. On our side, we tried to avoid top-level global styles because they are not scoped and we had issues with styling conflicts.
You have to use top-level :global here because the class lui-semiCollapsible is set in code in this component. If there is a way to change that to a class:name directive in the template you might be able to change this to something like .lui-semiCollapsible:global(:not(.semiCollapsed))
| <div | ||
| class="fd-navigation fd-navigation--vertical {hideNavComponent | ||
| ? 'hideNavComponent' | ||
| : ''} {footerText || semiCollapsibleButton | ||
| ? 'hasFooter' | ||
| : ''} {footerText && !semiCollapsibleButton ? 'hasOnlyFooterText' : ''} | ||
| {isSemiCollapsed | ||
| ? 'fd-navigation--snapped' | ||
| : ''}" | ||
| role="navigation" | ||
| style="width: var(--luigi__left-sidenav--width); height: 100%;"> |
There was a problem hiding this comment.
This might be easier to understand:
| <div | |
| class="fd-navigation fd-navigation--vertical {hideNavComponent | |
| ? 'hideNavComponent' | |
| : ''} {footerText || semiCollapsibleButton | |
| ? 'hasFooter' | |
| : ''} {footerText && !semiCollapsibleButton ? 'hasOnlyFooterText' : ''} | |
| {isSemiCollapsed | |
| ? 'fd-navigation--snapped' | |
| : ''}" | |
| role="navigation" | |
| style="width: var(--luigi__left-sidenav--width); height: 100%;"> | |
| <div | |
| class="fd-navigation fd-navigation--vertical" | |
| class:hideNavComponent={hideNavComponent} | |
| class:hasFooter={footerText || semiCollapsibleButton} | |
| class:hasOnlyFooterText={footerText && !semiCollapsibleButton} | |
| class:fd-navigation--snapped={isSemiCollapsed} | |
| role="navigation" | |
| style="width: var(--luigi__left-sidenav--width); height: 100%;"> |
| btpNavTopCnt.querySelector('.fd-navigation__list > .fd-navigation__list-item--overflow').style.display = 'none'; | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
| /** | |
| * Calculates navigation entries and adjusts their display based on available space. | |
| * Moves entries to the 'more' section if the available space is limited. | |
| */ |
| } | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
| /** | |
| * Executes a series of actions after an update event. | |
| * If the btpNavTopCnt resize observer doesn't exist, it creates a new one. | |
| * Resets navigation entries and recalculates them if the container is semi-collapsed. | |
| */ |
| @@ -381,6 +446,19 @@ | |||
| }); | |||
| } | |||
|
|
|||
There was a problem hiding this comment.
| /** | |
| * Calculates the position of the BTP navigation flyout relative to its parent element. | |
| * Adjusts the offset property of the parent element to ensure the flyout is fully visible. | |
| * @param el - The element representing the BTP navigation flyout. | |
| */ |
| @@ -248,6 +253,61 @@ | |||
| }); | |||
| }); | |||
|
|
|||
There was a problem hiding this comment.
| /** | |
| * Resets navigation entries by moving items from the 'more' section back to the main navigation list. | |
| * Hides the overflow indicator if present. | |
| */ |
| return LuigiElements.isCustomLuigiContainer() ? LuigiElements.getLuigiContainer().clientHeight : window.innerHeight; | ||
| return IframeHelpers.getIframeContainer().clientHeight; | ||
| } | ||
|
|
||
| getContentAreaHeight /* istanbul ignore next */() { | ||
| const contentAreaHeight = this.getInnerHeight() - this.getShellbarHeight(); | ||
| const contentAreaHeight = this.getInnerHeight() - IframeHelpers.getIframeContainer().getBoundingClientRect().top; |
There was a problem hiding this comment.
💥
I think these changes, might need changing, since this works well when you have a main microfrontend iframe based. But when Having a WebComponent open and opening splitview, it gets distorted:
No description provided.