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

Status bar visual fixes (#1182)

Browse Source 
* Status bar improvements

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing animation visibility delay

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-10-30 15:16:26 +03:00 committed by GitHub
commit 20e26f3206
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,8 +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_outline" small/> <Component.Icon material="help" smallest />
<span>Support</span>
</div> </div>
) )
} }

2
src/renderer/components/animate/animate.tsx
View File

@ -15,7 +15,7 @@ export interface AnimateProps {
@observer @observer
export class Animate extends React.Component<AnimateProps> { export class Animate extends React.Component<AnimateProps> {
static VISIBILITY_DELAY_MS = 100; static VISIBILITY_DELAY_MS = 0;
static defaultProps: AnimateProps = { static defaultProps: AnimateProps = {
name: "opacity", name: "opacity",

3
src/renderer/components/cluster-manager/bottom-bar.scss
View File

@ -4,8 +4,9 @@
font-size: $font-size-small; font-size: $font-size-small;
background-color: #3d90ce; background-color: #3d90ce;
padding: 0 $padding; padding: 0 2px;
color: white; color: white;
height: 22px;
#current-workspace { #current-workspace {
padding: $padding / 4 $padding / 2; padding: $padding / 4 $padding / 2;

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 small material="layers"/> <Icon smallest material="layers"/>
<span className="workspace-name">{currentWorkspace.name}</span> <span className="workspace-name">{currentWorkspace.name}</span>
</div> </div>
<WorkspaceMenu <WorkspaceMenu

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

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

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

@ -15,6 +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
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
@ -63,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, 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,
@ -75,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 ? { 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,