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

SYNC: new object button refactor + diagram accesibility

Browse Source
This commit is contained in:
SPRINX0\prochazka
2025-07-16 10:48:58 +02:00
committed by Diflow
parent 982098672e
commit 2cd56d5041
6 changed files with 165 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/web/src/buttons/NewObjectButton.svelte
View File

@@ -4,11 +4,15 @@
export let icon;
export let title;
export let description;
export let enabled;
export let colorClass;
$: disabled = !enabled;
</script>
<div class="new-object-button" on:click>
<div class="new-object-button" on:click class:enabled class:disabled>
<div class="icon">
<FontIcon {icon} />
<FontIcon {icon} colorClass={enabled ? colorClass : null} />
</div>
<span class="title">{title}</span>
{#if description}
@@ -23,13 +27,16 @@
background-color: var(--theme-bg-1);
border-radius: 4px;
border: 1px solid var(--theme-border);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
.new-object-button:hover {
.new-object-button.enabled {
cursor: pointer;
}
.new-object-button.enabled:hover {
background-color: var(--theme-bg-2);
}
.icon {
@@ -48,4 +55,18 @@
font-size: 0.9em;
color: var(--theme-font-2);
}
.new-object-button.disabled .title {
color: var(--theme-font-2);
}
.new-object-button.disabled .description {
color: var(--theme-font-2);
}
.new-object-button.disabled .icon {
color: var(--theme-font-2);
}
.new-object-button.disabled {
cursor: not-allowed;
opacity: 0.5;
}
</style>