chore: improve image preview editor style (#2020)

Author: Aaaaash

packages/file-scheme/src/browser/preview.view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useInjectable, Disposable, DomListener } from '@opensumi/ide-core-browser';
+import { useInjectable, Disposable } from '@opensumi/ide-core-browser';
 import { ReactEditorComponent, IResource } from '@opensumi/ide-editor/lib/browser';
 import { StaticResourceService } from '@opensumi/ide-static-resource/lib/browser';
 
@@ -35,41 +35,6 @@ export const ImagePreview: ReactEditorComponent<null> = (props) => {
     const disposer = new Disposable();
     if (imgRef.current) {
       imgRef.current.src = src;
-      const last = imgRef.current;
-      imgRef.current.onload = (ev) => {
-        if (last !== imgRef.current) {
-          // 已经不是同一个元素，放弃
-          return;
-        }
-        if (imgContainerRef.current && imgRef.current) {
-          const container = imgContainerRef.current!;
-          let delta = 0;
-          const originalWidth = imgRef.current!.width;
-          const originalHeight = imgRef.current!.height;
-          const scale = originalHeight / originalWidth;
-          function setSize() {
-            container.style.width = originalWidth + delta + 'px';
-            container.style.height = originalHeight + delta * scale + 'px';
-          }
-          setSize();
-          disposer.addDispose(
-            new DomListener(container.parentElement!, 'wheel', (e) => {
-              // ctrlKey 为 true 代表 mac 上的 pinch gesture
-              if (e.ctrlKey) {
-                if (e.deltaY > 0) {
-                  e.preventDefault();
-                  delta -= e.deltaY * 10;
-                  setSize();
-                } else if (e.deltaY < 0) {
-                  e.preventDefault();
-                  delta -= e.deltaY * 10;
-                  setSize();
-                }
-              }
-            }),
-          );
-        }
-      };
     }
     return () => {
       disposer.dispose();

packages/file-scheme/src/browser/style.module.less

@@ -1,35 +1,43 @@
 .kt_image_preview {
   height: 100%;
+  display: flex;
+
   > div {
     background-image: linear-gradient(
         45deg,
-        rgb(230, 230, 230) 25%,
+        var(--editorImagePreview-background) 25%,
         transparent 25%,
         transparent 75%,
-        rgb(230, 230, 230) 75%,
-        rgb(230, 230, 230)
+        var(--editorImagePreview-background) 75%,
+        var(--editorImagePreview-background)
       ),
       linear-gradient(
         45deg,
-        rgb(230, 230, 230) 25%,
+        var(--editorImagePreview-background) 25%,
         transparent 25%,
         transparent 75%,
-        rgb(230, 230, 230) 75%,
-        rgb(230, 230, 230)
+        var(--editorImagePreview-background) 75%,
+        var(--editorImagePreview-background)
       );
     background-size: 16px 16px;
     background-position: 0 0, 8px 8px;
-    background-color: #fff;
-    display: block;
+    background-color: var(--editor-background);
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin: 0 auto;
+    flex: 1;
+    padding: 20px;
   }
+
   img {
-    image-rendering: pixelated;
     display: block;
     margin: 0 auto;
     flex-grow: 0;
-    width: 100%;
-    height: 100%;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
   }
 }
 

packages/theme/src/common/color-tokens/editor.ts

@@ -5,8 +5,8 @@ import { registerColor, transparent, lighten, darken, lessProminent } from '../u
 
 import { badgeBackground, badgeForeground } from './badge';
 import { contrastBorder, activeContrastBorder, focusBorder, foreground } from './base';
-import { backgroundColor, foregroundColor } from './basic-color';
 import { listInactiveSelectionBackground } from './list-tree';
+
 // TODO COLOR 此处vscode内的editor error warning info颜色都有做修改
 export const editorErrorBackground = registerColor(
   'editorError.background',
@@ -874,3 +874,14 @@ export const editorInlayHintParameterBackground = registerColor(
   },
   localize('editorInlayHintBackgroundParameter', 'Background color of inline hints for parameters'),
 );
+
+export const editorImagePreviewBackground = registerColor(
+  'editorImagePreview.background',
+  {
+    dark: new Color(new RGBA(20, 20, 20)),
+    light: new Color(new RGBA(230, 230, 230)),
+    hcLight: new Color(new RGBA(230, 230, 230)),
+    hcDark: new Color(new RGBA(20, 20, 20)),
+  },
+  localize('editorImagePreviewBackground', 'Background color of image preview editor.'),
+);