vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-06-03 01:04:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Minor improvements on editor toolbar

Browse Source
This commit is contained in:
Gonzalo Martinez 2023-01-06 01:06:55 +00:00 committed by Paulo Veiga
parent 859a95d1d1
commit fa33a12442
18 changed files with 207 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/editor/lang/de.json
View File

@ -80,6 +80,12 @@
"note.label": {
"defaultMessage": "Notiz"
},
"icon.label": {
"defaultMessage": "Symbol"
},
"link.label": {
"defaultMessage": "Link"
},
"zoom-panel.tooltip-keyboard": {
"defaultMessage": "Tastatürkürzel"
},

6
packages/editor/lang/en.json
View File

@ -161,6 +161,12 @@
"note.label": {
"defaultMessage": "Note"
},
"icon.label": {
"defaultMessage": "Icon"
},
"link.label": {
"defaultMessage": "Link"
},
"shortcut-help-pane.action": {
"defaultMessage": "Action"
},

6
packages/editor/lang/es.json
View File

@ -74,6 +74,12 @@
"note.label": {
"defaultMessage": "Nota"
},
"icon.label": {
"defaultMessage": "Icono"
},
"link.label": {
"defaultMessage": "Enlace"
},
"editor-panel.tooltip-add-icon": {
"defaultMessage": "Agregar Icono"
},

58
packages/editor/lang/fr.json
View File

@ -72,73 +72,79 @@
"defaultMessage": "https://www.example.com"
},
"note.label": {
"defaultMessage": "Noter"
"defaultMessage": "Note"
},
"icon.label": {
"defaultMessage": "Icône"
},
"link.label": {
"defaultMessage": "Lien"
},
"editor-panel.tooltip-add-icon": {
"defaultMessage": "Agregar Icono"
"defaultMessage": "Ajouter une icône"
},
"editor-panel.tooltip-add-link": {
"defaultMessage": "Agregar Enlace"
"defaultMessage": "Ajouter un lien"
},
"editor-panel.tooltip-add-note": {
"defaultMessage": "Agregar Nota"
"defaultMessage": "Ajouter une note"
},
"editor-panel.tooltip-add-relationship": {
"defaultMessage": "Agregar Relación"
"defaultMessage": "Ajouter une relation"
},
"editor-panel.tooltip-add-topic": {
"defaultMessage": "Agregar Topico"
"defaultMessage": "Ajouter un sujet"
},
"editor-panel.tooltip-delete-topic": {
"defaultMessage": "Borrar Topico"
"editor-panel.tooltip-delete-sujet": {
"defaultMessage": "Supprimer le sujet"
},
"editor-panel.tooltip-topic-border-color": {
"defaultMessage": "Color del borde"
"defaultMessage": "Couleur de bordure"
},
"editor-panel.tooltip-topic-font-bigger": {
"defaultMessage": "Grande"
"defaultMessage": "Grand"
},
"editor-panel.tooltip-topic-font-bold": {
"defaultMessage": "Negrita"
"defaultMessage": "Gras"
},
"editor-panel.tooltip-topic-font-color": {
"defaultMessage": "Color"
"defaultMessage": "Couleur"
},
"editor-panel.tooltip-topic-font-italic": {
"defaultMessage": "Italica"
"defaultMessage": "Italique"
},
"editor-panel.tooltip-topic-font-smaller": {
"defaultMessage": "Pequeña"
"defaultMessage": "Petit"
},
"editor-panel.tooltip-topic-font-style": {
"defaultMessage": "Estilo de Fuente"
"defaultMessage": "Style de police"
},
"editor-panel.tooltip-topic-share-ellipse": {
"defaultMessage": "Figura elipse"
"defaultMessage": "Forme d'ellipse"
},
"editor-panel.tooltip-topic-share-line": {
"defaultMessage": "Figura linea"
"defaultMessage": "Chiffre de ligne"
},
"editor-panel.tooltip-topic-share-rectangle": {
"defaultMessage": "Figura rectangulo"
"defaultMessage": "Forme rectangulaire"
},
"editor-panel.tooltip-topic-share-rounded": {
"defaultMessage": "Figura redonda"
"editor-panel.tooltip-topic-share-arrondi": {
"defaultMessage": "Forme ronde"
},
"editor-panel.tooltip-topic-style": {
"defaultMessage": "Estilo de Topico"
"defaultMessage": "Style de sujet"
},
"zoom-panel.tooltip-keyboard": {
"defaultMessage": "Keyboard Shortcuts"
"zoom-panel.tooltip-clavier": {
"defaultMessage": "Raccourcis clavier"
},
"zoom-panel.tooltip-zoom-in": {
"defaultMessage": "Acercar"
"defaultMessage": "Zoom avant"
},
"zoom-panel.tooltip-zoom-out": {
"defaultMessage": "Alejarse"
"defaultMessage": "S'éloigner"
},
"zoom-panel.tooltip-zoom-to-fit": {
"defaultMessage": "Centrar"
"defaultMessage": "Centre"
},
"shortcut-help-pane.action": {
"defaultMessage": "Action"

4
packages/editor/src/classes/action/action-config/index.ts
View File

@ -59,6 +59,10 @@ interface ActionConfig {
* if false the menu entry or button is not visible. Also custom render will be ignored.
*/
visible?: boolean;
/**
* title for popover. Only used if useClickToClose is true
*/
title?: string;
}
export default ActionConfig;

7
packages/editor/src/classes/default-widget-manager/index.ts
View File

@ -23,6 +23,7 @@ import { linkContent, noteContent } from './react-component';
export class DefaultWidgetManager extends WidgetManager {
private editorOpen: boolean;
private editorContent: React.ReactElement;
private editorTitle: string;
private setPopoverOpen: (value: boolean) => void;
private setPopoverTarget: (target: Element) => void;
@ -43,6 +44,7 @@ export class DefaultWidgetManager extends WidgetManager {
this.editorContent = linkContent(model, () => this.setPopoverOpen(false));
this.setPopoverTarget(topic.getOuterShape().peer._native);
this.setPopoverOpen(true);
this.editorTitle = 'link.label';
topic.closeEditors();
}
@ -73,6 +75,7 @@ export class DefaultWidgetManager extends WidgetManager {
this.editorContent = noteContent(model, () => this.setPopoverOpen(false));
this.setPopoverTarget(topic.getOuterShape().peer._native);
this.setPopoverOpen(true);
this.editorTitle = 'note.label';
topic.closeEditors();
}
@ -83,6 +86,10 @@ export class DefaultWidgetManager extends WidgetManager {
return [popoverOpen, setPopoverOpen, popoverTarget, widgetManager.current];
}
getEditorTile(): string {
return this.editorTitle;
}
}
export default DefaultWidgetManager;

12
packages/editor/src/compiled-lang/de.json
View File

@ -311,12 +311,24 @@
"value": "Bilder anzeigen"
}
],
"icon.label": [
{
"type": 0,
"value": "Symbol"
}
],
"link.help_text": [
{
"type": 0,
"value": "Ingültige Adresse"
}
],
"link.label": [
{
"type": 0,
"value": "Link"
}
],
"link.placeholder": [
{
"type": 0,

12
packages/editor/src/compiled-lang/en.json
View File

@ -305,12 +305,24 @@
"value": "Show images"
}
],
"icon.label": [
{
"type": 0,
"value": "Icon"
}
],
"link.help_text": [
{
"type": 0,
"value": "Address is not valid"
}
],
"link.label": [
{
"type": 0,
"value": "Link"
}
],
"link.placeholder": [
{
"type": 0,

12
packages/editor/src/compiled-lang/es.json
View File

@ -305,12 +305,24 @@
"value": "Mostrar imagenes"
}
],
"icon.label": [
{
"type": 0,
"value": "Icono"
}
],
"link.help_text": [
{
"type": 0,
"value": "Dirección invalida"
}
],
"link.label": [
{
"type": 0,
"value": "Enlace"
}
],
"link.placeholder": [
{
"type": 0,

72
packages/editor/src/compiled-lang/fr.json
View File

@ -98,31 +98,31 @@
"editor-panel.tooltip-add-icon": [
{
"type": 0,
"value": "Agregar Icono"
"value": "Ajouter une icône"
}
],
"editor-panel.tooltip-add-link": [
{
"type": 0,
"value": "Agregar Enlace"
"value": "Ajouter un lien"
}
],
"editor-panel.tooltip-add-note": [
{
"type": 0,
"value": "Agregar Nota"
"value": "Ajouter une note"
}
],
"editor-panel.tooltip-add-relationship": [
{
"type": 0,
"value": "Agregar Relación"
"value": "Ajouter une relation"
}
],
"editor-panel.tooltip-add-topic": [
{
"type": 0,
"value": "Agregar Topico"
"value": "Ajouter un sujet"
}
],
"editor-panel.tooltip-connection-color": [
@ -167,16 +167,16 @@
"value": "Courbe polyligne"
}
],
"editor-panel.tooltip-delete-topic": [
"editor-panel.tooltip-delete-sujet": [
{
"type": 0,
"value": "Borrar Topico"
"value": "Supprimer le sujet"
}
],
"editor-panel.tooltip-topic-border-color": [
{
"type": 0,
"value": "Color del borde"
"value": "Couleur de bordure"
}
],
"editor-panel.tooltip-topic-border-color-default": [
@ -200,67 +200,67 @@
"editor-panel.tooltip-topic-font-bigger": [
{
"type": 0,
"value": "Grande"
"value": "Grand"
}
],
"editor-panel.tooltip-topic-font-bold": [
{
"type": 0,
"value": "Negrita"
"value": "Gras"
}
],
"editor-panel.tooltip-topic-font-color": [
{
"type": 0,
"value": "Color"
"value": "Couleur"
}
],
"editor-panel.tooltip-topic-font-italic": [
{
"type": 0,
"value": "Italica"
"value": "Italique"
}
],
"editor-panel.tooltip-topic-font-smaller": [
{
"type": 0,
"value": "Pequeña"
"value": "Petit"
}
],
"editor-panel.tooltip-topic-font-style": [
{
"type": 0,
"value": "Estilo de Fuente"
"value": "Style de police"
}
],
"editor-panel.tooltip-topic-share-arrondi": [
{
"type": 0,
"value": "Forme ronde"
}
],
"editor-panel.tooltip-topic-share-ellipse": [
{
"type": 0,
"value": "Figura elipse"
"value": "Forme d'ellipse"
}
],
"editor-panel.tooltip-topic-share-line": [
{
"type": 0,
"value": "Figura linea"
"value": "Chiffre de ligne"
}
],
"editor-panel.tooltip-topic-share-rectangle": [
{
"type": 0,
"value": "Figura rectangulo"
}
],
"editor-panel.tooltip-topic-share-rounded": [
{
"type": 0,
"value": "Figura redonda"
"value": "Forme rectangulaire"
}
],
"editor-panel.tooltip-topic-style": [
{
"type": 0,
"value": "Estilo de Topico"
"value": "Style de sujet"
}
],
"editor.edit-description-mobile": [
@ -305,12 +305,24 @@
"value": "Afficher les images"
}
],
"icon.label": [
{
"type": 0,
"value": "Icône"
}
],
"link.help_text": [
{
"type": 0,
"value": "Adresse invalide"
}
],
"link.label": [
{
"type": 0,
"value": "Lien"
}
],
"link.placeholder": [
{
"type": 0,
@ -320,7 +332,7 @@
"note.label": [
{
"type": 0,
"value": "Noter"
"value": "Note"
}
],
"shortcut-help-pane.action": [
@ -473,28 +485,28 @@
"value": "Annuler l'édition"
}
],
"zoom-panel.tooltip-keyboard": [
"zoom-panel.tooltip-clavier": [
{
"type": 0,
"value": "Keyboard Shortcuts"
"value": "Raccourcis clavier"
}
],
"zoom-panel.tooltip-zoom-in": [
{
"type": 0,
"value": "Acercar"
"value": "Zoom avant"
}
],
"zoom-panel.tooltip-zoom-out": [
{
"type": 0,
"value": "Alejarse"
"value": "S'éloigner"
}
],
"zoom-panel.tooltip-zoom-to-fit": [
{
"type": 0,
"value": "Centrar"
"value": "Centre"
}
]
}

3
packages/editor/src/components/editor-toolbar/configBuilder.tsx
View File

@ -351,6 +351,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
'L',
),
useClickToClose: true,
title: intl.formatMessage({ id: 'link.label', defaultMessage: 'Link' }),
options: [
{
render: (closeModal) => (
@ -371,6 +372,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
'K',
),
useClickToClose: true,
title: intl.formatMessage({ id: 'note.label', defaultMessage: 'Note' }),
options: [
{
tooltip: 'Node note',
@ -392,6 +394,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
defaultMessage: 'Add Icon',
}),
useClickToClose: true,
title: intl.formatMessage({ id: 'icon.label', defaultMessage: 'Icon' }),
options: [
{
tooltip: intl.formatMessage({

12
packages/editor/src/components/index.tsx
View File

@ -20,7 +20,7 @@ import Popover from '@mui/material/Popover';
import Model from '../classes/model/editor';
import { Vortex } from 'react-loader-spinner';
import { IntlProvider } from 'react-intl';
import { FormattedMessage, IntlProvider } from 'react-intl';
import {
PersistenceManager,
Designer,
@ -44,6 +44,7 @@ import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';
import CloseIcon from '@mui/icons-material/Close';
import { SpinnerCentered } from './style';
import Typography from '@mui/material/Typography';
export type EditorOptions = {
mode: EditorRenderMode;
@ -127,7 +128,14 @@ const Editor = ({
horizontal: 'left',
}}
>
<Box alignItems={'end'}>
<Box textAlign={'right'} ml={1}>
<Typography variant="body1" style={{ paddingTop: '10px', float: 'left' }}>
<FormattedMessage
id={widgetManager.getEditorTile()}
defaultMessage=""
></FormattedMessage>
</Typography>
<IconButton onClick={() => setPopoverOpen(false)} aria-label={'Close'}>
<CloseIcon />
</IconButton>

6
packages/editor/src/components/toolbar/index.tsx
View File

@ -26,6 +26,7 @@ import Box from '@mui/material/Box';
import ToolbarPosition from '../../classes/model/toolbar-position';
import ActionConfig from '../../classes/action/action-config';
import CloseIcon from '@mui/icons-material/Close';
import Typography from '@mui/material/Typography';
/**
* Common button
@ -131,7 +132,10 @@ export const ToolbarSubmenu = (props: {
elevation={props.elevation}
>
{props.configuration.useClickToClose && (
<Box alignItems={'end'}>
<Box textAlign={'right'} ml={1}>
<Typography variant="body1" style={{ paddingTop: '10px', float: 'left' }}>
{props.configuration.title}
</Typography>
<IconButton onClick={() => setOpen(false)} aria-label={'Close'}>
<CloseIcon />
</IconButton>

10
packages/editor/test/unit/toolbar/toolbar.test.tsx
View File

@ -84,6 +84,7 @@ const submenuOnClickConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>,
useClickToClose: true,
options: [config, null, config, null],
title: 'Submenu title',
};
afterEach(() => {
@ -235,6 +236,15 @@ describe('Editor Toolbar Submenu', () => {
fireEvent.click(closeButton);
expect(screen.queryByRole('submenu')).toBeFalsy();
});
it('Given a useClickToOpen configuration when click, shows a submenu with title', async () => {
render(<ToolbarSubmenu configuration={submenuOnClickConfig}></ToolbarSubmenu>);
const item = screen.getByRole('button');
fireEvent.click(item);
await screen.findByText('Submenu title');
});
});
describe('toolbar menu item', () => {

17
packages/webapp/src/components/HOCs/withEmotionStyles.tsx
View File

@ -1,3 +1,20 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import React, { ComponentType } from 'react';

22
packages/webapp/src/components/maps-page/index.tsx
View File

@ -69,16 +69,20 @@ const MapsPage = (): ReactElement => {
const queryClient = useQueryClient();
const [activeDialog, setActiveDialog] = React.useState<ActionType | undefined>(undefined);
const [labelToDelete, setLabelToDelete] = React.useState<number | null>(null);
const [mobileOpen, setMobileOpen] = React.useState(false);
const [desktopOpen, setDesktopOpen] = React.useState(false);
const classes = useStyles(desktopOpen);
const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);
const [desktopDrawerOpen, setDesktopDrawerOpen] = React.useState(
localStorage.getItem('desktopDrawerOpen') === 'true',
);
const classes = useStyles(desktopDrawerOpen);
const handleMobileDrawerToggle = () => {
setMobileOpen(!mobileOpen);
setMobileDrawerOpen(!mobileDrawerOpen);
};
const handleDesktopDrawerToggle = () => {
setDesktopOpen(!desktopOpen);
if (!desktopDrawerOpen) localStorage.setItem('desktopDrawerOpen', 'true');
else localStorage.removeItem('desktopDrawerOpen');
setDesktopDrawerOpen(!desktopDrawerOpen);
};
// Reload based on user preference ...
const userLocale = AppI18n.getUserLocale();
@ -115,7 +119,7 @@ const MapsPage = (): ReactElement => {
const handleMenuClick = (filter: Filter) => {
queryClient.invalidateQueries('maps');
setFilter(filter);
mobileOpen && setMobileOpen(false);
mobileDrawerOpen && setMobileDrawerOpen(false);
};
const handleLabelDelete = (id: number) => {
@ -227,8 +231,8 @@ const MapsPage = (): ReactElement => {
sx={{ p: 0, mr: 2, display: { xs: 'none', sm: 'inherit' } }}
id="open-desktop-drawer"
>
{!desktopOpen && <ArrowRight />}
{desktopOpen && <ArrowLeft />}
{!desktopDrawerOpen && <ArrowRight />}
{desktopDrawerOpen && <ArrowLeft />}
</IconButton>
<Tooltip
arrow={true}
@ -293,7 +297,7 @@ const MapsPage = (): ReactElement => {
<Drawer
container={container}
variant={'temporary'}
open={mobileOpen}
open={mobileDrawerOpen}
onClose={handleMobileDrawerToggle}
ModalProps={{
keepMounted: true,

10
packages/webapp/src/components/maps-page/maps-list/index.tsx
View File

@ -520,7 +520,9 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
<Box css={classes.cards}>
{isLoading ? (
<Card>
<CardContent>Loading ...</CardContent>
<CardContent>
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
</CardContent>
</Card>
) : mapsInfo.length == 0 ? (
<Card>
@ -578,7 +580,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
</Tooltip>
}
title={
<Typography sx={{ fontSize: 'large' }} noWrap color="text.secondary">
<Typography css={classes.cardTitle} noWrap color="text.secondary">
{row.title}
</Typography>
}
@ -628,7 +630,9 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={6}>Loading ...</TableCell>
<TableCell colSpan={6}>
<FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
</TableCell>
</TableRow>
) : mapsInfo.length == 0 ? (
<TableRow>

3
packages/webapp/src/components/maps-page/maps-list/styled.ts
View File

@ -128,5 +128,8 @@ export const useStyles = () => {
cardHeader: {
padding: '4px',
},
cardTitle: {
maxWidth: '70vw',
},
});
};