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

Add custom scrollbar on hover

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-03-14 16:01:13 +03:00
parent 3fb59bf8c2
commit 09457e9f95
3 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/components/dock/dock-tab.module.scss
View File

@ -7,7 +7,7 @@
padding: var(--padding); padding: var(--padding);
height: 32px; height: 32px;
position: relative; position: relative;
background: no-repeat left 50% linear-gradient(0deg, #43424d, #43424d); border-right: 1px solid #43424d;
background-size: 1px 3ch; background-size: 1px 3ch;
overflow: hidden; overflow: hidden;
@ -17,6 +17,10 @@
flex-basis: 0; flex-basis: 0;
max-width: fit-content; max-width: fit-content;
&:last-child {
border-right: none;
}
&.pinned { &.pinned {
padding-right: var(--padding); padding-right: var(--padding);
} }
@ -28,7 +32,7 @@
&:global(.active) { &:global(.active) {
background-color: hsl(245deg 8% 28%); background-color: hsl(245deg 8% 28%);
background-image: none; background-image: none;
border-bottom: 2px solid var(--primary); border-bottom: 1px solid var(--primary);
.close { .close {
opacity: 1; opacity: 1;

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

@ -9,6 +9,28 @@
display: flex; display: flex;
overflow: hidden; overflow: hidden;
&.scrollable {
overflow: auto;
overflow-x: overlay;
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
&:hover {
&::-webkit-scrollbar {
width: 100%;
height: 3px;
}
&::-webkit-scrollbar-thumb {
border-radius: 0;
height: 3px;
background-color: rgba(106, 115, 125, 0.2);
}
}
}
> div { > div {
width: 100%; width: 100%;
} }

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

@ -13,7 +13,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 { cssVar } from "../../utils"; import { cssNames, cssVar } from "../../utils";
export interface DockTabsProps { export interface DockTabsProps {
tabs: DockTabModel[]; tabs: DockTabModel[];
@ -62,12 +62,12 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
useResizeObserver(elem.current, updateScrollbarVisibility); useResizeObserver(elem.current, updateScrollbarVisibility);
return ( return (
<div className={styles.dockTabs} ref={elem}> <div className={cssNames(styles.dockTabs, { [styles.scrollable]: showScrollbar })} ref={elem}>
<Tabs <Tabs
autoFocus={autoFocus} autoFocus={autoFocus}
value={selectedTab} value={selectedTab}
onChange={onChangeTab} onChange={onChangeTab}
scrollable={showScrollbar} scrollable={false}
> >
{tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)} {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
</Tabs> </Tabs>