mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Fix mindmap name
Classes Layout
This commit is contained in:
parent
c6f04742d8
commit
ed457612f6
@ -4,7 +4,7 @@
|
|||||||
* Property onClick is the event handler for a common button of this menu. Set options for a submenu or render for a custom element in place (from the second level onwards).
|
* Property onClick is the event handler for a common button of this menu. Set options for a submenu or render for a custom element in place (from the second level onwards).
|
||||||
* On the first level option has priority over onClick. Second level onwards render is the first option.
|
* On the first level option has priority over onClick. Second level onwards render is the first option.
|
||||||
*/
|
*/
|
||||||
export interface ToolbarOptionConfiguration {
|
interface ActionConfig {
|
||||||
/**
|
/**
|
||||||
* the React element for put in menu entry button
|
* the React element for put in menu entry button
|
||||||
*/
|
*/
|
||||||
@ -24,7 +24,7 @@ export interface ToolbarOptionConfiguration {
|
|||||||
/**
|
/**
|
||||||
* submenu options. If null, a divider will be inserted.
|
* submenu options. If null, a divider will be inserted.
|
||||||
*/
|
*/
|
||||||
options?: (ToolbarOptionConfiguration | null)[];
|
options?: (ActionConfig | null)[];
|
||||||
/**
|
/**
|
||||||
* option is disabled
|
* option is disabled
|
||||||
*/
|
*/
|
||||||
@ -42,3 +42,5 @@ export interface ToolbarOptionConfiguration {
|
|||||||
*/
|
*/
|
||||||
visible?: boolean;
|
visible?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default ActionConfig;
|
@ -7,12 +7,12 @@ import {
|
|||||||
NoteModel,
|
NoteModel,
|
||||||
NoteIcon,
|
NoteIcon,
|
||||||
} from '@wisemapping/mindplot';
|
} from '@wisemapping/mindplot';
|
||||||
import { linkContent, noteContent } from './contents';
|
import { linkContent, noteContent } from '../../components/menu/contents';
|
||||||
|
|
||||||
export default class MuiWidgetManager extends WidgetManager {
|
export class DefaultWidgetManager extends WidgetManager {
|
||||||
private editorOpen: boolean;
|
private editorOpen: boolean;
|
||||||
private editorContent: React.ReactElement;
|
private editorContent: React.ReactElement;
|
||||||
private setPopoverOpen: (boolean) => void;
|
private setPopoverOpen: (value: boolean) => void;
|
||||||
private setPopoverTarget: (target: Element) => void;
|
private setPopoverTarget: (target: Element) => void;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@ -27,7 +27,7 @@ export default class MuiWidgetManager extends WidgetManager {
|
|||||||
showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
|
showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
|
||||||
const model: any = {
|
const model: any = {
|
||||||
getValue: () => topic.getLinkValue(),
|
getValue: () => topic.getLinkValue(),
|
||||||
setValue: (value) => topic.setLinkValue(value),
|
setValue: (value: string) => topic.setLinkValue(value),
|
||||||
};
|
};
|
||||||
this.editorContent = linkContent(model, () => this.setPopoverOpen(false));
|
this.editorContent = linkContent(model, () => this.setPopoverOpen(false));
|
||||||
this.setPopoverTarget(topic.getOuterShape().peer._native);
|
this.setPopoverTarget(topic.getOuterShape().peer._native);
|
||||||
@ -64,3 +64,5 @@ export default class MuiWidgetManager extends WidgetManager {
|
|||||||
topic.closeEditors();
|
topic.closeEditors();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default DefaultWidgetManager;
|
@ -1,10 +1,10 @@
|
|||||||
import { useState, useRef } from 'react';
|
import { useState, useRef } from 'react';
|
||||||
import MuiWidgetManager from './MuiWidgetManager';
|
import DefaultWidgetManager from '../../classes/default-widget-manager';
|
||||||
|
|
||||||
export const useMuiWidgetManager = (): [boolean, Element | undefined, MuiWidgetManager] => {
|
export const useMuiWidgetManager = (): [boolean, Element | undefined, DefaultWidgetManager] => {
|
||||||
const [popoverOpen, setPopoverOpen] = useState(false);
|
const [popoverOpen, setPopoverOpen] = useState(false);
|
||||||
const [popoverTarget, setPopoverTarget] = useState(undefined);
|
const [popoverTarget, setPopoverTarget] = useState(undefined);
|
||||||
const widgetManager = useRef(new MuiWidgetManager(setPopoverOpen, setPopoverTarget));
|
const widgetManager = useRef(new DefaultWidgetManager(setPopoverOpen, setPopoverTarget));
|
||||||
|
|
||||||
return [popoverOpen, popoverTarget, widgetManager.current];
|
return [popoverOpen, popoverTarget, widgetManager.current];
|
||||||
};
|
};
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface';
|
import ActionConfig from '../../classes/actions-config';
|
||||||
import MaterialToolbar from '@mui/material/Toolbar';
|
import MaterialToolbar from '@mui/material/Toolbar';
|
||||||
import AppBar from '@mui/material/AppBar';
|
import AppBar from '@mui/material/AppBar';
|
||||||
import { ToolbarMenuItem } from './Toolbar';
|
import { ToolbarMenuItem } from './Toolbar';
|
||||||
@ -9,7 +9,7 @@ import { ToolbarMenuItem } from './Toolbar';
|
|||||||
* @param props.configurations the configurations array
|
* @param props.configurations the configurations array
|
||||||
* @returns toolbar wich contains an entry for each configuration in the array
|
* @returns toolbar wich contains an entry for each configuration in the array
|
||||||
*/
|
*/
|
||||||
const Menubar = (props: { configurations: ToolbarOptionConfiguration[] }) => {
|
const Menubar = (props: { configurations: ActionConfig[] }) => {
|
||||||
return (
|
return (
|
||||||
<AppBar
|
<AppBar
|
||||||
role="menubar"
|
role="menubar"
|
||||||
|
@ -6,7 +6,7 @@ import Popover, { PopoverOrigin } from '@mui/material/Popover';
|
|||||||
import Tooltip from '@mui/material/Tooltip';
|
import Tooltip from '@mui/material/Tooltip';
|
||||||
import './appbar-buttons.css';
|
import './appbar-buttons.css';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface';
|
import ActionConfig from '../../classes/actions-config';
|
||||||
import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
|
import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -14,7 +14,7 @@ import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
|
|||||||
* @param props.configuration the configuration
|
* @param props.configuration the configuration
|
||||||
* @returns common button menu entry that uses the onClick of the configuration.
|
* @returns common button menu entry that uses the onClick of the configuration.
|
||||||
*/
|
*/
|
||||||
export const ToolbarButtonOption = (props: { configuration: ToolbarOptionConfiguration }) => {
|
export const ToolbarButtonOption = (props: { configuration: ActionConfig }) => {
|
||||||
const selected = props.configuration.selected && props.configuration.selected();
|
const selected = props.configuration.selected && props.configuration.selected();
|
||||||
return (
|
return (
|
||||||
<Tooltip title={props.configuration.tooltip || ''} disableInteractive>
|
<Tooltip title={props.configuration.tooltip || ''} disableInteractive>
|
||||||
@ -62,7 +62,7 @@ const horizontalAligment: { anchorOrigin: PopoverOrigin; transformOrigin: Popove
|
|||||||
* @returns submenu entry that contains one ToolbarMenuItem for each option. Inserts a divider for null options.
|
* @returns submenu entry that contains one ToolbarMenuItem for each option. Inserts a divider for null options.
|
||||||
*/
|
*/
|
||||||
export const ToolbarSubmenu = (props: {
|
export const ToolbarSubmenu = (props: {
|
||||||
configuration: ToolbarOptionConfiguration;
|
configuration: ActionConfig;
|
||||||
vertical?: boolean;
|
vertical?: boolean;
|
||||||
elevation?: number;
|
elevation?: number;
|
||||||
}) => {
|
}) => {
|
||||||
@ -111,7 +111,7 @@ export const ToolbarSubmenu = (props: {
|
|||||||
<ToolbarMenuItem
|
<ToolbarMenuItem
|
||||||
vertical={!!!props.vertical}
|
vertical={!!!props.vertical}
|
||||||
key={i}
|
key={i}
|
||||||
configuration={o as ToolbarOptionConfiguration}
|
configuration={o as ActionConfig}
|
||||||
elevation={props.elevation + 3}
|
elevation={props.elevation + 3}
|
||||||
></ToolbarMenuItem>
|
></ToolbarMenuItem>
|
||||||
);
|
);
|
||||||
@ -131,7 +131,7 @@ export const ToolbarSubmenu = (props: {
|
|||||||
* @returns menu item wich contains a submenu if options is set or a button if onClick is set or null otherwise.
|
* @returns menu item wich contains a submenu if options is set or a button if onClick is set or null otherwise.
|
||||||
*/
|
*/
|
||||||
export const ToolbarMenuItem = (props: {
|
export const ToolbarMenuItem = (props: {
|
||||||
configuration: ToolbarOptionConfiguration | null;
|
configuration: ActionConfig | null;
|
||||||
vertical?: boolean;
|
vertical?: boolean;
|
||||||
elevation?: number;
|
elevation?: number;
|
||||||
}) => {
|
}) => {
|
||||||
@ -174,7 +174,7 @@ export const ToolbarMenuItem = (props: {
|
|||||||
* @returns toolbar wich contains a button/submenu for each configuration in the array
|
* @returns toolbar wich contains a button/submenu for each configuration in the array
|
||||||
*/
|
*/
|
||||||
const Toolbar = (props: {
|
const Toolbar = (props: {
|
||||||
configurations: ToolbarOptionConfiguration[];
|
configurations: ActionConfig[];
|
||||||
position?: ToolbarPosition;
|
position?: ToolbarPosition;
|
||||||
rerender?: number;
|
rerender?: number;
|
||||||
}) => {
|
}) => {
|
||||||
|
@ -34,7 +34,7 @@ import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
|
|||||||
import Palette from '@mui/icons-material/Square';
|
import Palette from '@mui/icons-material/Square';
|
||||||
import SquareOutlined from '@mui/icons-material/SquareOutlined';
|
import SquareOutlined from '@mui/icons-material/SquareOutlined';
|
||||||
import { $msg, Designer } from '@wisemapping/mindplot';
|
import { $msg, Designer } from '@wisemapping/mindplot';
|
||||||
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface';
|
import ActionConfig from '../../classes/actions-config';
|
||||||
import { SwitchValueDirection, NodePropertyValueModelBuilder } from './ToolbarValueModelBuilder';
|
import { SwitchValueDirection, NodePropertyValueModelBuilder } from './ToolbarValueModelBuilder';
|
||||||
import {
|
import {
|
||||||
ColorPicker,
|
ColorPicker,
|
||||||
@ -55,7 +55,7 @@ import Tooltip from '@mui/material/Tooltip';
|
|||||||
* @param designer designer to aply changes
|
* @param designer designer to aply changes
|
||||||
* @returns configuration for @wisemapping/editor primary toolbar
|
* @returns configuration for @wisemapping/editor primary toolbar
|
||||||
*/
|
*/
|
||||||
export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfiguration[] {
|
export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
|
||||||
if (!designer) return [];
|
if (!designer) return [];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -70,7 +70,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
|
|||||||
/**
|
/**
|
||||||
* submenu to manipulate node color and shape
|
* submenu to manipulate node color and shape
|
||||||
*/
|
*/
|
||||||
const colorAndShapeToolbarConfiguration: ToolbarOptionConfiguration = {
|
const colorAndShapeToolbarConfiguration: ActionConfig = {
|
||||||
icon: <BrushOutlinedIcon />,
|
icon: <BrushOutlinedIcon />,
|
||||||
|
|
||||||
tooltip: $msg('TOPIC_SHAPE'),
|
tooltip: $msg('TOPIC_SHAPE'),
|
||||||
@ -148,7 +148,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
|
|||||||
/**
|
/**
|
||||||
* submenu to manipulate node font
|
* submenu to manipulate node font
|
||||||
*/
|
*/
|
||||||
const fontFormatToolbarConfiguration: ToolbarOptionConfiguration = {
|
const fontFormatToolbarConfiguration: ActionConfig = {
|
||||||
icon: <FontDownloadOutlinedIcon></FontDownloadOutlinedIcon>,
|
icon: <FontDownloadOutlinedIcon></FontDownloadOutlinedIcon>,
|
||||||
tooltip: $msg('FONT_FORMAT'),
|
tooltip: $msg('FONT_FORMAT'),
|
||||||
options: [
|
options: [
|
||||||
@ -208,7 +208,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
|
|||||||
/**
|
/**
|
||||||
* button to show relation pivot
|
* button to show relation pivot
|
||||||
*/
|
*/
|
||||||
const addRelationConfiguration: ToolbarOptionConfiguration = {
|
const addRelationConfiguration: ActionConfig = {
|
||||||
icon: <SettingsEthernetIcon></SettingsEthernetIcon>,
|
icon: <SettingsEthernetIcon></SettingsEthernetIcon>,
|
||||||
tooltip: $msg('TOPIC_RELATIONSHIP'),
|
tooltip: $msg('TOPIC_RELATIONSHIP'),
|
||||||
onClick: (e) => {
|
onClick: (e) => {
|
||||||
@ -220,7 +220,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
|
|||||||
/**
|
/**
|
||||||
* tool for node link edition
|
* tool for node link edition
|
||||||
*/
|
*/
|
||||||
const editLinkUrlConfiguration: ToolbarOptionConfiguration = {
|
const editLinkUrlConfiguration: ActionConfig = {
|
||||||
icon: <LinkOutlinedIcon />,
|
icon: <LinkOutlinedIcon />,
|
||||||
tooltip: $msg('TOPIC_LINK'),
|
tooltip: $msg('TOPIC_LINK'),
|
||||||
useClickToClose: true,
|
useClickToClose: true,
|
||||||
@ -240,7 +240,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
|
|||||||
/**
|
/**
|
||||||
* tool for node note edition
|
* tool for node note edition
|
||||||
*/
|
*/
|
||||||
const editNoteConfiguration: ToolbarOptionConfiguration = {
|
const editNoteConfiguration: ActionConfig = {
|
||||||
icon: <NoteOutlinedIcon />,
|
icon: <NoteOutlinedIcon />,
|
||||||
tooltip: $msg('TOPIC_NOTE'),
|
tooltip: $msg('TOPIC_NOTE'),
|
||||||
useClickToClose: true,
|
useClickToClose: true,
|
||||||
@ -261,7 +261,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
|
|||||||
/**
|
/**
|
||||||
* tool for emoji selection
|
* tool for emoji selection
|
||||||
*/
|
*/
|
||||||
const editIconConfiguration: ToolbarOptionConfiguration = {
|
const editIconConfiguration: ActionConfig = {
|
||||||
icon: <SentimentSatisfiedAltIcon />,
|
icon: <SentimentSatisfiedAltIcon />,
|
||||||
tooltip: $msg('TOPIC_ICON'),
|
tooltip: $msg('TOPIC_ICON'),
|
||||||
options: [
|
options: [
|
||||||
@ -359,7 +359,7 @@ export function buildEditorAppBarConfiguration(
|
|||||||
showMapEntityActions: boolean,
|
showMapEntityActions: boolean,
|
||||||
showMindMapNodesActions: boolean,
|
showMindMapNodesActions: boolean,
|
||||||
showPersistenceActions: boolean,
|
showPersistenceActions: boolean,
|
||||||
): ToolbarOptionConfiguration[] {
|
): ActionConfig[] {
|
||||||
if (!designer) return [];
|
if (!designer) return [];
|
||||||
|
|
||||||
let commonConfiguration = [
|
let commonConfiguration = [
|
||||||
@ -373,36 +373,39 @@ export function buildEditorAppBarConfiguration(
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
render: () => (
|
render: () => (
|
||||||
<Tooltip title={designer.getMindmap().getCentralTopic().getText()}>
|
<Tooltip title={designer.getMindmap().getDescription()}>
|
||||||
<Typography
|
<Typography
|
||||||
className="truncated"
|
className="truncated"
|
||||||
variant="body1"
|
variant="body1"
|
||||||
component="div"
|
component="div"
|
||||||
sx={{ marginX: '1.5rem' }}
|
sx={{ marginX: '1.5rem' }}
|
||||||
>
|
>
|
||||||
{designer.getMindmap().getCentralTopic().getText()}
|
{designer.getMindmap().getDescription()}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const exportConfiguration = {
|
const exportConfiguration: ActionConfig = {
|
||||||
icon: <FileDownloadOutlinedIcon />,
|
icon: <FileDownloadOutlinedIcon />,
|
||||||
tooltip: $msg('EXPORT'),
|
tooltip: $msg('EXPORT'),
|
||||||
onClick: () => onAction('export'),
|
onClick: () => onAction('export'),
|
||||||
};
|
};
|
||||||
const helpConfiguration = {
|
|
||||||
|
const helpConfiguration: ActionConfig = {
|
||||||
icon: <HelpOutlineOutlinedIcon />,
|
icon: <HelpOutlineOutlinedIcon />,
|
||||||
onClick: () => onAction('info'),
|
onClick: () => onAction('info'),
|
||||||
tooltip: $msg('MAP_INFO'),
|
tooltip: $msg('MAP_INFO'),
|
||||||
};
|
};
|
||||||
|
|
||||||
const appBarDivisor = {
|
const appBarDivisor = {
|
||||||
render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
|
render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (showOnlyCommonActions)
|
if (showOnlyCommonActions) {
|
||||||
return [...commonConfiguration, appBarDivisor, exportConfiguration, helpConfiguration];
|
return [...commonConfiguration, appBarDivisor, exportConfiguration];
|
||||||
|
}
|
||||||
|
|
||||||
return [
|
return [
|
||||||
...commonConfiguration,
|
...commonConfiguration,
|
||||||
|
@ -19,7 +19,7 @@ import Link from '@mui/material/Link';
|
|||||||
import Tab from '@mui/material/Tab';
|
import Tab from '@mui/material/Tab';
|
||||||
import Tabs from '@mui/material/Tabs';
|
import Tabs from '@mui/material/Tabs';
|
||||||
import { ToolbarMenuItem } from './Toolbar';
|
import { ToolbarMenuItem } from './Toolbar';
|
||||||
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface';
|
import ActionConfig from '../../classes/actions-config';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Color picker for toolbar
|
* Color picker for toolbar
|
||||||
@ -309,7 +309,7 @@ export const ToolbarEmojiPcker = (props: {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const UndoAndRedoButton = (props: {
|
export const UndoAndRedoButton = (props: {
|
||||||
configuration: ToolbarOptionConfiguration;
|
configuration: ActionConfig;
|
||||||
disabledCondition: (event) => boolean;
|
disabledCondition: (event) => boolean;
|
||||||
}) => {
|
}) => {
|
||||||
const [disabled, setDisabled] = useState(true);
|
const [disabled, setDisabled] = useState(true);
|
||||||
|
@ -277,6 +277,7 @@ function getToolsVisibilityConfiguration(options: EditorOptions, isMobile: any)
|
|||||||
const showAccessChangeActions = options.mode === 'edition-owner' && !isMobile;
|
const showAccessChangeActions = options.mode === 'edition-owner' && !isMobile;
|
||||||
const showPersistenceActions = editMode && !isMobile && !options.locked;
|
const showPersistenceActions = editMode && !isMobile && !options.locked;
|
||||||
const showOnlyCommonActions = options.mode === 'viewonly' || isMobile;
|
const showOnlyCommonActions = options.mode === 'viewonly' || isMobile;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
editMode,
|
editMode,
|
||||||
showOnlyCommonActions,
|
showOnlyCommonActions,
|
||||||
|
@ -9,45 +9,45 @@ import Toolbar, {
|
|||||||
ToolbarMenuItem,
|
ToolbarMenuItem,
|
||||||
ToolbarSubmenu,
|
ToolbarSubmenu,
|
||||||
} from '../../../src/components/toolbar/Toolbar';
|
} from '../../../src/components/toolbar/Toolbar';
|
||||||
import { ToolbarOptionConfiguration } from '../../../src/components/toolbar/ToolbarOptionConfigurationInterface';
|
import ActionConfig from '../../../src/classes/actions-config';
|
||||||
import Menubar from '../../../src/components/toolbar/AppBar';
|
import Menubar from '../../../src/components/toolbar/AppBar';
|
||||||
require('babel-polyfill');
|
require('babel-polyfill');
|
||||||
jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => '');
|
jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => '');
|
||||||
|
|
||||||
const config: ToolbarOptionConfiguration = {
|
const config: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
onClick: jest.fn(),
|
onClick: jest.fn(),
|
||||||
};
|
};
|
||||||
|
|
||||||
const notVisibleConfig: ToolbarOptionConfiguration = {
|
const notVisibleConfig: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
onClick: jest.fn(),
|
onClick: jest.fn(),
|
||||||
visible: false,
|
visible: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const disabledAndNotSelectedButtonConfig: ToolbarOptionConfiguration = {
|
const disabledAndNotSelectedButtonConfig: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
onClick: jest.fn(),
|
onClick: jest.fn(),
|
||||||
disabled: () => true,
|
disabled: () => true,
|
||||||
selected: () => false,
|
selected: () => false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectedButtonConfig: ToolbarOptionConfiguration = {
|
const selectedButtonConfig: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
onClick: jest.fn(),
|
onClick: jest.fn(),
|
||||||
selected: () => true,
|
selected: () => true,
|
||||||
};
|
};
|
||||||
|
|
||||||
const disabledSubMenuConfig: ToolbarOptionConfiguration = {
|
const disabledSubMenuConfig: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
options: [config],
|
options: [config],
|
||||||
disabled: () => true,
|
disabled: () => true,
|
||||||
};
|
};
|
||||||
const withRenderConfig: ToolbarOptionConfiguration = {
|
const withRenderConfig: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
render: () => <div data-testid="custom-render-div">test</div>,
|
render: () => <div data-testid="custom-render-div">test</div>,
|
||||||
};
|
};
|
||||||
const withCloseSubmenuRender: ToolbarOptionConfiguration = {
|
const withCloseSubmenuRender: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
render: (closeMenu) => {
|
render: (closeMenu) => {
|
||||||
return (
|
return (
|
||||||
@ -57,20 +57,20 @@ const withCloseSubmenuRender: ToolbarOptionConfiguration = {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const submenuConfig: ToolbarOptionConfiguration = {
|
const submenuConfig: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
options: [config, null, config, null, withRenderConfig],
|
options: [config, null, config, null, withRenderConfig],
|
||||||
};
|
};
|
||||||
const notVisibleSubmenuConfig: ToolbarOptionConfiguration = {
|
const notVisibleSubmenuConfig: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
options: [config, null, config, null, withRenderConfig],
|
options: [config, null, config, null, withRenderConfig],
|
||||||
visible: false,
|
visible: false,
|
||||||
};
|
};
|
||||||
const submenuConfig2: ToolbarOptionConfiguration = {
|
const submenuConfig2: ActionConfig = {
|
||||||
icon: <ThreeDRotation></ThreeDRotation>,
|
icon: <ThreeDRotation></ThreeDRotation>,
|
||||||
options: [withCloseSubmenuRender],
|
options: [withCloseSubmenuRender],
|
||||||
};
|
};
|
||||||
const iconFunctionConfig: ToolbarOptionConfiguration = {
|
const iconFunctionConfig: ActionConfig = {
|
||||||
icon: () => <ThreeDRotation></ThreeDRotation>,
|
icon: () => <ThreeDRotation></ThreeDRotation>,
|
||||||
onClick: jest.fn(),
|
onClick: jest.fn(),
|
||||||
};
|
};
|
||||||
|
110
packages/mindplot/src/mindplot-styles.css
Normal file
110
packages/mindplot/src/mindplot-styles.css
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
/*
|
||||||
|
DO NOT USE THIS FILE until we resolve how to import .css files into shadow dom
|
||||||
|
As a workaround, use the file mindplot-styles.js instead
|
||||||
|
*/
|
||||||
|
.mindplot-svg-tooltip {
|
||||||
|
display: none;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
text-align: center;
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 6px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
animation: fadeIn 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn ease 0.4s;
|
||||||
|
-webkit-animation: fadeIn ease 0.4s;
|
||||||
|
-moz-animation: fadeIn ease 0.4s;
|
||||||
|
-o-animation: fadeIn ease 0.4s;
|
||||||
|
-ms-animation: fadeIn ease 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-title {
|
||||||
|
background-color: rgb(247, 247, 247);
|
||||||
|
border-bottom-color: rgb(235, 235, 235);
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
cursor: default;
|
||||||
|
display: block;
|
||||||
|
font-family: Arial;
|
||||||
|
padding: 8px 14px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content {
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
padding: 6px 4px;
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content-link {
|
||||||
|
padding: 3px 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content-note {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid #fff;
|
||||||
|
bottom: 100%;
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid rgb(247, 247, 247);
|
||||||
|
bottom: calc(1px + 100%);
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user