Show selected color in palettepicker widget

indico · Apr 12, 2016 · 6ecf886 · 6ecf886
1 parent 54f1e77
commit 6ecf886
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 11 deletions.
diff --git a/indico/htdocs/js/indico/jquery/palettepicker.js b/indico/htdocs/js/indico/jquery/palettepicker.js
@@ -21,7 +21,8 @@
         options: {
             availableColors: [],
             onSelect: null,
-            numColumns: 5
+            numColumns: 5,
+            selectedColor: null
         },
 
         _create: function() {
@@ -31,14 +32,16 @@
             var availableColors = this.options.availableColors;
             var tr = this._createTableRow();
 
+            self._paletteTable = paletteTable;
+
             $.each(availableColors, function(index, color) {
                 var td = $('<td>', {
-                    'css': {'background': '#' + color.background},
                     'class': 'palette-color',
                     'data': {color: color}
                 });
 
                 var colorBox = $('<div>', {
+                    'css': {'background': '#' + color.background},
                     'class': 'background-box'
                 });
 
@@ -67,6 +70,9 @@
                     textColor = '#' + color.text,
                     styleObject = element[0].style;
 
+                self.options.selectedColor = color;
+                self._updateSelection();
+
                 styleObject.setProperty('color', textColor, 'important');
                 styleObject.setProperty('background', backgroundColor, 'important');
 
@@ -101,11 +107,30 @@
                 },
                 hide: {
                     event: 'unfocus'
+                },
+                events: {
+                    show: self._updateSelection.bind(self)
                 }
             });
         },
+
         _createTableRow: function() {
             return $('<tr>', {'height': 13});
+        },
+
+        _updateSelection: function() {
+            var selectedColor = this.options.selectedColor;
+            this._paletteTable.find('.palette-color').each(function() {
+                var $this = $(this);
+                var color = $this.data('color');
+                if (selectedColor != null
+                        && color.background == selectedColor.background
+                        && color.text == selectedColor.text) {
+                    $this.addClass('selected');
+                } else {
+                    $this.removeClass('selected');
+                }
+            });
         }
     });
 })(jQuery);
diff --git a/indico/htdocs/js/indico/modules/sessions.js b/indico/htdocs/js/indico/modules/sessions.js
@@ -17,6 +17,7 @@
             var $this = $(this);
             $this.palettepicker({
                 availableColors: $this.data('colors'),
+                selectedColor: $this.data('color'),
                 onSelect: function(background, text) {
                     $.ajax({
                         url: $(this).data('href'),

diff --git a/indico/htdocs/sass/partials/_jquery-indico-palettepicker.scss b/indico/htdocs/sass/partials/_jquery-indico-palettepicker.scss
@@ -28,13 +28,10 @@
 table.palette-picker {
     border-spacing: 8px;
 
-    td {
-        &.palette-color {
-            cursor: pointer;
-            width: 20px;
-            height: 20px;
-            border-radius: 15px;
-        }
+    .palette-color {
+        cursor: pointer;
+        padding: 2px;
+        border-radius: 15px;
 
         .text-box {
             width: 8px;
@@ -44,7 +41,21 @@ table.palette-picker {
         }
 
         .background-box {
-            text-align: center;
+            display: flex;
+            width: 22px;
+            height: 22px;
+            border-radius: 15px;
+            border: 2px solid transparent;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.selected {
+            background-color: black;
+
+            .background-box {
+                border-color: white;
+            }
         }
     }
 }

diff --git a/indico/modules/events/sessions/templates/management/_session_list.html b/indico/modules/events/sessions/templates/management/_session_list.html
@@ -43,7 +43,8 @@
                                        style="{{ sess.colors.css }}"
                                        data-method="PATCH"
                                        data-href="{{ url_for('.session_rest', sess) }}"
-                                       data-colors="{{ default_colors | tojson | forceescape }}">
+                                       data-colors="{{ default_colors | tojson | forceescape }}"
+                                       data-color="{{ sess.colors | tojson | forceescape }}">
                                     </a>
                                 </div>
                             </td>

diff --git a/indico/web/templates/forms/palette_picker_widget.html b/indico/web/templates/forms/palette_picker_widget.html
@@ -18,6 +18,7 @@
     <script>
         $('#{{ field.id }}-palette-picker').palettepicker({
             availableColors: {{ field.color_list | tojson }},
+            selectedColor: {{ field._value() | tojson }},
             onSelect: function(background, text) {
                 var colorsValue = JSON.stringify({background: background, text: text});
                 $('#{{ field.id }}').val(colorsValue).trigger('change');