diff --git a/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx b/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx index 38d588a7d8..54e82d1ad7 100644 --- a/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx +++ b/webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx @@ -23,6 +23,14 @@ const menuStyles = css` Menu { max-height: 400px; overflow: auto; + & menu-panel-item { + overflow-x: hidden; + } + & menu-item-text { + max-width: 400px; + overflow-x: hidden; + text-overflow: ellipsis; + } } `; diff --git a/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx b/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx index 372f8463c7..51566645d3 100644 --- a/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx +++ b/webapp/packages/core-app/src/TopNavBar/shared/TopMenuItem.tsx @@ -27,6 +27,8 @@ export const TopMenuItem = observer(function TopMenuItem({ menuItem, sty const translate = useTranslate(); const styles = useStyles(style, topMenuStyles); + const title = translate(menuItem.title); + if (!menuItem.panel) { return ( (function TopMenuItem({ menuItem, sty )} -
{translate(menuItem.title)}
+ {title} ); diff --git a/webapp/packages/core-app/src/TopNavBar/shared/topMenuStyles.ts b/webapp/packages/core-app/src/TopNavBar/shared/topMenuStyles.ts index 11e3e76b23..d428193108 100644 --- a/webapp/packages/core-app/src/TopNavBar/shared/topMenuStyles.ts +++ b/webapp/packages/core-app/src/TopNavBar/shared/topMenuStyles.ts @@ -53,6 +53,11 @@ export const topMenuStyles = composes( & menu-trigger-icon { margin-right: 8px; } + & menu-trigger-text { + max-width: 240px; + overflow-x: hidden; + text-overflow: ellipsis; + } &:hover box > Icon, &:global([aria-expanded="true"]) box > Icon { background: #236ea0; diff --git a/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx b/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx index 2f6fa8b8a8..b2232f1422 100644 --- a/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx +++ b/webapp/packages/core-blocks/src/Tabs/Tab/Tab.tsx @@ -51,7 +51,7 @@ export const Tab = observer(function Tab({ {children} {onClose && ( - + )} diff --git a/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuPanelItem.tsx b/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuPanelItem.tsx index 2fb30fb862..1d475a4540 100644 --- a/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuPanelItem.tsx +++ b/webapp/packages/core-dialogs/src/Menu/MenuPanel/MenuPanelItem.tsx @@ -11,7 +11,7 @@ import styled, { use } from 'reshadow'; import { Checkbox, Icon, IconOrImage, Loader, Radio } from '@cloudbeaver/core-blocks'; import type { IMenuItem } from '@cloudbeaver/core-dialogs'; -import { Translate } from '@cloudbeaver/core-localization'; +import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming'; import { menuPanelStyles } from './menuPanelStyles'; @@ -25,6 +25,9 @@ export const MenuPanelItem = observer(function MenuPanelItem menuItem, style = [], }) { + const translate = useTranslate(); + + const title = translate(menuItem.title); let control = null; if (menuItem.type === 'radio') { @@ -40,8 +43,8 @@ export const MenuPanelItem = observer(function MenuPanelItem ) : control} - - + + {title} {menuItem.panel && ( diff --git a/webapp/packages/core-theming/src/styles/_tabs.scss b/webapp/packages/core-theming/src/styles/_tabs.scss index fc3d104277..af7e68ce9d 100644 --- a/webapp/packages/core-theming/src/styles/_tabs.scss +++ b/webapp/packages/core-theming/src/styles/_tabs.scss @@ -66,6 +66,7 @@ } tab-container { + max-width: 240px; height: 100%; display: flex; flex-shrink: 0; @@ -115,9 +116,14 @@ height: 8px; width: 8px; align-self: flex-start; + flex-shrink: 0; padding: 4px; padding-left: 0; + &:hover { + opacity: 0.8; + } + Icon { display: block; } diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuPanelItem.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuPanelItem.tsx index b0959cb2ff..28af6f7a05 100644 --- a/webapp/packages/core-ui/src/ContextMenu/MenuPanelItem.tsx +++ b/webapp/packages/core-ui/src/ContextMenu/MenuPanelItem.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'; import styled from 'reshadow'; import { Icon, IconOrImage, Loader, useStateDelay } from '@cloudbeaver/core-blocks'; -import { Translate } from '@cloudbeaver/core-localization'; +import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles, ComponentStyle } from '@cloudbeaver/core-theming'; import { menuPanelStyles } from './menuPanelStyles'; @@ -34,14 +34,18 @@ export const MenuPanelItem = observer(function MenuPanelItem loading = false, style = [], }) { + const translate = useTranslate(); + + const title = translate(label); loading = useStateDelay(loading, 100); + return styled(useStyles(menuPanelStyles, style))( {typeof icon === 'string' ? : icon} - - + + {title} {binding} diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/FolderTabRenderer.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/FolderTabRenderer.tsx index 05f1f010e8..fd8289a277 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/FolderTabRenderer.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/FolderTabRenderer.tsx @@ -61,7 +61,7 @@ const NavNodeTab = observer(function NavNodeTab({ nodeId, styl )), 300); return styled(useStyles(style))( - + {nodeInfo.node?.icon && } {nodeInfo.node?.name} diff --git a/webapp/packages/plugin-object-viewer/src/ObjectViewerTab.tsx b/webapp/packages/plugin-object-viewer/src/ObjectViewerTab.tsx index e4b74f5ef9..d20ee6dcca 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectViewerTab.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectViewerTab.tsx @@ -21,11 +21,12 @@ export const ObjectViewerTab: TabHandlerTabComponent = ob const { node } = useNode(tab.handlerState.objectId); const handleSelect = ({ tabId }: ITabData) => onSelect(tabId); const handleClose = onClose ? ({ tabId }: ITabData) => onClose(tabId) : undefined; + const title = node?.name || tab.handlerState.tabTitle; return styled(useStyles(style))( - + - {node?.name || tab.handlerState.tabTitle} + {title} ); }); diff --git a/webapp/packages/plugin-sql-editor-navigation-tab/src/SqlEditorTab.tsx b/webapp/packages/plugin-sql-editor-navigation-tab/src/SqlEditorTab.tsx index 3f3ae76ba6..7fdfb0a0e4 100644 --- a/webapp/packages/plugin-sql-editor-navigation-tab/src/SqlEditorTab.tsx +++ b/webapp/packages/plugin-sql-editor-navigation-tab/src/SqlEditorTab.tsx @@ -34,7 +34,7 @@ export const SqlEditorTab: TabHandlerTabComponent = observer const handleClose = onClose ? ({ tabId }: ITabData) => onClose(tabId) : undefined; return styled(useStyles(style))( - + {name} diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx index b91346e252..be144226b4 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx +++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlResultTabs.tsx @@ -95,7 +95,7 @@ export const SqlResultTabs = observer(function SqlDataResult({ state, onT {orderedTabs.map(result => ( - + {result.name}