fix: improve minimap color theme & problem color theme (#270)

mortalYoung · web-flow · commit 958928ec4c9d · 2021-07-28T11:07:30.000+08:00
diff --git a/src/components/collapse/style.scss b/src/components/collapse/style.scss
@@ -56,13 +56,8 @@ $collapse__extra: #{$collapse}__extra;
         opacity: 0;
 
         #{$actionBar}__label.codicon {
-            color: var(--activityBar-inactiveForeground);
             height: inherit;
             line-height: inherit;
-
-            &:hover {
-                color: var(--activityBar-activeBorder);
-            }
         }
     }
 
diff --git a/src/components/tree/style.scss b/src/components/tree/style.scss
@@ -33,6 +33,7 @@ $switch: #{$rcTree}-switcher;
                 margin: 0;
                 padding: 0 0 0 18px;
             }
+
             span#{$switch} {
                 background-attachment: scroll;
                 background-color: transparent;
@@ -65,11 +66,6 @@ $switch: #{$rcTree}-switcher;
                     cursor: not-allowed;
                 }
             }
-
-            &-selected {
-                background: var(--list-activeSelectionBackground);
-                border-color: var(--list-focusOutline);
-            }
         }
 
         &-node-content-wrapper {
diff --git a/src/extensions/theme-defaults/themes/dark_defaults.json b/src/extensions/theme-defaults/themes/dark_defaults.json
@@ -27,12 +27,18 @@
         "inputValidation.errorBackground": "#5A1D1D",
         "inputValidation.errorBorder": "#BE1100",
         "icon.foreground": "#C5C5C5",
+        "problemsWarningIcon.foreground": "#CCA700",
+        "problemsErrorIcon.foreground": "#F48771",
+        "problemsInfoIcon.foreground": "#75BEFF",
         "settings.textInputBackground": "#292929",
         "settings.numberInputBackground": "#292929",
         "menu.background": "#252526",
         "menu.foreground": "#CCCCCC",
         "menu.selectionBackground": "#094771",
         "menu.separatorBackground": "#BBBBBB",
+        "minimapSlider.background": "#79797980",
+        "minimapSlider.hoverBackground": "#64646480",
+        "minimapSlider.activeBackground": "#bfbfbf66",
         "statusBarItem.remoteForeground": "#FFF",
         "statusBarItem.remoteBackground": "#16825D",
         "sidebarSectionHeader.background": "#0000",
diff --git a/src/extensions/theme-defaults/themes/light_defaults.json b/src/extensions/theme-defaults/themes/light_defaults.json
@@ -27,6 +27,9 @@
         "inputValidation.errorBackground": "#F2DEDE",
         "inputValidation.errorBorder": "#BE1100",
         "icon.foreground": "#424242",
+        "problemsWarningIcon.foreground": "#BF8803",
+        "problemsErrorIcon.foreground": "#E51400",
+        "problemsInfoIcon.foreground": "#75BEFF",
         "searchEditor.textInputBorder": "#CECECE",
         "diffEditor.insertedTextBackground": "#9bb95533",
         "diffEditor.removedTextBackground": "#ff000033",
@@ -39,6 +42,9 @@
         "tab.border": "#f3f3f3",
         "menu.selectionBackground": "#0060C0",
         "menu.separatorBackground": "#888888",
+        "minimapSlider.background": "#64646480",
+        "minimapSlider.hoverBackground": "#64646480",
+        "minimapSlider.activeBackground": "#00000099",
         "tab.inactiveBackground": "rgb(236, 236, 236)",
         "tab.inactiveForeground": "rgba(51, 51, 51, 0.7)",
         "tab.activeBackground": "#fffffe",
diff --git a/src/style/theme/tree.scss b/src/style/theme/tree.scss
@@ -29,11 +29,16 @@
     }
 
     .rc-tree-treenode-selected {
-        background: var(--button-background);
+        background: var(--list-activeSelectionBackground);
+        border-color: var(--list-focusOutline);
 
         .rc-tree-node-content-wrapper {
             color: var(--list-activeSelectionForeground);
         }
+
+        .rc-tree-switcher {
+            color: var(--list-activeSelectionForeground);
+        }
     }
 
     input {
diff --git a/src/workbench/editor/style.scss b/src/workbench/editor/style.scss
@@ -42,10 +42,6 @@
             justify-content: center;
             padding: 0 8px 0 4px;
 
-            &:not(#{$editor}__group-actions-item--disabled):hover {
-                color: var(--activityBar-activeBorder);
-            }
-
             &--disabled {
                 cursor: default;
                 opacity: 0.4;
diff --git a/src/workbench/problems/paneView/index.tsx b/src/workbench/problems/paneView/index.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { getBEMElement, prefixClaName } from 'mo/common/className';
 import TreeView from 'mo/components/tree';
 import { localize } from 'mo/i18n/localize';
-import { Scrollable } from 'mo/components';
+import { Icon, Scrollable } from 'mo/components';
+import { IProblems, MarkerSeverity } from 'mo/model';
 
 const defaultClassName = prefixClaName('problems');
 const treeClassName = getBEMElement(defaultClassName, 'treeview');
@@ -11,9 +12,9 @@ const treeNodeBadgeClassName = getBEMElement(treeNodeClassName, 'badge');
 const treeLeafClassName = getBEMElement(treeClassName, 'treeLeaf');
 const treeLeafSubInfoClassName = getBEMElement(treeLeafClassName, 'subInfo');
 
-function ProblemsPaneView(props: any) {
+function ProblemsPaneView(props: IProblems) {
     const { data } = props;
-    if (!data?.length)
+    if (!data?.length) {
         return (
             <div style={{ margin: '0 18px', userSelect: 'none' }}>
                 {localize(
@@ -22,6 +23,24 @@ function ProblemsPaneView(props: any) {
                 )}
             </div>
         );
+    }
+
+    const getIcon = (status: number) => {
+        switch (status) {
+            case MarkerSeverity.Error: {
+                return <Icon type="error" />;
+            }
+            case MarkerSeverity.Warning: {
+                return <Icon type="warning" />;
+            }
+            case MarkerSeverity.Info: {
+                return <Icon type="info" />;
+            }
+            default: {
+                return '';
+            }
+        }
+    };
 
     return (
         <Scrollable>
@@ -39,7 +58,8 @@ function ProblemsPaneView(props: any) {
                             </span>
                         ) : (
                             <span className={treeLeafClassName}>
-                                {value.message}
+                                {getIcon(value.status)}
+                                <span>{value.message}</span>
                                 <span className={treeLeafSubInfoClassName}>
                                     {value.code}
                                 </span>
diff --git a/src/workbench/problems/style.scss b/src/workbench/problems/style.scss
@@ -1,6 +1,6 @@
 @import 'mo/style/common';
 
-$badge-size: 18px;
+$badge-size: 11px;
 
 #{$problems} {
     margin: 0 18px;
@@ -12,21 +12,46 @@ $badge-size: 18px;
 
             &__badge {
                 background: var(--badge-background);
-                border-radius: 50%;
+                border-radius: $badge-size;
+                box-sizing: border-box;
                 color: var(--badge-foreground);
                 display: inline-block;
-                height: $badge-size;
+                font-size: $badge-size;
+                font-weight: 400;
                 line-height: $badge-size;
                 margin-left: 10px;
+                min-height: 18px;
+                min-width: 18px;
+                padding: 3px 6px;
                 text-align: center;
-                width: $badge-size;
+            }
+        }
+
+        #{$rcTree}-treenode:not(#{$rcTree}-treenode-selected) {
+            .codicon-info {
+                color: var(--problemsInfoIcon-foreground);
+            }
+
+            .codicon-warning {
+                color: var(--problemsWarningIcon-foreground);
+            }
+
+            .codicon-error {
+                color: var(--problemsErrorIcon-foreground);
             }
         }
 
         &__treeLeaf {
+            align-items: center;
+            display: flex;
+
+            .codicon {
+                margin-right: 6px;
+            }
+
             &__subInfo {
-                color: var(--activityBar-inactiveForeground);
-                margin-left: 5px;
+                margin-left: 6px;
+                opacity: 0.7;
             }
         }
     }
diff --git a/stories/extensions/problems/index.tsx b/stories/extensions/problems/index.tsx
@@ -26,6 +26,34 @@ function init() {
                     startColumn: 1,
                     endLineNumber: 0,
                     endColumn: 1,
+                    status: 8,
+                },
+                children: [],
+            },
+            {
+                id: 4,
+                name: '0-1',
+                value: {
+                    code: 'endLineNumber',
+                    message: '解析可能会存在问题',
+                    startLineNumber: 0,
+                    startColumn: 1,
+                    endLineNumber: 0,
+                    endColumn: 1,
+                    status: 4,
+                },
+                children: [],
+            },
+            {
+                id: 5,
+                name: '0-1',
+                value: {
+                    code: 'endLineNumber',
+                    message: '住在山里，真不戳',
+                    startLineNumber: 0,
+                    startColumn: 1,
+                    endLineNumber: 0,
+                    endColumn: 1,
                     status: 2,
                 },
                 children: [],

Original file line number	Diff line number	Diff line change
`@@ -56,13 +56,8 @@ $collapse__extra: #{$collapse}__extra;`
`56`	`56`	`opacity: 0;`
`57`	`57`
`58`	`58`	`#{$actionBar}__label.codicon {`
`59`		`- color: var(--activityBar-inactiveForeground);`
`60`	`59`	`height: inherit;`
`61`	`60`	`line-height: inherit;`
`62`		`-`
`63`		`- &:hover {`
`64`		`- color: var(--activityBar-activeBorder);`
`65`		`- }`
`66`	`61`	`}`
`67`	`62`	`}`
`68`	`63`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ $switch: #{$rcTree}-switcher;`
`33`	`33`	`margin: 0;`
`34`	`34`	`padding: 0 0 0 18px;`
`35`	`35`	`}`
	`36`	`+`
`36`	`37`	`span#{$switch} {`
`37`	`38`	`background-attachment: scroll;`
`38`	`39`	`background-color: transparent;`
`@@ -65,11 +66,6 @@ $switch: #{$rcTree}-switcher;`
`65`	`66`	`cursor: not-allowed;`
`66`	`67`	`}`
`67`	`68`	`}`
`68`		`-`
`69`		`- &-selected {`
`70`		`- background: var(--list-activeSelectionBackground);`
`71`		`- border-color: var(--list-focusOutline);`
`72`		`- }`
`73`	`69`	`}`
`74`	`70`
`75`	`71`	`&-node-content-wrapper {`
Original file line number	Diff line number	Diff line change
`@@ -29,11 +29,16 @@`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`.rc-tree-treenode-selected {`
`32`		`- background: var(--button-background);`
	`32`	`+ background: var(--list-activeSelectionBackground);`
	`33`	`+ border-color: var(--list-focusOutline);`
`33`	`34`
`34`	`35`	`.rc-tree-node-content-wrapper {`
`35`	`36`	`color: var(--list-activeSelectionForeground);`
`36`	`37`	`}`
	`38`	`+`
	`39`	`+ .rc-tree-switcher {`
	`40`	`+ color: var(--list-activeSelectionForeground);`
	`41`	`+ }`
`37`	`42`	`}`
`38`	`43`
`39`	`44`	`input {`