diff --git a/redisinsight/ui/src/pages/browser/BrowserPage.tsx b/redisinsight/ui/src/pages/browser/BrowserPage.tsx index b8664e6a63..67f69b2a9d 100644 --- a/redisinsight/ui/src/pages/browser/BrowserPage.tsx +++ b/redisinsight/ui/src/pages/browser/BrowserPage.tsx @@ -5,6 +5,8 @@ import cx from 'classnames' import { isNumber } from 'lodash' import { useTheme } from '@redis-ui/styles' +import styled from 'styled-components' + import { formatLongName, getDbIndex, @@ -66,6 +68,11 @@ const widthExplorePanel = 460 export const firstPanelId = 'keys' export const secondPanelId = 'keyDetails' +const BorderedResizablePanel = styled(ResizablePanel)` + border-radius: 8px; + border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500}; +` + const isOneSideMode = (isInsightsOpen: boolean) => globalThis.innerWidth < widthResponsiveSize + (isInsightsOpen ? widthExplorePanel : 0) @@ -324,7 +331,7 @@ const BrowserPage = () => { direction="horizontal" onLayout={onPanelWidthChange} > - { arePanelsCollapsed || (isBrowserFullScreen && !isRightPanelOpen), })} - style={{ - border: `1px solid ${theme.semantic.color.border.neutral500}`, - borderRadius: `8px`, - }} > { removeSelectedKey={handleRemoveSelectedKey} handleAddKeyPanel={handleAddKeyPanel} /> - + {!arePanelsCollapsed && !isBrowserFullScreen && ( )} - { [styles.keyDetails]: arePanelsCollapsed || (isRightPanelOpen && isBrowserFullScreen), })} - style={{ - border: `1px solid ${theme.semantic.color.border.neutral500}`, - borderRadius: `5px`, - }} > { handleBulkActionsPanel={handleBulkActionsPanel} closeRightPanels={closeRightPanels} /> - + diff --git a/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx b/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx index f37831a362..483f1cd97c 100644 --- a/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx +++ b/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react' import { useSelector } from 'react-redux' +import styled from 'styled-components' import InstanceHeader from 'uiSrc/components/instance-header' import { ExplorePanelTemplate } from 'uiSrc/templates' @@ -27,6 +28,10 @@ export interface Props { children: React.ReactNode } +const ButtonGroupResizablePanel = styled(ResizablePanel)` + flex-basis: 27px !important; +` + export const getDefaultSizes = () => { const storedSizes = localStorageService.get( BrowserStorageItem.cliResizableContainer, @@ -35,17 +40,6 @@ export const getDefaultSizes = () => { return storedSizes && Array.isArray(storedSizes) ? storedSizes : [60, 40] } -export const calculateMainPanelInitialSize = () => { - const total = window.innerHeight - const remaining = total - 26 - return Math.floor((remaining / total) * 100) -} - -export const calculateBottomGroupPanelInitialSize = () => { - const total = window.innerHeight - return Math.ceil((26 / total) * 100) -} - const roundUpSizes = (sizes: number[]) => [ Math.floor(sizes[0]), Math.ceil(sizes[1]), @@ -58,9 +52,6 @@ const InstancePageTemplate = (props: Props) => { const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector) const { isShowMonitor } = useSelector(monitorSelector) - const sizeMain: number = calculateMainPanelInitialSize() - const sizeBottomCollapsed: number = calculateBottomGroupPanelInitialSize() - const ref = useRef(null) useEffect( @@ -92,7 +83,7 @@ const InstancePageTemplate = (props: Props) => { if (isShowBottomGroup) { ref.current?.setLayout(roundUpSizes(sizes)) } else { - ref.current?.setLayout([sizeMain, sizeBottomCollapsed]) + ref.current?.setLayout([100, 0]) } }, [isShowBottomGroup]) @@ -111,7 +102,7 @@ const InstancePageTemplate = (props: Props) => { { data-testid="resize-btn-browser-cli" style={{ display: isShowBottomGroup ? 'inherit' : 'none' }} /> - - } + - + )