dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 08:26:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

toolbar improved - disabled buttons

Browse Source
This commit is contained in:
Jan Prochazka
2020-03-30 21:58:09 +02:00
parent 8f245ca40f
commit fdd0285c6f
3 changed files with 67 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/web/src/widgets/Toolbar.js
View File

@@ -1,44 +1,17 @@
import ReactDOM from 'react-dom';
import React from 'react';
import useModalState from '../modals/useModalState';
import ConnectionModal from '../modals/ConnectionModal';
import styled from 'styled-components';
import theme from '../theme';
import { useOpenedTabs } from '../utility/globalState';
import ToolbarButton from './ToolbarButton';
const ToolbarContainer = styled.div`
display: flex;
user-select: none;
`;
export const ToolbarButton = styled.div`
// height: ${theme.toolBar.height - 5}px;
// border: 1px solid gray;
padding: 5px;
margin: 2px;
//background-color: #777;
background-color: #337ab7;
border-color: #2e6da4; color: white;
border-radius: 2px;
&:hover {
background-color: #286090;
}
`;
export default function ToolBar({ toolbarPortalRef }) {
const modalState = useModalState();
const tabs = useOpenedTabs();
const selectedTab = tabs.find(x => x.selected);
// React.useEffect(() => {
// const node = toolbarPortalRef.current;
// if (node) {
// ReactDOM.unmountComponentAtNode(node);
// while (node.lastElementChild) {
// node.removeChild(node.lastElementChild);
// }
// }
// }, [selectedTab]);
return (
<ToolbarContainer>
<ConnectionModal modalState={modalState} />

52
packages/web/src/widgets/ToolbarButton.js Normal file
View File

@@ -0,0 +1,52 @@
// @ts-nocheck
import ReactDOM from 'react-dom';
import React from 'react';
import useModalState from '../modals/useModalState';
import ConnectionModal from '../modals/ConnectionModal';
import styled from 'styled-components';
import theme from '../theme';
import { useOpenedTabs } from '../utility/globalState';
const ButtonDiv = styled.div`
// height: ${theme.toolBar.height - 5}px;
// border: 1px solid gray;
padding: 5px;
margin: 2px;
//background-color: #777;
background-color: #337ab7;
border-color: #2e6da4; color: white;
border-radius: 2px;
${props =>
!props.disabled &&
`
&:hover {
background-color: #286090;
}
&:active:hover {
background-color: #204d74;
}
`}
${props =>
props.disabled &&
`
background-color: #ccc;
color: gray;
`}
`;
export default function ToolbarButton({ children, onClick, disabled = undefined }) {
return (
<ButtonDiv
onClick={() => {
if (!disabled && onClick) onClick();
}}
disabled={disabled}
>
{children}
</ButtonDiv>
);
}