Cb 3960 migrate core blocks components to css modules (#2578)

* CB-3960 removes unused SlideBox styles * CB-3960 makes menu panel reshadowless * CB-3960 makes menu bar small item reshadowless * CB-3960 removes reshadow from loaders * fix: loader styles are the same as was * fix: CB-3960 fix hidden actions in table footer * fix: menu trigger --------- Co-authored-by: mr-anton-t <[email protected]>
dbeaver · Apr 29, 2024 · c8457c2 · c8457c2
1 parent 1f3ae6a
commit c8457c2
Show file tree

Hide file tree

Showing 18 changed files with 534 additions and 567 deletions.
diff --git a/webapp/packages/core-blocks/src/Loader/Loader.m.css b/webapp/packages/core-blocks/src/Loader/Loader.m.css
@@ -0,0 +1,119 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.loader {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  &:global(.animate) {
+    opacity: 1;
+  }
+  & .staticImage {
+    height: 100%;
+    width: 100%;
+    display: none;
+  }
+  &.secondary,
+  &.overlay,
+  &:global(.secondary),
+  &:global(.overlay) {
+    &:not(.small):not(:global(.small)) {
+      & .staticImage.secondaryIcon {
+        display: block;
+      }
+    }
+    &.small,
+    &:global(.small) {
+      & .staticImage.secondarySmallIcon {
+        display: block;
+      }
+    }
+  }
+  &:not(.secondary):not(.overlay):not(:global(.secondary)):not(:global(.overlay)) {
+    &:not(.small):not(:global(.small)) {
+      & .staticImage.primaryIcon {
+        display: block;
+      }
+    }
+    &.small,
+    &:global(.small) {
+      & .staticImage.primarySmallIcon {
+        display: block;
+      }
+    }
+  }
+}
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  animation: rotation 2s infinite linear;
+}
+.message {
+  padding: 16px;
+}
+.actions {
+  padding-top: 42px;
+}
+.loader.inline {
+  height: 38px;
+  flex-direction: row;
+  margin: 0;
+  justify-content: left;
+  & .icon {
+    width: 24px;
+    height: 24px;
+  }
+  & .message {
+    display: block;
+    padding: 0 16px;
+  }
+  & .actions {
+    padding: 0;
+  }
+}
+.loader.small {
+  & .icon {
+    width: 16px;
+    height: 16px;
+  }
+  & .message {
+    display: none;
+  }
+}
+.loader.fullSize {
+  height: 100%;
+  & .icon {
+    width: 100%;
+    height: 100%;
+  }
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.loaderOverlay {
+  composes: theme-text-on-primary from global;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
diff --git a/webapp/packages/core-blocks/src/Loader/Loader.tsx b/webapp/packages/core-blocks/src/Loader/Loader.tsx
@@ -8,19 +8,18 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Suspense, useContext, useEffect, useRef, useState } from 'react';
-import styled, { use } from 'reshadow';
 
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { ILoadableState, uuid } from '@cloudbeaver/core-utils';
 
 import { Button } from '../Button';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ExceptionMessage } from '../ExceptionMessage';
 import { Translate } from '../localization/Translate';
+import { s } from '../s';
 import { StaticImage } from '../StaticImage';
-import { useStyles } from '../useStyles';
+import { useS } from '../useS';
+import styles from './Loader.m.css';
 import { ILoaderContext, LoaderContext } from './LoaderContext';
-import { loaderStyles, overlayStyles } from './loaderStyles';
 
 type LoaderState =
   | ILoadableState
@@ -52,7 +51,6 @@ interface Props {
   className?: string;
   fullSize?: boolean;
   state?: LoaderState | LoaderState[];
-  style?: ComponentStyle;
   children?: (() => React.ReactNode) | React.ReactNode;
   onCancel?: () => void;
 }
@@ -80,7 +78,6 @@ export const Loader = observer<Props>(function Loader({
   loading,
   inlineException,
   state,
-  style,
   children,
   onCancel,
 }) {
@@ -171,7 +168,7 @@ export const Loader = observer<Props>(function Loader({
     loading = false;
   }
 
-  style = useStyles(loaderStyles, style, overlay && overlayStyles);
+  const style = useS(styles);
   const [isVisible, setVisible] = useState(loading);
 
   const refLoaderDisplayed = { state: false };
@@ -232,7 +229,6 @@ export const Loader = observer<Props>(function Loader({
                 fullSize={fullSize}
                 className={className}
                 inlineException={inlineException}
-                style={style}
               />
             }
           >
@@ -251,7 +247,7 @@ export const Loader = observer<Props>(function Loader({
     if (hideException) {
       return null;
     }
-    return styled(style)(<ExceptionMessage exception={exception} inline={inline || inlineException} className={className} onRetry={reload} />);
+    return <ExceptionMessage exception={exception} inline={inline || inlineException} className={className} onRetry={reload} />;
   }
 
   if (children && (!loader || !loading) && !overlay) {
@@ -274,31 +270,31 @@ export const Loader = observer<Props>(function Loader({
 
   refLoaderDisplayed.state = true;
 
-  return styled(style)(
+  return (
     <LoaderContext.Provider value={contextState}>
       <>
         {overlay && renderWrappedChildren()}
-        <loader ref={loaderRef} className={className} {...use({ small, fullSize, inline, secondary, overlay })}>
-          <icon>
-            <StaticImage icon={spinnerType.primary} {...use({ primaryIcon: true })} />
-            <StaticImage icon={spinnerType.primarySmall} {...use({ primarySmallIcon: true })} />
-            <StaticImage icon={spinnerType.secondary} {...use({ secondaryIcon: true })} />
-            <StaticImage icon={spinnerType.secondarySmall} {...use({ secondarySmallIcon: true })} />
-          </icon>
+        <div ref={loaderRef} className={s(style, { loader: true, loaderOverlay: overlay, small, fullSize, inline, secondary, overlay }, className)}>
+          <div className={s(style, { icon: true })}>
+            <StaticImage icon={spinnerType.primary} className={s(style, { staticImage: true, primaryIcon: true })} />
+            <StaticImage icon={spinnerType.primarySmall} className={s(style, { staticImage: true, primarySmallIcon: true })} />
+            <StaticImage icon={spinnerType.secondary} className={s(style, { staticImage: true, secondaryIcon: true })} />
+            <StaticImage icon={spinnerType.secondarySmall} className={s(style, { staticImage: true, secondarySmallIcon: true })} />
+          </div>
           {!hideMessage && (
-            <message>
+            <div className={s(style, { message: true })}>
               <Translate token={message || 'ui_processing_loading'} />
-            </message>
+            </div>
           )}
           {onCancel && (
-            <actions>
+            <div className={s(style, { actions: true })}>
               <Button type="button" mod={['unelevated']} disabled={cancelDisabled} onClick={onCancel}>
                 <Translate token="ui_processing_cancel" />
               </Button>
-            </actions>
+            </div>
           )}
-        </loader>
+        </div>
       </>
-    </LoaderContext.Provider>,
+    </LoaderContext.Provider>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Loader/loaderStyles.ts b/webapp/packages/core-blocks/src/Loader/loaderStyles.ts
diff --git a/webapp/packages/core-blocks/src/Menu/MenuBarSmallItem.m.css b/webapp/packages/core-blocks/src/Menu/MenuBarSmallItem.m.css
@@ -11,4 +11,25 @@
   padding: 0;
   margin: 0;
   flex-shrink: 0;
-}
+}
+
+.iconBox {
+  composes: theme-form-element-radius theme-text-primary theme-ripple from global;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 4px !important;
+  margin: 2px !important;
+  flex-shrink: 0;
+  height: 24px !important;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 2px;
+  user-select: none;
+  outline: none;
+
+  & .iconLabel {
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+}