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

This commit is contained in:
Julian Descottes 2017-06-03 14:57:05 +02:00
parent aea4e4d6a6
commit b977a146e9
3 changed files with 20 additions and 41 deletions

View File

@ -76,6 +76,11 @@
position: relative; position: relative;
} }
.palettes-list-colors.tiny > .palettes-list-color {
width: calc((100% - 35px) / 10);
height: 16px;
}
.palettes-list-color div { .palettes-list-color div {
height: 100%; height: 100%;
} }
@ -121,7 +126,8 @@
* Color index for the 9 first colors * 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; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -136,39 +142,3 @@
padding: 2px 3px 2px 3px; padding: 2px 3px 2px 3px;
border-radius: 0 0 0 2px; 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";
}

View File

@ -51,12 +51,14 @@
}; };
ns.PalettesListController.prototype.fillColorListContainer = function () { ns.PalettesListController.prototype.fillColorListContainer = function () {
var colors = this.getSelectedPaletteColors_(); var colors = this.getSelectedPaletteColors_();
if (colors.length > 0) { if (colors.length > 0) {
var html = colors.map(function (color, index) { 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(''); }.bind(this)).join('');
this.colorListContainer_.innerHTML = html; this.colorListContainer_.innerHTML = html;
@ -64,6 +66,10 @@
} else { } else {
this.colorListContainer_.innerHTML = pskl.utils.Template.get('palettes-list-no-colors-partial'); 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) { ns.PalettesListController.prototype.selectPalette = function (paletteId) {
@ -101,7 +107,7 @@
var currentIndex = 0; var currentIndex = 0;
var selectedColor = document.querySelector('.' + PRIMARY_COLOR_CLASSNAME); var selectedColor = document.querySelector('.' + PRIMARY_COLOR_CLASSNAME);
if (selectedColor) { if (selectedColor) {
currentIndex = parseInt(selectedColor.dataset.colorIndex, 10); currentIndex = parseInt(selectedColor.dataset.colorIndex, 10) - 1;
} }
return currentIndex; return currentIndex;
}; };

View File

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