From b977a146e96d044aab8df8fa6e8433294e81f56b Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Sat, 3 Jun 2017 14:57:05 +0200
Subject: [PATCH] Issue #663 - display 10 colors per row in palette for
 palettes with > 10 colors

---
 src/css/toolbox-palettes-list.css           | 44 ++++-----------------
 src/js/controller/PalettesListController.js | 12 ++++--
 src/templates/palettes-list.html            |  5 ++-
 3 files changed, 20 insertions(+), 41 deletions(-)

diff --git a/src/css/toolbox-palettes-list.css b/src/css/toolbox-palettes-list.css
index 136571cf..517502a5 100644
--- a/src/css/toolbox-palettes-list.css
+++ b/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";
-}
diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js
index 98f8c52c..77890cfe 100644
--- a/src/js/controller/PalettesListController.js
+++ b/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;
   };
diff --git a/src/templates/palettes-list.html b/src/templates/palettes-list.html
index 7acab1a5..92246778 100644
--- a/src/templates/palettes-list.html
+++ b/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>