From 5c58cd14849e475718e9718efd173fe5d3211955 Mon Sep 17 00:00:00 2001 From: Wroud Date: Mon, 25 May 2020 15:24:41 +0300 Subject: [PATCH 1/2] fix: edge styles & flat function --- .../core/src/app/TopNavBar/MainMenu/MainMenu.tsx | 1 + .../TopNavBar/SettingsMenu/settingsMenuStyles.ts | 5 ++++- .../src/app/TopNavBar/shared/TopMenuItem.tsx | 8 +++----- .../src/app/TopNavBar/shared/topMenuStyles.ts | 8 +++----- .../src/dialogs/Menu/MenuPanel/MenuTrigger.tsx | 8 ++++++-- .../dialogs/Menu/MenuPanel/menuPanelStyles.ts | 7 ++++++- webapp/packages/core/src/theming/useStyles.ts | 3 ++- webapp/packages/core/src/utils/flat.ts | 16 ++++++++++++++++ webapp/packages/core/src/utils/index.ts | 3 ++- 9 files changed, 43 insertions(+), 16 deletions(-) create mode 100644 webapp/packages/core/src/utils/flat.ts 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'; From 7d43b6be878c70a89bd43a57789d3801b12f609d Mon Sep 17 00:00:00 2001 From: Wroud Date: Mon, 25 May 2020 15:35:04 +0300 Subject: [PATCH 2/2] fix(core): tree node menu styles --- .../TreeNodeMenu/treeNodeMenuStyles.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) 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; } }