Notifications Rework #81

Integrated the Notifications UI component into the header to streamline
user alerts into the overall experience.

Also added titles to use the space created by moving the notifications
compoenent to it's own space.

brain/views/dash/_frame.twig

@@ -14,14 +14,12 @@
 		{% if status %}
 			<header>
 				{% apply spaceless %}
-				<nav>
+				<nav role="top-nav">
 					<div role="nav-left">
 						<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
 					</div>
-					<div role="notifications">
+					<div role="title">
-						{% apply spaceless %}
+						<h1>{{ title }}</h1>
-						{{ include("dash/partials/notifications.twig") }}
-						{% endapply %}
 					</div>
 					<div role="nav-right">
 						{% if status %}
@@ -31,6 +29,11 @@
 						{% endif %}
 					</div>
 				</nav>
+				<div role="notify">
+					{% apply spaceless %}
+					{{ include("dash/partials/notifications.twig") }}
+					{% endapply %}
+				</div>
 				{% endapply %}
 			{% endif %}
 		</header>

public/assets/css/dash/frame.css

@@ -60,19 +60,12 @@ header {
   width: 100%;
   max-width: 900px;
   margin: 10px auto;
-  background: var(--white);
   height: 50px;
   border-radius: 5px;
   left: 50%;
   transform: translate(-50%, 0);
   position: fixed;
   z-index: 500;
-  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
-}
-
-header > nav {
-  display: grid;
-  grid-template-columns: 50px 1fr auto;
 }
 
 header > nav > div[role="nav-left"] img {
@@ -80,6 +73,16 @@ header > nav > div[role="nav-left"] img {
   padding: 5px;
 }
 
+header > nav > div[role="title"] {
+  text-align: left;
+  height: 100%;
+}
+
+header > nav > div[role="title"] h1 {
+  color: var(--primary);
+  margin: 15px;
+}
+
 header > nav > div[role="nav-right"] {
   padding: 5px;
 }

public/assets/css/dash/notifications.css

@@ -1,53 +1,78 @@
-header > nav > div[role="notifications"] {
+header > nav[role="top-nav"] {
-  width: 100%;
+  display: grid;
+  text-align: right;
+  grid-template-columns: 50px auto auto;
+  height: 100%;
+  position: relative;
+  background: var(--white);
+  border-radius: 3px;
+  transform-style: preserve-3d;
+  transform-origin: 100% 50%;
+  transform: rotateX(0deg);
+  transition: all 0.1s ease-out;
+  perspective: 500px;
+  backface-visibility: hidden;
+  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
 }
 
-header > nav > div[role="notifications"] > div[role="notify-message"] {
+header > div[role="notify"] {
+  display: grid;
+  height: 100%;
+  position: relative;
+  background: var(--black);
+  border-radius: 3px;
+  transform-style: preserve-3d;
+  transform-origin: 100% 50%;
+  transform: rotateX(180deg);
+  transition: all 0.3s ease-out;
+  perspective: 500px;
+  backface-visibility: hidden;
+  margin-top: -50px;
+  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
+}
+
+header > div[role="notify"] > div[role="notify-message"] {
   display: flex;
   height: 86%;
 }
 
-header > nav > div[role="notifications"] > div[role="notify-message"] div {
+header > div[role="notify"] > div[role="notify-message"] div {
   display: inline-block;
   transition: all 0.2s linear;
 }
 
 header
-  > nav
+  > div[role="notify"]
-  > div[role="notifications"]
   > div[role="notify-message"]
   > div[role="notify-text"] {
   color: var(--white);
   border-radius: 5px;
   height: 79%;
-  margin-top: 5px;
+  margin-top: 8px;
   opacity: 0;
 }
 
 header
-  > nav
+  > div[role="notify"]
-  > div[role="notifications"]
   > div[role="notify-message"]
   > div[role="notify-icons"] {
   margin: 5px;
-  width: 0;
+  width: 40px;
   opacity: 0;
 }
 
 header
-  > nav
+  > div[role="notify"]
-  > div[role="notifications"]
   > div[role="notify-message"]
   > div[role="notify-text"]
   span {
   display: block;
   padding: 5px;
-  margin-top: 4px;
 }
 
-header > nav > div[role="notifications"] > div[role="notify-message"] i {
+header > div[role="notify"] > div[role="notify-message"] i {
   display: none;
-  color: var(--primary);
+  color: var(--white);
 }
 
 i[role="notify-working"] {

public/assets/css/dash/settings.css

@@ -8,7 +8,7 @@ article[role="settings"] h1 {
   color: var(--white);
 }
 
-section label {
+section[role="member-settings"] label {
   background: var(--primary);
   color: var(--white);
   padding: 3px;

public/assets/scripts/Start.js

@@ -4201,36 +4201,58 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
             $accfb6154319a04b$var$iconWorking.style.display = "block";
         }
         $accfb6154319a04b$var$responseText.innerHTML = text;
-        (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+        new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-            targets: $accfb6154319a04b$var$notifyIcons,
+            targets: document.querySelector('[role="top-nav"]'),
-            width: 39,
+            rotateX: "180deg",
-            opacity: 1,
+            easing: "easeOutQuint"
-            easing: "easeInQuint",
-            duration: 300
         });
-        (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+        new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-            targets: $accfb6154319a04b$var$notifyText,
+            targets: document.querySelector('[role="notify"]'),
-            backgroundColor: color,
+            rotateX: "10deg",
-            opacity: 1,
+            easing: "easeOutQuint",
-            easing: "easeInOutQuad",
-            duration: 400,
             complete: ()=>{
-                setTimeout(()=>{
+                new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-                    (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                    targets: $accfb6154319a04b$var$notifyIcons,
-                        targets: $accfb6154319a04b$var$notifyText,
+                    width: 39,
-                        backgroundColor: color,
+                    opacity: 1,
-                        opacity: 0,
+                    easing: "easeInQuint",
-                        easing: "easeInOutQuad",
+                    duration: 300
-                        duration: 400
+                });
-                    });
+                new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
-                    (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                    targets: $accfb6154319a04b$var$notifyText,
-                        targets: $accfb6154319a04b$var$notifyIcons,
+                    backgroundColor: color,
-                        width: 0,
+                    opacity: 1,
-                        opacity: 0,
+                    easing: "easeInOutQuad",
-                        easing: "easeOutQuint",
+                    duration: 400,
-                        duration: 350
+                    complete: ()=>{
-                    });
+                        setTimeout(()=>{
-                }, 2000);
+                            (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                                targets: $accfb6154319a04b$var$notifyText,
+                                backgroundColor: color,
+                                opacity: 0,
+                                easing: "easeInOutQuad",
+                                duration: 400
+                            });
+                            (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                                targets: $accfb6154319a04b$var$notifyIcons,
+                                width: 0,
+                                opacity: 0,
+                                easing: "easeOutQuint",
+                                duration: 350
+                            });
+                            new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                                targets: document.querySelector('[role="top-nav"]'),
+                                rotateX: "0deg",
+                                easing: "easeOutQuint"
+                            });
+                            new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                                targets: document.querySelector('[role="notify"]'),
+                                rotateX: "180deg",
+                                easing: "easeOutQuint"
+                            });
+                        }, 2500);
+                    }
+                });
             }
         });
     }

src/com/ui/Notifications.js

@@ -40,38 +40,63 @@ export default class Notfications {
 		}
 		responseText.innerHTML = text;
 
-		anime({
+		new anime({
-			targets: notifyIcons,
+			targets: document.querySelector('[role="top-nav"]'),
-			width: 39,
+			rotateX: '180deg',
-			opacity: 1,
+			easing: 'easeOutQuint'
-			easing: 'easeInQuint',
-			duration: 300
 		});
 
-		anime({
+		new anime({
-			targets: notifyText,
+			targets: document.querySelector('[role="notify"]'),
-			backgroundColor: color,
+			rotateX: '10deg',
-			opacity: 1,
+			easing: 'easeOutQuint',
-			easing: 'easeInOutQuad',
-			duration: 400,
 			complete: () => {
-				setTimeout(() => {
+				new anime({
-					anime({
+					targets: notifyIcons,
-						targets: notifyText,
+					width: 39,
-						backgroundColor: color,
+					opacity: 1,
-						opacity: 0,
+					easing: 'easeInQuint',
-						easing: 'easeInOutQuad',
+					duration: 300
-						duration: 400
+				});
-					});
 
-					anime({
+				new anime({
-						targets: notifyIcons,
+					targets: notifyText,
-						width: 0,
+					backgroundColor: color,
-						opacity: 0,
+					opacity: 1,
-						easing: 'easeOutQuint',
+					easing: 'easeInOutQuad',
-						duration: 350
+					duration: 400,
-					});
+					complete: () => {
-				}, 2000);
+						setTimeout(() => {
+							anime({
+								targets: notifyText,
+								backgroundColor: color,
+								opacity: 0,
+								easing: 'easeInOutQuad',
+								duration: 400
+							});
+
+							anime({
+								targets: notifyIcons,
+								width: 0,
+								opacity: 0,
+								easing: 'easeOutQuint',
+								duration: 350
+							});
+
+							new anime({
+								targets: document.querySelector('[role="top-nav"]'),
+								rotateX: '0deg',
+								easing: 'easeOutQuint'
+							});
+
+							new anime({
+								targets: document.querySelector('[role="notify"]'),
+								rotateX: '180deg',
+								easing: 'easeOutQuint'
+							});
+						}, 2500);
+					}
+				});
 			}
 		});
 	}