diff --git a/webapp/packages/core-theming/src/styles/_tabs.scss b/webapp/packages/core-theming/src/styles/_tabs.scss index 7a463ec259..0d8a952692 100644 --- a/webapp/packages/core-theming/src/styles/_tabs.scss +++ b/webapp/packages/core-theming/src/styles/_tabs.scss @@ -61,7 +61,7 @@ } &:not(:only-child) { - padding-right: 8px; + padding-right: 14px; } } @@ -71,6 +71,7 @@ } Tab:global([aria-selected="true"]) + tab-actions portal, + tab-inner portal[|menuOpened], tab-inner:hover portal, tab-inner:focus-within portal { visibility: visible; diff --git a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx b/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx index 5db3d2d2a8..35faf3de99 100644 --- a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx +++ b/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx @@ -7,22 +7,22 @@ */ import { observer } from 'mobx-react-lite'; -import { useMemo } from 'react'; +import { useMemo, useState } from 'react'; import { Tab as BaseTab } from 'reakit/Tab'; -import styled from 'reshadow'; +import styled, { use } from 'reshadow'; +import { Icon } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles } from '@cloudbeaver/core-theming'; import { useMenu } from '@cloudbeaver/core-view'; -import { Icon } from '@cloudbeaver/core-blocks'; +import { ContextMenu } from '../../ContextMenu/MenuTrigger'; import { TabContext } from '../TabContext'; +import { DATA_CONTEXT_TAB_ID } from './DATA_CONTEXT_TAB_ID'; +import { DATA_CONTEXT_TABS_CONTEXT } from './DATA_CONTEXT_TABS_CONTEXT'; +import { MENU_TAB } from './MENU_TAB'; import type { TabProps } from './TabProps'; import { useTab } from './useTab'; -import { MENU_TAB } from './MENU_TAB'; -import { DATA_CONTEXT_TABS_CONTEXT } from './DATA_CONTEXT_TABS_CONTEXT'; -import { DATA_CONTEXT_TAB_ID } from './DATA_CONTEXT_TAB_ID'; -import { ContextMenu } from '../../ContextMenu/MenuTrigger'; export const Tab = observer(function Tab({ tabId, @@ -41,6 +41,8 @@ export const Tab = observer(function Tab({ const menu = useMenu(MENU_TAB); const info = getInfo(); + const [menuOpened, switchState] = useState(false); + menu.context.set(DATA_CONTEXT_TABS_CONTEXT, state); menu.context.set(DATA_CONTEXT_TAB_ID, tabId); @@ -71,8 +73,8 @@ export const Tab = observer(function Tab({ )} - - + + diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx index b33cfbd3b5..36355d14ea 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx @@ -15,11 +15,11 @@ import { Group, SubmittingForm, useMapResource, Button, ColoredContainer, InputField, FieldCheckbox, BASE_CONTAINERS_STYLES, Switch, GroupItem, Container, Textarea, UploadArea, Combobox } from '@cloudbeaver/core-blocks'; -import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui'; import { NetworkHandlerResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections'; import { useTranslate } from '@cloudbeaver/core-localization'; import { NetworkHandlerAuthType } from '@cloudbeaver/core-sdk'; import { useStyles } from '@cloudbeaver/core-theming'; +import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui'; import { getTextFileReadingProcess } from '@cloudbeaver/core-utils'; import type { IConnectionFormProps } from '../IConnectionFormProps'; @@ -186,8 +186,8 @@ export const SSH: TabContainerPanelComponent = observer(fu