Configurable projector header image

CHANGELOG

@@ -16,13 +16,13 @@ Motions:
   settings [#3187].
 - Fixed empty motion comment field in motion update form [#3194].
 - Removed server side image to base64 transformation and
-  added local transformation [#2705]
+  added local transformation [#3181]
 - Added support for export motions in a zip archive [#3189].
 
 Core:
 - No reload on logoff. OpenSlides is now a full single page
   application [#3172].
-- Adding support for choosing image files as logos [#3184].
+- Adding support for choosing image files as logos [#3184, #3207].
 - Fixing error when clearing empty chat [#3199].
 
 Users:

openslides/core/config_variables.py

@@ -139,8 +139,8 @@ def get_config_variables():
         default_value=True,
         input_type='boolean',
         label='Show logo on projector',
-        help_text='You can replace the logo. Just copy a file to '
+        help_text='You can replace the logo by uploading an image and set it as '
-                  '"static/img/logo-projector.png" in your OpenSlides data path.',
+                  'the "main projector logo" in "files".',
         weight=150,
         group='Projector')
 
@@ -152,6 +152,14 @@ def get_config_variables():
         weight=155,
         group='Projector')
 
+    yield ConfigVariable(
+        name='projector_enable_clock',
+        default_value=True,
+        input_type='boolean',
+        label='Show the clock on projector',
+        weight=156,
+        group='Projector')
+
     yield ConfigVariable(
         name='projector_header_backgroundcolor',
         default_value='#317796',
@@ -213,7 +221,9 @@ def get_config_variables():
     # Logos.
     yield ConfigVariable(
         name='logos_available',
-        default_value=['logo_projector_main'],
+        default_value=[
+            'logo_projector_main',
+            'logo_projector_header'],
         weight=300,
         group='Logo',
         hidden=True)
@@ -227,3 +237,13 @@ def get_config_variables():
         weight=301,
         group='Logo',
         hidden=True)
+
+    yield ConfigVariable(
+        name='logo_projector_header',
+        default_value={
+            'display_name': 'Projector header image',
+            'path': ''},
+        input_type='logo',
+        weight=302,
+        group='Logo',
+        hidden=True)

openslides/core/static/css/projector.css

@@ -94,6 +94,8 @@ body {
 
 /*** HEADER ***/
 #header {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
     box-shadow: 0 0 7px rgba(0,0,0,0.6);
     height: 70px;
     margin-bottom: 20px;

openslides/core/static/js/core/base.js

@@ -595,9 +595,11 @@ angular.module('OpenSlidesApp.core', [
                 });
             },
             getFromKey: function (key) {
-                var config = Config.get(key).value;
+                var config = Config.get(key);
-                config.key = key;
+                if (config) {
-                return config;
+                    config.value.key = key;
+                    return config.value;
+                }
             },
             isMediafileUsedAsLogo: function (mediafile) {
                 return _.find(this.getAll(), function (logoPlaceholder) {

openslides/core/static/js/core/projector.js

@@ -158,9 +158,12 @@ angular.module('OpenSlidesApp.core.projector', ['OpenSlidesApp.core'])
 
         var setElements = function (projector) {
             $scope.elements = [];
-            _.forEach(slides.getElements(projector), function(element) {
+            _.forEach(slides.getElements(projector), function (element) {
                 if (!element.error) {
+                    // Exclude the clock if it should be disabled.
+                    if (Config.get('projector_enable_clock').value || element.name !== 'core/clock') {
                         $scope.elements.push(element);
+                    }
                 } else {
                     console.error("Error for slide " + element.name + ": " + element.error);
                 }
@@ -244,10 +247,11 @@ angular.module('OpenSlidesApp.core.projector', ['OpenSlidesApp.core'])
             }
         });
 
-        $scope.getLogo = function (key) {
+        $scope.$watch(function () {
-            var logo = Logos.getFromKey(key);
+            return Config.lastModified('projector_enable_clock');
-            return logo ? logo.path : void 0;
+        }, function () {
-        };
+            setElements($scope.projector);
+        });
 
         $scope.$on('$destroy', function() {
             if ($scope.broadcastDeregister) {

openslides/core/static/templates/projector.html

@@ -31,10 +31,15 @@
     }
   </style>
 
+  <style ng-if="config('logo_projector_header').path">
+    #header {
+      background-image: url({{ config('logo_projector_header').path }});
+    }
+  </style>
 
   <div id="header">
     <img ng-if="config('projector_enable_logo')" id="logo" alt="OpenSlides"
-      ng-src="{{ getLogo('logo_projector_main') || '/static/img/logo-projector.png' }}"/>
+      ng-src="{{ config('logo_projector_main').path || '/static/img/logo-projector.png' }}"/>
     <div ng-if="config('projector_enable_title')" id="eventdata">
       <div class="title" ng-class="{ 'titleonly': !config('general_event_description') }"
           ng-bind-html="config('general_event_name')"></div>

openslides/mediafiles/static/js/mediafiles/list.js

@@ -267,6 +267,11 @@ angular.module('OpenSlidesApp.mediafiles.list', [
             });
             return _.includes(allUrls, logo.path);
         };
+        $scope.hasProjectorHeaderLogo = function (mediafile) {
+            return _.some(mediafile.getLogos(), function (logo) {
+                return logo.key === 'logo_projector_header';
+            });
+        };
     }
 ])
 

openslides/mediafiles/static/templates/mediafiles/mediafile-list.html

@@ -278,7 +278,7 @@
       </div>
       <div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>
       <!-- main content column -->
-      <div class="col-xs-6 content">
+      <div class="col-xs-5 content">
         <div class="spacer-right"> <!-- horizontal block -->
           <i ng-style="{'visibility': mediafile.hidden ? 'visible' : 'hidden'}" class="fa fa-lock fa-lg"
               title="{{ 'Is hidden' | translate }}"></i>
@@ -321,23 +321,29 @@
               ng-mouseleave="mediafile.logoHover=false"
               ng-show="mediafile.canBeUsedAsLogo()">
             <span uib-dropdown>
-              <span id="dropdownLogo{{ mediafile.id }}" class="pointer nobr"
+              <span id="dropdownLogo{{ mediafile.id }}" class="pointer nobr" uib-dropdown-toggle>
-                uib-dropdown-toggle uib-tooltip="{{ 'Manage logos' | translate }}"
+                <span uib-tooltip="{{ 'Manage logos' | translate }}" tooltip-class="nobr">
-                tooltip-class="nobr">
                   <span ng-if="!mediafile.isUsedAsLogo()" ng-show="mediafile.hover">
                     <i class="fa fa-picture-o"></i>
                     <i class="fa fa-plus"></i>
                   </span>
                   <span ng-if="mediafile.isUsedAsLogo()">
-                  <i class="fa fa-picture-o spacer-right"></i>
                     <span ng-repeat="logo in mediafile.getLogos()">
+                      <i class="fa fa-picture-o spacer-right"
+                         ng-style="{'visibility': $first ? 'visible' : 'hidden'}"></i>
                       <small>
-                      {{ logo.display_name }}<span ng-if="!$last">,</span>
+                        {{ logo.display_name }}<span ng-if="!$last">,</br></span>
                       </small>
                     </span>
-                  <i class="fa fa-cog fa-lg spacer-left" ng-show="mediafile.logoHover"></i>
                   </span>
                 </span>
+                <span ng-if="hasProjectorHeaderLogo(mediafile) && mediafile.logoHover"
+                    uib-tooltip="{{ 'The projector header should have a default size of 1024x70px.
+                    Adapt the image width if you change the projector resolution.' | trusted | translate }}">
+                  <i class="fa fa-info-circle"></i>
+                </span>
+                <i class="fa fa-cog fa-lg spacer-left" ng-show="mediafile.logoHover"></i>
+              </span>
               <ul class="dropdown-menu" aria-labelledby="dropdownLogos{{ mediafile.id }}">
                 <li ng-repeat="logo in logos">
                   <a href ng-click="toggleLogo(mediafile, logo)">