diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less index 2e9413020..3d3f12077 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less @@ -1,6 +1,6 @@ @import "../../../../less/Common/Constants"; -@ConsoleHeaderHeight: 32px; +// @ConsoleHeaderHeight: 32px; @ConsoleContentsPaneHeight: 220px; @ConsoleStatusMaxWidth: 672px; @@ -22,7 +22,7 @@ justify-content: space-between; align-items: center; flex-shrink: 0; - height: @ConsoleHeaderHeight; + // height: @ConsoleHeaderHeight; width: 100%; background-color: @NotificationLow; border-top: @ButtonBorderWidth @BaseMedium solid; @@ -38,6 +38,9 @@ } .statusBar { + width: 100%; + padding: 6px 0px; + .dataTypeIcons { cursor: pointer; margin: 0px @DefaultSpace 0px @MediumSpace; @@ -76,11 +79,14 @@ max-width: @ConsoleStatusMaxWidth; } } + &:focus { + outline: none; + } } .expandCollapseButton { cursor: pointer; - padding-right: 5px; + padding: 6px 5px 6px 0px; img { width: @ExpandCollapseIconSize; diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx index 1821fd14c..15b7634a4 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx @@ -81,9 +81,9 @@ export class NotificationConsoleComponent extends React.Component< } } - public setElememntRef = (element: HTMLElement): void => { - this.consoleHeaderElement = element; - }; + // public setElememntRef = (element: HTMLElement): void => { + // this.consoleHeaderElement = element; + // }; public render(): JSX.Element { const numInProgress = this.state.allConsoleData.filter( @@ -98,15 +98,14 @@ export class NotificationConsoleComponent extends React.Component< return (
-
this.expandCollapseConsole()} - onKeyDown={(event: React.KeyboardEvent) => this.onExpandCollapseKeyPress(event)} - tabIndex={0} - > -
+
+
this.expandCollapseConsole()} + onKeyDown={(event: React.KeyboardEvent) => this.onExpandCollapseKeyPress(event)} + tabIndex={0} + > In progress items @@ -136,6 +135,8 @@ export class NotificationConsoleComponent extends React.Component< tabIndex={0} aria-label="Console" aria-expanded={this.props.isConsoleExpanded} + onClick={() => this.expandCollapseConsole()} + onKeyDown={(event: React.KeyboardEvent) => this.onExpandCollapseKeyPress(event)} > { - if (this.props.isConsoleExpanded && this.consoleHeaderElement) { - this.consoleHeaderElement.focus(); - } + // if (this.props.isConsoleExpanded && this.consoleHeaderElement) { + // this.consoleHeaderElement.focus(); + // } useNotificationConsole.getState().setConsoleAnimationFinished(true); };