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

Controls scrollable within Tabs

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-03-15 19:17:07 +03:00
parent 72b5729780
commit 0f4fe831fa
2 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/renderer/components/dock/dock-tabs.module.scss
View File

@ -6,12 +6,18 @@
.dockTabs { .dockTabs {
--min-tab-width: 120px; --min-tab-width: 120px;
overflow: hidden;
}
.tabs {
width: 100%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
&.scrollable { &:global(.scrollable) {
overflow: auto; overflow: auto;
overflow-x: overlay; overflow-x: overlay; /* Set scrollbar inside content area */
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: transparent; background-color: transparent;
@ -30,27 +36,21 @@
} }
} }
> div { &::before, &::after {
&::before, &::after { content: "\00A0";
content: "\00A0"; position: sticky;
position: sticky; min-width: 8px;
min-width: 8px; z-index: 1;
z-index: 1; }
}
&::before { &::before {
left: 0; left: 0;
background: linear-gradient(270deg, transparent 0%, var(--dockHeadBackground) 65%); background: linear-gradient(270deg, transparent 0%, var(--dockHeadBackground) 65%);
} }
&::after { &::after {
right: 0; right: 0;
background: linear-gradient(90deg, transparent 0%, var(--dockHeadBackground) 65%); background: linear-gradient(90deg, transparent 0%, var(--dockHeadBackground) 65%);
}
} }
} }
> div {
width: 100%;
}
} }

7
src/renderer/components/dock/dock-tabs.tsx
View File

@ -12,7 +12,7 @@ import type { DockTab as DockTabModel } from "./dock/store";
import { TabKind } from "./dock/store"; import { TabKind } from "./dock/store";
import { TerminalTab } from "./terminal/dock-tab"; import { TerminalTab } from "./terminal/dock-tab";
import { useResizeObserver } from "../../hooks"; import { useResizeObserver } from "../../hooks";
import { cssNames, cssVar } from "../../utils"; import { cssVar } from "../../utils";
export interface DockTabsProps { export interface DockTabsProps {
tabs: DockTabModel[]; tabs: DockTabModel[];
@ -65,12 +65,13 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
useResizeObserver(elem.current, updateScrollbarVisibility); useResizeObserver(elem.current, updateScrollbarVisibility);
return ( return (
<div className={cssNames(styles.dockTabs, { [styles.scrollable]: showScrollbar })} ref={elem}> <div className={styles.dockTabs} ref={elem}>
<Tabs <Tabs
autoFocus={autoFocus} autoFocus={autoFocus}
value={selectedTab} value={selectedTab}
onChange={onChangeTab} onChange={onChangeTab}
scrollable={false} scrollable={showScrollbar}
className={styles.tabs}
> >
{tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)} {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
</Tabs> </Tabs>