Use colorpicker for projector header color config.

bower.json

@@ -11,6 +11,7 @@
     "angular-animate": "~1.4.9",
     "angular-sanitize": "~1.4.9",
     "angular-bootstrap": "~0.14.3",
+    "angular-bootstrap-colorpicker": "~3.0.24",
     "angular-csv-import": "~0.0.27",
     "angular-formly-templates-bootstrap": "~6.2.0",
     "angular-formly": "~7.3.9",

openslides/core/config.py

@@ -9,7 +9,8 @@ INPUT_TYPE_MAPPING = {
     'text': str,
     'integer': int,
     'boolean': bool,
-    'choice': str}
+    'choice': str,
+    'colorpicker': str}
 
 
 class ConfigHandler:

openslides/core/signals.py

@@ -154,6 +154,7 @@ def setup_general_config(sender, **kwargs):
     yield ConfigVariable(
         name='projector_backgroundcolor',
         default_value='#317796',
+        input_type='colorpicker',
         label=ugettext_lazy('Background color of projector header'),
         help_text=ugettext_lazy('Use web color names like "red" or hex numbers like "#ff0000".'),
         weight=160,

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

@@ -7,6 +7,7 @@ angular.module('OpenSlidesApp.core.site', [
     'OpenSlidesApp.core',
     'ui.router',
     'angular-loading-bar',
+    'colorpicker.module',
     'formly',
     'formlyBootstrap',
     'ngBootbox',
@@ -402,6 +403,7 @@ angular.module('OpenSlidesApp.core.site', [
                 integer: 'number',
                 boolean: 'checkbox',
                 choice: 'choice',
+                colorpicker: 'colorpicker',
             }[type];
         }
 

openslides/core/static/templates/config-form-field.html

@@ -2,19 +2,30 @@
   <label>{{ label }}</label>
 
   <div class="input-group">
-    <input ng-if="type != 'choice' && type != 'textarea'"
+    <!-- text/number input, checkbox -->
+    <input ng-if="type == 'text' || type == 'number' || type == 'checkbox'"
            ng-model="$parent.value"
            ng-change="save(configOption.key, $parent.value)"
            ng-class="{ 'form-control': type != 'checkbox' }"
            id="{{ key }}"
-        type="{{ type }}">
+           type="{{ type }}">
 
+    <!-- colorpicker -->
+    <input ng-if="type == 'colorpicker'"
+           colorpicker
+           class="form-control"
+           ng-model="$parent.value"
+           ng-change="save(configOption.key, $parent.value)"
+           type="text">
+
+    <!-- textarea -->
     <textarea ng-if="type == 'textarea'"
               ng-model="$parent.value"
               ng-change="save(configOption.key, $parent.value)"
               id="{{ key }}" class="form-control">
     </textarea>
 
+    <!-- select -->
     <select ng-if="type == 'choice'"
             ng-model="$parent.value"
             ng-change="save(configOption.key, $parent.value)"