forked from projects/fipamo
implemented progress upload indicator in notifications
This commit is contained in:
parent
601fd6b1ab
commit
53864becc1
11 changed files with 83 additions and 8379 deletions
|
@ -19,9 +19,14 @@
|
|||
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/></svg>
|
||||
</div>
|
||||
<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>
|
||||
<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 id="main-content" class="main-container">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div id="dash-login">
|
||||
<div id="dash-form" class="dash-form">
|
||||
<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="password" name="password" class="form-control" placeholder="Password" required">
|
||||
<button id="login-btn" class='login-btn' type='submit'>
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block mainContent %}
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
<div id="dash-login">
|
||||
<div id="dash-reset" class="dash-reset">
|
||||
<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_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required">
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block mainContent %}
|
||||
|
|
|
@ -1941,13 +1941,14 @@ svg.icons {
|
|||
justify-content: center;
|
||||
opacity: 1;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(-120deg);
|
||||
transform: rotateX(120deg);
|
||||
transform-origin: 50% 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#notifications #notifyMessage #notify-good, #notifications #notifyMessage #notify-lame, #notifications #notifyMessage #notify-working {
|
||||
display: block;
|
||||
}
|
||||
#notifications #notifyMessage #notify-working-box {
|
||||
#notifications #notifyMessage #notify-working-icon {
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
|
@ -1977,15 +1978,29 @@ svg.icons {
|
|||
text-align: center;
|
||||
border: 2px solid #EFEBE3;
|
||||
}
|
||||
#notifications #notifyMessage p {
|
||||
#notifications #notifyMessage #notify-text {
|
||||
color: #EFEBE3;
|
||||
background: black;
|
||||
background: #32302f;
|
||||
width: 400px;
|
||||
height: 28px;
|
||||
padding: 15px 0 0 5px;
|
||||
padding: 15px 0 0 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
border: 2px solid #EFEBE3;
|
||||
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 {
|
||||
fill: #EFEBE3;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19,7 +19,10 @@ export default class PostEditor {
|
|||
constructor() {
|
||||
this.processing = false;
|
||||
let self = this;
|
||||
this.admin = new FipamoAdminAPI(null);
|
||||
this.admin = new FipamoAdminAPI(
|
||||
null,
|
||||
document.getElementById("notify-progress")
|
||||
);
|
||||
this.mm = new Maintenance();
|
||||
this.urlPieces = document.URL.split("/");
|
||||
this.post = [];
|
||||
|
|
|
@ -2,6 +2,8 @@ import anime from "animejs/lib/anime.es.js";
|
|||
const notifcation = document.getElementById("notifications");
|
||||
const notify = document.getElementById("notifyMessage");
|
||||
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 iconLame = document.getElementById("notify-lame");
|
||||
const iconWorking = document.getElementById("notify-working");
|
||||
|
@ -22,6 +24,12 @@ export default class Notfications {
|
|||
|
||||
var color = "";
|
||||
if (status !== null) {
|
||||
anime({
|
||||
targets: notifyProgress,
|
||||
opacity: 0,
|
||||
easing: "easeInOutQuint",
|
||||
duration: 500
|
||||
});
|
||||
if (status) {
|
||||
color = "#32cd32";
|
||||
iconWorking.style.display = "none";
|
||||
|
@ -34,6 +42,12 @@ export default class Notfications {
|
|||
} else {
|
||||
color = "#200317";
|
||||
iconWorking.style.display = "block";
|
||||
anime({
|
||||
targets: notifyProgress,
|
||||
opacity: 1,
|
||||
easing: "easeInOutQuint",
|
||||
duration: 500
|
||||
});
|
||||
}
|
||||
messageText.innerHTML = text;
|
||||
|
||||
|
@ -50,7 +64,7 @@ export default class Notfications {
|
|||
duration: 700
|
||||
});
|
||||
anime({
|
||||
targets: messageText,
|
||||
targets: notifyText,
|
||||
backgroundColor: color,
|
||||
easing: "easeInOutQuint",
|
||||
duration: 700,
|
||||
|
|
|
@ -44,10 +44,12 @@ class FipamoAdminAPI {
|
|||
/**
|
||||
* @constructor
|
||||
* @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.baseURL = null;
|
||||
this.progressBar = progressBar;
|
||||
this.status = false;
|
||||
if (baseURL) this.baseURL = baseURL;
|
||||
//asks server if a session is active
|
||||
|
@ -367,7 +369,9 @@ class FipamoAdminAPI {
|
|||
var self = this;
|
||||
return new Promise(function (resolve, reject) {
|
||||
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.onload = () => {
|
||||
if (request.status == 200) {
|
||||
|
@ -416,9 +420,12 @@ class FipamoAdminAPI {
|
|||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handleLoadProgress(e) {
|
||||
this.percentComplete = Math.ceil((e.loaded / e.total) * 100);
|
||||
//pass element to display request progress
|
||||
handleLoadProgress(e, progressBar) {
|
||||
let percent = Math.ceil((e.loaded / e.total) * 100);
|
||||
//if a progress bar element is present, talk to it
|
||||
if (progressBar != null) {
|
||||
progressBar.style.width = percent + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -36,11 +36,12 @@ svg.icons
|
|||
justify-content: center
|
||||
opacity: 1
|
||||
transform-style: preserve-3d
|
||||
transform: rotateX(-120deg)
|
||||
transform: rotateX(120deg)
|
||||
transform-origin: 50% 0
|
||||
overflow: hidden
|
||||
#notify-good, #notify-lame, #notify-working
|
||||
display: block
|
||||
#notify-working-box
|
||||
#notify-working-icon
|
||||
-webkit-animation: spin 2s linear infinite
|
||||
-moz-animation: spin 2s linear infinite
|
||||
animation: spin 2s linear infinite
|
||||
|
@ -55,6 +56,7 @@ svg.icons
|
|||
-webkit-transform: rotate(360deg)
|
||||
transform: rotate(360deg)
|
||||
|
||||
|
||||
.notify-icon
|
||||
background: $black
|
||||
padding: 8px 5px 5px 5px
|
||||
|
@ -63,15 +65,27 @@ svg.icons
|
|||
width: 30px
|
||||
text-align: center
|
||||
border: 2px solid $white
|
||||
p
|
||||
#notify-text
|
||||
color: $white
|
||||
background: color.adjust($primary, $lightness: -60%)
|
||||
background: $black
|
||||
width: 400px
|
||||
height: 28px
|
||||
padding: 15px 0 0 5px
|
||||
padding: 15px 0 0 0
|
||||
border-radius: 0 5px 5px 0
|
||||
border: 2px solid $white
|
||||
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
|
||||
fill: $white
|
||||
|
|
Loading…
Reference in a new issue