Commit 31a7c488 authored by Andreas Gärtner's avatar Andreas Gärtner

Task #15681: Feature: Replace the loading mask with a loading indicator.

The loading mask has been replaced with a loading indicator. On devices
or browser windows with a screen width < 720px the loading indicator
will be rendered above the tabbar at left bottom position. Otherwise it
will appear left aligned inside the tabbar.
parent e904acd5
......@@ -296,23 +296,48 @@ Ext.application({
}
},
showMask: function (mask, duration) {
var minimumDuration = 800;
Ext.Viewport.setMasked(mask);
this.maskedMessage = mask.message;
var hideLoadMask = Ext.Function.createDelayed(function (message) {
if (this.maskedMessage === message) {
Ext.Viewport.setMasked(false);
}
}, minimumDuration, this, [mask.message]);
Ext.defer(hideLoadMask, (duration || 5000) - minimumDuration);
return hideLoadMask;
},
/**
* Wrapper for an invidivudal LoadMask
* Wrapper for an individual loading mask
*/
showLoadMask: function (message, duration) {
var minimumDuration = 800;
Ext.Viewport.setMasked({
return this.showMask({
xtype: 'loadmask',
message: message || ""
});
}, duration);
},
var hideLoadMask = Ext.Function.createDelayed(function () {
Ext.Viewport.setMasked(false);
}, minimumDuration);
Ext.defer(hideLoadMask, (duration || 5000) - minimumDuration);
/**
* Wrapper for an individual load indicator
*/
showLoadIndicator: function (message, duration) {
var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var indicatorCls = 'x-loading-mask customLoadingIndicator ' +
(screenWidth < 720 ? 'overlayLoadingIndicator' : 'toolbarLoadingIndicator');
return hideLoadMask;
return this.showMask({
xtype: 'loadmask',
baseCls: '',
top: 'initial',
right: 'initial',
cls: indicatorCls,
message: message || '',
bottom: screenWidth < 720 ? '60px' : '4px'
}, duration);
},
/**
......
......@@ -105,16 +105,5 @@ Ext.define("ARSnova.controller.Feedback", {
fP.activeItem = 1;
}
tP.setActiveItem(fP);
},
statistic: function () {
ARSnova.app.showLoadMask("Erzeuge die Grafik...");
var fP = ARSnova.app.mainTabPanel.tabPanel.feedbackTabPanel;
fP.statisticPanel.backButton.show();
ARSnova.app.mainTabPanel.tabPanel.setActiveItem(fP);
ARSnova.app.mainTabPanel.tabPanel.feedbackTabPanel.addListener('deactivate', function (panel) {
panel.statisticPanel.backButton.hide();
}, this, {single: true});
}
});
......@@ -285,9 +285,16 @@ Ext.define("ARSnova.controller.Questions", {
return;
}
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SAVE);
question.saveSkillQuestion({
success: options.successFunc,
failure: options.failureFunc
success: function () {
options.successFunc();
hideLoadMask();
},
failure: function () {
options.failureFunc();
hideLoadMask();
}
});
},
......
......@@ -50,6 +50,7 @@ Ext.define("ARSnova.controller.Sessions", {
return;
}
/* do login stuff */
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
var res = ARSnova.app.sessionModel.checkSessionLogin(options.keyword, {
success: function (obj) {
// check if user is creator of this session
......@@ -95,12 +96,15 @@ Ext.define("ARSnova.controller.Sessions", {
},
notFound: function () {
Ext.Msg.alert(Messages.NOTIFICATION, Messages.SESSION_NOT_FOUND);
hideLoadMask();
},
forbidden: function () {
Ext.Msg.alert(Messages.NOTIFICATION, Messages.SESSION_LOCKED);
hideLoadMask();
},
failure: function () {
Ext.Msg.alert(Messages.NOTIFICATION, Messages.CONNECTION_PROBLEM);
hideLoadMask();
}
});
},
......@@ -188,7 +192,6 @@ Ext.define("ARSnova.controller.Sessions", {
tabPanel.speakerTabPanel = Ext.create('ARSnova.view.speaker.TabPanel');
tabPanel.insert(1, tabPanel.speakerTabPanel);
} else {
hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN, 3000);
tabPanel.speakerTabPanel.tab.show();
tabPanel.speakerTabPanel.renew();
}
......@@ -382,7 +385,7 @@ Ext.define("ARSnova.controller.Sessions", {
changeRole: function () {
var tabPanel = ARSnova.app.mainTabPanel.tabPanel;
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.CHANGE_ROLE + '...', 2000);
var reloadSession = function (animationDirection) {
ARSnova.app.socket.setSession(null);
......
......@@ -95,6 +95,7 @@
/* LOAD MASK */
LOAD_MASK: "Lade Daten...",
LOAD_MASK_LOGIN: "Login...",
LOAD_MASK_SAVE: 'Speichern...',
LOAD_MASK_SEARCH: "Suche Sessions...",
LOAD_MASK_SEARCH_QUESTIONS: "Suche Fragen...",
LOAD_MASK_SEARCH_COURSES: "Suche Kurse...",
......@@ -662,6 +663,7 @@
/* LOAD MASK */
LOAD_MASK: "Loading...",
LOAD_MASK_LOGIN: "Login...",
LOAD_MASK_SAVE: 'Saving...',
LOAD_MASK_SEARCH: "Looking for sessions...",
LOAD_MASK_SEARCH_QUESTIONS: "Looking for questions...",
LOAD_MASK_SEARCH_COURSES: "Looking for courses...",
......
......@@ -46,6 +46,15 @@ Ext.define('ARSnova.proxy.RestProxy', {
}, this, {single: true});
},
/**
* @param start index
* @param end index
* @return formatted range header string
*/
constructRangeRequestString: function (offset, limit) {
return 'items=' + offset + '-' + limit;
},
/**
* Search for a session with specified keyword
* @param keyword of session
......@@ -134,7 +143,7 @@ Ext.define('ARSnova.proxy.RestProxy', {
* @return session-objects, if found
* @return false, if nothing found
*/
getMySessions: function (callbacks, sortby) {
getMySessions: function (callbacks, sortby, offset, limit) {
this.arsjax.request({
url: "session/",
method: "GET",
......@@ -142,7 +151,6 @@ Ext.define('ARSnova.proxy.RestProxy', {
statusonly: true,
sortby: sortby
},
success: callbacks.success,
204: callbacks.empty,
......
......@@ -199,7 +199,7 @@ Ext.define('ARSnova.view.diagnosis.StatisticsPanel', {
},
updateData: function () {
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK);
this.statisticsStore.clearData();
this.getStatistics().then(hideLoadMask, hideLoadMask); // hide mask on success and on error
},
......
......@@ -381,7 +381,7 @@ Ext.define('ARSnova.view.feedbackQuestions.QuestionsPanel', {
},
getFeedbackQuestions: function () {
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOADING_NEW_QUESTIONS);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOADING_NEW_QUESTIONS);
ARSnova.app.questionModel.getInterposedQuestions(sessionStorage.getItem('keyword'), {
success: function (response) {
var questions = Ext.decode(response.responseText);
......
......@@ -276,7 +276,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
},
onSubmit: function () {
ARSnova.app.showLoadMask(Messages.LOGIN_LOAD_MASK);
ARSnova.app.showLoadIndicator(Messages.LOGIN_LOAD_MASK);
// delete the textfield-focus, to hide the numeric keypad on phones
this.down('textfield').blur();
......@@ -323,7 +323,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
var me = this;
var promise = new RSVP.Promise();
var hideLoadingMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
var hideLoadingMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
ARSnova.app.restProxy.getMyVisitedSessions({
success: function (sessions) {
......@@ -359,7 +359,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
var me = this;
var promise = new RSVP.Promise();
var hideLoadingMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
var hideLoadingMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
ARSnova.app.sessionModel.getMySessions({
success: function (response) {
......@@ -400,7 +400,7 @@ Ext.define('ARSnova.view.home.HomePanel', {
form.show();
var buttonHandler = function (options) {
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
ARSnova.app.getController('Sessions').login({
keyword: options.config.sessionObj.keyword
});
......
......@@ -217,7 +217,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
scope: this,
loadsuccess: function (data) {
if (!Ext.os.is.iOS) {
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SESSION_IMPORT, 240000);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SESSION_IMPORT, 240000);
try {
var n = data.indexOf("base64,");
data = decodeURIComponent(window.escape(atob(data.substring(n + 7)))); // remove disturbing prefix
......@@ -423,7 +423,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
var me = this;
var promise = new RSVP.Promise();
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
ARSnova.app.sessionModel.getMySessions({
success: function (response) {
var sessions = Ext.decode(response.responseText);
......@@ -438,7 +438,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
}
var sessionButtonHandler = function (options) {
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
localStorage.setItem('role', ARSnova.app.USER_ROLE_SPEAKER);
ARSnova.app.userRole = ARSnova.app.USER_ROLE_SPEAKER;
ARSnova.app.setWindowTitle();
......@@ -520,7 +520,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
return promise;
}
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
ARSnova.app.sessionModel.getMyPublicPoolSessions({
success: function (response) {
var sessions = Ext.decode(response.responseText);
......@@ -535,7 +535,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
}
var sessionButtonHandler = function (options) {
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
localStorage.setItem('role', ARSnova.app.USER_ROLE_SPEAKER);
ARSnova.app.setWindowTitle();
......@@ -599,7 +599,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
loadVisitedSessions: function () {
var me = this;
var hideLoadingMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
var hideLoadingMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
var promise = new RSVP.Promise();
ARSnova.app.restProxy.getMyVisitedSessions({
......@@ -612,7 +612,7 @@ Ext.define('ARSnova.view.home.MySessionsPanel', {
panel.lastVisitedSessionsForm.show();
var sessionButtonHandler = function (options) {
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
localStorage.setItem('lastVisitedRole', ARSnova.app.USER_ROLE_SPEAKER);
localStorage.setItem('role', ARSnova.app.USER_ROLE_STUDENT);
ARSnova.app.userRole = ARSnova.app.USER_ROLE_STUDENT;
......
......@@ -303,7 +303,7 @@ Ext.define('ARSnova.view.home.PublicPoolSingleItemPanel', {
duration: 700
});
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_LOGIN);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_LOGIN);
ARSnova.app.getController('Auth').roleSelect({
mode: ARSnova.app.USER_ROLE_STUDENT
});
......
......@@ -135,7 +135,7 @@ Ext.define('ARSnova.view.home.SessionExportListPanel', {
var me = this;
var promise = new RSVP.Promise();
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
ARSnova.app.sessionModel.getMySessions({
success: function (response) {
......@@ -168,7 +168,7 @@ Ext.define('ARSnova.view.home.SessionExportListPanel', {
var me = this;
var promise = new RSVP.Promise();
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH);
ARSnova.app.sessionModel.getMyPublicPoolSessions({
success: function (response) {
......
......@@ -239,7 +239,7 @@ Ext.define('ARSnova.view.speaker.InClass', {
"<br>" + Messages.DELETE_SESSION_NOTICE;
Ext.Msg.confirm(Messages.DELETE_SESSION_TITLE, msg, function (answer) {
if (answer === 'yes') {
ARSnova.app.showLoadMask(Messages.LOAD_MASK_SESSION_DELETE);
ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SESSION_DELETE);
ARSnova.app.sessionModel.destroy(sessionStorage.getItem('keyword'), {
success: function () {
ARSnova.app.mainTabPanel.tabPanel.on('activeitemchange', function () {
......
......@@ -491,7 +491,7 @@ Ext.define('ARSnova.view.speaker.QuestionDetailsPanel', {
if (newValue === 0 && typeof this.questionObj.showStatistic === "undefined" ||
newValue === this.questionObj.showStatistic) return;
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
var question = Ext.create('ARSnova.model.Question', this.questionObj);
switch (newValue) {
......@@ -536,7 +536,7 @@ Ext.define('ARSnova.view.speaker.QuestionDetailsPanel', {
return;
}
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
var question = Ext.create('ARSnova.model.Question', this.questionObj);
switch (newValue) {
......
......@@ -59,7 +59,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseEditButtons', {
}
var me = this;
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
var question = Ext.create('ARSnova.model.Question', this.questionObj);
switch (newValue) {
......@@ -106,7 +106,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseEditButtons', {
}
var me = this;
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_ACTIVATION);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_ACTIVATION);
var question = Ext.create('ARSnova.model.Question', this.questionObj);
switch (newValue) {
......
......@@ -184,7 +184,7 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
},
getAllSkillQuestions: function () {
var hideIndicator = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH_QUESTIONS);
var hideIndicator = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH_QUESTIONS);
this.getController().getQuestions(sessionStorage.getItem("keyword"), {
success: function (response) {
......
......@@ -82,7 +82,7 @@ Ext.define('ARSnova.view.speaker.form.ImageUploadPanel', {
scope: this,
loadsuccess: function (dataurl, e) {
var self = this;
var mask = ARSnova.app.showLoadMask(Messages.COMPRESSING_MASK);
var mask = ARSnova.app.showLoadIndicator(Messages.COMPRESSING_MASK);
self.tryToCompress(dataurl, function (response) {
mask();
if (!response) {
......
......@@ -107,7 +107,7 @@ Ext.define('ARSnova.view.user.QuestionPanel', {
getUnansweredSkillQuestions: function () {
var self = this;
var hideLoadMask = ARSnova.app.showLoadMask(Messages.LOAD_MASK_SEARCH_QUESTIONS);
var hideLoadMask = ARSnova.app.showLoadIndicator(Messages.LOAD_MASK_SEARCH_QUESTIONS);
this.getQuestionLoader()(sessionStorage.getItem("keyword"), {
success: function (questions) {
var userQuestionsPanel = ARSnova.app.mainTabPanel.tabPanel.userQuestionsPanel;
......
......@@ -24,48 +24,93 @@
background: rgba(0,0,0,0.3) center center no-repeat;
.x-mask-message {
color: rgba(230,230,230,0.9);
color: rgba(255,255,255,0.9);
font-weight: normal;
}
.x-loading-spinner {
-webkit-animation-duration: 0.6s;
-webkit-animation-duration: 0.8s;
-webkit-animation-name: x-loading-spinner-rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-duration: 0.6s;
animation-duration: 0.8s;
animation-name: x-loading-spinner-rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
&> span.x-loading-top {
background-color: rgba(215,215,215,0.99);
&:before { background-color: rgba(215,215,215,0.15); }
&:after { background-color: rgba(215,215,215,0.9); }
background-color: rgba(255,255,255,0.99);
&:before { background-color: rgba(255,255,255,0.15); }
&:after { background-color: rgba(255,255,255,0.9); }
}
&> span.x-loading-right {
background-color: rgba(215,215,215,0.25);
&:before { background-color: rgba(215,215,215,0.3); }
&:after { background-color: rgba(215,215,215,0.2); }
background-color: rgba(255,255,255,0.25);
&:before { background-color: rgba(255,255,255,0.3); }
&:after { background-color: rgba(255,255,255,0.2); }
}
&> span.x-loading-left {
background-color: rgba(215,215,215,0.7);
&:before { background-color: rgba(215,215,215,0.8); }
&:after { background-color: rgba(215,215,215,0.6); }
background-color: rgba(255,255,255,0.7);
&:before { background-color: rgba(255,255,255,0.8); }
&:after { background-color: rgba(255,255,255,0.6); }
}
&> span.x-loading-bottom {
background-color: rgba(215,215,215,0.4);
&:before { background-color: rgba(215,215,215,0.5); }
&:after { background-color: rgba(215,215,215,0.35); }
background-color: rgba(255,255,255,0.4);
&:before { background-color: rgba(255,255,255,0.5); }
&:after { background-color: rgba(255,255,255,0.35); }
}
}
}
}
.x-loading-mask.customLoadingIndicator {
margin-left: 5px;
&.toolbarLoadingIndicator {
.x-mask-inner {
background: none;
}
}
&.overlayLoadingIndicator {
.x-mask-message {
color: white;
}
}
.x-mask-inner {
height: 45px;
.x-mask-message {
display: inline-block;
position: relative;
margin-right: 10px;
margin-left: 50px;
top: 12.5px;
}
.x-loading-spinner-outer {
display: inline-block;
position: absolute;
top: 4px;
.x-loading-spinner {
-webkit-transform-origin: 0.5em 0.4em;
transform-origin: 0.5em 0.4em;
span, span:before, span:after {
-webkit-transform-origin: 0.05em 0.4em;
transform-origin: 0.05em 0.4em;
height: 0.2em;
}
}
}
}
}
@keyframes x-loading-spinner-rotate{
0%, 8.32% {
transform: rotate(0deg);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment