From e88b493136f2378ff403d920217e9a5af1231ee3 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 10 Oct 2013 11:10:32 +0200 Subject: Fixed external storage status indicator in admin page - Fixes #5241 - Fixed indicator to appear, its selector was wrong - Added spinner while saving an entry's settings - Removed ajax "async: false" that blocked the browser while saving --- apps/files_external/css/settings.css | 7 +++-- apps/files_external/js/settings.js | 51 ++++++++++++++++++++---------------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css index f2f40247b28..74b14028468 100644 --- a/apps/files_external/css/settings.css +++ b/apps/files_external/css/settings.css @@ -4,7 +4,9 @@ td.status > span { width: 16px; vertical-align: text-bottom; } - +span.loading{ + background-size: 16px 16px; +} span.success { background: #37ce02; border-radius: 8px; @@ -12,9 +14,6 @@ span.success { span.error { background: #ce3702; } -span.waiting { - background: none; -} td.mountPoint, td.backend { width:10em; } td.remove>img { visibility:hidden; padding-top:0.8em; } diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js index 3e605c59a93..3e92bc87e85 100644 --- a/apps/files_external/js/settings.js +++ b/apps/files_external/js/settings.js @@ -1,10 +1,23 @@ +(function(){ + +function updateStatus(statusEl, result){ + statusEl.removeClass('success error loading'); + if (result && result.status == 'success' && result.data.message) { + statusEl.addClass('success'); + return true; + } else { + statusEl.addClass('error'); + return false; + } +} + OC.MountConfig={ saveStorage:function(tr) { var mountPoint = $(tr).find('.mountPoint input').val(); if (mountPoint == '') { return false; } - var statusSpan = $(tr).find('.status span'); + var statusSpan = $(tr).closest('tr').find('.status span'); var backendClass = $(tr).find('.backend').data('class'); var configuration = $(tr).find('.configuration input'); var addMountPoint = true; @@ -58,6 +71,7 @@ OC.MountConfig={ } users.push(applicable); } + statusSpan.addClass('loading').removeClass('error success'); $.ajax({type: 'POST', url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'), data: { @@ -68,15 +82,11 @@ OC.MountConfig={ applicable: applicable, isPersonal: isPersonal }, - async: false, success: function(result) { - statusSpan.removeClass(); - if (result && result.status == 'success' && result.data.message) { - status = true; - statusSpan.addClass('success'); - } else { - statusSpan.addClass('error'); - } + status = updateStatus(statusSpan, result); + }, + error: function(result){ + status = updateStatus(statusSpan, result); } }); }); @@ -93,8 +103,7 @@ OC.MountConfig={ mountType: mountType, applicable: applicable, isPersonal: isPersonal - }, - async: false + } }); }); var mountType = 'user'; @@ -108,14 +117,14 @@ OC.MountConfig={ mountType: mountType, applicable: applicable, isPersonal: isPersonal - }, - async: false + } }); }); } else { var isPersonal = true; var mountType = 'user'; var applicable = OC.currentUser; + statusSpan.addClass('loading').removeClass('error success'); $.ajax({type: 'POST', url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'), data: { @@ -126,15 +135,11 @@ OC.MountConfig={ applicable: applicable, isPersonal: isPersonal }, - async: false, success: function(result) { - statusSpan.removeClass(); - if (result && result.status == 'success' && result.data.message) { - status = true; - statusSpan.addClass('success'); - } else { - statusSpan.addClass('error'); - } + status = updateStatus(statusSpan, result); + }, + error: function(result){ + status = updateStatus(statusSpan, result); } }); } @@ -157,7 +162,7 @@ $(document).ready(function() { $(tr).find('.mountPoint input').val(suggestMountPoint(selected)); } $(tr).addClass(backendClass); - $(tr).find('.status').append(''); + $(tr).find('.status').append(''); $(tr).find('.backend').data('class', backendClass); var configurations = $(this).data('configurations'); var td = $(tr).find('td.configuration'); @@ -293,3 +298,5 @@ $(document).ready(function() { }); }); + +})(); -- cgit v1.2.3 From bced346c3b07fc6549f216f4db20c52e827d3cfa Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Fri, 11 Oct 2013 12:36:30 +0200 Subject: Now using smaller spinner image for status indicator To make the status indicator appear smaller, even in IE8 that doesn't support background-size, there is no a smaller animated gif "loading-small" for that purpose. --- apps/files_external/css/settings.css | 3 --- apps/files_external/js/settings.js | 6 +++--- core/css/styles.css | 1 + core/img/loading-small.gif | Bin 0 -> 1294 bytes 4 files changed, 4 insertions(+), 6 deletions(-) create mode 100644 core/img/loading-small.gif diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css index 74b14028468..0ebae9d82be 100644 --- a/apps/files_external/css/settings.css +++ b/apps/files_external/css/settings.css @@ -4,9 +4,6 @@ td.status > span { width: 16px; vertical-align: text-bottom; } -span.loading{ - background-size: 16px 16px; -} span.success { background: #37ce02; border-radius: 8px; diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js index 3e92bc87e85..886c324e338 100644 --- a/apps/files_external/js/settings.js +++ b/apps/files_external/js/settings.js @@ -1,7 +1,7 @@ (function(){ function updateStatus(statusEl, result){ - statusEl.removeClass('success error loading'); + statusEl.removeClass('success error loading-small'); if (result && result.status == 'success' && result.data.message) { statusEl.addClass('success'); return true; @@ -71,7 +71,7 @@ OC.MountConfig={ } users.push(applicable); } - statusSpan.addClass('loading').removeClass('error success'); + statusSpan.addClass('loading-small').removeClass('error success'); $.ajax({type: 'POST', url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'), data: { @@ -124,7 +124,7 @@ OC.MountConfig={ var isPersonal = true; var mountType = 'user'; var applicable = OC.currentUser; - statusSpan.addClass('loading').removeClass('error success'); + statusSpan.addClass('loading-small').removeClass('error success'); $.ajax({type: 'POST', url: OC.filePath('files_external', 'ajax', 'addMountPoint.php'), data: { diff --git a/core/css/styles.css b/core/css/styles.css index be53b67c858..a0de21f3ac6 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -745,6 +745,7 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin span.ui-icon {float: left; margin: 3px 7px 30px 0;} .loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; } +.loading-small { background: url('../img/loading-small.gif') no-repeat center; cursor: wait; } .move2trash { /* decrease spinner size */ width: 16px; height: 16px; diff --git a/core/img/loading-small.gif b/core/img/loading-small.gif new file mode 100644 index 00000000000..5025f0bedeb Binary files /dev/null and b/core/img/loading-small.gif differ -- cgit v1.2.3