Merge pull request #53 from dbeaver/fix-edge-and-styles

fix: edge styles & flat function

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;
     }
   }

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%;
   }
 `;
 

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);

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;
       }
     }
   `

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;
       }
     }

webapp/packages/core/src/dialogs/Menu/MenuPanel/MenuTrigger.tsx

@@ -38,7 +38,9 @@ export function MenuTrigger({
   return styled(useStyles(menuPanelStyles, ...style))(
     <>
       <MenuDisclosure {...menu} {...props}>
-        {children}
+        <box as='div'>
+          {children}
+        </box>
       </MenuDisclosure>
       <MenuPanel panel={panel} menu={menu} style={style}/>
     </>
@@ -143,7 +145,9 @@ export const MenuInnerTrigger = forwardRef(function MenuInnerTrigger(
   return styled(useStyles(menuPanelStyles, ...style))(
     <>
       <MenuDisclosure ref={ref} {...menu} {...rest}>
-        <MenuPanelItem menuItem={menuItem} style={style}/>
+        <box as='div'>
+          <MenuPanelItem menuItem={menuItem} style={style}/>
+        </box>
       </MenuDisclosure>
       <MenuPanel panel={panel!} menu={menu} style={style}/>
     </>

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;

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(() => {

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), []);
+}

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';