From f74d78566a1fc0adcfd994b22f75214411a2d0cc Mon Sep 17 00:00:00 2001
From: DmitriyNoa <dmytro.zharkov@gmail.com>
Date: Mon, 24 Jan 2022 17:23:40 +0100
Subject: [PATCH] Add separators and scroll button

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>
---
 src/renderer/components/dock/dock-tab.scss |  5 ++++-
 src/renderer/components/dock/dock.tsx      | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/dock/dock-tab.scss b/src/renderer/components/dock/dock-tab.scss
index 845a66c794..a90bd9e594 100644
--- a/src/renderer/components/dock/dock-tab.scss
+++ b/src/renderer/components/dock/dock-tab.scss
@@ -5,7 +5,6 @@
 
 .DockTab {
   padding: $padding;
-  padding-right: 0;
 
   .Icon {
     &.material {
@@ -36,4 +35,8 @@
   &:last-child {
     padding-right: $padding;
   }
+
+  border-right-width: 2px;
+  border-right-color: var(--dockInfoBackground);
+  border-right-style: solid;
 }
diff --git a/src/renderer/components/dock/dock.tsx b/src/renderer/components/dock/dock.tsx
index dcc655c60d..359c51790d 100644
--- a/src/renderer/components/dock/dock.tsx
+++ b/src/renderer/components/dock/dock.tsx
@@ -91,6 +91,20 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
     }
   }
 
+  isScrollableRight = (): boolean => {
+    if(!this.element) return false;
+    const child = document.querySelector(".DockTabs");
+
+    const parentWidth = this.element.current.clientWidth;
+    const childWidth = child && child.clientWidth || 0;
+
+    return childWidth > parentWidth;
+  };
+
+  scrollToRight = (): void => {
+    console.log("Current", this.element?.current);
+  };
+
   renderTabContent() {
     const { isOpen, height, selectedTab } = this.props.dockStore;
 
@@ -132,6 +146,11 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
             onChangeTab={this.onChangeTab}
           />
           <div className="toolbar flex gaps align-center box grow">
+            <Icon
+              material="keyboard_arrow_right"
+              tooltip="Show tabs to the right"
+              onClick={this.scrollToRight}
+            />
             <div className="dock-menu box grow">
               <MenuActions usePortal triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: "New tab" }} closeOnScroll={false}>
                 <MenuItem className="create-terminal-tab" onClick={() => this.props.createTerminalTab()}>