From 534b02d5eec72c59cd0be9db74b5e9ed8208fb19 Mon Sep 17 00:00:00 2001 From: Dmitriy Osipov <75555523+teunlao@users.noreply.github.com> Date: Tue, 29 Aug 2023 11:22:01 +0200 Subject: [PATCH] CB-3178: fix navigation tree tools styles (#1959) * CB-3178: fix navigation tree tools styles * CB-3178: refactoring css-modules --------- Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com> --- .../packages/core-blocks/src/IconButton.m.css | 17 +++ .../packages/core-blocks/src/IconButton.tsx | 37 ++---- webapp/packages/core-blocks/src/index.ts | 1 + .../ElementsTreeTools/ElementsTreeTools.m.css | 21 +++ .../ElementsTreeTools/ElementsTreeTools.tsx | 124 ++++++++---------- .../ElementsTreeToolsIconButton.m.css | 29 ++++ .../NavigationTreeSettings.m.css | 15 +++ .../NavigationTreeSettings.tsx | 29 +--- .../src/NavigationTree/NavigationTree.tsx | 2 +- 9 files changed, 154 insertions(+), 121 deletions(-) create mode 100644 webapp/packages/core-blocks/src/IconButton.m.css create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeToolsIconButton.m.css create mode 100644 webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.m.css diff --git a/webapp/packages/core-blocks/src/IconButton.m.css b/webapp/packages/core-blocks/src/IconButton.m.css new file mode 100644 index 0000000000..61fd320c09 --- /dev/null +++ b/webapp/packages/core-blocks/src/IconButton.m.css @@ -0,0 +1,17 @@ +.iconButton { + color: inherit; + outline: none; + border: none; + background: none; + cursor: pointer; + padding: 0; + margin: 4px; + height: 16px; + width: 16px; + + & .icon, + & .staticImage { + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/webapp/packages/core-blocks/src/IconButton.tsx b/webapp/packages/core-blocks/src/IconButton.tsx index 3be8334fb1..10f8b5f333 100644 --- a/webapp/packages/core-blocks/src/IconButton.tsx +++ b/webapp/packages/core-blocks/src/IconButton.tsx @@ -6,33 +6,16 @@ * you may not use this file except in compliance with the License. */ import { Button, ButtonProps } from 'reakit/Button'; -import styled, { css } from 'reshadow'; +import styled from 'reshadow'; import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { Icon } from './Icon'; +import { s } from './s'; import { StaticImage } from './StaticImage'; +import { useS } from './useS'; import { useStyles } from './useStyles'; - -const styles = css` - Button { - color: inherit; - outline: none; - border: none; - background: none; - cursor: pointer; - padding: 0; - margin: 4px; - height: 16px; - width: 16px; - - & Icon, - & StaticImage { - width: 100%; - height: 100%; - } - } -`; +import IconButtonStyles from './IconButton.m.css'; interface Props { name: string; @@ -41,11 +24,13 @@ interface Props { style?: ComponentStyle; } -export function IconButton({ name, img, viewBox, style, ...rest }: Props & ButtonProps) { - return styled(useStyles(styles, style))( - , ); } diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index c4ce7d5583..1dd0886fa4 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -163,6 +163,7 @@ export * from './StatusMessage'; export * from './ExceptionMessage'; export * from './getComputed'; export * from './IconButton'; +export { default as IconButtonStyles } from './IconButton.m.css'; export * from './IconOrImage'; export * from './s'; export * from './SContext'; diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css new file mode 100644 index 0000000000..f1d7456986 --- /dev/null +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css @@ -0,0 +1,21 @@ +.primary { + composes: theme-text-primary from global; +} + +.tools { + composes: theme-background-surface from global; + display: block; + position: sticky; + top: 0; + z-index: 1; +} + +.actions { + display: flex; + flex-direction: row; + overflow-x: auto; +} + +.fill { + flex: 1; +} diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx index 9d1e1e0d63..62d6fdcd84 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx @@ -7,63 +7,42 @@ */ import { observer } from 'mobx-react-lite'; import React, { useState } from 'react'; -import styled, { css, use } from 'reshadow'; +import styled from 'reshadow'; -import { ACTION_ICON_BUTTON_STYLES, IconButton, PlaceholderElement, useResource, useStyles, useTranslate } from '@cloudbeaver/core-blocks'; +import { + ACTION_ICON_BUTTON_STYLES, + IconButton, + IconButtonStyles, + PlaceholderElement, + s, + SContext, + StyleRegistry, + useS, + useStyles, + useTranslate, +} from '@cloudbeaver/core-blocks'; import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { useCaptureViewContext } from '@cloudbeaver/core-view'; import { DATA_CONTEXT_ELEMENTS_TREE } from '../DATA_CONTEXT_ELEMENTS_TREE'; import type { IElementsTree } from '../useElementsTree'; import { ElementsTreeFilter } from './ElementsTreeFilter'; +import ElementsTreeToolsStyles from './ElementsTreeTools.m.css'; +import ElementsTreeToolsIconButtonStyles from './ElementsTreeToolsIconButton.m.css'; import { ElementsTreeToolsMenu } from './ElementsTreeToolsMenu'; import { DATA_CONTEXT_NAV_TREE_ROOT } from './NavigationTreeSettings/DATA_CONTEXT_NAV_TREE_ROOT'; import type { IElementsTreeSettingsProps } from './NavigationTreeSettings/ElementsTreeSettingsService'; import { NavigationTreeSettings } from './NavigationTreeSettings/NavigationTreeSettings'; -const toolsStyles = css` - [|primary] { - composes: theme-text-primary from global; - } - tools { - composes: theme-background-surface from global; - display: block; - position: sticky; - top: 0; - z-index: 1; - } - actions { - display: flex; - flex-direction: row; - } - fill { - flex: 1; - } - IconButton { - & Icon, - & StaticImage { - transition: transform 0.3s ease-in-out; - } - - &[|opened] Icon, - &[|opened] StaticImage { - transform: rotate(180deg); - } - - &[|loading] Icon, - &[|loading] StaticImage { - animation: rotating 1.5s linear infinite; - } - } - @keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } -`; +const registry: StyleRegistry = [ + [ + IconButtonStyles, + { + mode: 'append', + styles: [ElementsTreeToolsIconButtonStyles], + }, + ], +]; interface Props { tree: IElementsTree; @@ -75,7 +54,8 @@ export const ElementsTreeTools = observer>(functi const root = tree.root; const translate = useTranslate(); const [opened, setOpen] = useState(false); - const styles = useStyles(ACTION_ICON_BUTTON_STYLES, toolsStyles, style); + const deprecatedStyles = useStyles(ACTION_ICON_BUTTON_STYLES, style); + const styles = useS(ElementsTreeToolsStyles, ElementsTreeToolsIconButtonStyles); useCaptureViewContext(context => { context?.set(DATA_CONTEXT_NAV_TREE_ROOT, tree.baseRoot); @@ -84,34 +64,34 @@ export const ElementsTreeTools = observer>(functi const loading = tree.isLoading(); - return styled(styles)( - - - {tree.settings?.configurable && ( + return styled(deprecatedStyles)( + + + + {tree.settings?.configurable && ( + setOpen(!opened)} + /> + )} +
+ setOpen(!opened)} - {...use({ opened, primary: true })} + onClick={() => tree.refresh(root)} /> - )} - - - tree.refresh(root)} - {...use({ primary: true, loading })} - /> - - {tree.settings && opened && } - - {children} - , + + {tree.settings && opened && } + + {children} + + , ); }); diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeToolsIconButton.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeToolsIconButton.m.css new file mode 100644 index 0000000000..9f1c59ca68 --- /dev/null +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeToolsIconButton.m.css @@ -0,0 +1,29 @@ +.iconButton { + & .icon, + & .staticImage { + transition: transform 0.3s ease-in-out; + } + + &.loading { + & .icon, + & .staticImage { + animation: rotating 1.5s linear infinite; + } + } + + &.opened { + & .icon, + & .staticImage { + transform: rotate(180deg); + } + } +} + +@keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.m.css new file mode 100644 index 0000000000..33de9b3468 --- /dev/null +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.m.css @@ -0,0 +1,15 @@ +.settings { + display: flex; + flex-direction: row; + overflow: auto; +} + +.group { + min-width: fit-content; + margin-right: 0; + width: 100%; +} + +.settings > .groupPadding { + padding: 12px; +} \ No newline at end of file diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.tsx index 7fda071dcf..3e15fb5780 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/NavigationTreeSettings.tsx @@ -6,27 +6,12 @@ * you may not use this file except in compliance with the License. */ import { observer } from 'mobx-react-lite'; -import styled, { css } from 'reshadow'; -import { Group, Loader, Placeholder, PlaceholderElement, useStyles } from '@cloudbeaver/core-blocks'; +import { Group, Loader, Placeholder, PlaceholderElement, s, useS } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { ElementsTreeSettingsService, IElementsTreeSettingsProps } from './ElementsTreeSettingsService'; - -const expandStyles = css` - settings { - display: flex; - flex-direction: row; - } - Group { - min-width: 350px; - width: min-content; - - &[dense] { - padding: 12px; - } - } -`; +import NavigationTreeSettingsStyles from './NavigationTreeSettings.m.css'; interface Props extends IElementsTreeSettingsProps { elements?: PlaceholderElement[]; @@ -34,16 +19,16 @@ interface Props extends IElementsTreeSettingsProps { } export const NavigationTreeSettings = observer(function NavigationTreeSettings({ elements, tree, style, className }) { - const styles = useStyles(expandStyles, style); const elementsTreeSettingsService = useService(ElementsTreeSettingsService); + const styles = useS(NavigationTreeSettingsStyles); - return styled(styles)( - - + return ( +
+ - , +
); }); diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx index 93a74d2be9..c80ad35ea6 100644 --- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx +++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/NavigationTree.tsx @@ -42,7 +42,7 @@ const navigationTreeStyles = css` display: flex; flex: 1; flex-direction: column; - overflow: auto; + overflow: hidden; } ElementsTree {