feat(problems and notification): modify problems and notification styles and rename panel

Author: linhe

src/controller/notification.tsx

@@ -14,7 +14,7 @@ import {
 import { select } from 'mo/common/dom';
 import { ID_APP } from 'mo/common/id';
 import {
-    NotificationPanel,
+    NotificationPane,
     NotificationStatusBarView,
 } from 'mo/workbench/notification';
 import {
@@ -53,11 +53,11 @@ export class NotificationController
         }
     };
 
-    private _notificationPanel: HTMLDivElement | undefined = undefined;
+    private _notificationPane: HTMLDivElement | undefined = undefined;
 
     private showHideNotifications() {
-        if (!this._notificationPanel) {
-            this.renderNotificationPanel();
+        if (!this._notificationPane) {
+            this.renderNotificationPane();
         }
         this.notificationService.showHideNotifications();
     }
@@ -91,21 +91,21 @@ export class NotificationController
         this.statusBarService.appendRightItem(notificationItem);
     }
 
-    public renderNotificationPanel() {
-        const NotificationPanelView = connect(
+    public renderNotificationPane() {
+        const NotificationPaneView = connect(
             this.notificationService,
-            NotificationPanel
+            NotificationPane
         );
         const root = select('#' + ID_APP);
         const container = document.createElement('div');
         root?.appendChild(container);
         ReactDOM.render(
-            <NotificationPanelView
+            <NotificationPaneView
                 onActionBarClick={this.onActionBarClick}
                 onCloseNotification={this.onCloseNotification}
             />,
             container
         );
-        this._notificationPanel = container;
+        this._notificationPane = container;
     }
 }

src/controller/problems.tsx

@@ -29,10 +29,13 @@ export class ProblemsController
         const { current, hidden } = this.panelService.getState();
         if (hidden) {
             this.panelService.showHide();
-        } else if (current?.id !== PANEL_PROBLEMS.id) {
             this.panelService.open(PANEL_PROBLEMS);
         } else {
-            this.panelService.showHide();
+            if (current?.id !== PANEL_PROBLEMS.id) {
+                this.panelService.open(PANEL_PROBLEMS);
+            } else {
+                this.panelService.showHide();
+            }
         }
     }
 

src/model/problems.tsx

@@ -2,10 +2,7 @@ import * as React from 'react';
 import { injectable } from 'tsyringe';
 import { IStatusBarItem } from 'mo/model/workbench/statusBar';
 import { IPanelItem } from 'mo/model/workbench/panel';
-import {
-    ProblemsStatusBarView,
-    ProblemsPanelView,
-} from 'mo/workbench/problems';
+import { ProblemsStatusBarView, ProblemsPaneView } from 'mo/workbench/problems';
 
 export enum MarkerSeverity {
     Hint = 1,
@@ -50,7 +47,7 @@ export const PANEL_PROBLEMS: IPanelItem = {
     id: 'ProblemsPane',
     name: 'problems',
     data: null,
-    renderPane: (item) => <ProblemsPanelView {...item} />,
+    renderPane: (item) => <ProblemsPaneView {...item} />,
 };
 
 @injectable()

src/services/notificationService.ts

@@ -72,7 +72,7 @@ export class NotificationService
     }
 
     public addNotifications<T>(
-        items: INotificationItem<any>[]
+        items: INotificationItem<T>[]
     ): null | INotificationItem<T>[] {
         const { data = [] } = this.state;
 

src/services/problemsService.ts

@@ -8,12 +8,15 @@ import {
 } from 'mo/model/problems';
 import { IPanelItem } from 'mo/model/workbench/panel';
 import { IStatusBarItem } from 'mo/model/workbench/statusBar';
-import { PanelService, StatusBarService } from 'mo/services';
+import {
+    PanelService,
+    IPanelService,
+    StatusBarService,
+    IStatusBarService,
+} from 'mo/services';
 import { Component } from 'mo/react';
 import { singleton, container } from 'tsyringe';
 import { searchById } from './helper';
-const panelService = container.resolve(PanelService);
-const statusBarService = container.resolve(StatusBarService);
 export interface IProblemsService extends Component<IProblems> {
     updateStatus<T>(item: IStatusBarItem<T>): void;
     updatePanel<T>(item: IStatusBarItem<T>): void;
@@ -31,10 +34,13 @@ export class ProblemsService
     extends Component<IProblems>
     implements IProblemsService {
     protected state: IProblems;
-
+    private readonly panelService: IPanelService;
+    private readonly statusBarService: IStatusBarService;
     constructor() {
         super();
         this.state = container.resolve(ProblemsModel);
+        this.panelService = container.resolve(PanelService);
+        this.statusBarService = container.resolve(StatusBarService);
     }
 
     public showHideProblems(): void {
@@ -116,18 +122,17 @@ export class ProblemsService
         this.updatePanel(Object.assign(PANEL_PROBLEMS, { data }));
     }
     public updateStatus<T>(item: IStatusBarItem<T>): void {
-        statusBarService.updateItem(item);
+        this.statusBarService.updateItem(item);
     }
     public updatePanel<T>(item: IPanelItem<T>): void {
-        panelService.update(item);
+        this.panelService.update(item);
     }
     public getProblemsMarkers = (
         data: IProblemsItem[]
     ): { warnings: number; errors: number; infos: number } => {
         let warnings = 0;
         let errors = 0;
         let infos = 0;
-        // let hint = 0;
         const loopTreeNode = (tree: IProblemsItem[]) => {
             tree.forEach((element: IProblemsItem) => {
                 switch (element.value.status) {
@@ -141,7 +146,6 @@ export class ProblemsService
                         warnings += 1;
                         break;
                     default:
-                    // hint += 1;
                 }
                 if (element.children && element.children.length) {
                     loopTreeNode(element.children);

src/style/common.scss

@@ -40,6 +40,7 @@ $statusBar: prefix('statusBar');
 $workbench: prefix('workbench');
 $mainBench: prefix('mainBench');
 $notification: prefix('notification');
+$problems: prefix('problems');
 
 // The Naming of BEM Element
 @function bem-ele($block, $element) {

src/style/mo.scss

@@ -31,8 +31,9 @@
 @import 'mo/workbench/settings/style';
 @import 'mo/workbench/sidebar/style';
 @import 'mo/workbench/statusBar/style';
-// @import 'mo/workbench/statusBar/notification/style';
+@import 'mo/workbench/notification/style';
 @import 'mo/workbench/sidebar/explore/style';
+@import 'mo/workbench/problems/style';
 
 .#{$prefix} {
     bottom: 0;

src/workbench/notification/index.tsx

@@ -1,4 +1,4 @@
-import NotificationPanel from './notificationPanel';
+import NotificationPane from './notificationPane';
 import NotificationStatusBarView from './statusBarView';
 
-export { NotificationPanel, NotificationStatusBarView };
+export { NotificationPane, NotificationStatusBarView };

src/workbench/notification/notificationPanel/index.tsx src/workbench/notification/notificationPane/index.tsx

@@ -10,7 +10,6 @@ import {
 import ActionBar from 'mo/components/actionBar';
 import { shadowClassName } from 'mo/components/contextView';
 import { Icon } from 'mo/components/icon';
-import './style.scss';
 
 const defaultNotificationClassName = prefixClaName('notification');
 const notificationHeaderClassName = getBEMElement(
@@ -26,7 +25,7 @@ const notificationCloseClassName = getBEMModifier(
     'close'
 );
 
-export function NotificationPanel(
+export function NotificationPane(
     props: INotification & INotificationController
 ) {
     const {
@@ -70,4 +69,4 @@ export function NotificationPanel(
         </div>
     );
 }
-export default React.memo(NotificationPanel);
+export default React.memo(NotificationPane);

src/workbench/notification/notificationPanel/style.scss src/workbench/notification/style.scss

@@ -1,4 +1,4 @@
 import ProblemsStatusBarView from './statusBarView';
-import ProblemsPanelView from './panelView';
+import ProblemsPaneView from './paneView';
 
-export { ProblemsStatusBarView, ProblemsPanelView };
+export { ProblemsStatusBarView, ProblemsPaneView };

src/workbench/problems/index.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { prefixClaName } from 'mo/common/className';
 import TreeView from 'mo/components/tree';
-import './style.scss';
 
 const defaultClassName = prefixClaName('problems');
 
-function ProblemsPanelView(props: any) {
+function ProblemsPaneView(props: any) {
     const { data } = props;
     const renderTitle = (item: any): any => {
         const { name, children, value } = item;
@@ -17,10 +16,10 @@ function ProblemsPanelView(props: any) {
         );
     };
     return (
-        <div className={defaultClassName} style={{ margin: '0 18px' }}>
+        <div className={defaultClassName}>
             <TreeView data={data} renderTitle={renderTitle} />
         </div>
     );
 }
 
-export default React.memo(ProblemsPanelView);
+export default React.memo(ProblemsPaneView);

src/workbench/problems/panelView/index.tsx src/workbench/problems/paneView/index.tsx

@@ -0,0 +1,5 @@
+@import 'mo/style/common';
+
+#{$problems} {
+    margin: 0 18px;
+}