Add about view

HASEL-UZH · Feb 21, 2024 · 623579a · 623579a
1 parent 1c859bd
commit 623579a
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 15 deletions.
diff --git a/src/electron/electron/main/services/WindowService.ts b/src/electron/electron/main/services/WindowService.ts
@@ -14,6 +14,7 @@ export class WindowService {
   private readonly appUpdaterService: AppUpdaterService;
   private tray: Tray;
   private experienceSamplingWindow: BrowserWindow;
+  private aboutWindow: BrowserWindow;
 
   constructor(appUpdaterService: AppUpdaterService) {
     this.appUpdaterService = appUpdaterService;
@@ -96,10 +97,13 @@ export class WindowService {
   }
 
   public async createAboutWindow() {
+    this.aboutWindow?.close();
+    this.aboutWindow = null;
+
     const __filename = fileURLToPath(import.meta.url);
     const __dirname = dirname(__filename);
     const preload = join(__dirname, '../preload/index.mjs');
-    const aboutWindow = new BrowserWindow({
+    this.aboutWindow = new BrowserWindow({
       width: 800,
       height: 600,
       show: false,
@@ -114,13 +118,19 @@ export class WindowService {
     });
 
     if (process.env.VITE_DEV_SERVER_URL) {
-      await aboutWindow.loadURL(process.env.VITE_DEV_SERVER_URL + '#about');
+      await this.aboutWindow.loadURL(process.env.VITE_DEV_SERVER_URL + '#about');
     } else {
-      await aboutWindow.loadFile(path.join(process.env.DIST, 'index.html'), {
+      await this.aboutWindow.loadFile(path.join(process.env.DIST, 'index.html'), {
         hash: 'about'
       });
     }
-    aboutWindow.show();
+
+    this.aboutWindow.webContents.setWindowOpenHandler((details) => {
+      shell.openExternal(details.url);
+      return { action: 'deny' };
+    });
+
+    this.aboutWindow.show();
   }
 
   public updateTray(

diff --git a/src/electron/src/assets/logo_hasel.svg b/src/electron/src/assets/logo_hasel.svg
diff --git a/src/electron/src/assets/logo_uzh.svg b/src/electron/src/assets/logo_uzh.svg
diff --git a/src/electron/src/views/AboutView.vue b/src/electron/src/views/AboutView.vue
@@ -10,18 +10,17 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="h-full p-4">
-    <!-- center spinner across the screen -->
-    <div v-if="!studyInfo" class="flex h-full items-center justify-center">
-      <span class="loading loading-spinner loading-lg"></span>
+  <div class="h-full overflow-y-scroll">
+    <div v-if="!studyInfo" class="flex h-full w-full items-center justify-center">
+      <span class="loading loading-spinner loading-lg" />
     </div>
-    <article v-else class="lg:prose-lg prose mx-auto mt-8 align-top">
-      <h1>
+    <article v-else class="prose-lg prose ml-6 mt-4 align-top">
+      <h1 class="relative">
         <span class="primary-blue">{{ studyInfo.studyName }}</span>
+        <span class="badge badge-neutral absolute top-0">v{{ studyInfo.appVersion }}</span>
       </h1>
-      <div class="badge badge-neutral fixed right-0 top-0 mr-4 mt-4">
-        Version {{ studyInfo.appVersion }}
-      </div>
+
+      <h2 class="mt-0">Study Info</h2>
       <p>{{ studyInfo.shortDescription }}</p>
       <table class="table-auto">
         <tbody>
@@ -37,18 +36,53 @@ onMounted(async () => {
           </tr>
           <tr>
             <td>Study Website:</td>
-            <td>{{ studyInfo.infoUrl }}</td>
+            <td>
+              <a :href="studyInfo.infoUrl" target="_blank">{{ studyInfo.infoUrl }}</a>
+            </td>
           </tr>
           <tr>
             <td>Privacy Policy:</td>
-            <td>{{ studyInfo.privacyPolicyUrl }}</td>
+            <td>
+              <a :href="studyInfo.privacyPolicyUrl" target="_blank">{{
+                studyInfo.privacyPolicyUrl
+              }}</a>
+            </td>
           </tr>
+        </tbody>
+      </table>
+
+      <h2 class="mt-0">Monitoring Tool Info</h2>
+      <p>TODO: Short summary of PersonalAnalytics</p>
+      <table class="table-auto">
+        <tbody>
           <tr>
             <td>Active Trackers:</td>
             <td>{{ studyInfo.currentlyActiveTrackers.join(', ') }}</td>
           </tr>
+          <tr>
+            <td>Contact:</td>
+            <td>André Meyer (TBD), Sebastian Richner (TBD)</td>
+          </tr>
+          <tr>
+            <td>Website:</td>
+            <td>
+              <a href="https://github.com/HASEL-UZH/PersonalAnalytics" target="_blank"
+                >https://github.com/HASEL-UZH/PersonalAnalytics</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <td>Privacy Policy:</td>
+            <td>
+              <a target="_blank">TODO: TBD</a>
+            </td>
+          </tr>
         </tbody>
       </table>
+      <div class="float-end flex">
+        <img src="../assets/logo_uzh.svg" class="mr-5 w-32 object-contain" />
+        <img src="../assets/logo_hasel.svg" class="w-32 object-contain" />
+      </div>
     </article>
   </div>
 </template>
@@ -57,4 +91,9 @@ onMounted(async () => {
 .primary-blue {
   color: @primary-color;
 }
+h1,
+h2,
+h3 {
+  @apply !font-medium;
+}
 </style>