From 97278e3a9049fa97b45a20b920c20b249f463d3c Mon Sep 17 00:00:00 2001 From: Ro Date: Sun, 26 Mar 2023 19:47:42 -0700 Subject: [PATCH] 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 | 13 ++-- public/assets/css/dash/frame.css | 17 +++-- public/assets/css/dash/notifications.css | 55 +++++++++++----- public/assets/css/dash/settings.css | 2 +- public/assets/scripts/Start.js | 78 +++++++++++++++-------- src/com/ui/Notifications.js | 81 ++++++++++++++++-------- 6 files changed, 162 insertions(+), 84 deletions(-) diff --git a/brain/views/dash/_frame.twig b/brain/views/dash/_frame.twig index 729182c..f048630 100644 --- a/brain/views/dash/_frame.twig +++ b/brain/views/dash/_frame.twig @@ -14,14 +14,12 @@ {% if status %}
{% apply spaceless %} -
diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css index fe5b39f..5579b1f 100644 --- a/public/assets/css/dash/frame.css +++ b/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; } diff --git a/public/assets/css/dash/notifications.css b/public/assets/css/dash/notifications.css index 6af1778..b796b17 100644 --- a/public/assets/css/dash/notifications.css +++ b/public/assets/css/dash/notifications.css @@ -1,53 +1,78 @@ -header > nav > div[role="notifications"] { - width: 100%; +header > nav[role="top-nav"] { + 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="notifications"] + > div[role="notify"] > 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="notifications"] + > div[role="notify"] > div[role="notify-message"] > div[role="notify-icons"] { margin: 5px; - width: 0; + width: 40px; opacity: 0; } header - > nav - > div[role="notifications"] + > div[role="notify"] > 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"] { diff --git a/public/assets/css/dash/settings.css b/public/assets/css/dash/settings.css index 9ebd677..7e5bb3e 100644 --- a/public/assets/css/dash/settings.css +++ b/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; diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index aee7a9f..d4c8763 100644 --- a/public/assets/scripts/Start.js +++ b/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)({ - targets: $accfb6154319a04b$var$notifyIcons, - width: 39, - opacity: 1, - easing: "easeInQuint", - duration: 300 + new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ + targets: document.querySelector('[role="top-nav"]'), + rotateX: "180deg", + easing: "easeOutQuint" }); - (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ - targets: $accfb6154319a04b$var$notifyText, - backgroundColor: color, - opacity: 1, - easing: "easeInOutQuad", - duration: 400, + new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ + targets: document.querySelector('[role="notify"]'), + rotateX: "10deg", + easing: "easeOutQuint", complete: ()=>{ - setTimeout(()=>{ - (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 - }); - }, 2000); + new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ + targets: $accfb6154319a04b$var$notifyIcons, + width: 39, + opacity: 1, + easing: "easeInQuint", + duration: 300 + }); + new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ + targets: $accfb6154319a04b$var$notifyText, + backgroundColor: color, + opacity: 1, + easing: "easeInOutQuad", + duration: 400, + complete: ()=>{ + setTimeout(()=>{ + (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); + } + }); } }); } diff --git a/src/com/ui/Notifications.js b/src/com/ui/Notifications.js index 1fb736e..04629f6 100644 --- a/src/com/ui/Notifications.js +++ b/src/com/ui/Notifications.js @@ -40,38 +40,63 @@ export default class Notfications { } responseText.innerHTML = text; - anime({ - targets: notifyIcons, - width: 39, - opacity: 1, - easing: 'easeInQuint', - duration: 300 + new anime({ + targets: document.querySelector('[role="top-nav"]'), + rotateX: '180deg', + easing: 'easeOutQuint' }); - anime({ - targets: notifyText, - backgroundColor: color, - opacity: 1, - easing: 'easeInOutQuad', - duration: 400, + new anime({ + targets: document.querySelector('[role="notify"]'), + rotateX: '10deg', + easing: 'easeOutQuint', complete: () => { - setTimeout(() => { - anime({ - targets: notifyText, - backgroundColor: color, - opacity: 0, - easing: 'easeInOutQuad', - duration: 400 - }); + new anime({ + targets: notifyIcons, + width: 39, + opacity: 1, + easing: 'easeInQuint', + duration: 300 + }); - anime({ - targets: notifyIcons, - width: 0, - opacity: 0, - easing: 'easeOutQuint', - duration: 350 - }); - }, 2000); + new anime({ + targets: notifyText, + backgroundColor: color, + opacity: 1, + easing: 'easeInOutQuad', + duration: 400, + complete: () => { + 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); + } + }); } }); }