are0h
/
Fipamo
1
2
Fork 0
Code Issues 19 Pull Requests 1 Packages Projects 1 Releases 22 Wiki Activity

Notifications Rework #81

Browse Source 
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.
toggle-buttons-#109
Ro 2 years ago
parent 78bfe4596b
commit 97278e3a90
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50
6 changed files with 162 additions and 84 deletions
Show Stats Download Patch File Download Diff File

13
brain/views/dash/_frame.twig
Unescape Escape View File

@ -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">
{% apply spaceless %}
{{ include("dash/partials/notifications.twig") }}
{% endapply %}
<div role="title">
<h1>{{ title }}</h1>
</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>

17
public/assets/css/dash/frame.css
Unescape Escape View File

@ -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;
}

55
public/assets/css/dash/notifications.css
Unescape Escape View File

@ -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"] {

2
public/assets/css/dash/settings.css
Unescape Escape View File

@ -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;

78
public/assets/scripts/Start.js
Unescape Escape View File

@ -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);
}
});
}
});
}

81
src/com/ui/Notifications.js
Unescape Escape View File

@ -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);
}
});
}
});
}

Write Preview
Loading…
Cancel
Save