Minor style improvement.

2025-06-11 18:43:22 +02:00 · 2023-01-05 18:49:20 -08:00
parent fa33a12442
commit c06555bb48
20 changed files with 80 additions and 62 deletions
--- a/packages/editor/src/classes/default-widget-manager/index.ts
+++ b/packages/editor/src/classes/default-widget-manager/index.ts
@ -44,7 +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';
+    this.editorTitle = 'editor-panel.link-panel-title';
    topic.closeEditors();
  }

@ -75,7 +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';
+    this.editorTitle = 'editor-panel.note-panel-title';
    topic.closeEditors();
  }

--- a/packages/editor/src/classes/model/node-property-builder/index.ts
+++ b/packages/editor/src/classes/model/node-property-builder/index.ts
@ -129,7 +129,7 @@ class NodePropertyBuilder {
   *
   * @returns model to get and set topic font color
   */
-  getFontColorModel(): NodeProperty<string> {
+  getFontColorModel(): NodeProperty<string | undefined> {
    if (!this.fontColorModel)
      this.fontColorModel = {
        getValue: () => this.uniqueOrNull((node) => node.getFontColor()),
--- a/packages/editor/src/compiled-lang/de.json
+++ b/packages/editor/src/compiled-lang/de.json
@ -323,7 +323,7 @@
      "value": "Ingültige Adresse"
    }
  ],
-  "link.label": [
+  "editor-panel.link-panel-title": [
    {
      "type": 0,
      "value": "Link"
@ -341,7 +341,7 @@
      "value": "Anmeldung"
    }
  ],
-  "note.label": [
+  "editor-panel.note-panel-title": [
    {
      "type": 0,
      "value": "Notiz"
--- a/packages/editor/src/compiled-lang/en.json
+++ b/packages/editor/src/compiled-lang/en.json
@ -317,7 +317,7 @@
      "value": "Address is not valid"
    }
  ],
-  "link.label": [
+  "editor-panel.link-panel-title": [
    {
      "type": 0,
      "value": "Link"
@ -329,7 +329,7 @@
      "value": "https://www.example.com"
    }
  ],
-  "note.label": [
+  "editor-panel.note-panel-title": [
    {
      "type": 0,
      "value": "Note"
--- a/packages/editor/src/compiled-lang/es.json
+++ b/packages/editor/src/compiled-lang/es.json
@ -317,7 +317,7 @@
      "value": "Dirección invalida"
    }
  ],
-  "link.label": [
+  "editor-panel.link-panel-title": [
    {
      "type": 0,
      "value": "Enlace"
@ -329,7 +329,7 @@
      "value": "https://www.example.com"
    }
  ],
-  "note.label": [
+  "editor-panel.note-panel-title": [
    {
      "type": 0,
      "value": "Nota"
--- a/packages/editor/src/compiled-lang/fr.json
+++ b/packages/editor/src/compiled-lang/fr.json
@ -317,7 +317,7 @@
      "value": "Adresse invalide"
    }
  ],
-  "link.label": [
+  "editor-panel.link-panel-title": [
    {
      "type": 0,
      "value": "Lien"
@ -329,7 +329,7 @@
      "value": "https://www.example.com"
    }
  ],
-  "note.label": [
+  "editor-panel.note-panel-title": [
    {
      "type": 0,
      "value": "Note"
--- a/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
@ -24,6 +24,7 @@ import Switch from '@mui/material/Switch';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { FormattedMessage } from 'react-intl';
+import Box from '@mui/material/Box';

 type IconPickerProp = {
  triggerClose: () => void;
@ -52,8 +53,8 @@ const IconPicker = ({ triggerClose, iconModel }: IconPickerProp): ReactElement =
  };

  return (
-    <div style={{ padding: '5px' }}>
-      <FormGroup>
+    <Box style={{ padding: '5px' }}>
+      <FormGroup sx={{ align: 'center' }}>
        <FormControlLabel
          label={<FormattedMessage id="icon-picker.show-images" defaultMessage="Show images" />}
          control={<Switch onChange={handleCheck} />}
@ -70,7 +71,7 @@ const IconPicker = ({ triggerClose, iconModel }: IconPickerProp): ReactElement =
      )}

      {!checked && <IconImageTab iconModel={iconModel} triggerClose={triggerClose} />}
-    </div>
+    </Box>
  );
 };
 export default IconPicker;
--- a/packages/editor/src/components/action-widget/pane/topic-link/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/topic-link/index.tsx
@ -59,10 +59,12 @@ const TopicLink = (props: {
  const isValidUrl = !url || checkURL(url);

  return (
-    <Box sx={{ p: 1 }}>
+    <Box sx={{ px: 2, pb: 2, width: '300px' }}>
      <Input
        autoFocus
        error={!isValidUrl}
+        fullWidth
+        margin="dense"
        helperText={
          isValidUrl
            ? ''
@ -88,7 +90,6 @@ const TopicLink = (props: {
            </Link>
          ),
        }}
-        margin="dense"
      />
      <br />
      <SaveAndDelete
--- a/packages/editor/src/components/action-widget/pane/topic-note/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/topic-note/index.tsx
@ -20,8 +20,6 @@ import React, { ReactElement, useState } from 'react';
 import NodeProperty from '../../../../classes/model/node-property';
 import Input from '../../input';
 import SaveAndDelete from '../save-and-delete';
-import { useIntl } from 'react-intl';
-
 /**
 * Note form for toolbar and node contextual editor
 */
@ -30,19 +28,16 @@ const TopicNote = (props: {
  noteModel: NodeProperty<string> | null;
 }): ReactElement => {
  const [note, setNote] = useState(props.noteModel.getValue());
-  const intl = useIntl();
-
  const submitHandler = () => {
    props.closeModal();
    props.noteModel.setValue(note);
  };

  return (
-    <Box sx={{ p: 2, width: '300px' }}>
+    <Box sx={{ px: 2, pb: 2, width: '300px' }}>
      <Input
        autoFocus
        multiline
-        label={intl.formatMessage({ id: 'note.label', defaultMessage: 'Note' })}
        variant="outlined"
        fullWidth
        rows={12}
--- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx
+++ b/packages/editor/src/components/editor-toolbar/configBuilder.tsx
@ -251,7 +251,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
   * submenu to manipulate node font
   */
  const fontFormatToolbarConfiguration: ActionConfig = {
-    icon: <FontDownloadOutlinedIcon></FontDownloadOutlinedIcon>,
+    icon: <FontDownloadOutlinedIcon />,
    tooltip: intl.formatMessage({
      id: 'editor-panel.tooltip-topic-font-style',
      defaultMessage: 'Font Style',
@ -262,7 +262,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
      },
      null,
      {
-        icon: <TextIncreaseOutlinedIcon></TextIncreaseOutlinedIcon>,
+        icon: <TextIncreaseOutlinedIcon />,
        tooltip: intl.formatMessage({
          id: 'editor-panel.tooltip-topic-font-bigger',
          defaultMessage: 'Bigger',
@ -270,7 +270,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
        onClick: () => modelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up),
      },
      {
-        icon: <TextDecreaseOutlinedIcon></TextDecreaseOutlinedIcon>,
+        icon: <TextDecreaseOutlinedIcon />,
        tooltip: intl.formatMessage({
          id: 'editor-panel.tooltip-topic-font-smaller',
          defaultMessage: 'Smaller',
@ -279,7 +279,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
      },
      null,
      {
-        icon: <FormatBoldOutlinedIcon></FormatBoldOutlinedIcon>,
+        icon: <FormatBoldOutlinedIcon />,
        tooltip: keyTooltip(
          intl.formatMessage({
            id: 'editor-panel.tooltip-topic-font-bold',
@ -322,6 +322,15 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
          },
        ],
      },
+      {
+        icon: <ClearOutlined />,
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-font-color-default',
+          defaultMessage: 'Default color',
+        }),
+        onClick: () => modelBuilder.getFontColorModel().setValue(undefined),
+        selected: () => modelBuilder.getFontColorModel().getValue() === undefined,
+      },
    ],
    disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0,
  };
@ -330,7 +339,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
   * button to show relation pivot
   */
  const addRelationConfiguration: ActionConfig = {
-    icon: <SettingsEthernetIcon></SettingsEthernetIcon>,
+    icon: <SettingsEthernetIcon />,
    tooltip: intl.formatMessage({
      id: 'editor-panel.tooltip-add-relationship',
      defaultMessage: 'Add Relationship',
@ -351,7 +360,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
      'L',
    ),
    useClickToClose: true,
-    title: intl.formatMessage({ id: 'link.label', defaultMessage: 'Link' }),
+    title: intl.formatMessage({ id: 'editor-panel.link-panel-title', defaultMessage: 'Link' }),
    options: [
      {
        render: (closeModal) => (
@ -372,10 +381,13 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
      'K',
    ),
    useClickToClose: true,
-    title: intl.formatMessage({ id: 'note.label', defaultMessage: 'Note' }),
+    title: intl.formatMessage({ id: 'editor-panel.note-panel-title', defaultMessage: 'Note' }),
    options: [
      {
-        tooltip: 'Node note',
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.note-panel-title',
+          defaultMessage: 'Note',
+        }),
        render: (closeModal) => (
          <TopicNote closeModal={closeModal} noteModel={modelBuilder.getNoteModel()} />
        ),
--- a/packages/editor/src/components/toolbar/index.tsx
+++ b/packages/editor/src/components/toolbar/index.tsx
@ -133,11 +133,24 @@ export const ToolbarSubmenu = (props: {
      >
        {props.configuration.useClickToClose && (
          <Box textAlign={'right'} ml={1}>
-            <Typography variant="body1" style={{ paddingTop: '10px', float: 'left' }}>
+            <Typography
+              variant="body1"
+              style={{
+                paddingTop: '15px',
+                paddingLeft: '5px',
+                float: 'left',
+                fontWeight: 'bold',
+                fontSize: '20px',
+              }}
+            >
              {props.configuration.title}
            </Typography>
-            <IconButton onClick={() => setOpen(false)} aria-label={'Close'}>
-              <CloseIcon />
+            <IconButton
+              onClick={() => setOpen(false)}
+              aria-label={'Close'}
+              sx={{ marginTop: '10px', marginRight: '5px' }}
+            >
+              <CloseIcon aria-label={'Close'} />
            </IconButton>
          </Box>
        )}