Message dialog (#1089)

source/browser.js

@@ -61,7 +61,7 @@ host.BrowserHost = class {
                 this.document.body.classList.remove('spinner');
                 for (;;) {
                     /* eslint-disable no-await-in-loop */
-                    await this.message('Please update to the newest version.', 'Update');
+                    await this.message('Please update to the newest version.', null, 'Update');
                     /* eslint-enable no-await-in-loop */
                     this.openURL(link);
                 }
@@ -85,7 +85,7 @@ host.BrowserHost = class {
             }
             if (consent) {
                 this.document.body.classList.remove('spinner');
-                await this.message('This app uses cookies to report errors and anonymous usage information.', 'Accept');
+                await this.message('This app uses cookies to report errors and anonymous usage information.', null, 'Accept');
             }
             this._setCookie('consent', Date.now().toString(), 30);
         };
@@ -220,9 +220,11 @@ host.BrowserHost = class {
         return this._environment[name];
     }
 
-    async error(message, detail /*, cancel */) {
-        alert((message === 'Error' ? '' : `${message} `) + detail);
+    async error(message /*, name , cancel */) {
+        alert(message);
         return 0;
+        // await this.message(message, true, 'OK');
+        // return 1;
     }
 
     async require(id) {
@@ -552,7 +554,7 @@ host.BrowserHost = class {
         return this.document.getElementById(id);
     }
 
-    message(message, action) {
+    async message(message, alert, action) {
         return new Promise((resolve) => {
             const type = this.document.body.getAttribute('class');
             this._element('message-text').innerText = message;
@@ -570,9 +572,15 @@ host.BrowserHost = class {
                 button.style.display = 'none';
                 button.onclick = null;
             }
-            this.document.body.classList.add('welcome');
-            this.document.body.classList.add('message');
-            this.document.body.classList.remove('default');
+            if (alert) {
+                this.document.body.setAttribute('alert');
+            } else {
+                this.document.body.classList.add('notification');
+                this.document.body.classList.remove('default');
+            }
+            if (action) {
+                button.focus();
+            }
         });
     }
 };

source/electron.mjs

@@ -72,7 +72,7 @@ host.ElectronHost = class {
                 const link = this._element('logo-github').href;
                 for (;;) {
                     /* eslint-disable no-await-in-loop */
-                    await this.message('Please update to the newest version.', 'Download');
+                    await this.message('Please update to the newest version.', null, 'Download');
                     /* eslint-enable no-await-in-loop */
                     this.openURL(link);
                 }
@@ -95,7 +95,7 @@ host.ElectronHost = class {
                 }
                 if (consent) {
                     this.document.body.classList.remove('spinner');
-                    await this.message('This app uses cookies to report errors and anonymous usage information.', 'Accept');
+                    await this.message('This app uses cookies to report errors and anonymous usage information.', null, 'Accept');
                 }
                 this.set('consent', Date.now());
             }
@@ -237,15 +237,16 @@ host.ElectronHost = class {
         return this._environment[name];
     }
 
-    async error(message, detail, cancel) {
+    async error(message, name, cancel) {
         const options = {
             type: 'error',
-            message,
-            detail,
+            detail: message,
+            message: name,
             buttons: cancel ? ['Report', 'Cancel'] : ['Report']
         };
         return electron.ipcRenderer.sendSync('show-message-box', options);
-        // return await this.message(message + ': ' + detail, 'Report');
+        // await this.message(message, true, 'OK');
+        // return 0;
     }
 
     async require(id) {
@@ -538,7 +539,7 @@ host.ElectronHost = class {
         electron.ipcRenderer.send('window-update', data);
     }
 
-    message(message, action) {
+    async message(message, alert, action) {
         return new Promise((resolve) => {
             const type = this.document.body.getAttribute('class');
             this._element('message-text').innerText = message;
@@ -551,14 +552,19 @@ host.ElectronHost = class {
                     this.document.body.setAttribute('class', type);
                     resolve(0);
                 };
-                button.focus();
             } else {
                 button.style.display = 'none';
                 button.onclick = null;
             }
-            this.document.body.classList.add('welcome');
-            this.document.body.classList.add('message');
-            this.document.body.classList.remove('default');
+            if (alert) {
+                this.document.body.setAttribute('class', 'alert');
+            } else {
+                this.document.body.classList.add('notification');
+                this.document.body.classList.remove('default');
+            }
+            if (action) {
+                button.focus();
+            }
         });
     }
 };

source/grapher.js

@@ -232,14 +232,14 @@ grapher.Graph = class {
                     update(message.nodes, message.edges);
                     if (timeout >= 0) {
                         clearTimeout(timeout);
-                        host.message('');
+                        host.message();
                     }
                     resolve('');
                 });
                 const message = { type: 'dagre.layout', nodes, edges, layout };
                 worker.postMessage(message);
                 timeout = setTimeout(async () => {
-                    await host.message('This large graph layout might take a very long time to complete.', 'Cancel');
+                    await host.message('This large graph layout might take a very long time to complete.', null, 'Cancel');
                     worker.terminate();
                     resolve('graph-layout-cancelled');
                 }, 2500);

source/index.html

@@ -40,8 +40,21 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
 .toolbar-icon .border { stroke: #fff; }
 .toolbar-icon .stroke { stroke: #808080; }
 .toolbar-icon:hover .stroke { stroke: #000000; }
+.notification body { background-color: #ececec; }
 .welcome body { background-color: #ececec; }
 .welcome { background-color: #ececec; color: #242424; }
+.welcome .message-name { display: none; opacity: 0; }
+.welcome .message-text { display: none; opacity: 0; }
+.welcome .message-button { display: none; opacity: 0; }
+.notification .message-name { display: inline-flex; opacity: 1; }
+.notification .message-text { display: inline-flex; opacity: 1; }
+.notification .message-button { display: block; opacity: 1; }
+.message { display: none; opacity: 0; }
+.notification .message { display: block; opacity: 1; }
+.alert .message { display: block; opacity: 1; background-color: #ececec; color: #242424; }
+.alert .message-name { display: block; opacity: 1; top: -100px; }
+.alert .message-text { display: block; opacity: 1; top: -50px; width: 50%; }
+.alert .message-button { display: block; opacity: 1; top: 100px }
 .logo-text { top: -57px; width: 582px; transition: 0.1s; }
 .logo-name { top: -170px; width: 582px; transition: 0.1s; }
 .logo-icon { left: 248px; top: -18px; width: 106px; height: 106px; transition: 0.1s; }
@@ -58,18 +71,20 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
 .open-file-button { top: 170px; left: 0px; width: 10.5em; }
 .progress { top: 120px; height: 2px; width: 400px; }
 .progress-bar { height: 100%; width: 0%; background-color: #444444; }
-.message-dialog { display: none; color: #444444; }
-.message-button { top: 224px; left: 0px; width: 125px; }
+#dialog { display: none; color: #444444; }
+.message-name { display: inline-flex; align-items: center; justify-content: center; text-align: center; top: 0px; height: 0px; font-size: 13px; font-weight: bold; line-height: 20px; }
 .message-text { display: inline-flex; align-items: center; justify-content: center; text-align: center; top: 132px; height: 0px; font-size: 13px; line-height: 20px; }
-.message .message-dialog { display: block; }
-.message .logo-name { display:none; }
-.message .open-file-button { display:none; }
-.message .progress { display:none; }
+.message-button { top: 224px; left: 0px; width: 125px; }
+.notification .logo-name { display:none; }
+.notification .open-file-button { display:none; }
+.notification .progress { display:none; }
 .welcome .graph { display: none; opacity: 0; }
 .welcome .menu { background-color: #ffffff; }
 .welcome.spinner .logo-spinner { display: block; -webkit-animation: orbit 0.5s infinite linear; animation: orbit 0.5s infinite linear; cursor: wait; }
 .welcome.spinner .menu-button { display: none; }
-.welcome.message .menu-button { display: none; }
+.welcome.notification .menu-button { display: none; }
+.alert .graph { display: none; opacity: 0; }
+.alert .logo-name { display: none; opacity: 0; }
 .about { overflow: hidden; }
 .about .toolbar { display: none; }
 .about .logo { display: block; background-color: #ececec; color: #666666; }
@@ -80,7 +95,7 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
 .about a:hover { color: #242424; }
 .about .open-file-button { display: none; }
 .about .logo-name { display: none; }
-.about .message { display: none; }
+.about .notification { display: none; }
 .about .progress { display: none; }
 .about .menu-button { display: none; }
 .titlebar { color: #aaaaaa; display: none; height: 32px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; -webkit-app-region: drag; }
@@ -113,14 +128,15 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
 .welcome.spinner .logo-name { display: none; }
 .welcome.spinner .open-file-button { display: none; }
 .welcome.spinner .graph { display: flex; opacity: 0; }
-.welcome .message .logo-name { display: none; }
-.welcome .message .open-file-button { display: none; }
+.welcome .notification .logo-name { display: none; }
+.welcome .notification .open-file-button { display: none; }
 .welcome .toolbar { display: none; }
 @media (prefers-color-scheme: dark) {
 :root { color-scheme: dark; }
 .default { background-color: #404040; }
 .graph { background-color: #404040; }
 .welcome { background-color: #1e1e1e; color: #888888; }
+.alert .message { background-color: #1e1e1e; color: #888888; }
 .logo-stroke { stroke: #888888; }
 .logo-fill { fill: #888888; }
 .logo-border { stroke: #000000; }
@@ -128,12 +144,11 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
 .logo-spinner-stroke { stroke: #ffffff; }
 .logo-button { color: #888888; background-color: #1e1e1e; border-color: #888888; }
 .logo-button:hover { color: #1e1e1e; background-color: #888888; }
-.message-dialog { color: #888888; }
 .welcome .progress-bar { background-color: #888888; }
 .welcome .menu { background-color: #2d2d2d }
 .about .logo { background-color: #1e1e1e; color: #888888; }
 .about a { color: #c6c6c6; }
-.about a:hover { color: #ffffff; }
+.about a:hover { color: #565656; }
 .toolbar-icon .border { stroke: #1d1d1d; }
 .toolbar-icon .stroke { stroke: #aaaaaa; }
 .toolbar-icon:hover .stroke { stroke: #dfdfdf; }
@@ -164,8 +179,8 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
 .logo-icon { left: 0; top: 0; width: 128px; height: 128px; }
 .logo-spinner { left: 0; top: 0; width: 128px; height: 128px; }
 .logo .open-file-button { top: 204px; left: 0; }
-.message-dialog .message-button { top: 304px; }
-.message-dialog .message-text { top: 190px; width: 240px; }
+.alert .message-button { top: 304px; }
+.alert .message-text { top: 190px; width: 240px; }
 .progress { top: 160px; height: 2px; width: 100px; }
 .about .logo { width: 100%; padding-left: 0; padding-right: 0; }
 .about .logo-message { top: 175px; font-size: 12px; }
@@ -498,9 +513,10 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
     <div style="font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
     <div style="font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
 </div>
-<div id="message-dialog" class="center message-dialog">
+<div id="message" class="center message">
+    <span id="message-name" class="center message-name"></span>
     <span id="message-text" class="center message-text"></span>
-    <button id="message-button" class="center logo-button message-button" tabindex="0">Accept</button>
+    <button id="message-button" class="center logo-button message-button" tabindex="0">OK</button>
 </div>
 <div id="titlebar" class="titlebar">
     <svg style="position: absolute; width: 0px; height: 0px; overflow: hidden;" aria-hidden="true">

source/view.js

@@ -607,7 +607,7 @@ view.View = class {
         const url = known && known.url ? known.url : null;
         const message = err.message;
         name = name || err.name;
-        const button = await this._host.error(name, message, url === null);
+        const button = await this._host.error(message, name, url === null);
         if (button === 0 && (url || this._host.type === 'Electron')) {
             this._host.openURL(url || `${this._host.environment('repository')}/issues`);
         }