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

Fix gradients in namespace selector

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-26 14:57:50 +03:00
parent b989cc41c8
commit 4378a58b81
4 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/renderer/components/+namespaces/namespace-select-filter.scss Normal file
View File

@ -0,0 +1,41 @@
.NamespaceSelectFilter {
.Select {
&__placeholder {
width: 100%;
white-space: nowrap;
overflow: scroll!important;
text-overflow: unset!important;
margin-left: -8px;
padding-left: 8px;
margin-right: -8px;
padding-right: 8px;
&::-webkit-scrollbar {
display: none;
}
}
&__value-container {
position: relative;
&::before, &::after {
content: ' ';
position: absolute;
z-index: 20;
display: block;
width: 8px;
height: var(--font-size);
}
&::before {
left: 0px;
background: linear-gradient(to right, var(--contentColor) 0px, transparent);
}
&::after {
right: 0px;
background: linear-gradient(to left, var(--contentColor) 0px, transparent);
}
}
}
}

1
src/renderer/components/+namespaces/namespace-select-filter.tsx
View File

@ -71,6 +71,7 @@ export class NamespaceSelectFilter extends React.Component {
placeholder={""}
onChange={this.onChange}
formatOptionLabel={this.formatOptionLabel}
className="NamespaceSelectFilter"
/>
);
}

17
src/renderer/components/+namespaces/namespace-select.scss
View File

@ -23,23 +23,6 @@
.NamespaceSelect {
@include namespaceSelectCommon;
.Select {
&__placeholder {
width: 100%;
white-space: nowrap;
overflow: scroll!important;
text-overflow: unset!important;
margin-left: -8px;
padding-left: 8px;
margin-right: -8px;
padding-right: 8px;
&::-webkit-scrollbar {
display: none;
}
}
}
}
.NamespaceSelectMenu {

15
src/renderer/components/+namespaces/namespace-select.tsx
View File

@ -1,4 +1,4 @@
import "./namespace-select.scss";
import "./namespace-select-filter.scss";
import React from "react";
import { computed } from "mobx";
@ -8,7 +8,6 @@ import { cssNames } from "../../utils";
import { Icon } from "../icon";
import { namespaceStore } from "./namespace.store";
import { kubeWatchApi } from "../../api/kube-watch-api";
import { components, OptionTypeBase, ValueContainerProps } from "react-select";
interface Props extends SelectProps {
showIcons?: boolean;
@ -22,16 +21,6 @@ const defaultProps: Partial<Props> = {
showClusterOption: false,
};
function GradientValueContainer({children, ...rest}: ValueContainerProps<OptionTypeBase, boolean>) {
return (
<components.ValueContainer {...rest}>
<div className="GradientValueContainer front" />
{children}
<div className="GradientValueContainer back" />
</components.ValueContainer>
);
}
@observer
export class NamespaceSelect extends React.Component<Props> {
static defaultProps = defaultProps as object;
@ -77,8 +66,6 @@ export class NamespaceSelect extends React.Component<Props> {
render() {
const { className, showIcons, customizeOptions, components = {}, ...selectProps } = this.props;
components.ValueContainer ??= GradientValueContainer;
return (
<Select
className={cssNames("NamespaceSelect", className)}