Issue #467: fix max height for layers & panels lists

src/css/layout.css

@@ -36,10 +36,17 @@
 }
 
 .right-column {
+  box-sizing: border-box;
   vertical-align: top;
-  margin-left: 10px;
   height: 100%;
+
+  display: inline-flex;
+  flex-direction: column;
   position: relative;
+
+  margin-left: 10px;
+  /* Add some padding for the absolutely positioned .cursor-coordinates */
+  padding-bottom: 20px;
 }
 
 .drawing-canvas-container {

src/css/toolbox-animated-preview.css

@@ -3,6 +3,8 @@
  */
 
 .preview-container {
+  flex-shrink: 0;
+
   border : 0 Solid black;
   border-radius:5px 0 0 5px;
   box-shadow : 0 0 2px rgba(0,0,0,0.2);

src/css/toolbox-layers-list.css

@@ -3,10 +3,18 @@
  * Layers container
  */
 .layers-list-container {
+  min-height: 83px;
+  display: flex;
+  flex-direction: column;
 }
 
+/**
+ * Layers title and toggle preview
+ */
+
 .layers-title {
   position: relative;
+  flex-shrink: 0;
 }
 
 .layers-toggle-preview {
@@ -30,16 +38,43 @@
   color : gold;
 }
 
+/**
+ * Layers buttons
+ */
+
+.layers-button-container {
+  overflow : hidden;
+  flex-shrink: 0;
+}
+
+.layers-button {
+  margin: 0;
+  width: 16.66667%;
+  float : left;
+  /* Override border propery on .button elements from form.css */
+  border-left-width: 0;
+}
+
+.layers-button:last-child {
+  border-right-width: 0;
+}
+
+/**
+ * Layers list
+ */
+
 .layers-list {
   font-size : 12px;
+  overflow: auto;
 }
 
 .layer-item {
+  position: relative;
   height:24px;
   line-height: 24px;
-  padding : 0 0 0 10px;
+  padding: 0 0 0 10px;
   border-top: 1px solid #444;
-  cursor : pointer;
+  cursor: pointer;
 }
 
 .layer-item:hover {
@@ -56,22 +91,3 @@
   background : #333;
   color: gold;
 }
-
-.layers-button-container {
-  overflow : hidden;
-}
-
-.layers-button {
-  margin: 0;
-  width: 16.66667%;
-  float : left;
-}
-
-/* @override */
-.layers-button-container .layers-button {
-  border-left-width: 0;
-}
-
-.layers-button:last-child {
-  border-right-width: 0;
-}

src/css/toolbox-palettes-list.css

@@ -1,21 +1,132 @@
+.palettes-list-container {
+  min-height: 100px;
+  display: flex;
+  flex-direction: column;
+}
+
 .palettes-title {
+  flex-shrink: 0;
   background-size: 22px;
   background-repeat: no-repeat;
   background-position: 97%;
 }
-.palettes-list-colors {
+
-    overflow: auto;
+/**
-    max-height: 160px;
+ * Palettes action buttons
+ */
+
+.palettes-list-actions {
+  flex-shrink: 0;
+  background-color: #3f3f3f;
+  border-bottom-color: #222;
+  height: 24px;
+  padding: 0;
+  overflow: hidden;
 }
+
+.palettes-list-button,
+.palettes-list-select {
+  margin: 0;
+  float: left;
+}
+
+.palettes-list-button {
+  width: 16.66667%;
+}
+
+.palettes-list-select {
+  width: 66.66667%;
+  height: 100%;
+  padding: 0 5px 0 5px;
+
+  border-style: solid;
+  border-width: 1px 0 1px 0;
+
+  color: #aaa;
+  font-size : 0.75em;
+
+  text-align:left;
+  font-weight: normal;
+
+  transition : background-color 0.3s, color 0.3s;
+  cursor:pointer;
+}
+
+.palettes-list-select:hover,
+.palettes-list-select:focus {
+  background-color: #484848;
+  color: white;
+}
+
+.palettes-list-select:focus {
+  outline: none;
+}
+
+/*
+ * Palette colors list
+ */
+
+.palettes-list-colors {
+  height: 100%;
+  max-height: 160px;
+  overflow: auto;
+  padding-top: 5px;
+}
+
 .palettes-list-color {
   cursor: pointer;
   float: left;
   margin: 0 0 5px 5px;
-    width: 32px;
+  width: calc((100% - 30px) / 5);
   height: 32px;
   position: relative;
 }
 
+.palettes-list-color div {
+  height: 100%;
+}
+
+/*
+ * Placeholder when no color is available in the current palette
+ */
+
+.palettes-list-no-colors {
+  height: 35px;
+  line-height: 35px;
+  width: 100%;
+  color: gray;
+  font-size: 0.7em;
+  font-style: italic;
+  text-align: center
+}
+
+/*
+ * Primary and secondary color markers
+ */
+
+.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
+  content: "";
+  position: absolute;
+  bottom: 1px;
+  display: inline-block;
+  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M1%203v10h10z%22/%3E%3C/svg%3E');
+  width: 14px;
+  height: 14px;
+}
+
+.palettes-list-primary-color:before {
+  left: 1px;
+}
+
+.palettes-list-secondary-color:before {
+  right: 1px;
+  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M3%2013h10V3z%22/%3E%3C/svg%3E');
+}
+
+/*
+ * Color index for the 9 first colors
+ */
+
 .palettes-list-color:nth-child(-n+10):after {
   position: absolute;
   top: 0;
@@ -35,112 +146,35 @@
 .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";
 }
-
-.palettes-list-color:nth-child(-n+5) {
-    margin-top: 5px;
-}
-
-.palettes-list-color div {
-    width: 32px;
-    height: 32px;
-}
-.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div {
-    width: 29px
-}
-.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
-    content: "";
-    position: absolute;
-    bottom: 1px;
-    display: inline-block;
-    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M1%203v10h10z%22/%3E%3C/svg%3E');
-    width: 14px;
-    height: 14px;
-}
-.palettes-list-primary-color:before {
-    left: 1px;
-}
-.palettes-list-secondary-color:before {
-    right: 1px;
-    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M3%2013h10V3z%22/%3E%3C/svg%3E');
-}
-.palettes-list-actions {
-    background-color: #3f3f3f;
-    border-bottom-color: #222;
-    height: 24px;
-    padding: 0;
-    overflow: hidden;
-}
-
-.palettes-list-button,
-.palettes-list-select {
-    margin: 0;
-    float: left;
-}
-
-.palettes-list-button {
-    width: 16.66667%;
-}
-.palettes-list-select {
-    width: 66.66667%;
-    height: 100%;
-    padding: 0 5px 0 5px;
-
-    border-style: solid;
-    border-width: 1px 0 1px 0;
-
-    color: #aaa;
-    font-size : 0.75em;
-
-    /*thanks firefox, you suck*/
-    text-align:left;
-    /*text-shadow:none;*/
-    font-weight: normal;
-
-    transition : background-color 0.3s, color 0.3s;
-    cursor:pointer;
-}
-
-.palettes-list-select:hover {
-    color: white;
-    background-color: #484848;
-}
-
-.palettes-list-select:focus {
-    background-color: #484848;
-    color: white;
-    outline: none;
-}
-
-.palettes-list-no-colors {
-    height: 42px;
-    width: 100%;
-    color: grey;
-    font-size: 0.7em;
-    font-style: italic;
-    line-height: 42px;
-    text-align: center
-}

src/css/toolbox.css

@@ -5,7 +5,6 @@
   text-align: left;
   border-radius: 4px;
   margin-top: 5px;
-  margin-bottom: 10px;
   overflow: hidden;
 }
 
@@ -13,5 +12,7 @@
   padding: 8px;
   margin: 0;
   font-size: 15px;
+  /* reset for firefox */
+  height: 17px;
   background: #222;
 }

src/css/transformations.css

@@ -1,3 +1,6 @@
+.transformations-container {
+  flex-shrink: 0;
+}
 
 .transformations-container .tool-icon {
   float:left;

src/js/controller/PalettesListController.js

@@ -4,12 +4,6 @@
   var PRIMARY_COLOR_CLASSNAME = 'palettes-list-primary-color';
   var SECONDARY_COLOR_CLASSNAME = 'palettes-list-secondary-color';
 
-  var HAS_SCROLL_CLASSNAME = 'palettes-list-has-scrollbar';
-  // well ... I know that if there are more than 20 colors, a scrollbar will be displayed
-  // It's linked to the max-height: 160px; defined in toolbox-palette-list.css !
-  // I apologize to my future self for this one.
-  var NO_SCROLL_MAX_COLORS = 20;
-
   ns.PalettesListController = function (usedColorService) {
     this.usedColorService = usedColorService;
     this.paletteService = pskl.app.paletteService;
@@ -67,13 +61,6 @@
       this.colorListContainer_.innerHTML = html;
 
       this.highlightSelectedColors();
-
-      var hasScrollbar = colors.length > NO_SCROLL_MAX_COLORS;
-      if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
-        this.colorListContainer_.classList.add(HAS_SCROLL_CLASSNAME);
-      } else {
-        this.colorListContainer_.classList.remove(HAS_SCROLL_CLASSNAME);
-      }
     } else {
       this.colorListContainer_.innerHTML = pskl.utils.Template.get('palettes-list-no-colors-partial');
     }