Issue #663 - display 10 colors per row in palette for palettes with > 10 colors

src/css/toolbox-palettes-list.css

@@ -76,6 +76,11 @@
   position: relative;
 }
 
+.palettes-list-colors.tiny > .palettes-list-color {
+  width: calc((100% - 35px) / 10);
+  height: 16px;
+}
+
 .palettes-list-color div {
   height: 100%;
 }
@@ -121,7 +126,8 @@
  * Color index for the 9 first colors
  */
 
-.palettes-list-color:nth-child(-n+10):after {
+:not(.tiny) > .palettes-list-color:nth-child(-n+10):after {
+  content: attr(data-color-index);
   position: absolute;
   top: 0;
   right: 0;
@@ -136,39 +142,3 @@
   padding: 2px 3px 2px 3px;
   border-radius: 0 0 0 2px;
 }
-
-.palettes-list-color:nth-child(1):after {
-  content: "1";
-}
-
-.palettes-list-color:nth-child(2):after {
-  content: "2";
-}
-
-.palettes-list-color:nth-child(3):after {
-  content: "3";
-}
-
-.palettes-list-color:nth-child(4):after {
-  content: "4";
-}
-
-.palettes-list-color:nth-child(5):after {
-  content: "5";
-}
-
-.palettes-list-color:nth-child(6):after {
-  content: "6";
-}
-
-.palettes-list-color:nth-child(7):after {
-  content: "7";
-}
-
-.palettes-list-color:nth-child(8):after {
-  content: "8";
-}
-
-.palettes-list-color:nth-child(9):after {
-  content: "9";
-}

src/js/controller/PalettesListController.js

@@ -51,12 +51,14 @@
   };
 
   ns.PalettesListController.prototype.fillColorListContainer = function () {
-
     var colors = this.getSelectedPaletteColors_();
 
     if (colors.length > 0) {
       var html = colors.map(function (color, index) {
-        return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color, index : index});
+        return pskl.utils.Template.replace(this.paletteColorTemplate_, {
+          color : color,
+          index : index + 1
+        });
       }.bind(this)).join('');
       this.colorListContainer_.innerHTML = html;
 
@@ -64,6 +66,10 @@
     } else {
       this.colorListContainer_.innerHTML = pskl.utils.Template.get('palettes-list-no-colors-partial');
     }
+
+    // If we have more than 10 colors, use tiny mode, where 10 colors will fit on the same
+    // line.
+    this.colorListContainer_.classList.toggle('tiny', colors.length > 10);
   };
 
   ns.PalettesListController.prototype.selectPalette = function (paletteId) {
@@ -101,7 +107,7 @@
     var currentIndex = 0;
     var selectedColor = document.querySelector('.' + PRIMARY_COLOR_CLASSNAME);
     if (selectedColor) {
-      currentIndex = parseInt(selectedColor.dataset.colorIndex, 10);
+      currentIndex = parseInt(selectedColor.dataset.colorIndex, 10) - 1;
     }
     return currentIndex;
   };

src/templates/palettes-list.html

@@ -11,7 +11,10 @@
   </div>
   <div class="palettes-list-colors"></div>
   <script type="text/template" id="palette-color-template">
-    <div class="palettes-list-color" data-color="{{color}}" data-color-index="{{index}}" title="{{color}}">
+    <div class="palettes-list-color"
+         data-color="{{color}}"
+         data-color-index="{{index}}"
+         title="{{color}}">
       <div data-color="{{color}}" style="background:{{color}}"></div>
     </div>
   </script>