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

theming, menu fixes

Browse Source
This commit is contained in:
Jan Prochazka
2022-02-12 09:29:36 +01:00
parent 0c1640a75a
commit f11d3e134b
4 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/Screen.svelte
View File

@@ -146,7 +146,7 @@
left: var(--dim-content-left); left: var(--dim-content-left);
height: var(--dim-tabs-panel-height); height: var(--dim-tabs-panel-height);
right: 0; right: 0;
background-color: var(--theme-bg-2); background-color: var(--theme-bg-1);
border-top: 1px solid var(--theme-border); border-top: 1px solid var(--theme-border);
overflow-x: auto; overflow-x: auto;

16
packages/web/src/modals/DropDownMenu.svelte
View File

@@ -142,9 +142,9 @@
ul { ul {
position: absolute; position: absolute;
list-style: none; list-style: none;
background-color: #fff; background-color: var(--theme-bg-0);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid var(--theme-border);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
padding: 5px 0; padding: 5px 0;
margin: 2px 0 0; margin: 2px 0 0;
@@ -168,25 +168,25 @@
padding: 3px 20px; padding: 3px 20px;
line-height: 1.42; line-height: 1.42;
white-space: nop-wrap; white-space: nop-wrap;
color: #262626; color: var(--theme-font-1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
a.disabled { a.disabled {
color: gray; color: var(--theme-font-3);
} }
a:hover:not(.disabled) { a:hover:not(.disabled) {
background-color: #f5f5f5; background-color: var(--theme-bg-1);
text-decoration: none; text-decoration: none;
color: #262626; color: var(--theme-font-1);
} }
.divider { .divider {
margin: 9px 0px 9px 0px; margin: 9px 0px 9px 0px;
border-top: 1px solid #f2f2f2; border-top: 1px solid var(--theme-border);
border-bottom: 1px solid #fff; border-bottom: 1px solid var(--theme-bg-0);
} }
.menu-right { .menu-right {

8
packages/web/src/modals/HorizontalMenu.svelte
View File

@@ -6,6 +6,7 @@
export let items; export let items;
let isOpened; let isOpened;
let openedLabel;
function handleOpenMenu(element, item) { function handleOpenMenu(element, item) {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
@@ -14,11 +15,13 @@
const items = item.submenu; const items = item.submenu;
$currentDropDownMenu = { left, top, items }; $currentDropDownMenu = { left, top, items };
isOpened = true; isOpened = true;
openedLabel = item.text || item.label;
} }
$: preparedItems = prepareMenuItems(items, {}, $commandsCustomized); $: preparedItems = prepareMenuItems(items, {}, $commandsCustomized);
$: if (!$currentDropDownMenu) { $: if (!$currentDropDownMenu) {
isOpened = false; isOpened = false;
openedLabel = null;
} }
</script> </script>
@@ -26,6 +29,7 @@
{#each preparedItems as item} {#each preparedItems as item}
<div <div
class="item" class="item"
class:opened={openedLabel == (item.text || item.label)}
on:click={e => handleOpenMenu(e.target, item)} on:click={e => handleOpenMenu(e.target, item)}
on:mousemove={e => { on:mousemove={e => {
if (isOpened) { if (isOpened) {
@@ -62,4 +66,8 @@
.item:hover { .item:hover {
background: var(--theme-bg-3); background: var(--theme-bg-3);
} }
.item.opened {
background: var(--theme-bg-3);
}
</style> </style>

4
packages/web/src/widgets/TabsPanel.svelte
View File

@@ -424,7 +424,7 @@
background-color: var(--theme-bg-3); background-color: var(--theme-bg-3);
} */ } */
.db-name.selected { .db-name.selected {
background-color: var(--theme-bg-1); background-color: var(--theme-bg-0);
} }
.file-tab-item { .file-tab-item {
border-right: 1px solid var(--theme-border); border-right: 1px solid var(--theme-border);
@@ -439,7 +439,7 @@
user-select: none; user-select: none;
} }
.file-tab-item.selected { .file-tab-item.selected {
background-color: var(--theme-bg-1); background-color: var(--theme-bg-0);
} }
.file-name { .file-name {
margin-left: 5px; margin-left: 5px;