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

Convert Badge to CSS Modules

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-07-13 13:20:46 +03:00
parent d633bf7803
commit 377c09aa9a
2 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/renderer/components/badge/badge.scss → src/renderer/components/badge/badge.module.css
View File

@ -19,39 +19,41 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/ */
.Badge { .badge {
position: relative; position: relative;
display: inline-block; display: inline-block;
background: $colorVague;
color: $textColorSecondary;
border-radius: $radius;
padding: .2em .4em;
white-space: nowrap;
max-width: 100%; max-width: 100%;
}
&.interactive:hover {
background-color: $mainBackground; .badge + .badge {
cursor: pointer; margin-left: 8px;
} }
&:not(.isExpanded) { .badge.interactive:hover {
white-space: nowrap; background-color: var(--mainBackground);
overflow: hidden; cursor: pointer;
text-overflow: ellipsis; }
}
.badge:not(.isExpanded) {
&:not(.flat) { white-space: nowrap;
background: $colorVague; overflow: hidden;
color: $textColorSecondary; text-overflow: ellipsis;
border-radius: $radius; }
padding: .2em .4em;
} .badge:not(.flat) {
background: var(--colorVague);
&.small { border-radius: 3px;
font-size: $font-size-small; padding: .2em .4em;
} }
&.clickable { .small {
cursor: pointer; font-size: var(--font-size-small);
} }
.clickable {
cursor: pointer;
}
.disabled {
opacity: 0.5;
} }

35
src/renderer/components/badge/badge.tsx
View File

@ -19,10 +19,10 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/ */
import "./badge.scss"; import styles from "./badge.module.css";
import React from "react"; import React from "react";
import { computed, observable } from "mobx"; import { computed, makeObservable, observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { cssNames } from "../../utils/cssNames"; import { cssNames } from "../../utils/cssNames";
import { TooltipDecoratorProps, withTooltip } from "../tooltip"; import { TooltipDecoratorProps, withTooltip } from "../tooltip";
@ -32,7 +32,8 @@ export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorP
small?: boolean; small?: boolean;
flat?: boolean; flat?: boolean;
label?: React.ReactNode; label?: React.ReactNode;
isExpanded?: boolean; // always force state to this value expandable?: boolean;
disabled?: boolean;
} }
const badgeMeta = observable({ const badgeMeta = observable({
@ -47,10 +48,21 @@ document.addEventListener("selectionchange", () => {
@withTooltip @withTooltip
@observer @observer
export class Badge extends React.Component<BadgeProps> { export class Badge extends React.Component<BadgeProps> {
static defaultProps: Partial<BadgeProps> = {
expandable: true
};
@observable.ref elem: HTMLElement; @observable.ref elem: HTMLElement;
@observable isExpanded = false; @observable isExpanded = false;
constructor(props: BadgeProps) {
super(props);
makeObservable(this);
}
@computed get isExpandable() { @computed get isExpandable() {
if (!this.props.expandable) return false;
return this.elem?.clientWidth < this.elem?.scrollWidth; return this.elem?.clientWidth < this.elem?.scrollWidth;
} }
@ -66,14 +78,15 @@ export class Badge extends React.Component<BadgeProps> {
} }
render() { render() {
const { className, label, small, children, isExpanded, flat, ...elemProps } = this.props; const { className, label, disabled, small, children, flat, expandable, ...elemProps } = this.props;
const clickable = Boolean(this.props.onClick); const clickable = Boolean(this.props.onClick) || this.isExpandable;
const classNames = cssNames("Badge", className, { const classNames = cssNames(styles.badge, className, {
small, [styles.small]: small,
flat, [styles.flat]: flat,
clickable, [styles.clickable]: clickable,
interactive: this.isExpandable, [styles.interactive]: this.isExpandable,
isExpanded: isExpanded ?? this.isExpanded, [styles.isExpanded]: this.isExpanded,
[styles.disabled]: disabled
}); });
return ( return (