random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 17:30:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

3556812

Browse Source
This commit is contained in:
Satyapriya Bai
2025-02-17 12:28:55 +05:30
parent 20151c155b
commit a569dcf32d
2 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/Explorer/Menus/NotificationConsole/NotificationConsole.less
View File

@@ -1,6 +1,6 @@
@import "../../../../less/Common/Constants"; @import "../../../../less/Common/Constants";
@ConsoleHeaderHeight: 32px; // @ConsoleHeaderHeight: 32px;
@ConsoleContentsPaneHeight: 220px; @ConsoleContentsPaneHeight: 220px;
@ConsoleStatusMaxWidth: 672px; @ConsoleStatusMaxWidth: 672px;
@@ -22,7 +22,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
height: @ConsoleHeaderHeight; // height: @ConsoleHeaderHeight;
width: 100%; width: 100%;
background-color: @NotificationLow; background-color: @NotificationLow;
border-top: @ButtonBorderWidth @BaseMedium solid; border-top: @ButtonBorderWidth @BaseMedium solid;
@@ -38,6 +38,9 @@
} }
.statusBar { .statusBar {
width: 100%;
padding: 6px 0px;
.dataTypeIcons { .dataTypeIcons {
cursor: pointer; cursor: pointer;
margin: 0px @DefaultSpace 0px @MediumSpace; margin: 0px @DefaultSpace 0px @MediumSpace;
@@ -76,11 +79,14 @@
max-width: @ConsoleStatusMaxWidth; max-width: @ConsoleStatusMaxWidth;
} }
} }
&:focus {
outline: none;
}
} }
.expandCollapseButton { .expandCollapseButton {
cursor: pointer; cursor: pointer;
padding-right: 5px; padding: 6px 5px 6px 0px;
img { img {
width: @ExpandCollapseIconSize; width: @ExpandCollapseIconSize;

21
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
View File

@@ -81,9 +81,9 @@ export class NotificationConsoleComponent extends React.Component<
} }
} }
public setElememntRef = (element: HTMLElement): void => { // public setElememntRef = (element: HTMLElement): void => {
this.consoleHeaderElement = element; // this.consoleHeaderElement = element;
}; // };
public render(): JSX.Element { public render(): JSX.Element {
const numInProgress = this.state.allConsoleData.filter( const numInProgress = this.state.allConsoleData.filter(
@@ -98,15 +98,14 @@ export class NotificationConsoleComponent extends React.Component<
return ( return (
<div className="notificationConsoleContainer"> <div className="notificationConsoleContainer">
<div className="notificationConsoleHeader" id="notificationConsoleHeader">
<div <div
className="notificationConsoleHeader" className="statusBar"
id="notificationConsoleHeader" // ref={this.setElememntRef}
ref={this.setElememntRef}
onClick={() => this.expandCollapseConsole()} onClick={() => this.expandCollapseConsole()}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)} onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
tabIndex={0} tabIndex={0}
> >
<div className="statusBar">
<span className="dataTypeIcons"> <span className="dataTypeIcons">
<span className="notificationConsoleHeaderIconWithData"> <span className="notificationConsoleHeaderIconWithData">
<img src={LoadingIcon} alt="In progress items" /> <img src={LoadingIcon} alt="In progress items" />
@@ -136,6 +135,8 @@ export class NotificationConsoleComponent extends React.Component<
tabIndex={0} tabIndex={0}
aria-label="Console" aria-label="Console"
aria-expanded={this.props.isConsoleExpanded} aria-expanded={this.props.isConsoleExpanded}
onClick={() => this.expandCollapseConsole()}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
> >
<img <img
src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon} src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
@@ -259,9 +260,9 @@ export class NotificationConsoleComponent extends React.Component<
} }
private onConsoleWasExpanded = (): void => { private onConsoleWasExpanded = (): void => {
if (this.props.isConsoleExpanded && this.consoleHeaderElement) { // if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
this.consoleHeaderElement.focus(); // this.consoleHeaderElement.focus();
} // }
useNotificationConsole.getState().setConsoleAnimationFinished(true); useNotificationConsole.getState().setConsoleAnimationFinished(true);
}; };