diff --git a/webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/TreeNodeMenu/treeNodeMenuStyles.ts b/webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/TreeNodeMenu/treeNodeMenuStyles.ts
index 4b2718cd83..18e4bdd272 100644
--- a/webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/TreeNodeMenu/treeNodeMenuStyles.ts
+++ b/webapp/packages/core/src/app/NavigationTree/NavigationTreeNode/TreeNodeMenu/treeNodeMenuStyles.ts
@@ -12,19 +12,18 @@ export const treeNodeMenuStyles = css`
MenuTrigger {
margin-left: 16px;
padding: 0;
- height: 16px;
- display: flex;
+ height: 20px;
- & > Icon {
+ & Icon {
cursor: pointer;
width: 16px;
height: 10px;
fill: #dedede;
}
- &[use|isSelected] > Icon,
- &:hover > Icon,
- &:focus > Icon {
+ &[use|isSelected] Icon,
+ &:hover Icon,
+ &:focus Icon {
fill: #338fcc;
}
}
diff --git a/webapp/packages/core/src/app/TopNavBar/MainMenu/MainMenu.tsx b/webapp/packages/core/src/app/TopNavBar/MainMenu/MainMenu.tsx
index ed19176da0..efe3c0ed84 100644
--- a/webapp/packages/core/src/app/TopNavBar/MainMenu/MainMenu.tsx
+++ b/webapp/packages/core/src/app/TopNavBar/MainMenu/MainMenu.tsx
@@ -23,6 +23,7 @@ const styles = css`
TopMenuItem {
text-transform: uppercase;
font-weight: 700;
+ height: 100%;
}
`;
diff --git a/webapp/packages/core/src/app/TopNavBar/SettingsMenu/settingsMenuStyles.ts b/webapp/packages/core/src/app/TopNavBar/SettingsMenu/settingsMenuStyles.ts
index cd8d29b2c4..b925fd2518 100644
--- a/webapp/packages/core/src/app/TopNavBar/SettingsMenu/settingsMenuStyles.ts
+++ b/webapp/packages/core/src/app/TopNavBar/SettingsMenu/settingsMenuStyles.ts
@@ -11,7 +11,6 @@ import { css } from 'reshadow';
export const settingsMenuStyles = css`
MenuTrigger {
padding: 0 16px !important;
- margin-left: auto;
height: 48px;
cursor: pointer;
background: none;
@@ -20,6 +19,9 @@ export const settingsMenuStyles = css`
font-weight: 700;
outline: none !important;
}
+ box {
+ width: 100%;
+ }
Icon {
height: 24px;
}
@@ -27,6 +29,7 @@ export const settingsMenuStyles = css`
flex-direction: row-reverse;
& menu-item-text {
text-align: right;
+ margin-left: auto;
}
& Icon {
transform: rotate(-180deg);
diff --git a/webapp/packages/core/src/app/TopNavBar/shared/TopMenuItem.tsx b/webapp/packages/core/src/app/TopNavBar/shared/TopMenuItem.tsx
index fcaf0f9678..f9ad7827e5 100644
--- a/webapp/packages/core/src/app/TopNavBar/shared/TopMenuItem.tsx
+++ b/webapp/packages/core/src/app/TopNavBar/shared/TopMenuItem.tsx
@@ -41,12 +41,10 @@ const buttonStyle = composes(
outline: none !important;
color: inherit;
cursor: pointer;
- display: flex;
- align-items: center;
- & > span > Icon {
- height: 16px;
- transform: rotate(90deg);
+ & div {
+ display: flex;
+ align-items: center;
}
}
`
diff --git a/webapp/packages/core/src/app/TopNavBar/shared/topMenuStyles.ts b/webapp/packages/core/src/app/TopNavBar/shared/topMenuStyles.ts
index 2e25d7d8f7..495d0bd3b5 100644
--- a/webapp/packages/core/src/app/TopNavBar/shared/topMenuStyles.ts
+++ b/webapp/packages/core/src/app/TopNavBar/shared/topMenuStyles.ts
@@ -23,18 +23,16 @@ export const topMenuStyles = composes(
MenuTrigger {
height: 100%;
padding: 0 16px !important;
- display: flex;
- align-items: center;
padding-right: 0!important;
&:before {
display: none;
}
- & > div {
+ & box > div {
display: block;
}
- & > Icon {
+ & box > Icon {
background: #47a0dd;
margin-left: 16px;
width: 16px;
@@ -48,7 +46,7 @@ export const topMenuStyles = composes(
& menu-trigger-icon {
margin-right: 8px;
}
- &:hover > Icon {
+ &:hover box > Icon {
background: #236ea0;
}
}
diff --git a/webapp/packages/core/src/dialogs/Menu/MenuPanel/MenuTrigger.tsx b/webapp/packages/core/src/dialogs/Menu/MenuPanel/MenuTrigger.tsx
index 3d3d6ba619..8f6aef9170 100644
--- a/webapp/packages/core/src/dialogs/Menu/MenuPanel/MenuTrigger.tsx
+++ b/webapp/packages/core/src/dialogs/Menu/MenuPanel/MenuTrigger.tsx
@@ -38,7 +38,9 @@ export function MenuTrigger({
return styled(useStyles(menuPanelStyles, ...style))(
<>
- {children}
+
+ {children}
+
>
@@ -143,7 +145,9 @@ export const MenuInnerTrigger = forwardRef(function MenuInnerTrigger(
return styled(useStyles(menuPanelStyles, ...style))(
<>
-
+
+
+
>
diff --git a/webapp/packages/core/src/dialogs/Menu/MenuPanel/menuPanelStyles.ts b/webapp/packages/core/src/dialogs/Menu/MenuPanel/menuPanelStyles.ts
index b1baf232bb..407f6c24e2 100644
--- a/webapp/packages/core/src/dialogs/Menu/MenuPanel/menuPanelStyles.ts
+++ b/webapp/packages/core/src/dialogs/Menu/MenuPanel/menuPanelStyles.ts
@@ -30,8 +30,13 @@ export const menuPanelStyles = composes(
outline: none !important;
color: inherit;
cursor: pointer;
- display: flex;
padding: 12px 0;
+
+ & box {
+ display: flex;
+ align-items: center;
+ height: inherit;
+ }
}
Menu {
composes: theme-typography--body2 theme-elevation-z5 from global;
diff --git a/webapp/packages/core/src/theming/useStyles.ts b/webapp/packages/core/src/theming/useStyles.ts
index a0c74a5c1a..2d5901beea 100644
--- a/webapp/packages/core/src/theming/useStyles.ts
+++ b/webapp/packages/core/src/theming/useStyles.ts
@@ -11,6 +11,7 @@ import { useMemo, useState } from 'react';
import { create } from 'reshadow';
import { useService } from '@dbeaver/core/di';
+import { flat } from '@dbeaver/core/utils';
import { ThemeService } from './ThemeService';
import { applyComposes, ClassCollection, Composes } from './themeUtils';
@@ -41,7 +42,7 @@ export function useStyles(
style => ((typeof style === 'object' || style instanceof Composes) ? style : style(currentThemeId))
)
)
- .then(styles => setLoadedStyles(styles.flat()));
+ .then(styles => setLoadedStyles(flat(styles)));
}, [currentThemeId]);
const styles = useMemo(() => {
diff --git a/webapp/packages/core/src/utils/flat.ts b/webapp/packages/core/src/utils/flat.ts
new file mode 100644
index 0000000000..f71cc6a4bb
--- /dev/null
+++ b/webapp/packages/core/src/utils/flat.ts
@@ -0,0 +1,16 @@
+/*
+ * cloudbeaver - Cloud Database Manager
+ * Copyright (C) 2020 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export function flat(array: any[]) {
+ if (array.flat) {
+ return array.flat();
+ }
+
+ // EDGE workaround
+ return array.reduce((acc, val) => acc.concat(val), []);
+}
diff --git a/webapp/packages/core/src/utils/index.ts b/webapp/packages/core/src/utils/index.ts
index e1ae9aa805..edf629eaa4 100644
--- a/webapp/packages/core/src/utils/index.ts
+++ b/webapp/packages/core/src/utils/index.ts
@@ -1,6 +1,7 @@
+export * from './flat';
export * from './OrderedMap';
-export * from './uuid_';
export * from './parseJSONFlat';
+export * from './uuid_';
export * from './Promises/CancellablePromise';
export * from './Promises/Deferred';