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

Replace xs to smallest className

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-10-30 15:13:52 +03:00
parent 924cf14fd5
commit c5298548cb
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/support-page/renderer.tsx
View File

@ -22,7 +22,7 @@ export default class SupportPageRendererExtension extends LensRendererExtension
className="flex align-center gaps hover-highlight" className="flex align-center gaps hover-highlight"
onClick={() => Navigation.navigate(supportPageURL())} onClick={() => Navigation.navigate(supportPageURL())}
> >
<Component.Icon material="help" xs/> <Component.Icon material="help" smallest />
</div> </div>
) )
} }

2
src/renderer/components/cluster-manager/bottom-bar.tsx
View File

@ -14,7 +14,7 @@ export class BottomBar extends React.Component {
return ( return (
<div className="BottomBar flex gaps"> <div className="BottomBar flex gaps">
<div id="current-workspace" className="flex gaps align-center hover-highlight"> <div id="current-workspace" className="flex gaps align-center hover-highlight">
<Icon xs material="layers"/> <Icon smallest material="layers"/>
<span className="workspace-name">{currentWorkspace.name}</span> <span className="workspace-name">{currentWorkspace.name}</span>
</div> </div>
<WorkspaceMenu <WorkspaceMenu

10
src/renderer/components/icon/icon.scss
View File

@ -1,7 +1,7 @@
.Icon { .Icon {
--size: 21px; --size: 21px;
--small-size: 18px; --small-size: 18px;
--extra-small-size: 16px; --smallest-size: 16px;
--big-size: 32px; --big-size: 32px;
--color-active: #{$iconActiveColor}; --color-active: #{$iconActiveColor};
--bgc-active: #{$iconActiveBackground}; --bgc-active: #{$iconActiveBackground};
@ -22,10 +22,10 @@
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
&.xs { &.smallest {
font-size: var(--extra-small-size); font-size: var(--smallest-size);
width: var(--extra-small-size); width: var(--smallest-size);
height: var(--extra-small-size); height: var(--smallest-size);
} }
&.small { &.small {

6
src/renderer/components/icon/icon.tsx
View File

@ -15,7 +15,7 @@ export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorPr
href?: string; // render icon as hyperlink href?: string; // render icon as hyperlink
size?: string | number; // icon-size size?: string | number; // icon-size
small?: boolean; // pre-defined icon-size small?: boolean; // pre-defined icon-size
xs?: boolean; // pre-defined icon-size smallest?: boolean; // pre-defined icon-size
big?: boolean; // pre-defined icon-size big?: boolean; // pre-defined icon-size
active?: boolean; // apply active-state styles active?: boolean; // apply active-state styles
interactive?: boolean; // indicates that icon is interactive and highlight it on focus/hover interactive?: boolean; // indicates that icon is interactive and highlight it on focus/hover
@ -64,7 +64,7 @@ export class Icon extends React.PureComponent<IconProps> {
const { isInteractive } = this; const { isInteractive } = this;
const { const {
// skip passing props to icon's html element // skip passing props to icon's html element
className, href, link, material, svg, size, xs, small, big, className, href, link, material, svg, size, smallest, small, big,
disabled, sticker, active, focusable, children, disabled, sticker, active, focusable, children,
interactive: _interactive, interactive: _interactive,
onClick: _onClick, onClick: _onClick,
@ -76,7 +76,7 @@ export class Icon extends React.PureComponent<IconProps> {
const iconProps: Partial<IconProps> = { const iconProps: Partial<IconProps> = {
className: cssNames("Icon", className, className: cssNames("Icon", className,
{ svg, material, interactive: isInteractive, disabled, sticker, active, focusable }, { svg, material, interactive: isInteractive, disabled, sticker, active, focusable },
!size ? { xs, small, big } : {} !size ? { smallest, small, big } : {}
), ),
onClick: isInteractive ? this.onClick : undefined, onClick: isInteractive ? this.onClick : undefined,
onKeyDown: isInteractive ? this.onKeyDown : undefined, onKeyDown: isInteractive ? this.onKeyDown : undefined,