dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-02 09:03:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

connections UX

Browse Source
This commit is contained in:
Jan Prochazka
2024-11-28 18:45:39 +01:00
parent 3ac24436ba
commit ae037834f2
3 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/web/src/buttons/FormStyledButton.svelte
View File

@@ -8,6 +8,7 @@
export let value; export let value;
export let title = null; export let title = null;
export let skipWidth = false; export let skipWidth = false;
export let outline = false;
function handleClick() { function handleClick() {
if (!disabled) dispatch('click'); if (!disabled) dispatch('click');
@@ -20,7 +21,17 @@
} }
</script> </script>
<input {type} {value} {title} class:disabled {...$$restProps} on:click={handleClick} bind:this={domButton} class:skipWidth /> <input
{type}
{value}
{title}
class:disabled
{...$$restProps}
on:click={handleClick}
bind:this={domButton}
class:skipWidth
class:outline
/>
<style> <style>
input { input {
@@ -36,14 +47,27 @@
width: 100px; width: 100px;
} }
input:hover:not(.disabled) { input:hover:not(.disabled):not(.outline) {
background-color: var(--theme-bg-button-inv-2); background-color: var(--theme-bg-button-inv-2);
} }
input:active:not(.disabled) { input:active:not(.disabled):not(.outline) {
background-color: var(--theme-bg-button-inv-3); background-color: var(--theme-bg-button-inv-3);
} }
input.disabled { input.disabled {
background-color: var(--theme-bg-button-inv-3); background-color: var(--theme-bg-button-inv-3);
color: var(--theme-font-inv-3); color: var(--theme-font-inv-3);
} }
input.outline {
background-color: transparent;
color: var(--theme-font-2);
border: 1px solid var(--theme-bg-button-inv-2);
}
input.outline:hover:not(.disabled) {
color: var(--theme-bg-button-inv-3);
border: 2px solid var(--theme-bg-button-inv-3);
margin: 1px;
}
</style> </style>

2
packages/web/src/widgets/FocusedConnectionInfoWidget.svelte
View File

@@ -32,6 +32,7 @@
<FormStyledButton <FormStyledButton
value={`Show ${database}`} value={`Show ${database}`}
skipWidth skipWidth
outline
on:click={() => { on:click={() => {
$focusedConnectionOrDatabase = { $focusedConnectionOrDatabase = {
conid, conid,
@@ -59,6 +60,7 @@
<FormStyledButton <FormStyledButton
value={`Show ${getConnectionLabel(connection)}`} value={`Show ${getConnectionLabel(connection)}`}
skipWidth skipWidth
outline
on:click={() => { on:click={() => {
$focusedConnectionOrDatabase = { $focusedConnectionOrDatabase = {
conid, conid,

12
packages/web/src/widgets/SqlObjectList.svelte
View File

@@ -139,7 +139,11 @@
</script> </script>
{#if $status && $status.name == 'error'} {#if $status && $status.name == 'error'}
<WidgetsInnerContainer> {#if differentFocusedDb}
<FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
{/if}
<WidgetsInnerContainer hideContent={differentFocusedDb}>
<ErrorInfo message={$status.message} icon="img error" /> <ErrorInfo message={$status.message} icon="img error" />
<InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton> <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
</WidgetsInnerContainer> </WidgetsInnerContainer>
@@ -152,7 +156,11 @@
{database} {database}
{driver} {driver}
/> />
<WidgetsInnerContainer> {#if differentFocusedDb}
<FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
{/if}
<WidgetsInnerContainer hideContent={differentFocusedDb}>
<ErrorInfo <ErrorInfo
message={`Database ${database} is empty or structure is not loaded, press Refresh button to reload structure`} message={`Database ${database} is empty or structure is not loaded, press Refresh button to reload structure`}
icon="img alert" icon="img alert"