Have blocking messages and dialogs vertically centered.

Author: agarny

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260220.1",
+  "version": "0.20260223.0",
   "scripts": {
     "archive:web": "bun src/renderer/scripts/archive.web.js",
     "build": "electron-vite build",

src/renderer/package.json

@@ -39,7 +39,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260220.1",
+  "version": "0.20260223.0",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && cp index.d.ts dist/index.d.ts",

src/renderer/src/common/vueCommon.ts

@@ -67,3 +67,35 @@ export const useTheme = vueusecore.createGlobalState(() => {
     useDarkMode
   };
 });
+
+// A composable to track the height of an element as a CSS variable.
+
+export const trackElementHeight = (
+  sourceElement: HTMLElement,
+  targetElement: HTMLElement,
+  cssVariableName: string
+): (() => void) => {
+  const updateHeight = () => {
+    const height = sourceElement.offsetHeight;
+
+    targetElement.style.setProperty(cssVariableName, `${height}px`);
+  };
+
+  // Set the initial height.
+
+  updateHeight();
+
+  // Watch for height changes, including border and padding changes.
+
+  const { stop: stopTrackingElementHeight } = vueusecore.useResizeObserver(
+    sourceElement,
+    () => {
+      updateHeight();
+    },
+    { box: 'border-box' }
+  );
+
+  // Return the function to stop tracking the element's height.
+
+  return stopTrackingElementHeight;
+};

src/renderer/src/components/OpenCOR.vue

@@ -1,5 +1,5 @@
 <template>
-  <BlockUI ref="blockUi" class="opencor overflow-hidden h-full"
+  <BlockUI ref="blockUi" class="opencor overflow-hidden h-full" :class="showMainMenu ? 'with-main-menu' : ''"
     :blocked="compBlockUiEnabled"
     @click="activateInstance"
     @focus="activateInstance"
@@ -21,7 +21,7 @@
     >
       <input ref="files" type="file" multiple style="display: none;" @change="onChange" />
       <DragNDropComponent v-show="dragAndDropCounter" />
-      <MainMenu :id="mainMenuId" v-if="!electronApi && !omex"
+      <MainMenu ref="mainMenu" :id="mainMenuId" v-if="showMainMenu"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
         :hasFiles="hasFiles"
@@ -139,6 +139,7 @@ const { isDialogActive } = provideDialogState();
 
 const blockUi = vue.ref<vue.ComponentPublicInstance | null>(null);
 const toastId = vue.ref('opencorToast');
+const mainMenu = vue.ref<vue.ComponentPublicInstance | null>(null);
 const mainMenuId = vue.ref('opencorMainMenu');
 const files = vue.ref<HTMLElement | null>(null);
 const contents = vue.ref<InstanceType<typeof IContentsComponent> | null>(null);
@@ -181,6 +182,12 @@ const compUiEnabled = vue.computed(() => {
   return !compBlockUiEnabled.value && !isDialogActive.value;
 });
 
+// Determine whether to show the main menu or not.
+
+const showMainMenu = vue.computed(() => {
+  return !electronApi && !props.omex;
+});
+
 // Provide access to our progress message features.
 
 export interface IProgressMessage {
@@ -933,6 +940,33 @@ vue.onMounted(() => {
   }, SHORT_DELAY);
 });
 
+// Track the height of our main menu.
+
+let stopTrackingMainMenuHeight: (() => void) | null = null;
+
+vue.onMounted(() => {
+  if (!showMainMenu.value) {
+    return;
+  }
+
+  void vue.nextTick(() => {
+    const mainMenuElement = mainMenu.value?.$el as HTMLElement | undefined;
+    const blockUiElement = blockUi.value?.$el as HTMLElement | undefined;
+
+    if (mainMenuElement && blockUiElement) {
+      stopTrackingMainMenuHeight = vueCommon.trackElementHeight(mainMenuElement, blockUiElement, '--main-menu-height');
+    }
+  });
+});
+
+vue.onBeforeUnmount(() => {
+  if (stopTrackingMainMenuHeight) {
+    stopTrackingMainMenuHeight();
+
+    stopTrackingMainMenuHeight = null;
+  }
+});
+
 // If a COMBINE archive is provided then open it (and then the Simulation Experiment view will be shown in isolation) or
 // carry on as normal (i.e. the whole OpenCOR UI will be shown).
 
@@ -1258,4 +1292,14 @@ const onGitHubButtonClick = async (): Promise<void> => {
     color: var(--p-red-200);
   }
 }
+
+.with-main-menu {
+  :deep(.p-dialog-mask) {
+    padding-top: var(--main-menu-height) !important;
+  }
+
+  :deep(.p-message) {
+    margin-top: calc(0.5 * var(--main-menu-height)) !important;
+  }
+}
 </style>