fix: SDA-2644 (Fix snippet window resize issue based on screen size) (#1115)

* fix: SDA-2644 - Fix snippet window resize issue based on screen size

* fix: SDA-2644 - Resolve conflicts and add new changes

* fix: SDA-2644 - fix background for min width

* fix: SDA-2644 - Limit snippet window size base on screen size

spec/__snapshots__/snippingTool.spec.ts.snap

@@ -57,27 +57,25 @@ exports[`Snipping Tool should render correctly 1`] = `
       </button>
     </div>
   </header>
-  <main
-    style={
-      Object {
-        "minHeight": 200,
-      }
-    }
-  >
-    <AnnotateArea
-      chosenTool="PEN"
-      highlightColor="rgba(0, 142, 255, 0.64)"
-      imageDimensions={
-        Object {
-          "height": 600,
-          "width": 800,
+  <main>
+    <div
+      className="imageContainer"
+    >
+      <AnnotateArea
+        chosenTool="PEN"
+        highlightColor="rgba(0, 142, 255, 0.64)"
+        imageDimensions={
+          Object {
+            "height": 600,
+            "width": 800,
+          }
         }
-      }
-      onChange={[Function]}
-      paths={Array []}
-      penColor="rgba(0, 142, 255, 1)"
-      screenSnippetPath="Screen-Snippet"
-    />
+        onChange={[Function]}
+        paths={Array []}
+        penColor="rgba(0, 142, 255, 1)"
+        screenSnippetPath="Screen-Snippet"
+      />
+    </div>
   </main>
   <footer>
     <button

spec/utils.spec.ts

@@ -1,4 +1,4 @@
-import { compareVersions, formatString, getCommandLineArgs, getGuid, throttle } from '../src/common/utils';
+import { compareVersions, formatString, getCommandLineArgs, getGuid, throttle, calculatePercentage } from '../src/common/utils';
 
 describe('utils', () => {
     describe('`compareVersions`', () => {
@@ -149,4 +149,14 @@ describe('utils', () => {
             expect(functionMock).toBeCalledTimes(2);
         });
     });
+
+    describe('calculatePercentage', () => {
+        it('should calculate the percentage correctly', () => {
+            expect(calculatePercentage(1440, 90)).toBe(1296);
+        });
+
+        it('should calculate the percentage correctly for 50', () => {
+            expect(calculatePercentage(500, 50)).toBe(250);
+        });
+    });
 });

src/app/window-handler.ts

@@ -23,7 +23,7 @@ import {
 } from '../common/env';
 import { i18n, LocaleType } from '../common/i18n';
 import { logger } from '../common/logger';
-import { getCommandLineArgs, getGuid } from '../common/utils';
+import { calculatePercentage, getCommandLineArgs, getGuid } from '../common/utils';
 import { notification } from '../renderer/notification';
 import { cleanAppCacheOnCrash } from './app-cache-handler';
 import { AppMenu } from './app-menu';
@@ -971,27 +971,40 @@ export class WindowHandler {
     }
 
     const parentWindow = BrowserWindow.getFocusedWindow();
-    const MIN_HEIGHT = 320;
-    const MIN_WIDTH = 312;
-    const CONTAINER_HEIGHT = 120;
+    const MIN_HEIGHT = 312;
+    const MIN_WIDTH = 320;
+    const CONTAINER_HEIGHT = 175;
+    const OS_PADDING = 25;
+    let height: number = dimensions?.height || 0;
+    let width: number = dimensions?.width || 0;
 
-    let windowHeight = dimensions?.height
-      ? dimensions.height + CONTAINER_HEIGHT
-      : 320;
-    let windowWidth = dimensions?.width || 312;
+    if (parentWindow) {
+      const { bounds: { height: sHeight, width: sWidth } } = electron.screen.getDisplayMatching(parentWindow.getBounds());
 
-    if (dimensions && dimensions.height && dimensions.height < MIN_HEIGHT) {
-      windowHeight = MIN_HEIGHT + CONTAINER_HEIGHT;
-    }
-
-    if (dimensions && dimensions.width && dimensions.width < MIN_WIDTH) {
-      windowWidth = MIN_WIDTH;
+      // This calculation is to make sure the
+      // snippet window does not cover the entire screen
+      const maxScreenHeight: number = calculatePercentage(sHeight, 90);
+      if (height > maxScreenHeight) {
+        height = maxScreenHeight;
+      }
+      const maxScreenWidth: number = calculatePercentage(sWidth, 90);
+      if (width > maxScreenWidth) {
+        width = maxScreenWidth;
+      }
+
+      // decrease image height when there is no space for the container window
+      if ((sHeight - height) < CONTAINER_HEIGHT) {
+        height -= CONTAINER_HEIGHT;
+      }
     }
+    const windowHeight = height + CONTAINER_HEIGHT - OS_PADDING;
 
     const opts: ICustomBrowserWindowConstructorOpts = this.getWindowOpts(
       {
-        width: windowWidth,
+        width,
         height: windowHeight,
+        minHeight: MIN_HEIGHT,
+        minWidth: MIN_WIDTH,
         modal: false,
         alwaysOnTop: false,
         resizable: false,
@@ -1021,8 +1034,8 @@ export class WindowHandler {
     this.snippingToolWindow.webContents.once('did-finish-load', async () => {
       const snippingToolInfo = {
         snipImage,
-        height: dimensions?.height,
-        width: dimensions?.width,
+        height,
+        width,
       };
       if (this.snippingToolWindow && windowExists(this.snippingToolWindow)) {
         this.snippingToolWindow.webContents.send(

src/common/utils.ts

@@ -235,3 +235,12 @@ export const formatString = (str: string, data?: object): string => {
     }
     return str;
 };
+
+/**
+ * Calculates the percentage of a number with the given percentage
+ * @param value
+ * @param percentage
+ */
+export const calculatePercentage = (value: number, percentage: number) => {
+    return value * percentage * 0.01;
+};

src/renderer/components/snipping-tool.tsx

@@ -38,7 +38,6 @@ export interface IImageDimensions {
   height: number;
 }
 
-const MIN_ANNOTATE_AREA_HEIGHT = 200;
 const availablePenColors: IColor[] = [
   { rgbaColor: 'rgba(0, 0, 40, 1)' },
   { rgbaColor: 'rgba(0, 142, 255, 1)' },
@@ -254,16 +253,18 @@ const SnippingTool = () => {
         )
       }
 
-      <main style={{ minHeight: MIN_ANNOTATE_AREA_HEIGHT }}>
-        <AnnotateArea
-          paths={paths}
-          highlightColor={highlightColor}
-          penColor={penColor}
-          onChange={setPaths}
-          imageDimensions={imageDimensions}
-          screenSnippetPath={screenSnippetPath}
-          chosenTool={chosenTool}
-        />
+      <main>
+        <div className='imageContainer'>
+          <AnnotateArea
+            paths={paths}
+            highlightColor={highlightColor}
+            penColor={penColor}
+            onChange={setPaths}
+            imageDimensions={imageDimensions}
+            screenSnippetPath={screenSnippetPath}
+            chosenTool={chosenTool}
+          />
+        </div>
       </main>
       <footer>
         <button

src/renderer/styles/snipping-tool.less

@@ -44,6 +44,7 @@ button {
   display: flex;
   flex-direction: column;
   font-family: @font-family;
+  height: 100vh;
 
   header {
     display: flex;
@@ -51,7 +52,7 @@ button {
     justify-content: center;
     text-align: center;
     align-items: center;
-    height: 48px;
+    padding: 12px;
 
     .ActionButton {
       width: 24px;
@@ -114,19 +115,18 @@ button {
     justify-content: center;
     text-align: center;
     margin: 0;
+    height: 100vh;
+    width: 100%;
     background: linear-gradient(
         0deg,
         rgba(255, 255, 255, 0.96),
         rgba(255, 255, 255, 0.96)
       ),
       #525760;
-      height: 100%;
-      width: 100%;
 
-      .SnippetImage {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
+    .imageContainer {
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -134,7 +134,8 @@ button {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    height: 72px;
+    padding-top: 16px;
+    padding-bottom: 24px;
 
     .DoneButton {
       box-shadow: none;