From d0a85bb35e3993cbb4067aa1e07da63e848edd85 Mon Sep 17 00:00:00 2001 From: Guillaume Wuip Date: Thu, 15 Jan 2015 10:30:57 +0100 Subject: [PATCH] Add css loader for logs viewer --- static/js/controllers/logsController.js | 10 +++-- static/partials/logs.html | 10 ++++- static/style.css | 51 ++++++++++++++++++++++++- 3 files changed, 66 insertions(+), 5 deletions(-) diff --git a/static/js/controllers/logsController.js b/static/js/controllers/logsController.js index 37ab571..e7b98f1 100644 --- a/static/js/controllers/logsController.js +++ b/static/js/controllers/logsController.js @@ -15,6 +15,7 @@ //reset $rootScope.sidebar = false; + /** * attachCurrentFiles * @@ -43,12 +44,13 @@ $scope.currentFiles.forEach(function (file) { - $scope.lines = []; - if (file.selected) { ScribeAPI.log({ path : file.path }, function (data) { + if (!Array.isArray($scope.lines)) { + $scope.lines = []; + } $scope.lines = $scope.lines.concat(data); }); } @@ -84,7 +86,7 @@ $scope.showTags = 1; //Stores all lines (a line = a log) - $scope.lines = []; + $scope.lines = false; //default order by time $scope.order = "context.time"; @@ -113,6 +115,7 @@ * @type {Function} */ $scope.reload = function () { + $scope.lines = false; attachCurrentFiles(logs.getLogs()); getCurrentLogs(); }; @@ -127,6 +130,7 @@ //watch current files for changes //as user can select / unselect files in sidebar $scope.$watch('currentFiles', function (value, old) { + $scope.lines = false; if (value !== old) { getCurrentLogs(); } diff --git a/static/partials/logs.html b/static/partials/logs.html index cd33a28..61d2144 100644 --- a/static/partials/logs.html +++ b/static/partials/logs.html @@ -16,7 +16,15 @@ > -
+
+
+
+
+
+
+
+ +

Select file(s) from

sidebar to display

diff --git a/static/style.css b/static/style.css index 18db44c..0e457a1 100644 --- a/static/style.css +++ b/static/style.css @@ -517,7 +517,7 @@ body { white-space: pre-wrap; border-left: 1px solid #222; } -.logs__empty { +.logs__empty, .logs__loader { text-align: center; width: 100%; color: #e2e2e2; @@ -537,6 +537,7 @@ body { line-height: 12px; } + /** * ngToggle */ @@ -800,3 +801,51 @@ button.toggle-button.active { .log__time_122 { min-width: 122px; } + +/* + * Loader + * @see https://github.com/tobiasahlin/SpinKit + */ +.sk-spinner-wave.sk-spinner { + margin: 0 auto; + width: 50px; + height: 30px; + text-align: center; + font-size: 10px; } +.sk-spinner-wave div { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; + animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } +.sk-spinner-wave .sk-rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } +.sk-spinner-wave .sk-rect3 { + -webkit-animation-delay: -1s; + animation-delay: -1s; } +.sk-spinner-wave .sk-rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } +.sk-spinner-wave .sk-rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + +@-webkit-keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } } + +@keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); } + + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); } }