feat: added text ellipsis to File Explorer title

kubeshop · Nov 9, 2021 · 9fcc3da · 9fcc3da
1 parent cb6f06e
commit 9fcc3da
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/components/atoms/SplitView/SplitView.tsx b/src/components/atoms/SplitView/SplitView.tsx
@@ -1,16 +1,10 @@
-import React, {
-  useState,
-  useLayoutEffect,
-  MouseEvent,
-  TouchEvent,
-  ReactElement,
-  FunctionComponent,
-  useEffect,
-} from 'react';
+import {FunctionComponent, MouseEvent, ReactElement, TouchEvent, useEffect, useLayoutEffect, useState} from 'react';
 import styled from 'styled-components';
+
+import {useAppDispatch, useAppSelector} from '@redux/hooks';
+import {setLeftMenuIsActive, setPaneConfiguration, setRightMenuIsActive} from '@redux/reducers/ui';
+
 import {AppBorders} from '@styles/Borders';
-import {useAppSelector, useAppDispatch} from '@redux/hooks';
-import {setPaneConfiguration, setRightMenuIsActive, setLeftMenuIsActive} from '@redux/reducers/ui';
 
 const MIN_WIDTH = 300;
 const MIN_LEFT_PANE_WIDTH = 300;

diff --git a/src/components/organisms/FileTreePane/FileTreePane.tsx b/src/components/organisms/FileTreePane/FileTreePane.tsx
@@ -197,6 +197,13 @@ const TitleBarContainer = styled.div`
   justify-content: space-between;
 `;
 
+const Title = styled.span`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-right: 10px;
+`;
+
 const RightButtons = styled.div`
   display: flex;
   align-items: center;
@@ -412,7 +419,7 @@ const FileTreePane = () => {
         <MonoPaneTitleCol>
           <MonoPaneTitle>
             <TitleBarContainer>
-              <span>File Explorer</span>
+              <Title>File Explorer</Title>
               <RightButtons>
                 <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={BrowseFolderTooltip}>
                   <BrowseButton
@@ -422,7 +429,7 @@ const FileTreePane = () => {
                     ghost
                     onClick={openFileExplorer}
                   >
-                    Browse
+                    {Number(uiState.paneConfiguration.leftWidth.toFixed(2)) < 0.2 ? '' : 'Browse'}
                   </BrowseButton>
                 </Tooltip>
                 <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={ReloadFolderTooltip}>