feat: terminal split screen operation supports single deletion

opensumi · Sep 5, 2023 · 0e22038 · 0e22038
1 parent 1333888
commit 0e22038
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/packages/terminal-next/src/browser/component/resize.module.less b/packages/terminal-next/src/browser/component/resize.module.less
@@ -16,10 +16,23 @@
   justify-content: flex-end;
 
   .resizeItem {
+    position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    padding: 8px 2px 0 10px;
+    padding: 8px 20px 0 10px;
+    :global {
+      .kticon-close {
+        position: absolute;
+        right: 5px;
+        top: 10px;
+        cursor: pointer;
+        &:hover {
+          background-color: var(--kt-icon-hoverBackground);
+          transform: scale(1.1);
+        }
+      }
+    }
   }
 }
 

diff --git a/packages/terminal-next/src/browser/component/resize.view.tsx b/packages/terminal-next/src/browser/component/resize.view.tsx
@@ -1,6 +1,9 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import { useInjectable, getIcon } from '@opensumi/ide-core-browser';
+
+import { ITerminalGroupViewService } from '../../common/controller';
 import { IWidget, IWidgetGroup } from '../../common/resize';
 
 import ResizeDelegate from './resize.delegate';
@@ -23,6 +26,7 @@ export default observer((props: IResizeViewProps) => {
   const { group, shadow } = props;
   const [event, setEvent] = React.useState(false);
   const [wholeWidth, setWholeWidth] = React.useState(Infinity);
+  const view = useInjectable<ITerminalGroupViewService>(ITerminalGroupViewService);
   const whole = React.createRef<HTMLDivElement>();
 
   React.useEffect(() => {
@@ -77,6 +81,14 @@ export default observer((props: IResizeViewProps) => {
               className={styles.resizeItem}
             >
               {props.draw(widget)}
+              {group.widgets.length > 1 && (
+                <div
+                  className={getIcon('close')}
+                  onClick={() => {
+                    view.removeWidget(widget.id);
+                  }}
+                />
+              )}
             </div>
           ))}
       </div>