hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fixing firing intersection on parent sections

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-05 15:34:33 +03:00
parent 0ef16fef31
commit 830eac3952
3 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/components/+preferences/preferences.tsx
View File

@ -38,8 +38,10 @@ export class Preferences extends React.Component {
contentGaps={false} contentGaps={false}
header={header} header={header}
> >
<section id="application"> <section id="application" title="Application">
<h1>Application</h1> <section>
<h1>Application</h1>
</section>
<section id="appearance"> <section id="appearance">
<h2>Appearance</h2> <h2>Appearance</h2>
<SubTitle title="Theme"/> <SubTitle title="Theme"/>
@ -87,7 +89,9 @@ export class Preferences extends React.Component {
</section> </section>
<section id="kubernetes"> <section id="kubernetes">
<h1>Kubernetes</h1> <section>
<h1>Kubernetes</h1>
</section>
<section id="kubectl"> <section id="kubectl">
<h2>Kubectl binary</h2> <h2>Kubectl binary</h2>
<KubectlBinaries preferences={preferences}/> <KubectlBinaries preferences={preferences}/>
@ -99,7 +103,9 @@ export class Preferences extends React.Component {
</section> </section>
<section id="extensions"> <section id="extensions">
<h1>Extensions</h1> <section>
<h1>Extensions</h1>
</section>
{appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => { {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
return ( return (
<section key={index} id={title}> <section key={index} id={title}>

11
src/renderer/components/scroll-spy/scroll-spy.tsx
View File

@ -29,7 +29,7 @@ export function ScrollSpy(props: Props) {
sections.forEach(section => { sections.forEach(section => {
const id = section.getAttribute("id"); const id = section.getAttribute("id");
const name = section.querySelector(":first-child").textContent; const name = section.querySelector("h1, h2, h3, h4, h5, h6").textContent;
const selected = id === activeElementId; const selected = id === activeElementId;
if (!name || !id) { if (!name || !id) {
@ -47,9 +47,9 @@ export function ScrollSpy(props: Props) {
return children; return children;
}; };
const handleIntersect = (entries: IntersectionObserverEntry[]) => { const handleIntersect = ([entry]: IntersectionObserverEntry[]) => {
if (entries[0].isIntersecting) { if (entry.isIntersecting) {
setActiveElementId(entries[0].target.id); setActiveElementId(entry.target.closest("section[id]").id);
} }
}; };
@ -61,8 +61,9 @@ export function ScrollSpy(props: Props) {
sections.current.forEach((section) => { sections.current.forEach((section) => {
const observer = new IntersectionObserver(handleIntersect, options); const observer = new IntersectionObserver(handleIntersect, options);
const target = section.querySelector("section") || section;
observer.observe(section); observer.observe(target);
}); });
}; };

2
src/renderer/components/tree-view/tree-view.scss
View File

@ -10,7 +10,7 @@
border: 1px solid transparent; border: 1px solid transparent;
} }
&.selected { &.selected, &:focus {
> .MuiTreeItem-content .MuiTreeItem-label { > .MuiTreeItem-content .MuiTreeItem-label {
border-color: var(--blue); border-color: var(--blue);
font-weight: bold; font-weight: bold;