pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fix styling in SqlLab when tabs overflow (#11287)

Browse Source 
* Fix styling in SqlLab when tabs overflow

* Use theme variables
This commit is contained in:
Kamil Gabryjelski 2020-10-15 17:38:13 +02:00 committed by GitHub
parent fc03549299
commit 9aef9c5764
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
View File

@ -58,6 +58,12 @@ const defaultProps = {
let queryCount = 1; let queryCount = 1;
const TabTitleWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
`;
const TabTitle = styled.span` const TabTitle = styled.span`
margin-right: ${({ theme }) => theme.gridUnit * 2}px; margin-right: ${({ theme }) => theme.gridUnit * 2}px;
`; `;
@ -354,12 +360,12 @@ class TabbedSqlEditors extends React.PureComponent {
); );
const tabHeader = ( const tabHeader = (
<> <TabTitleWrapper>
<div data-test="dropdown-toggle-button"> <div data-test="dropdown-toggle-button">
<Dropdown overlay={menu} trigger={['click']} /> <Dropdown overlay={menu} trigger={['click']} />
</div> </div>
<TabTitle>{qe.title}</TabTitle> <TabStatusIcon tabState={state} />{' '} <TabTitle>{qe.title}</TabTitle> <TabStatusIcon tabState={state} />{' '}
</> </TabTitleWrapper>
); );
return ( return (
<EditableTabs.TabPane <EditableTabs.TabPane

5
superset-frontend/src/common/components/Dropdown.tsx
View File

@ -32,6 +32,7 @@ const MenuDots = styled.div`
${dotStyle}; ${dotStyle};
font-weight: ${({ theme }) => theme.typography.weights.normal}; font-weight: ${({ theme }) => theme.typography.weights.normal};
display: inline-flex; display: inline-flex;
position: relative;
&:hover { &:hover {
background-color: ${({ theme }) => theme.colors.primary.base}; background-color: ${({ theme }) => theme.colors.primary.base};
@ -50,11 +51,11 @@ const MenuDots = styled.div`
} }
&::before { &::before {
transform: translateY(-${({ theme }) => theme.gridUnit}px); top: ${({ theme }) => theme.gridUnit}px;
} }
&::after { &::after {
transform: translateY(${({ theme }) => theme.gridUnit}px); bottom: ${({ theme }) => theme.gridUnit}px;
} }
`; `;

3
superset-frontend/src/common/components/Tabs.tsx
View File

@ -52,10 +52,7 @@ const StyledTabs = styled(AntdTabs, {
`}; `};
.ant-tabs-tab-btn { .ant-tabs-tab-btn {
display: flex;
flex: 1 1 auto; flex: 1 1 auto;
align-items: center;
justify-content: center;
font-size: ${({ theme }) => theme.typography.sizes.s}px; font-size: ${({ theme }) => theme.typography.sizes.s}px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;