Merge branch 'main' of https://github.com/PuruVJ/macos-web into feat/…

…app-safari
PuruVJ · Nov 3, 2021 · 7d4be19 · 7d4be19
2 parents 13488cf + fdf59ae
commit 7d4be19
Show file tree

Hide file tree

Showing 27 changed files with 270 additions and 170 deletions.
diff --git a/package.json b/package.json
@@ -4,9 +4,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "pnpm check && vite build",
     "serve": "vite preview",
-    "test-https": "cross-env VITE_LOCAL_BUILD=true npm run build && serve dist"
+    "test-https": "cross-env VITE_LOCAL_BUILD=true npm run build && serve dist",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@iconify-json/gg": "^1.0.1",
@@ -22,6 +23,7 @@
     "https-localhost": "^4.7.0",
     "sass": "^1.43.4",
     "svelte": "^3.44.1",
+    "svelte-check": "^2.2.8",
     "svelte-preprocess": "^4.9.8",
     "typescript": "^4.4.4",
     "vite": "2.6.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/actions/elevation.ts b/src/actions/elevation.ts
@@ -0,0 +1,19 @@
+const zIndexConfig = {
+  wallpaper: -1,
+  'bootup-screen': 50,
+  'context-menu': 40,
+  'window-traffic-lights': 1,
+  dock: 20,
+  'dock-tooltip': 10,
+  'system-updates-available': 1,
+  'system-dialog': 30,
+  'menubar-menu-parent': 1,
+};
+
+for (const [element, zIndexValue] of Object.entries(zIndexConfig)) {
+  document.body.style.setProperty(`--system-z-index-${element}`, zIndexValue + '');
+}
+
+export function elevation(node: HTMLElement, uiElement: keyof typeof zIndexConfig) {
+  node.style.zIndex = `var(--system-z-index-${uiElement})`;
+}
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -2,3 +2,4 @@ export { clickOutside } from './click-outside';
 export { focusOutside } from './focus-outside';
 export { trapFocus } from './trap-focus';
 export { portal } from './portal';
+export { elevation } from './elevation';
diff --git a/src/components/Desktop/BootupScreen.svelte b/src/components/Desktop/BootupScreen.svelte
@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { quintInOut } from 'svelte/easing';
   import { tweened } from 'svelte/motion';
+  import { elevation } from '__/actions';
   import { fadeOut } from '__/helpers/fade';
   import { waitFor } from '__/helpers/wait-for';
   import AppleIcon from '~icons/mdi/apple';
@@ -20,7 +21,7 @@
 </script>
 
 {#if !(hiddenSplashScreen || import.meta.env.DEV)}
-  <div out:fadeOut={{ duration: 500 }} class="splash-screen">
+  <div out:fadeOut={{ duration: 500 }} class="splash-screen" use:elevation={'bootup-screen'}>
     <AppleIcon />
 
     <div
@@ -57,7 +58,6 @@
     position: fixed;
     top: 0;
     bottom: 0;
-    z-index: 999999999999;
 
     height: 100vh;
     width: 100vw;
@@ -88,11 +88,11 @@
 
     overflow-x: hidden;
 
-    background-color: var(--app-color-grey-800);
+    background-color: var(--system-color-grey-800);
   }
 
   .indicator {
-    background-color: var(--app-color-grey-100);
+    background-color: var(--system-color-grey-100);
 
     border-radius: inherit;
 

diff --git a/src/components/Desktop/ContextMenu.svelte b/src/components/Desktop/ContextMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { elevation } from '__/actions';
   import { contextMenuConfig } from '__/configs/menu/context.menu.config';
   import { fadeIn, fadeOut } from '__/helpers/fade';
   import { theme } from '__/stores/theme.store';
@@ -39,6 +40,7 @@
     style="transform: translate({xPos}px, {yPos}px);"
     in:fadeIn={{ duration: 80 }}
     out:fadeOut
+    use:elevation={'context-menu'}
   >
     {#each Object.values(contextMenuConfig.default) as contents}
       <button class="menu-item">{contents.title}</button>
@@ -54,7 +56,6 @@
   .container {
     --additional-shadow: 0 0 0 0 white;
     display: block;
-    z-index: 99999999;
 
     min-width: 16rem;
 
@@ -66,16 +67,16 @@
     user-select: none;
     transition: transform 100ms ease;
 
-    background-color: hsla(var(--app-color-light-hsl), 0.3);
+    background-color: hsla(var(--system-color-light-hsl), 0.3);
     backdrop-filter: blur(15px);
 
     border-radius: 0.5rem;
 
     box-shadow: hsla(0, 0%, 0%, 0.3) 0px 0px 11px 0px, var(--additional-shadow);
 
     &.dark {
-      --additional-shadow: inset 0 0 0 0.9px hsla(var(--app-color-dark-hsl), 0.3),
-        0 0 0 1.2px hsla(var(--app-color-light-hsl), 0.3);
+      --additional-shadow: inset 0 0 0 0.9px hsla(var(--system-color-dark-hsl), 0.3),
+        0 0 0 1.2px hsla(var(--system-color-light-hsl), 0.3);
     }
 
     * {
@@ -103,20 +104,20 @@
     backface-visibility: hidden;
     transition: none;
 
-    color: hsla(var(--app-color-dark-hsl), var(--alpha));
+    color: hsla(var(--system-color-dark-hsl), var(--alpha));
 
     &:hover,
     &:focus-visible {
-      background-color: var(--app-color-primary);
-      color: var(--app-color-primary-contrast);
+      background-color: var(--system-color-primary);
+      color: var(--system-color-primary-contrast);
     }
   }
 
   .divider {
     width: 100%;
     height: 0.2px;
 
-    background-color: hsla(var(--app-color-dark-hsl), 0.2);
+    background-color: hsla(var(--system-color-dark-hsl), 0.2);
 
     margin: 2px 0;
   }

diff --git a/src/components/Desktop/Window/TrafficLights.svelte b/src/components/Desktop/Window/TrafficLights.svelte
@@ -43,7 +43,7 @@
 
     &.unfocused button {
       --bgcolor: #b6b6b7;
-      --border-color: hsla(var(--app-color-dark-hsl), 0.5);
+      --border-color: hsla(var(--system-color-dark-hsl), 0.5);
     }
 
     :global(svg) {

diff --git a/src/components/Desktop/Window/Window.svelte b/src/components/Desktop/Window/Window.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { elevation } from '__/actions';
   import { draggable } from 'svelte-drag';
   import { sineInOut } from 'svelte/easing';
   import { appsConfig } from '__/configs/apps/apps-config';
@@ -120,7 +121,7 @@
   on:click={focusApp}
   out:windowCloseTransition
 >
-  <div class="tl-container {appID}">
+  <div class="tl-container {appID}" use:elevation={'window-traffic-lights'}>
     <TrafficLights {appID} on:maximize-click={maximizeApp} />
   </div>
 
@@ -142,14 +143,14 @@
     border-radius: 0.75rem;
     box-shadow: 0px 9.9px 14.8px rgba(0, 0, 0, 0.205), 0px 79px 118px rgba(0, 0, 0, 0.41);
 
-    cursor: var(--app-cursor-default), auto;
+    cursor: var(--system-cursor-default), auto;
 
     &.dark {
       & > :global(section),
       & > :global(div) {
         border-radius: inherit;
-        box-shadow: inset 0 0 0 0.9px hsla(var(--app-color-dark-hsl), 0.3),
-          0 0 0 1px hsla(var(--app-color-light-hsl), 0.5);
+        box-shadow: inset 0 0 0 0.9px hsla(var(--system-color-dark-hsl), 0.3),
+          0 0 0 1px hsla(var(--system-color-light-hsl), 0.5);
       }
     }
   }
@@ -158,7 +159,6 @@
     position: absolute;
     top: 1rem;
     left: 1rem;
-    z-index: 1;
 
     // Necessary, as `.container` tries to apply shadow on it
     box-shadow: none !important;

diff --git a/src/components/Dock/Dock.svelte b/src/components/Dock/Dock.svelte
@@ -2,6 +2,7 @@
   import { appsConfig } from '__/configs/apps/apps-config';
   import { useRegisterSW } from 'virtual:pwa-register/svelte';
   import DockItem from './DockItem.svelte';
+  import { elevation } from '__/actions';
 
   // replaced dynamically
   const buildDate = '__DATE__';
@@ -39,7 +40,7 @@
   let mouseX: number | null = null;
 </script>
 
-<section class="dock-container">
+<section class="dock-container" use:elevation={'dock'}>
   <div
     class="dock-el"
     on:mousemove={(event) => (mouseX = event.x)}
@@ -55,7 +56,7 @@
 </section>
 
 {#if $needRefresh}
-  <div class="updates-available-dialog" role="alert">
+  <div class="updates-available-dialog" role="alert" use:elevation={'system-updates-available'}>
     <div class="updates-available-hero">
       <img
         width="64"
@@ -83,7 +84,6 @@
     margin-bottom: 0.3rem;
     left: 0;
     bottom: 0;
-    z-index: 9900;
     position: fixed;
 
     width: 100%;
@@ -96,10 +96,10 @@
   }
 
   .dock-el {
-    background-color: hsla(var(--app-color-light-hsl), 0.4);
+    background-color: hsla(var(--system-color-light-hsl), 0.4);
 
-    box-shadow: inset 0 0 0 0.2px hsla(var(--app-color-grey-100-hsl), 0.7),
-      0 0 0 0.2px hsla(var(--app-color-grey-900-hsl), 0.7), hsla(0, 0%, 0%, 0.3) 2px 5px 19px 7px;
+    box-shadow: inset 0 0 0 0.2px hsla(var(--system-color-grey-100-hsl), 0.7),
+      0 0 0 0.2px hsla(var(--system-color-grey-900-hsl), 0.7), hsla(0, 0%, 0%, 0.3) 2px 5px 19px 7px;
 
     position: relative;
 
@@ -136,7 +136,7 @@
     height: 100%;
     width: 0.2px;
 
-    background-color: hsla(var(--app-color-dark-hsl), 0.3);
+    background-color: hsla(var(--system-color-dark-hsl), 0.3);
 
     margin: 0 4px;
   }
@@ -150,7 +150,6 @@
     margin: 16px;
     border: 1px solid #8885;
     border-radius: 0.5rem;
-    z-index: 1;
     text-align: left;
     box-shadow: 3px 4px 5px 0 #8885;
     display: grid;