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 container style refactor

Browse Source
This commit is contained in:
Jan Prochazka 2023-03-04 10:50:10 +01:00
parent ff36870763
commit 1061d2aba2
3 changed files with 44 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/public/dimensions.css
View File

@ -22,7 +22,6 @@
--dim-header-top: calc( --dim-header-top: calc(
var(--dim-titlebar-height) * var(--dim-visible-titlebar) + var(--dim-toolbar-height) * var(--dim-visible-toolbar) var(--dim-titlebar-height) * var(--dim-visible-titlebar) + var(--dim-toolbar-height) * var(--dim-visible-toolbar)
); );
--dim-content-top: calc(var(--dim-header-top) + var(--dim-tabs-panel-height));
--dim-large-form-margin: 20px; --dim-large-form-margin: 20px;
} }

34
packages/web/src/Screen.svelte
View File

@ -27,6 +27,7 @@
import TitleBar from './widgets/TitleBar.svelte'; import TitleBar from './widgets/TitleBar.svelte';
import FontIcon from './icons/FontIcon.svelte'; import FontIcon from './icons/FontIcon.svelte';
import getElectron from './utility/getElectron'; import getElectron from './utility/getElectron';
import TabsContainer from './tabpanel/TabsContainer.svelte';
$: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light'; $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
@ -69,11 +70,8 @@
<WidgetContainer /> <WidgetContainer />
</div> </div>
{/if} {/if}
<div class="tabs"> <div class="tabs-container">
<TabsPanel /> <TabsContainer />
</div>
<div class="content">
<TabRegister />
</div> </div>
{#if $selectedWidget && $visibleWidgetSideBar} {#if $selectedWidget && $visibleWidgetSideBar}
<div <div
@ -135,23 +133,6 @@
background-color: var(--theme-bg-1); background-color: var(--theme-bg-1);
display: flex; display: flex;
} }
.tabs {
position: fixed;
top: var(--dim-header-top);
left: var(--dim-content-left);
height: var(--dim-tabs-panel-height);
right: 0;
background-color: var(--theme-bg-1);
border-top: 1px solid var(--theme-border);
}
.content {
position: fixed;
top: var(--dim-content-top);
left: var(--dim-content-left);
bottom: var(--dim-statusbar-height);
right: 0;
background-color: var(--theme-bg-1);
}
.commads { .commads {
position: fixed; position: fixed;
top: var(--dim-header-top); top: var(--dim-header-top);
@ -207,4 +188,13 @@
.big-icon { .big-icon {
font-size: 20pt; font-size: 20pt;
} }
.tabs-container {
position: fixed;
top: var(--dim-header-top);
left: var(--dim-content-left);
bottom: var(--dim-statusbar-height);
right: 0;
background-color: var(--theme-bg-1);
}
</style> </style>

32
packages/web/src/tabpanel/TabsContainer.svelte Normal file
View File

@ -0,0 +1,32 @@
<script>
import TabRegister from './TabRegister.svelte';
import TabsPanel from './TabsPanel.svelte';
</script>
<div class="tabs">
<TabsPanel />
</div>
<div class="content">
<TabRegister />
</div>
<style>
.tabs {
position: absolute;
top: 0;
left: 0;
height: var(--dim-tabs-panel-height);
right: 0;
background-color: var(--theme-bg-1);
border-top: 1px solid var(--theme-border);
}
.content {
position: absolute;
top: var(--dim-tabs-panel-height);
left: 0;
bottom: 0;
right: 0;
background-color: var(--theme-bg-1);
}
</style>