mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

tabs design + handled corner cases

Browse Source
This commit is contained in:
Jan Prochazka 2020-05-13 18:23:23 +02:00
parent 6ba5d98883
commit e7624efc1d
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/Screen.js
View File

@ -51,6 +51,7 @@ const LeftPanel = styled.div`
const TabsPanelContainer = styled.div` const TabsPanelContainer = styled.div`
display: flex; display: flex;
position: fixed; position: fixed;
overflow-x: auto;
top: ${theme.toolBar.height}px; top: ${theme.toolBar.height}px;
left: ${(props) => props.contentLeft}px; left: ${(props) => props.contentLeft}px;
height: ${theme.tabsPanel.height}px; height: ${theme.tabsPanel.height}px;

35
packages/web/src/TabsPanel.js
View File

@ -18,20 +18,30 @@ import { getConnectionInfo } from './utility/metadataLoaders';
const DbGroupHandler = styled.div` const DbGroupHandler = styled.div`
display: flex; display: flex;
flex: 1; flex: 1;
align-content: stretch;
`; `;
const DbWrapperHandler = styled.div` const DbWrapperHandler = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch;
`; `;
const DbNameWrapper = styled.div` const DbNameWrapper = styled.div`
text-align: center; text-align: center;
font-size: 8pt; font-size: 8pt;
border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
border-right: 1px solid white; border-right: 1px solid white;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: 1px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// height: 15px;
&:hover { &:hover {
background-color: #aaa; background-color: #aaa;
} }
@ -40,12 +50,17 @@ const DbNameWrapper = styled.div`
props.selected ? theme.mainArea.background : 'inherit'}; props.selected ? theme.mainArea.background : 'inherit'};
`; `;
// const DbNameWrapperInner = styled.div`
// position: absolute;
// white-space: nowrap;
// `;
const FileTabItem = styled.div` const FileTabItem = styled.div`
border-right: 1px solid white; border-right: 1px solid white;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
flex-shrink: 1; flex-shrink: 1;
flex-grow: 0; flex-grow: 1;
min-width: 10px; min-width: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -193,8 +208,15 @@ export default function TabsPanel() {
<> <>
{dbKeys.map((dbKey) => ( {dbKeys.map((dbKey) => (
<DbWrapperHandler key={dbKey}> <DbWrapperHandler key={dbKey}>
<DbNameWrapper
// @ts-ignore
selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
>
<i className="fas fa-database" /> {tabsByDb[dbKey][0].tabDbName}
</DbNameWrapper>
<DbGroupHandler> <DbGroupHandler>
{tabsByDb[dbKey].map((tab) => ( {_.sortBy(tabsByDb[dbKey], 'title').map((tab) => (
<FileTabItem <FileTabItem
{...tab} {...tab}
title={tab.tooltip} title={tab.tooltip}
@ -215,13 +237,6 @@ export default function TabsPanel() {
</FileTabItem> </FileTabItem>
))} ))}
</DbGroupHandler> </DbGroupHandler>
<DbNameWrapper
// @ts-ignore
selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
>
<i className="fas fa-database" /> {tabsByDb[dbKey][0].tabDbName}
</DbNameWrapper>
</DbWrapperHandler> </DbWrapperHandler>
))} ))}
</> </>

2
packages/web/src/theme.js
View File

@ -12,7 +12,7 @@ export default {
background: '#ccc', background: '#ccc',
}, },
tabsPanel: { tabsPanel: {
height: 45, height: 53,
background: '#ddd', background: '#ddd',
hoverFont: '#338', hoverFont: '#338',
}, },