Merge pull request #2042 from emanuelschuetze/spinner

Template improvements

openslides/core/static/css/app.css

@@ -545,6 +545,10 @@ img {
     margin-top: 25px;
 }
 
+.spacer-bottom {
+    margin-bottom: 7px;
+}
+
 .spacer-right {
     margin-right: 5px;
 }

openslides/core/static/js/core/site.js

@@ -432,6 +432,26 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
+.directive('routeLoadingIndicator', [
+    '$rootScope',
+    '$state',
+    function($rootScope, $state) {
+        return {
+            restrict: 'E',
+            template: "<div class='header spacer-bottom' ng-if='isRouteLoading'><div class='title'><h1><translate>Loading ...</translate> <i class='fa fa-spinner fa-pulse'></i></h1></div></div>",
+            link: function(scope, elem, attrs) {
+                scope.isRouteLoading = false;
+                $rootScope.$on('$stateChangeStart', function() {
+                    scope.isRouteLoading = true;
+                });
+                $rootScope.$on('$stateChangeSuccess', function() {
+                    scope.isRouteLoading = false;
+                });
+            }
+        };
+    }
+])
+
 .controller('MainMenuCtrl', [
     '$scope',
     'mainMenu',

openslides/core/static/templates/index.html

@@ -161,7 +161,8 @@
   <div class="containerOS">
     <div class="col1" ng-class="isProjectorSidebar ? 'min' : 'max'">
         <!-- dynamic views -->
-        <div ui-view ng-cloak></div>
+        <route-loading-indicator></route-loading-indicator>
+        <div ui-view ng-if="!isRouteLoading"></div>
         <!-- footer -->
         <div id="footer">
           &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |

openslides/core/static/templates/projector.html

@@ -24,12 +24,9 @@
 <div id="header">
   <img ng-if="config('projector_enable_logo')" id="logo" src="/static/img/logo-projector.png" alt="OpenSlides" />
   <div ng-if="config('projector_enable_title')" id="eventdata">
-    <div class="title">
-      {{ config('general_event_name') }}
-    </div>
-    <div ng-if="config('general_event_description')" class="description">
-      {{ config('general_event_description') }}
-    </div>
+    <div class="title" ng-bind-html="config('general_event_name')"></div>
+    <div ng-if="config('general_event_description')" class="description"
+        ng-bind-html="config('general_event_description')"></div>
   </div>
 </div>