chore: Update modal headers with icons for better user experience

chore: Updated Electron app with a context menu

3D_app/main.py

@@ -60,6 +60,7 @@ with open("assets/modal.md", "r") as f:
 # on défini le modal
 modal_overlay = dbc.Modal(
     [
+        dbc.ModalHeader([html.Img(src=app.get_asset_url('info.png'), height="32px", style={"marginRight": "5px"}), dbc.ModalTitle("Learn more")]),
         dbc.ModalBody(html.Div([dcc.Markdown(howto_md)], id="howto-md")),
         dbc.ModalFooter(dbc.Button("Close", id="howto-close", className="howto-bn")),
     ],
@@ -146,7 +147,7 @@ modal_settings = dbc.Modal(
 
 modal_open = dbc.Modal(
     [
-        dbc.ModalHeader(dbc.ModalTitle("Open a file")),
+        dbc.ModalHeader([html.Img(src=app.get_asset_url('open.png'), height="32px", style={"marginRight": "5px"}), dbc.ModalTitle("Open a file")]),
         dbc.ModalBody(
             [
                 dbc.ListGroup(
@@ -177,7 +178,7 @@ modal_open = dbc.Modal(
 
 modal_save = dbc.Modal(
     [
-        dbc.ModalHeader(dbc.ModalTitle("Save a file")),
+        dbc.ModalHeader([html.Img(src=app.get_asset_url('save.png'), height="32px", style={"marginRight": "5px"}), dbc.ModalTitle("Save a file")]),
         dbc.ModalBody(
             [
                 dbc.Input(id="save-input", placeholder="Filename"),
@@ -220,6 +221,7 @@ button_howto = dbc.Button(
     outline=True,
     color="primary",
     href="https://github.com/mathur04/stage_IJL/tree/main",
+    target="_blank",
     id="gh-link",
     style={"textTransform": "none", "marginRight": "10px"},
 )
@@ -283,9 +285,8 @@ navmenu = html.Div(
 
 save_toast = dbc.Toast(
     [html.P("File saved successfully in the saves folder!", className="mb-0")],
+    header=[html.Img(src=app.get_asset_url('save.png'), height="32px", style={"marginRight": "5px"}), "Success"],
     id="save-toast",
-    header="Success",
-    icon="success",
     duration=4000,
     is_open=False,
     dismissable=True,

3D_app/pages/fullscreen/bscan-xy.py

@@ -55,7 +55,10 @@ layout = html.Div(
 
 # callback pour les B-scan ZX en plein écran
 @callback(
-    [Output("heatmap-bscan-xy-fullscreen", "figure"), Output("loading-bscan-xy", "children")],
+    [
+        Output("heatmap-bscan-xy-fullscreen", "figure"),
+        Output("loading-bscan-xy", "children"),
+    ],
     Input("layer-slider-bscan-xy-fullscreen", "value"),
     State("store-settings", "data"),
 )

electron-3d-app/src/index.js

@@ -2,6 +2,7 @@ const { app, BrowserWindow, nativeTheme, Menu, dialog, ipcMain } = require('elec
 const path = require('node:path');
 const fs = require('node:fs')
 const prompt = require('custom-electron-prompt');
+const { nativeImage, shell } = require('electron');
 
 const configPath = app.getPath('userData');
 const configFile = path.join(configPath, 'config.json');
@@ -40,7 +41,36 @@ const createWindow = () => {
 		if (input.key.toLocaleLowerCase() === 'f11') {
 			mainWindow.setFullScreen(!mainWindow.isFullScreen());
 		}
-	})
+	});
+
+	mainWindow.webContents.on('context-menu', (event, params) => {
+		const menu = Menu.buildFromTemplate([
+			{ role: 'cut' },
+			{ role: 'copy' },
+			{ role: 'paste' },
+			{ role: 'selectAll' },
+			{ type: 'separator' },
+			{ role: 'reload' },
+			{ label: 'Toggle Fullscreen', click: () => { mainWindow.setFullScreen(!mainWindow.isFullScreen()); } },
+			{
+				label: 'Change Server', click: () => {
+					prompt({ title: "Configuration", label: "Please provide the server URL and port:", inputAttrs: { type: 'url' }, type: "input", value: config.serverUrl }).then((value) => {
+						if (value !== null) {
+							config.serverUrl = value;
+							fs.writeFileSync(configFile, JSON.stringify(config));
+							mainWindow.loadURL(config.serverUrl);
+						}
+					});
+				}
+			},
+			{ label: 'About', click: () => { dialog.showMessageBox(mainWindow, { type: "info", title: "About", message: "Electron 3D App", detail: "Version: 1.0.0\nAuthor: Florian Goussot\nProject URL: https://github.com/mathur04/stage_IJL", icon: nativeImage.createFromPath("src/info.png"), buttons: ["OK", "Open project URL"] }).then((choice) => {
+				if (choice.response === 1) {
+					shell.openExternal("https://github.com/mathur04/stage_IJL");
+				}
+			}); } },
+		]);
+		menu.popup();
+	});
 
 	ipcMain.on("config-change", (event) => {
 		prompt({ title: "Configuration", label: "Please provide the server URL and port:", inputAttrs: { type: 'url' }, type: "input", value: config.serverUrl }).then((value) => {
@@ -58,7 +88,13 @@ const createWindow = () => {
 
 	mainWindow.webContents.on('did-fail-load', (evt, errorCode, errorDescription, validatedURL, isMainFrame, frameProcessIdn, frameRoutingId) => {
 		if (errorCode === -102) {
-			dialog.showErrorBox("ERROR!", `Could not find the server at ${validatedURL}!\nPlease be sure the server is running and the URL is correct!`);
+			dialog.showMessageBox(mainWindow, {
+				type: "error",
+				title: "ERROR!",
+				message: `Could not find the server at ${validatedURL}!\nPlease be sure the server is running and the URL is correct!`,
+				icon: nativeImage.createFromPath("src/connection_error.png"),
+				buttons: ["OK"]
+			});
 			mainWindow.loadFile("src/error.html", { search: encodeURI(validatedURL) });
 		} else {
 			dialog.showErrorBox("ERROR!", errorDescription);