support expanding the transform toolbox

src/css/style.css

@@ -55,6 +55,10 @@ body {
   margin-left: 0;
 }
 
+.hidden {
+  display: none;
+}
+
 /**
  * TOOLTIPS
  */

src/css/transformations.css

@@ -3,5 +3,38 @@
 }
 
 .transformations-container .tool-icon {
-  float:left;
+  margin: 0 0 5px 0;
+}
+
+.transformations-container .tools-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  height: 46px;
+
+  /* Override the float:left set on tools-wrapper in layout.css; */
+  float: initial;
+}
+
+.transformations-container.show-more .tools-wrapper {
+  height: auto;
+  /* Compensate the 5px bottom-margin coming from the tool-icon */
+  margin-bottom: -5px;
+}
+
+.transformations-show-more-link {
+  position: absolute;
+  color: #999;
+  right: 8px;
+  font-weight: normal;
+  cursor: pointer;
+  transition: 0.2s linear;
+}
+
+.transformations-show-more-link:hover {
+  color: white;
+}
+
+.show-more .transformations-show-more-link {
+  color: gold;
 }

src/js/controller/TransformationsController.js

@@ -1,22 +1,29 @@
 (function () {
   var ns = $.namespace('pskl.controller');
+  var SHOW_MORE_CLASS = 'show-more';
 
   ns.TransformationsController = function () {
     this.tools = [
       new pskl.tools.transform.Flip(),
       new pskl.tools.transform.Rotate(),
       new pskl.tools.transform.Clone(),
-      new pskl.tools.transform.Center()
+      new pskl.tools.transform.Center(),
     ];
 
     this.toolIconBuilder = new pskl.tools.ToolIconBuilder();
   };
 
   ns.TransformationsController.prototype.init = function () {
-    var container = document.querySelector('.transformations-container');
+    this.container = document.querySelector('.transformations-container');
-    this.toolsContainer = container.querySelector('.tools-wrapper');
+    this.container.addEventListener('click', this.onTransformationClick_.bind(this));
-    container.addEventListener('click', this.onTransformationClick_.bind(this));
+
+    this.showMoreLink = this.container.querySelector('.transformations-show-more-link');
+    this.showMoreLink.addEventListener('click', this.toggleShowMoreTools_.bind(this));
+
     this.createToolsDom_();
+    this.updateShowMoreLink_();
+
+    $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
   };
 
   ns.TransformationsController.prototype.applyTool = function (toolId, evt) {
@@ -30,13 +37,35 @@
 
   ns.TransformationsController.prototype.onTransformationClick_ = function (evt) {
     var toolId = evt.target.dataset.toolId;
-    this.applyTool(toolId, evt);
+    if (toolId) {
+      this.applyTool(toolId, evt);
+    }
+  };
+
+  ns.TransformationsController.prototype.toggleShowMoreTools_ = function (evt) {
+    var showMore = pskl.UserSettings.get(pskl.UserSettings.TRANSFORM_SHOW_MORE);
+    pskl.UserSettings.set(pskl.UserSettings.TRANSFORM_SHOW_MORE, !showMore);
+  };
+
+  ns.TransformationsController.prototype.onUserSettingsChange_ = function (evt, settingName) {
+    if (settingName == pskl.UserSettings.TRANSFORM_SHOW_MORE) {
+      this.updateShowMoreLink_();
+    }
+  };
+
+  ns.TransformationsController.prototype.updateShowMoreLink_ = function () {
+    var showMoreEnabled = pskl.UserSettings.get(pskl.UserSettings.TRANSFORM_SHOW_MORE);
+    this.container.classList.toggle(SHOW_MORE_CLASS, showMoreEnabled);
+
+    // Hide the link in case there are 4 or less tools available.
+    this.showMoreLink.classList.toggle('hidden', this.tools.length < 5);
   };
 
   ns.TransformationsController.prototype.createToolsDom_ = function() {
     var html = this.tools.reduce(function (p, tool) {
       return p + this.toolIconBuilder.createIcon(tool, 'left');
     }.bind(this), '');
-    this.toolsContainer.innerHTML = html;
+    var toolsContainer = this.container.querySelector('.tools-wrapper');
+    toolsContainer.innerHTML = html;
   };
 })();

src/js/utils/UserSettings.js

@@ -18,6 +18,7 @@
     PEN_SIZE : 'PEN_SIZE',
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
     COLOR_FORMAT: 'COLOR_FORMAT',
+    TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'MAX_FPS' : 24,
@@ -42,6 +43,7 @@
         origin : 'TOPLEFT'
       },
       COLOR_FORMAT: 'hex',
+      TRANSFORM_SHOW_MORE: false,
     },
 
     /**

src/templates/transformations.html

@@ -1,4 +1,11 @@
 <div class="toolbox-container transformations-container">
-  <h3 class="toolbox-title transformations-title">Transform</h3>
+  <h3 class="toolbox-title transformations-title">
+    Transform
+    <span
+      class="transformations-show-more-link piskel-icon-plus"
+      title="View more tools"
+      rel="tooltip" data-placement="top"
+    ></span>
+  </h3>
   <ul class="tools-wrapper"></ul>
 </div>