added shortcuts for faster tab closing

stefanak-michal · May 31, 2024 · 134dded · 134dded
1 parent 91351f3
commit 134dded
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/src/Logged.tsx b/src/Logged.tsx
@@ -216,6 +216,18 @@ class Logged extends React.Component<ILoggedProps, ILoggedState> {
                 return obj;
             });
         },
+        closeAll: (e: React.PointerEvent) => {
+            e.stopPropagation();
+            this.setState(state => {
+                const obj = {
+                    tabs: state.tabs.filter(tab => tab.id === 'Start'),
+                    contents: state.contents.filter(content => content.id === 'Start'),
+                    activeTab: 'Start',
+                };
+                localStorage.setItem('tabs', JSON.stringify(obj));
+                return obj;
+            });
+        },
         setChanged: (id: string, changed: boolean, callback?) => {
             this.setState(
                 {
@@ -436,8 +448,7 @@ class Logged extends React.Component<ILoggedProps, ILoggedState> {
                             <Tab
                                 key={'tab-' + tab.id}
                                 active={tab.id === this.state.activeTab}
-                                handleClick={this.tabManager.setActive}
-                                handleRemove={this.tabManager.close}
+                                tabManager={this.tabManager}
                                 {...tab}
                             />
                         ))}

diff --git a/src/layout/Tab.tsx b/src/layout/Tab.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
+import { ITabManager } from '../utils/interfaces';
 
 interface ITabProps {
     id: string;
     active: boolean;
     icon?: string;
     title: string;
-    handleClick: (id: string) => void;
-    handleRemove: (id: string, e?: any) => void;
+    tabManager: ITabManager;
 }
 
 /**
@@ -25,9 +25,28 @@ class Tab extends React.Component<ITabProps> {
         return (
             <li
                 className={this.props.active ? 'is-active' : ''}
-                onClick={() => this.props.handleClick(this.props.id)}
+                onClick={e => {
+                    if (this.props.id === 'Start') {
+                        this.props.tabManager.setActive(this.props.id);
+                        return;
+                    }
+                    if (e.ctrlKey) {
+                        this.props.tabManager.close(this.props.id, e as any);
+                        return;
+                    }
+                    if (e.shiftKey) {
+                        this.props.tabManager.closeAll(e as any);
+                        return;
+                    }
+                    this.props.tabManager.setActive(this.props.id);
+                }}
                 onMouseEnter={this.showDelete}
                 onMouseLeave={this.showDelete}
+                title={
+                    this.props.id !== 'Start'
+                        ? 'Ctrl+click close tab\nShift+click close all tabs (ignores unsaved changes)'
+                        : ''
+                }
             >
                 <a>
                     {this.props.icon && (
@@ -39,7 +58,7 @@ class Tab extends React.Component<ITabProps> {
                     {this.props.title !== 'Start' && this.state.delete && (
                         <button
                             className='delete is-small ml-3'
-                            onClick={e => this.props.handleRemove(this.props.id, e)}
+                            onClick={(e: any) => this.props.tabManager.close(this.props.id, e)}
                         />
                     )}
                 </a>

diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
@@ -13,6 +13,7 @@ export interface ITabManager {
         active?: boolean
     ) => string;
     close: (id: string, e?: React.PointerEvent) => void;
+    closeAll: (e: React.PointerEvent) => void;
     setActive: (id: string) => void;
     generateName: (prefix: string, i?: Integer | string | number | null) => string;
     generateId: (props: { id?: number | string; database?: string }, title?: string) => string;