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

implemented progress upload indicator in notifications

Browse Source
pull/84/head
Ro 3 years ago
parent 601fd6b1ab
commit 53864becc1
11 changed files with 83 additions and 8379 deletions
Show Stats Download Patch File Download Diff File

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

@ -19,9 +19,14 @@
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/></svg> <svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/></svg>
</div> </div>
<div id="notify-working" class="notify-icon"> <div id="notify-working" class="notify-icon">
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg> <svg id="notify-working-icon" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg>
</div> </div>
<p id="message-text"></p>
<div id="notify-text">
<div id="notify-progress"></div>
<p id="message-text">MESSAGE TEXT</p>
</div>
</div> </div>
</div> </div>
<div id="main-content" class="main-container"> <div id="main-content" class="main-container">

2
brain/views/dash/forms/login.twig
Unescape Escape View File

@ -1,7 +1,7 @@
<div id="dash-login"> <div id="dash-login">
<div id="dash-form" class="dash-form"> <div id="dash-form" class="dash-form">
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/> <img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
<form id="login" class='login' name="login" action="/@/dashboard/login" method="POST"> <form id="login" class='login' name="login" action="/dashboard/login" method="POST">
<input type="text" name="handle" class="form-control" placeholder="Handle" required "> <input type="text" name="handle" class="form-control" placeholder="Handle" required ">
<input type="password" name="password" class="form-control" placeholder="Password" required"> <input type="password" name="password" class="form-control" placeholder="Password" required">
<button id="login-btn" class='login-btn' type='submit'> <button id="login-btn" class='login-btn' type='submit'>

2
brain/views/dash/page-edit.twig
Unescape Escape View File

@ -32,7 +32,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=cvbupoyn"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=qwert">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}

2
brain/views/dash/reset-password.twig
Unescape Escape View File

@ -14,7 +14,7 @@
<div id="dash-login"> <div id="dash-login">
<div id="dash-reset" class="dash-reset"> <div id="dash-reset" class="dash-reset">
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/> <img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
<form id="reset" class='login' name="reset" action="/@/dashboard/login" method="POST"> <form id="reset" class='login' name="reset" action="/dashboard/login" method="POST">
<input type="password" id="new_password"name="new_password" class="form-control" placeholder="New Password" required"> <input type="password" id="new_password"name="new_password" class="form-control" placeholder="New Password" required">
<input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required"> <input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required">

2
brain/views/dash/start.twig
Unescape Escape View File

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dafdfa"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfd">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}

25
public/assets/css/dash.css
Unescape Escape View File

@ -1941,13 +1941,14 @@ svg.icons {
justify-content: center; justify-content: center;
opacity: 1; opacity: 1;
transform-style: preserve-3d; transform-style: preserve-3d;
transform: rotateX(-120deg); transform: rotateX(120deg);
transform-origin: 50% 0; transform-origin: 50% 0;
overflow: hidden;
} }
#notifications #notifyMessage #notify-good, #notifications #notifyMessage #notify-lame, #notifications #notifyMessage #notify-working { #notifications #notifyMessage #notify-good, #notifications #notifyMessage #notify-lame, #notifications #notifyMessage #notify-working {
display: block; display: block;
} }
#notifications #notifyMessage #notify-working-box { #notifications #notifyMessage #notify-working-icon {
-webkit-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
@ -1977,15 +1978,29 @@ svg.icons {
text-align: center; text-align: center;
border: 2px solid #EFEBE3; border: 2px solid #EFEBE3;
} }
#notifications #notifyMessage p { #notifications #notifyMessage #notify-text {
color: #EFEBE3; color: #EFEBE3;
background: black; background: #32302f;
width: 400px; width: 400px;
height: 28px; height: 28px;
padding: 15px 0 0 5px; padding: 15px 0 0 0;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
border: 2px solid #EFEBE3; border: 2px solid #EFEBE3;
text-align: center; text-align: center;
overflow: hidden;
position: relative;
}
#notifications #notifyMessage #notify-text #notify-progress {
width: 0;
background: #fc6399;
height: 43px;
position: absolute;
top: 0px;
}
#notifications #notifyMessage #notify-text p {
top: -15px;
display: block;
position: relative;
} }
#notifications #notifyMessage .icons { #notifications #notifyMessage .icons {
fill: #EFEBE3; fill: #EFEBE3;

8358
public/assets/scripts/Start.js
View File

File diff suppressed because one or more lines are too long

5
src/com/controllers/PageEditor.js
Unescape Escape View File

@ -19,7 +19,10 @@ export default class PostEditor {
constructor() { constructor() {
this.processing = false; this.processing = false;
let self = this; let self = this;
this.admin = new FipamoAdminAPI(null); this.admin = new FipamoAdminAPI(
null,
document.getElementById("notify-progress")
);
this.mm = new Maintenance(); this.mm = new Maintenance();
this.urlPieces = document.URL.split("/"); this.urlPieces = document.URL.split("/");
this.post = []; this.post = [];

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

@ -2,6 +2,8 @@ import anime from "animejs/lib/anime.es.js";
const notifcation = document.getElementById("notifications"); const notifcation = document.getElementById("notifications");
const notify = document.getElementById("notifyMessage"); const notify = document.getElementById("notifyMessage");
const messageText = document.getElementById("message-text"); const messageText = document.getElementById("message-text");
const notifyText = document.getElementById("notify-text");
const notifyProgress = document.getElementById("notify-progress");
const iconGood = document.getElementById("notify-good"); const iconGood = document.getElementById("notify-good");
const iconLame = document.getElementById("notify-lame"); const iconLame = document.getElementById("notify-lame");
const iconWorking = document.getElementById("notify-working"); const iconWorking = document.getElementById("notify-working");
@ -22,6 +24,12 @@ export default class Notfications {
var color = ""; var color = "";
if (status !== null) { if (status !== null) {
anime({
targets: notifyProgress,
opacity: 0,
easing: "easeInOutQuint",
duration: 500
});
if (status) { if (status) {
color = "#32cd32"; color = "#32cd32";
iconWorking.style.display = "none"; iconWorking.style.display = "none";
@ -34,6 +42,12 @@ export default class Notfications {
} else { } else {
color = "#200317"; color = "#200317";
iconWorking.style.display = "block"; iconWorking.style.display = "block";
anime({
targets: notifyProgress,
opacity: 1,
easing: "easeInOutQuint",
duration: 500
});
} }
messageText.innerHTML = text; messageText.innerHTML = text;
@ -50,7 +64,7 @@ export default class Notfications {
duration: 700 duration: 700
}); });
anime({ anime({
targets: messageText, targets: notifyText,
backgroundColor: color, backgroundColor: color,
easing: "easeInOutQuint", easing: "easeInOutQuint",
duration: 700, duration: 700,

17
src/libraries/FipamoAdminAPI.js
Unescape Escape View File

@ -44,10 +44,12 @@ class FipamoAdminAPI {
/** /**
* @constructor * @constructor
* @param {string} baseURL - url of site; uses local when empty * @param {string} baseURL - url of site; uses local when empty
* @param {object} progressBar - element to be used to display upload progress
*/ */
constructor(baseURL = null) { constructor(baseURL = null, progressBar = null) {
this.percentComplete = 0; //for later this.percentComplete = 0; //for later
this.baseURL = null; this.baseURL = null;
this.progressBar = progressBar;
this.status = false; this.status = false;
if (baseURL) this.baseURL = baseURL; if (baseURL) this.baseURL = baseURL;
//asks server if a session is active //asks server if a session is active
@ -367,7 +369,9 @@ class FipamoAdminAPI {
var self = this; var self = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.upload.onprogress = self.handleLoadProgress; request.upload.addEventListener("progress", (e) =>
self.handleLoadProgress(e, self.progressBar)
);
request.open(requestType, requestURL, true); request.open(requestType, requestURL, true);
request.onload = () => { request.onload = () => {
if (request.status == 200) { if (request.status == 200) {
@ -416,9 +420,12 @@ class FipamoAdminAPI {
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
handleLoadProgress(e) { handleLoadProgress(e, progressBar) {
this.percentComplete = Math.ceil((e.loaded / e.total) * 100); let percent = Math.ceil((e.loaded / e.total) * 100);
//pass element to display request progress //if a progress bar element is present, talk to it
if (progressBar != null) {
progressBar.style.width = percent + "%";
}
} }
} }

24
src/styles/main/_structure.sass
Unescape Escape View File

@ -36,11 +36,12 @@ svg.icons
justify-content: center justify-content: center
opacity: 1 opacity: 1
transform-style: preserve-3d transform-style: preserve-3d
transform: rotateX(-120deg) transform: rotateX(120deg)
transform-origin: 50% 0 transform-origin: 50% 0
overflow: hidden
#notify-good, #notify-lame, #notify-working #notify-good, #notify-lame, #notify-working
display: block display: block
#notify-working-box #notify-working-icon
-webkit-animation: spin 2s linear infinite -webkit-animation: spin 2s linear infinite
-moz-animation: spin 2s linear infinite -moz-animation: spin 2s linear infinite
animation: spin 2s linear infinite animation: spin 2s linear infinite
@ -55,6 +56,7 @@ svg.icons
-webkit-transform: rotate(360deg) -webkit-transform: rotate(360deg)
transform: rotate(360deg) transform: rotate(360deg)
.notify-icon .notify-icon
background: $black background: $black
padding: 8px 5px 5px 5px padding: 8px 5px 5px 5px
@ -63,15 +65,27 @@ svg.icons
width: 30px width: 30px
text-align: center text-align: center
border: 2px solid $white border: 2px solid $white
p #notify-text
color: $white color: $white
background: color.adjust($primary, $lightness: -60%) background: $black
width: 400px width: 400px
height: 28px height: 28px
padding: 15px 0 0 5px padding: 15px 0 0 0
border-radius: 0 5px 5px 0 border-radius: 0 5px 5px 0
border: 2px solid $white border: 2px solid $white
text-align: center text-align: center
overflow: hidden
position: relative
#notify-progress
width: 0
background: $highlight
height: 43px
position: absolute
top: 0px
p
top: -15px
display: block
position: relative
.icons .icons
fill: $white fill: $white

Write Preview
Loading…
Cancel
Save