dim left panel width

This commit is contained in:
Jan Prochazka
2021-02-20 10:43:43 +01:00
parent e16b0ef61f
commit 63ac08cc27
3 changed files with 5 additions and 3 deletions

View File

@@ -1,4 +1,5 @@
:root { :root {
--dim-widget-icon-size: 50px; --dim-widget-icon-size: 50px;
--dim-statusbar-height: 20px; --dim-statusbar-height: 20px;
--dim-left-panel-width: 300px;
} }

View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import WidgetContainer from './widgets/WidgetContainer.svelte'; import WidgetContainer from './widgets/WidgetContainer.svelte';
import WidgetIconPanel from './widgets/WidgetIconPanel.svelte'; import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
import { leftPanelWidth, selectedWidget } from './stores'; import { selectedWidget } from './stores';
</script> </script>
<div class="theme-light"> <div class="theme-light">
@@ -10,7 +10,7 @@
</div> </div>
<div class="statusbar" /> <div class="statusbar" />
{#if $selectedWidget} {#if $selectedWidget}
<div class="leftpanel" style="width: {$leftPanelWidth}px"> <div class="leftpanel">
<WidgetContainer /> <WidgetContainer />
</div> </div>
{/if} {/if}
@@ -38,6 +38,7 @@
top: 0; top: 0;
left: var(--dim-widget-icon-size); left: var(--dim-widget-icon-size);
bottom: var(--dim-statusbar-height); bottom: var(--dim-statusbar-height);
width: var(--dim-left-panel-width);
background-color: var(--theme-bg-2); background-color: var(--theme-bg-2);
display: flex; display: flex;
} }

View File

@@ -1,4 +1,4 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export const selectedWidget = writable('database'); export const selectedWidget = writable('database');
export const leftPanelWidth = writable(300); // export const leftPanelWidth = writable(300);