jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): another fix for controls

Browse source
This commit is contained in:
nick-delirium 2023-09-14 10:27:37 +02:00
parent fc85e4e77c
commit 5877f10f66
1 changed files with 11 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/app/components/Session_/Player/Controls/Controls.tsx
View file

@ -172,12 +172,9 @@ function Controls(props: any) {
<div className="flex items-center h-full">
<DevtoolsButtons
showStorageRedux={showStorageRedux}
disabledRedux={disabledRedux}
toggleBottomTools={toggleBottomTools}
bottomBlock={bottomBlock}
markedTargets={markedTargets}
messagesLoading={messagesLoading}
disabled={disabled}
/>
<Tooltip title="Fullscreen" delay={0} placement="top-start" className="mx-4">
<FullScreenButton
@ -195,14 +192,12 @@ function Controls(props: any) {
interface IDevtoolsButtons {
showStorageRedux: boolean;
disabledRedux: boolean;
toggleBottomTools: (blockName: number) => void;
bottomBlock: number;
markedTargets: MarkedTarget[] | null;
messagesLoading: boolean;
disabled: boolean;
}
const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomBlock, disabledRedux, messagesLoading, markedTargets }: IDevtoolsButtons) => {
const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomBlock, disabled }: IDevtoolsButtons) => {
const { store } = React.useContext(PlayerContext);
const {
@ -211,8 +206,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
tabStates
} = store.get();
const cssLoading = tabStates[currentTab]?.cssLoading ?? false;
const disabled = disabledRedux || cssLoading || messagesLoading || inspectorMode || markedTargets;
const disableButtons = disabled;
const profilesList = tabStates[currentTab]?.profilesList || [];
const graphqlList = tabStates[currentTab]?.graphqlList || [];
@ -231,7 +225,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
return (
<>
<ControlButton
disabled={disabled && !inspectorMode}
disabled={disableButtons}
onClick={() => toggleBottomTools(CONSOLE)}
active={bottomBlock === CONSOLE && !inspectorMode}
label="CONSOLE"
@ -242,7 +236,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
/>
<ControlButton
disabled={disabled && !inspectorMode}
disabled={disableButtons}
onClick={() => toggleBottomTools(NETWORK)}
active={bottomBlock === NETWORK && !inspectorMode}
label="NETWORK"
@ -253,7 +247,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
/>
<ControlButton
disabled={disabled && !inspectorMode}
disabled={disableButtons}
onClick={() => toggleBottomTools(PERFORMANCE)}
active={bottomBlock === PERFORMANCE && !inspectorMode}
label="PERFORMANCE"
@ -264,7 +258,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
{showGraphql && (
<ControlButton
disabled={disabled && !inspectorMode}
disabled={disableButtons}
onClick={() => toggleBottomTools(GRAPHQL)}
active={bottomBlock === GRAPHQL && !inspectorMode}
label="GRAPHQL"
@ -276,7 +270,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
{showStorage && (
<ControlButton
disabled={disabled && !inspectorMode}
disabled={disableButtons}
onClick={() => toggleBottomTools(STORAGE)}
active={bottomBlock === STORAGE && !inspectorMode}
label={getStorageName(storageType)}
@ -286,7 +280,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
/>
)}
<ControlButton
disabled={disabled && !inspectorMode}
disabled={disableButtons}
onClick={() => toggleBottomTools(STACKEVENTS)}
active={bottomBlock === STACKEVENTS && !inspectorMode}
label="EVENTS"
@ -297,7 +291,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
/>
{showProfiler && (
<ControlButton
disabled={disabled && !inspectorMode}
disabled={disableButtons}
onClick={() => toggleBottomTools(PROFILER)}
active={bottomBlock === PROFILER && !inspectorMode}
label="PROFILER"