Merge branch 'main' into SDA-3346

2025-02-25 18:55:29 -06:00 · 2021-09-29 16:00:24 +02:00
parent 9adec0ffda eb8833109d
commit 968ce8ba62
7 changed files with 131 additions and 115 deletions
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -2,6 +2,17 @@

 ---

+## SDA 14.0.x
+
+### 14.0.0
+
+-
+
+- 14.0.1 (Electron-version)
+- 93 (Chromium-version)
+
+---
+
 ## SDA 9.3.x

 ### 9.3.0
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "symphony",
  "productName": "Symphony",
-  "version": "9.3.0",
+  "version": "14.0.0",
  "clientVersion": "2.0.1",
  "buildNumber": "0",
  "searchAPIVersion": "1.55.3",
--- a/spec/snapshots/colorPickerPill.spec.tsx.snap
+++ b/spec/snapshots/colorPickerPill.spec.tsx.snap
@@ -2,16 +2,17 @@

 exports[`<ColorPickerPill/> should render chosen dots as larger 1`] = `
 <div
-  className="ColorPicker"
+  className="color-picker"
 >
-  <div
-    className="EnclosingCircle"
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(0, 0, 0, 0.64)"
    key="rgba(0, 0, 0, 0.64)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(0, 0, 0, 0.64)",
@@ -22,15 +23,16 @@ exports[`<ColorPickerPill/> should render chosen dots as larger 1`] = `
        }
      }
    />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(233, 0, 0, 0.64)"
    key="rgba(233, 0, 0, 0.64)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(233, 0, 0, 0.64)",
@@ -41,22 +43,23 @@ exports[`<ColorPickerPill/> should render chosen dots as larger 1`] = `
        }
      }
    />
-  </div>
+  </button>
 </div>
 `;

 exports[`<ColorPickerPill/> should render correctly 1`] = `
 <div
-  className="ColorPicker"
+  className="color-picker"
 >
-  <div
-    className="EnclosingCircle"
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(0, 142, 255, 0.64)"
    key="rgba(0, 142, 255, 0.64)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(0, 142, 255, 0.64)",
@@ -67,15 +70,16 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
        }
      }
    />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(38, 196, 58, 0.64)"
    key="rgba(38, 196, 58, 0.64)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(38, 196, 58, 0.64)",
@@ -86,15 +90,16 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
        }
      }
    />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(246, 178, 2, 0.64)"
    key="rgba(246, 178, 2, 0.64)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(246, 178, 2, 0.64)",
@@ -105,15 +110,16 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
        }
      }
    />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(233, 0, 0, 0.64)"
    key="rgba(233, 0, 0, 0.64)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(233, 0, 0, 0.64)",
@@ -124,22 +130,23 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
        }
      }
    />
-  </div>
+  </button>
 </div>
 `;

 exports[`<ColorPickerPill/> should render outlined dot if provided in props 1`] = `
 <div
-  className="ColorPicker"
+  className="color-picker"
 >
-  <div
-    className="EnclosingCircle"
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(246, 178, 2, 1)"
    key="rgba(246, 178, 2, 1)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(246, 178, 2, 1)",
@@ -150,15 +157,16 @@ exports[`<ColorPickerPill/> should render outlined dot if provided in props 1`]
        }
      }
    />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
    data-testid="colorDot rgba(255, 255, 255, 1)"
    key="rgba(255, 255, 255, 1)"
    onClick={[Function]}
+    tabIndex={0}
  >
    <div
-      className="ColorDot"
+      className="color-dot"
      style={
        Object {
          "background": "rgba(255, 255, 255, 1)",
@@ -169,6 +177,6 @@ exports[`<ColorPickerPill/> should render outlined dot if provided in props 1`]
        }
      }
    />
-  </div>
+  </button>
 </div>
 `;
--- a/spec/snapshots/snippingTool.spec.tsx.snap
+++ b/spec/snapshots/snippingTool.spec.tsx.snap
@@ -2,15 +2,15 @@

 exports[`Snipping Tool should render correctly 1`] = `
 <div
-  className="SnippingTool"
+  className="snipping-tool"
  lang="en-US"
 >
  <header>
    <div
-      className="DrawActions"
+      className="draw-actions"
    >
      <button
-        className="ActionButton"
+        className="action-button"
        data-testid="pen-button"
        onClick={[Function]}
        style={
@@ -25,7 +25,7 @@ exports[`Snipping Tool should render correctly 1`] = `
        />
      </button>
      <button
-        className="ActionButton"
+        className="action-button"
        data-testid="highlight-button"
        onClick={[Function]}
        title="Highlight"
@@ -35,7 +35,7 @@ exports[`Snipping Tool should render correctly 1`] = `
        />
      </button>
      <button
-        className="ActionButton"
+        className="action-button"
        data-testid="erase-button"
        onClick={[Function]}
        title="Erase"
@@ -46,10 +46,10 @@ exports[`Snipping Tool should render correctly 1`] = `
      </button>
    </div>
    <div
-      className="ClearActions"
+      className="clear-actions"
    >
      <button
-        className="ClearButton"
+        className="clear-button"
        data-testid="clear-button"
        onClick={[Function]}
      >
@@ -59,7 +59,7 @@ exports[`Snipping Tool should render correctly 1`] = `
  </header>
  <main>
    <div
-      className="imageContainer"
+      className="image-container"
    >
      <AnnotateArea
        annotateAreaDimensions={
@@ -71,7 +71,7 @@ exports[`Snipping Tool should render correctly 1`] = `
        backgroundImagePath=""
        chosenTool="PEN"
        data-testid="annotate-component"
-        highlightColor="rgba(0, 142, 255, 0.64)"
+        highlightColor="rgba(0,  142,  255, 0.3"
        imageDimensions={
          Object {
            "height": 600,
@@ -86,7 +86,7 @@ exports[`Snipping Tool should render correctly 1`] = `
  </main>
  <footer>
    <button
-      className="DoneButton"
+      className="done-button"
      data-testid="done-button"
      onClick={[Function]}
    >
--- a/src/renderer/components/color-picker-pill.tsx
+++ b/src/renderer/components/color-picker-pill.tsx
@@ -36,9 +36,10 @@ const ColorPickerPill = (props: IColorPickerPillProps) => {
    };

    return (
-      <div
+      <button
+        tabIndex={0}
        key={color.rgbaColor}
-        className='EnclosingCircle'
+        className='enclosing-circle'
        onClick={chooseColor}
        data-testid={'colorDot ' + color.rgbaColor}
      >
@@ -50,14 +51,14 @@ const ColorPickerPill = (props: IColorPickerPillProps) => {
            cursor: 'pointer',
            border: hasOutline ? border : undefined,
          }}
-          className='ColorDot'
+          className='color-dot'
        />
-      </div>
+      </button>
    );
  };

  return (
-    <div className='ColorPicker'>
+    <div className='color-picker'>
      {props.availableColors.map((color) => ColorDot(color))}
    </div>
  );
--- a/src/renderer/components/snipping-tool.tsx
+++ b/src/renderer/components/snipping-tool.tsx
@@ -44,6 +44,7 @@ const availablePenColors: IColor[] = [
  { rgbaColor: 'rgba(0, 142, 255, 1)' },
  { rgbaColor: 'rgba(38, 196, 58, 1)' },
  { rgbaColor: 'rgba(246, 178, 2, 1)' },
+  { rgbaColor: 'rgba(233, 0, 0, 1)' },
  { rgbaColor: 'rgba(255, 255, 255, 1)', outline: 'rgba(207, 208, 210, 1)' },
 ];
 const availableHighlightColors: IColor[] = [
@@ -236,14 +237,32 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
    ipcRenderer.send('upload-snippet', { screenSnippetPath, mergedImageData });
  };

+  // Removes focus styling from buttons when mouse is clicked
+  document.body.addEventListener('mousedown', () => {
+    document.body.classList.add('using-mouse');
+  });
+
+  // Re-enable focus styling when Tab is pressed
+  document.body.addEventListener('keydown', (event) => {
+    if (event.key === 'Tab') {
+      document.body.classList.remove('using-mouse');
+    }
+  });
+
+  const getLoweredAlphaColor = (rgbaColor: string) => {
+    const rgba = rgbaColor.split(',');
+    rgba[3] = '0.3'; // Set alpha to 0.3 since with 0.64 it's hard to see what is highlighted, but we want 0.64 for the buttons
+    return rgba.join(', ');
+  };
+
  return (
-    <div className='SnippingTool' lang={i18n.getLocale()}>
+    <div className='snipping-tool' lang={i18n.getLocale()}>
      <header>
-        <div className='DrawActions'>
+        <div className='draw-actions'>
          <button
            data-testid='pen-button'
            style={getBorderStyle(Tool.pen)}
-            className='ActionButton'
+            className='action-button'
            onClick={usePen}
            title={i18n.t('Pen', SNIPPING_TOOL_NAMESPACE)()}
          >
@@ -252,7 +271,7 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
          <button
            data-testid='highlight-button'
            style={getBorderStyle(Tool.highlight)}
-            className='ActionButton'
+            className='action-button'
            onClick={useHighlight}
            title={i18n.t('Highlight', SNIPPING_TOOL_NAMESPACE)()}
          >
@@ -261,17 +280,17 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
          <button
            data-testid='erase-button'
            style={getBorderStyle(Tool.eraser)}
-            className='ActionButton'
+            className='action-button'
            onClick={useEraser}
            title={i18n.t('Erase', SNIPPING_TOOL_NAMESPACE)()}
          >
            <img src='../renderer/assets/snip-erase.svg' />
          </button>
        </div>
-        <div className='ClearActions'>
+        <div className='clear-actions'>
          <button
            data-testid='clear-button'
-            className='ClearButton'
+            className='clear-button'
            onClick={clear}
          >
            {i18n.t('Clear', SNIPPING_TOOL_NAMESPACE)()}
@@ -315,11 +334,11 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
      )}

      <main>
-        <div className='imageContainer'>
+        <div className='image-container'>
          <AnnotateArea
            data-testid='annotate-component'
            paths={paths}
-            highlightColor={highlightColor.rgbaColor}
+            highlightColor={getLoweredAlphaColor(highlightColor.rgbaColor)}
            penColor={penColor.rgbaColor}
            onChange={setPaths}
            imageDimensions={imageDimensions}
@@ -330,7 +349,11 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({
        </div>
      </main>
      <footer>
-        <button data-testid='done-button' className='DoneButton' onClick={done}>
+        <button
+          data-testid='done-button'
+          className='done-button'
+          onClick={done}
+        >
          {i18n.t('Done', SNIPPING_TOOL_NAMESPACE)()}
        </button>
      </footer>
--- a/src/renderer/styles/snipping-tool.less
+++ b/src/renderer/styles/snipping-tool.less
@@ -1,9 +1,5 @@
@import 'theme';

-@white: rgb(255, 255, 255, 1);
-@version-text-color: rgb(47, 47, 47, 1);
-@text-padding: 10px;
-
 body {
  overflow: hidden;
  background-color: white;
@@ -15,33 +11,35 @@ body {
 button {
  user-select: none;
  &:focus {
-    user-select: none;
-    outline: none;
+    outline: 2px solid #008eff;
  }
 }

-.SnippingTool:lang(ja-JP) {
+body.using-mouse :focus {
+  outline: none;
+}
+
+.snipping-tool:lang(ja-JP) {
  font-family: @font-family-ja;

  h4 {
    margin: 3px 0;
  }

-  .SnippingTool-symphony-section {
+  .snipping-tool-symphony-section {
    padding-left: 10px;
  }
 }

-.SnippingTool:lang(fr-FR) {
-  .SnippingTool-symphony-section {
+.snipping-tool:lang(fr-FR) {
+  .snipping-tool-symphony-section {
    padding-left: 10px;
  }
 }

-.SnippingTool {
+.snipping-tool {
  display: flex;
  flex-direction: column;
-  font-family: @font-family;
  height: 100vh;

  header {
@@ -52,16 +50,13 @@ button {
    align-items: center;
    padding: 12px;

-    .ActionButton {
+    .action-button {
      width: 24px;
      height: 24px;
      margin-left: 15px;
      background: white;
      border-radius: 4px;
      cursor: pointer;
-      padding: 4px 0;
-      border: none;
-      box-sizing: border-box;
      border-radius: 4px;
      display: flex;
      justify-content: center;
@@ -73,29 +68,27 @@ button {
      }
    }

-    .ClearButton {
-      display: block;
+    .clear-button {
      border: 2px solid #7c7f86;
      border-radius: 16px;
+      background: white;
      color: #7c7f86;
      font-weight: 600;
      font-size: 12px;
-      line-height: 16px;
      text-transform: uppercase;
      cursor: pointer;
-      background-color: #ffffff;
      height: 24px;
      width: 68px;
    }

-    .DrawActions {
+    .draw-actions {
      display: flex;
      flex-direction: row;
      justify-content: center;
      text-align: center;
    }

-    .ClearActions {
+    .clear-actions {
      display: flex;
      flex: none;
      flex-direction: row;
@@ -117,14 +110,8 @@ button {
    width: 100%;
    display: flex;
    justify-content: center;
-    background: linear-gradient(
-        0deg,
-        rgba(255, 255, 255, 0.96),
-        rgba(255, 255, 255, 0.96)
-      ),
-      #525760;

-    .imageContainer {
+    .image-container {
      display: flex;
      align-items: center;
    }
@@ -137,32 +124,23 @@ button {
    padding-top: 16px;
    padding-bottom: 24px;

-    .DoneButton {
-      box-shadow: none;
+    .done-button {
      border: none;
      border-radius: 16px;
      font-size: 0.75rem;
      font-weight: 600;
-      text-align: center;
-      display: inline-block;
-      text-decoration: none;
-      line-height: 16px;
      background-color: #008eff;
-      color: rgba(255, 255, 255, 0.96);
+      color: white;
      cursor: pointer;
      text-transform: uppercase;
      margin-right: 32px;
      height: 32px;
      width: 80px;
-
-      &:focus {
-        box-shadow: 0 0 10px rgba(61, 162, 253, 1);
-      }
    }
  }
 }

-.ColorPicker {
+.color-picker {
  display: flex;
  flex-direction: row;
  margin: 4px;
@@ -170,19 +148,17 @@ button {
  justify-content: center;
  width: fit-content;
  height: 40px;
-  background: #FFFFFF;
-  box-shadow: 0px 4px 16px rgba(15, 27, 36, 0.14), 0px 4px 8px rgba(15, 27, 36, 0.26);
+  background: #ffffff;
+  box-shadow: 0px 4px 16px rgba(15, 27, 36, 0.14),
+    0px 4px 8px rgba(15, 27, 36, 0.26);
  border-radius: 24px;
-  }
+}

-.EnclosingCircle {
+.enclosing-circle {
  width: 24px;
  height: 24px;
-  background: #FFFFFF;
-  border-radius: 50%;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
+  background: #ffffff;
+  border: none;
  margin: 8px;
  cursor: pointer;
  align-items: center;
@@ -190,12 +166,9 @@ button {
  display: flex;
 }

-.ColorDot {
+.color-dot {
  border-radius: 50%;
  flex: none;
-  order: 0;
-  flex-grow: 0;
  width: 8px;
  height: 8px;
-  background: #000028;
 }