Merge pull request #33 from Marc-Lorenz/menu-rebuild

Menu rebuild

.gitignore

@@ -154,3 +154,4 @@ test-results/
 playwright-report/
 
 /playwright-report/
+components.d.ts

doc/remote_api.yaml

@@ -97,6 +97,7 @@ paths:
                 - file
       parameters:
         - name: user_id
+          required: true
           in: path
           schema:
             type: string

e2e/mainLayout.spec.ts

@@ -0,0 +1,138 @@
+import { test, expect } from '@playwright/test';
+import { i } from 'vite/dist/node/types.d-aGj9QkWt.js';
+
+test.describe('check title and main page layout', () => {
+  test('visits the app root url and checks elements layout', async ({ page }) => {
+    await page.goto('/');
+
+    await test.step('check main page layout', async () => {
+      // Check element relative width to container
+      const containerHandle = page.locator('#app');
+      const sidebar = page.locator('#sidebar');
+      const canvas = page.locator('#canvas-div');
+      const thumbnails = page.locator('#thumbnail-gallery');
+
+      const containerBox = await containerHandle.boundingBox();
+      expect(containerBox).not.toBe(null);
+      const sidebarBox = await sidebar.boundingBox();
+      expect(sidebarBox).not.toBe(null);
+      const canvasBox = await canvas.boundingBox();
+      expect(canvasBox).not.toBe(null);
+      const thumbnailsBox = await thumbnails.boundingBox();
+      expect(thumbnailsBox).not.toBe(null);
+
+      let relativeWidth = sidebarBox.width / containerBox.width;
+      expect(relativeWidth).toBeCloseTo(0.2, 1);
+
+      relativeWidth = canvasBox.width / containerBox.width;
+      expect(relativeWidth).toBeCloseTo(0.7, 1);
+
+      relativeWidth = thumbnailsBox.width / containerBox.width;
+      expect(relativeWidth).toBeCloseTo(0.1, 1);
+    });
+
+    await test.step('check navbar brand', async () => {
+      await expect(page.locator('#title')).toHaveText('Face Mesh Editor');
+      const icon = page.locator('#app-icon');
+      await expect(icon).toBeVisible();
+    });
+
+    const navbarButtonContainer = page.locator('#navbar-buttons');
+
+    await test.step('check navbar sizing', async () => {
+      expect(navbarButtonContainer).not.toBe(null);
+      await expect(navbarButtonContainer).toBeVisible();
+
+      // check relative width to parent
+      const navbarParent = navbarButtonContainer.locator('..');
+      await expect(navbarParent).toBeVisible();
+      const navbarParentBox = await navbarParent.boundingBox();
+      expect(navbarParentBox).not.toBe(null);
+      const navbarButtonContainerBox = await navbarButtonContainer.boundingBox();
+      expect(navbarButtonContainerBox).not.toBe(null);
+    });
+
+    await test.step('check navbar dropdown menu layout', async () => {
+      // check child elements
+      const navItems = navbarButtonContainer.locator('.nav-item');
+      const navItemsCount = await navItems.count();
+      expect(navItemsCount).toBe(3);
+      // Verify the order of child elements: File, Edit, About
+      const firstNavItemText = await navItems.nth(0).innerText();
+      expect(firstNavItemText.trim()).toBe('File');
+
+      const secondNavItemText = await navItems.nth(1).innerText();
+      expect(secondNavItemText.trim()).toBe('Edit');
+
+      const thirdNavItemText = await navItems.nth(2).innerText();
+      expect(thirdNavItemText.trim()).toBe('About');
+    });
+
+    await test.step('check file dropdown menu', async () => {
+      // File menu
+      const fileDropdown = page.locator('#file-dropdown');
+      await expect(fileDropdown).toBeVisible();
+
+      // if not clicked the other buttons should be invisible
+      const openImagesButton = page.locator('#button-open-images');
+      await expect(openImagesButton).toBeHidden();
+
+      const openAnnotationsButton = page.locator('#button-open-annotations');
+      await expect(openAnnotationsButton).toBeHidden();
+
+      const downloadAllButton = page.locator('#button-download-all');
+      await expect(downloadAllButton).toBeHidden();
+
+      await fileDropdown.click();
+
+      await expect(openImagesButton).toBeVisible();
+      await expect(openAnnotationsButton).toBeVisible();
+      await expect(downloadAllButton).toBeVisible();
+    });
+
+    await test.step('check edit dropdown menu', async () => {
+      const editDropdown = page.locator('#edit-dropdown');
+      await expect(editDropdown).toBeVisible();
+
+      // if not clicked the other buttons should be invisible
+      const undoButton = page.locator('#button-undo');
+      await expect(undoButton).toBeHidden();
+
+      const redoButton = page.locator('#button-redo');
+      await expect(redoButton).toBeHidden();
+
+      const resetButton = page.locator('#button-reset');
+      await expect(resetButton).toBeHidden();
+
+      await editDropdown.click();
+
+      await expect(undoButton).toBeVisible();
+      await expect(redoButton).toBeVisible();
+      await expect(resetButton).toBeVisible();
+    });
+
+    await test.step('check about dropdown menu', async () => {
+      const aboutDropdown = page.locator('#about-dropdown');
+      await expect(aboutDropdown).toBeVisible();
+
+      const githubButton = page.locator('#button-github');
+      await expect(githubButton).toBeHidden();
+
+      const buttonReportIssue = page.locator('#button-report-issue');
+      await expect(buttonReportIssue).toBeHidden();
+
+      const buttonQuestion = page.locator('#button-question');
+      await expect(buttonQuestion).toBeHidden();
+
+      const buttonInfo = page.locator('#button-info');
+      await expect(buttonInfo).toBeHidden();
+
+      await aboutDropdown.click();
+
+      await expect(githubButton).toBeVisible();
+      await expect(buttonReportIssue).toBeVisible();
+      await expect(buttonQuestion).toBeVisible();
+      await expect(buttonInfo).toBeVisible();
+    });
+  });
+});

index.html

@@ -15,20 +15,6 @@
 
 <div id="app"></div>
 
-<div id="modalInfo" class="modal fade" tabindex="-1" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Info</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body text-center">
-                &copy; 2024<br>Chair of Human-Centered Artificial Intelligence<br>University of Augsburg<br>Germany
-            </div>
-        </div>
-    </div>
-</div>
-
 <!-- Notification popups -->
 <div class="toast-container position-fixed bottom-0 end-0 p-3">
     <div id="saveNotification" class="toast">

package.json

@@ -46,11 +46,13 @@
     "jquery": "^3.7.1",
     "jssha": "^3.3.1",
     "pinia": "^2.1.7",
+    "sortablejs": "^1.15.3",
     "vue": "^3.4.29",
     "vue3-shortkey": "^4.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^8.57.0",
+    "@floating-ui/vue": "^1.1.4",
     "@playwright/test": "^1.44.1",
     "@rushstack/eslint-patch": "^1.8.0",
     "@sindresorhus/tsconfig": "^5.0.0",
@@ -86,6 +88,7 @@
     "open-cli": "^8.0.0",
     "prettier": "^3.3.0",
     "sass": "^1.77.6",
+    "sortablejs-vue3": "^1.2.11",
     "standard-version": "^9.5.0",
     "ts-node": "^10.9.2",
     "typedoc": "^0.25.13",