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

statusbar styling

Browse Source
This commit is contained in:
Jan Prochazka 2021-11-25 19:02:52 +01:00
parent d0705ec83e
commit 6304bf5564
5 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
:root {
--dim-widget-icon-size: 60px;
--dim-statusbar-height: 20px;
--dim-statusbar-height: 22px;
--dim-left-panel-width: 300px;
--dim-tabs-panel-height: 53px;
--dim-tabs-height: 33px;

15
packages/web/src/icons/FontIcon.svelte
View File

@ -1,6 +1,8 @@
<script>
export let icon;
export let title = null;
export let padLeft = false;
export let padRight = false;
const iconNames = {
'icon minus-box': 'mdi mdi-minus-box-outline',
@ -140,7 +142,16 @@
'img filter': 'mdi mdi-filter',
'img group': 'mdi mdi-group',
};
</script>
<span class={iconNames[icon] || icon} {title} on:click />
<span class={iconNames[icon] || icon} {title} class:padLeft class:padRight on:click />
<style>
.padLeft {
margin-right: 0.25rem;
}
.padRight {
margin-right: 0.25rem;
}
</style>

5
packages/web/src/plugins/ThemeDark.svelte
View File

@ -37,6 +37,7 @@
--theme-bg-magenta: #551c3b; /* magenta-3 */
--theme-font-inv-1: #ffffff;
--theme-font-inv-15: #dedede;
--theme-font-inv-2: #b3b3b3;
--theme-font-inv-3: #808080;
--theme-font-inv-4: #4d4d4d;
@ -52,8 +53,8 @@
--theme-bg-selected: #15395b; /* blue-3 */
--theme-bg-selected-point: #1765ad; /* blue-5 */
--theme-bg-statusbar-inv: blue;
--theme-bg-statusbar-inv-hover: #4040FF;
--theme-bg-statusbar-inv: #0050b3;
--theme-bg-statusbar-inv-hover: #096dd9;
--theme-bg-modalheader: rgb(43, 60, 61);
--theme-bg-button-inv: #004488;

5
packages/web/src/plugins/ThemeLight.svelte
View File

@ -30,6 +30,7 @@
--theme-bg-magenta: #ffadd2; /* magenta-3 */
--theme-font-inv-1: #ffffff;
--theme-font-inv-15: #dedede;
--theme-font-inv-2: #b3b3b3;
--theme-font-inv-3: #808080;
--theme-font-inv-4: #4d4d4d;
@ -46,8 +47,8 @@
--theme-bg-selected-point: #40a9ff; /* blue-5 */
--theme-bg-statusbar-inv: blue;
--theme-bg-statusbar-inv-hover: #4040FF;
--theme-bg-statusbar-inv: #0050b3;
--theme-bg-statusbar-inv-hover: #096dd9;
--theme-bg-modalheader: #eff;
--theme-bg-button-inv: #337ab7;

32
packages/web/src/widgets/StatusBar.svelte
View File

@ -65,46 +65,46 @@
<div class="container">
{#if databaseName}
<div class="item">
<FontIcon icon="icon database" />
<FontIcon icon="icon database" padRight />
{databaseName}
</div>
{/if}
{#if connectionLabel}
<div class="item">
<FontIcon icon="icon server" />
<FontIcon icon="icon server" padRight />
{connectionLabel}
</div>
{/if}
{#if connection && connection.user}
<div class="item">
<FontIcon icon="icon account" />
<FontIcon icon="icon account" padRight />
{connection.user}
</div>
{/if}
{#if connection && $status}
<div class="item clickable" on:click={() => visibleCommandPalette.set(findCommand('database.changeState'))}>
{#if $status.name == 'pending'}
<FontIcon icon="icon loading" /> Loading
<FontIcon icon="icon loading" padRight /> Loading
{:else if $status.name == 'checkStructure'}
<FontIcon icon="icon loading" /> Checking model
<FontIcon icon="icon loading" padRight /> Checking model
{:else if $status.name == 'loadStructure'}
<FontIcon icon="icon loading" /> Loading model
<FontIcon icon="icon loading" padRight /> Loading model
{:else if $status.name == 'ok'}
<FontIcon icon="img ok-inv" /> Connected
<FontIcon icon="img ok-inv" padRight /> Connected
{:else if $status.name == 'error'}
<FontIcon icon="img error-inv" /> Error
<FontIcon icon="img error-inv" padRight /> Error
{/if}
</div>
{/if}
{#if !connection}
<div class="item">
<FontIcon icon="icon disconnected" /> Not connected
<FontIcon icon="icon disconnected" padRight /> Not connected
</div>
{/if}
{#if $serverVersion}
<div class="item flex" title={$serverVersion.version}>
<FontIcon icon="icon version" />
<div class="version ml-1">
<FontIcon icon="icon version" padRight />
<div class="version">
{$serverVersion.versionText || $serverVersion.version}
</div>
</div>
@ -117,7 +117,7 @@
)}\nClick for refresh DB model`}
on:click={handleSyncModel}
>
<FontIcon icon="icon history" />
<FontIcon icon="icon history" padRight />
<div class="version ml-1">
{moment($status?.analysedTime).fromNow() + (timerValue ? '' : '')}
</div>
@ -128,7 +128,7 @@
{#each contextItems || [] as item}
<div class="item" class:clickable={item.clickable} on:click={item.onClick}>
{#if item.icon}
<FontIcon icon={item.icon} />
<FontIcon icon={item.icon} padRight />
{/if}
{item.text}
</div>
@ -139,7 +139,7 @@
<style>
.main {
display: flex;
color: var(--theme-font-inv-1);
color: var(--theme-font-inv-15);
align-items: stretch;
justify-content: space-between;
cursor: default;
@ -147,10 +147,12 @@
}
.container {
display: flex;
align-items: center;
align-items: stretch;
}
.item {
padding: 0px 10px;
display: flex;
align-items: center;
}
.version {