dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-23 05:46:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

tool strip wrappable, table data commands moved from statusbar to toolstrip

Browse Source
This commit is contained in:
Jan Prochazka
2023-03-12 08:36:22 +01:00
parent 09e584326f
commit edc3a7409a
5 changed files with 64 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/buttons/ToolStripButton.svelte
View File

@@ -31,6 +31,7 @@
align-self: stretch; align-self: stretch;
display: flex; display: flex;
user-select: none; user-select: none;
margin: 2px 0px;
} }
.button.disabled { .button.disabled {
color: var(--theme-font-3); color: var(--theme-font-3);

34
packages/web/src/buttons/ToolStripContainer.svelte
View File

@@ -1,29 +1,29 @@
<div class="toolstrip"> <div class="wrapper">
<slot name="toolstrip" /> <div class="content">
</div>
<div class="content">
<slot /> <slot />
</div>
<div class="toolstrip">
<slot name="toolstrip" />
</div>
</div> </div>
<style> <style>
.content { .wrapper {
position: absolute; flex: 1;
left: 0;
top: 0;
border-bottom: 1px solid var(--theme-border);
right: 0;
bottom: var(--dim-toolstrip-height);
display: flex; display: flex;
flex-direction: column;
}
.content {
border-bottom: 1px solid var(--theme-border);
display: flex;
flex: 1;
position: relative;
} }
.toolstrip { .toolstrip {
position: absolute;
left: 0;
height: var(--dim-toolstrip-height);
right: 0;
bottom: 0;
display: flex; display: flex;
flex-wrap: wrap;
background: var(--theme-bg-1); background: var(--theme-bg-1);
} }
</style> </style>

1
packages/web/src/buttons/ToolStripSplitButton.svelte
View File

@@ -39,6 +39,7 @@
align-self: stretch; align-self: stretch;
display: flex; display: flex;
user-select: none; user-select: none;
margin: 2px 0px;
} }
.button.disabled { .button.disabled {
color: var(--theme-font-3); color: var(--theme-font-3);

23
packages/web/src/tabs/TableDataTab.svelte
View File

@@ -101,6 +101,7 @@
import { getBoolSettingsValue, getIntSettingsValue } from '../settings/settingsTools'; import { getBoolSettingsValue, getIntSettingsValue } from '../settings/settingsTools';
import useEditorData from '../query/useEditorData'; import useEditorData from '../query/useEditorData';
import { markTabSaved, markTabUnsaved } from '../utility/common'; import { markTabSaved, markTabUnsaved } from '../utility/common';
import ToolStripButton from '../buttons/ToolStripButton.svelte';
export let tabid; export let tabid;
export let conid; export let conid;
@@ -281,14 +282,10 @@
<ToolStripCommandButton command="dataGrid.switchToForm" hideDisabled /> <ToolStripCommandButton command="dataGrid.switchToForm" hideDisabled />
<ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled /> <ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
<ToolStripExportButton {quickExportHandlerRef} /> <ToolStripExportButton {quickExportHandlerRef} />
</svelte:fragment>
</ToolStripContainer>
<StatusBarTabItem <ToolStripButton
text="Open structure"
icon="icon structure" icon="icon structure"
clickable on:click={() => {
onClick={() => {
openNewTab({ openNewTab({
title: pureName, title: pureName,
icon: 'img table-structure', icon: 'img table-structure',
@@ -301,12 +298,12 @@
objectTypeField: 'tables', objectTypeField: 'tables',
}, },
}); });
}} }}>Open structure</ToolStripButton
/> >
<StatusBarTabItem <ToolStripButton
text="View columns"
icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'} icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
clickable on:click={() => collapsedLeftColumnStore.update(x => !x)}>View columns</ToolStripButton
onClick={() => collapsedLeftColumnStore.update(x => !x)} >
/> </svelte:fragment>
</ToolStripContainer>

19
packages/web/src/tabs/TableStructureTab.svelte
View File

@@ -60,6 +60,7 @@
import { apiCall } from '../utility/api'; import { apiCall } from '../utility/api';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte'; import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte'; import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
import ToolStripButton from '../buttons/ToolStripButton.svelte';
export let tabid; export let tabid;
export let conid; export let conid;
@@ -190,15 +191,11 @@
<ToolStripCommandButton command="tableStructure.reset" /> <ToolStripCommandButton command="tableStructure.reset" />
<ToolStripCommandButton command="tableEditor.addColumn" /> <ToolStripCommandButton command="tableEditor.addColumn" />
<ToolStripCommandButton command="tableEditor.addIndex" /> <ToolStripCommandButton command="tableEditor.addIndex" />
</svelte:fragment>
</ToolStripContainer>
{#if objectTypeField == 'tables'} {#if objectTypeField == 'tables'}
<StatusBarTabItem <ToolStripButton
text="Open data"
icon="icon table" icon="icon table"
clickable on:click={() => {
onClick={() => {
openNewTab({ openNewTab({
title: pureName, title: pureName,
icon: 'img table', icon: 'img table',
@@ -211,6 +208,8 @@
objectTypeField: 'tables', objectTypeField: 'tables',
}, },
}); });
}} }}>Open data</ToolStripButton
/> >
{/if} {/if}
</svelte:fragment>
</ToolStripContainer>