cloud icons WIP

packages/web/src/utility/simpleTools.ts

@@ -1,11 +1,40 @@
 import getElectron from './getElectron';
 
-export function openWebLink(href) {
+export function openWebLink(href, usePopup = false) {
   const electron = getElectron();
 
   if (electron) {
     electron.send('open-link', href);
   } else {
-    window.open(href, '_blank');
+    if (usePopup) {
+      const w = 500;
+      const h = 650;
+
+      const dualScreenLeft = window.screenLeft ?? window.screenX; // X of parent
+      const dualScreenTop = window.screenTop ?? window.screenY; // Y of parent
+
+      // 2. How big is the parent window?
+      const parentWidth = window.outerWidth;
+      const parentHeight = window.outerHeight;
+
+      // 3. Centre the popup inside that rectangle
+      const left = dualScreenLeft + (parentWidth - w) / 2;
+      const top = dualScreenTop + (parentHeight - h) / 2;
+
+      const features = [
+        `width=${w}`,
+        `height=${h}`,
+        `left=${left}`,
+        `top=${top}`,
+        'scrollbars=yes',
+        'resizable=yes',
+        'noopener',
+        'noreferrer',
+      ];
+
+      window.open(href, 'dbgateCloudLoginPopup', features.join(','));
+    } else {
+      window.open(href, '_blank');
+    }
   }
 }

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -131,7 +131,7 @@
 
   async function handleOpenCloudLogin() {
     const { url, sid } = await apiCall('auth/create-cloud-login-session', { client: getElectron() ? 'app' : 'web' });
-    openWebLink(url);
+    openWebLink(url, true);
   }
 </script>