Issue #636 - create Tabs widget and use it application settings panel

src/css/settings-application.css

@@ -1,11 +1,9 @@
 /*******************************/
 /*  Application Setting panel  */
 /*******************************/
-.application-settings-form {
-  height: 100%;
-}
 
 .settings-section-application {
+  height: 100%;
   position: relative;
   overflow: hidden;
   margin: 0 20px;

src/css/settings-export.css

@@ -100,45 +100,6 @@
   line-height: 23px;
 }
 
-.export-tabs {
-  overflow: hidden;
-  position: relative;
-}
-
-.export-tabs:after {
-  content: "";
-  display: block;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 1px;
-  z-index: 0;
-  background-color: var(--highlight-color);
-}
-
-.export-tab {
-  float: left;
-  cursor: pointer;
-  padding: 5px;
-  border: 1px solid transparent;
-  border-radius: 2px 2px 0 0;
-  /* Make sure the tab and its border are positioned above the :after element; */
-  position: relative;
-  z-index: 1;
-}
-
-.export-tab.selected,
-.export-tab:hover {
-  color: var(--highlight-color);
-}
-
-.export-tab.selected {
-  border-color: var(--highlight-color);
-  border-bottom-color: #444;
-  border-style: solid;
-  border-width: 1px;
-}
-
 .export-panel-header {
   padding: 10px 5px 0px;
 }

src/css/widgets-tabs.css

@@ -0,0 +1,42 @@
+/*****************/
+/*  TABS WIDGET  */
+/*****************/
+
+.tab-list {
+  overflow: hidden;
+  position: relative;
+}
+
+.tab-list:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  z-index: 0;
+  background-color: var(--highlight-color);
+}
+
+.tab-item {
+  float: left;
+  cursor: pointer;
+  padding: 5px;
+  border: 1px solid transparent;
+  border-radius: 2px 2px 0 0;
+  /* Make sure the tab and its border are positioned above the :after element; */
+  position: relative;
+  z-index: 1;
+}
+
+.tab-item.selected,
+.tab-item:hover {
+  color: var(--highlight-color);
+}
+
+.tab-item.selected {
+  border-color: var(--highlight-color);
+  border-bottom-color: #444;
+  border-style: solid;
+  border-width: 1px;
+}

src/index.html

@@ -84,6 +84,9 @@
 
   <!-- settings-panel partials -->
   @@include('templates/settings/application.html', {})
+  @@include('templates/settings/application/grid.html', {})
+  @@include('templates/settings/application/main.html', {})
+  @@include('templates/settings/application/tile.html', {})
   @@include('templates/settings/resize.html', {})
   @@include('templates/settings/save.html', {})
   @@include('templates/settings/import.html', {})

src/js/controller/settings/ApplicationSettingsController.js

@@ -1,144 +1,35 @@
 (function () {
   var ns = $.namespace('pskl.controller.settings');
 
-  ns.ApplicationSettingsController = function () {};
+  var tabs = {
+    'main' : {
+      template : 'templates/settings/application/main.html',
+      controller : ns.application.MainApplicationController
+    },
+    'grid' : {
+      template : 'templates/settings/application/grid.html',
+      controller : ns.application.GridApplicationController
+    },
+    'tile' : {
+      template : 'templates/settings/application/tile.html',
+      controller : ns.application.TileApplicationController
+    }
+  };
+
+  ns.ApplicationSettingsController = function () {
+    this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.APPLICATION_SETTINGS_TAB);
+  };
 
   pskl.utils.inherit(ns.ApplicationSettingsController, pskl.controller.settings.AbstractSettingController);
 
   ns.ApplicationSettingsController.prototype.init = function() {
-    this.backgroundContainer = document.querySelector('.background-picker-wrapper');
+    var container = document.querySelector('.settings-section-application');
-    this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
+    this.tabsWidget.init(container);
-
-    // Highlight selected background :
-    var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
-    var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
-    if (selectedBackground) {
-      selectedBackground.classList.add('selected');
-    }
-
-    // Grid display and size
-    var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
-    var gridSelect = document.querySelector('.grid-width-select');
-    var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
-    if (selectedOption) {
-      selectedOption.setAttribute('selected', 'selected');
-    }
-
-    this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
-
-    // Seamless mode
-    var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
-    var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
-    if (seamlessMode) {
-      seamlessModeCheckbox.setAttribute('checked', seamlessMode);
-    }
-    this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
-
-    // Max FPS
-    var maxFpsInput = document.querySelector('.max-fps-input');
-    maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
-    this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
-
-    // Color format
-    var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
-    var colorFormatSelect = document.querySelector('.color-format-select');
-    var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
-    if (selectedColorFormatOption) {
-      selectedColorFormatOption.setAttribute('selected', 'selected');
-    }
-
-    this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
-
-    // Layer preview opacity
-    var layerOpacityInput = document.querySelector('.layer-opacity-input');
-    layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
-    this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
-    this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
-    this.updateLayerOpacityText_(layerOpacityInput.value);
-
-    // Seamless mask opacity
-    var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
-    seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
-    this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
-    this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
-    this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
-
-    // Form
-    this.applicationSettingsForm = document.querySelector('[name="application-settings-form"]');
-    this.addEventListener(this.applicationSettingsForm, 'submit', this.onFormSubmit_);
   };
 
-  ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
+  ns.ApplicationSettingsController.prototype.destroy = function () {
-    var width = parseInt(evt.target.value, 10);
+    this.tabsWidget.destroy();
-    pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
+    this.superclass.destroy.call(this);
   };
 
-  ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) {
-    pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
-  };
-
-  ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) {
-    pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
-  };
-
-  ns.ApplicationSettingsController.prototype.onBackgroundClick_ = function (evt) {
-    var target = evt.target;
-    var background = target.dataset.background;
-    if (background) {
-      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
-      var selected = this.backgroundContainer.querySelector('.selected');
-      if (selected) {
-        selected.classList.remove('selected');
-      }
-      target.classList.add('selected');
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.onMaxFpsChange_ = function (evt) {
-    var target = evt.target;
-    var fps = parseInt(target.value, 10);
-    if (fps && !isNaN(fps)) {
-      pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
-    } else {
-      target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.onLayerOpacityChange_ = function (evt) {
-    var target = evt.target;
-    var opacity = parseFloat(target.value);
-    if (!isNaN(opacity)) {
-      pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
-      pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
-      this.updateLayerOpacityText_(opacity);
-    } else {
-      target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.onSeamlessOpacityChange_ = function (evt) {
-    var target = evt.target;
-    var opacity = parseFloat(target.value);
-    if (!isNaN(opacity)) {
-      pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
-      this.updateSeamlessOpacityText_(opacity);
-    } else {
-      target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
-    }
-  };
-
-  ns.ApplicationSettingsController.prototype.updateLayerOpacityText_ = function (opacity) {
-    var layerOpacityText = document.querySelector('.layer-opacity-text');
-    layerOpacityText.innerHTML = opacity;
-  };
-
-  ns.ApplicationSettingsController.prototype.updateSeamlessOpacityText_ = function (opacity) {
-    var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
-    seamlessOpacityText.innerHTML = opacity;
-  };
-
-  ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) {
-    evt.preventDefault();
-    $.publish(Events.CLOSE_SETTINGS_DRAWER);
-  };
 })();

src/js/controller/settings/application/GridApplicationController.js

@@ -0,0 +1,26 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.application');
+
+  ns.GridApplicationController = function (piskelController, applicationController) {
+    this.piskelController = piskelController;
+    this.applicationController = applicationController;
+  };
+
+  pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
+
+  ns.GridApplicationController.prototype.init = function () {
+    // Grid display and size
+    var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
+    var gridSelect = document.querySelector('.grid-width-select');
+    var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
+    if (selectedOption) {
+      selectedOption.setAttribute('selected', 'selected');
+    }
+    this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
+  };
+
+  ns.GridApplicationController.prototype.onGridWidthChange_ = function (evt) {
+    var width = parseInt(evt.target.value, 10);
+    pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
+  };
+})();

src/js/controller/settings/application/MainApplicationController.js

@@ -0,0 +1,88 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.application');
+
+  ns.MainApplicationController = function (piskelController, applicationController) {
+    this.piskelController = piskelController;
+    this.applicationController = applicationController;
+  };
+
+  pskl.utils.inherit(ns.MainApplicationController, pskl.controller.settings.AbstractSettingController);
+
+  ns.MainApplicationController.prototype.init = function () {
+
+    this.backgroundContainer = document.querySelector('.background-picker-wrapper');
+    this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
+
+    // Highlight selected background :
+    var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+    var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
+    if (selectedBackground) {
+      selectedBackground.classList.add('selected');
+    }
+
+    // Max FPS
+    var maxFpsInput = document.querySelector('.max-fps-input');
+    maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
+    this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
+
+    // Color format
+    var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
+    var colorFormatSelect = document.querySelector('.color-format-select');
+    var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
+    if (selectedColorFormatOption) {
+      selectedColorFormatOption.setAttribute('selected', 'selected');
+    }
+    this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
+
+    // Layer preview opacity
+    var layerOpacityInput = document.querySelector('.layer-opacity-input');
+    layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
+    this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
+    this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
+    this.updateLayerOpacityText_(layerOpacityInput.value);
+  };
+
+  ns.MainApplicationController.prototype.onBackgroundClick_ = function (evt) {
+    var target = evt.target;
+    var background = target.dataset.background;
+    if (background) {
+      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
+      var selected = this.backgroundContainer.querySelector('.selected');
+      if (selected) {
+        selected.classList.remove('selected');
+      }
+      target.classList.add('selected');
+    }
+  };
+
+  ns.MainApplicationController.prototype.onColorFormatChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
+  };
+
+  ns.MainApplicationController.prototype.onMaxFpsChange_ = function (evt) {
+    var target = evt.target;
+    var fps = parseInt(target.value, 10);
+    if (fps && !isNaN(fps)) {
+      pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
+    }
+  };
+
+  ns.MainApplicationController.prototype.onLayerOpacityChange_ = function (evt) {
+    var target = evt.target;
+    var opacity = parseFloat(target.value);
+    if (!isNaN(opacity)) {
+      pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
+      pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
+      this.updateLayerOpacityText_(opacity);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
+    }
+  };
+
+  ns.MainApplicationController.prototype.updateLayerOpacityText_ = function (opacity) {
+    var layerOpacityText = document.querySelector('.layer-opacity-text');
+    layerOpacityText.innerHTML = (opacity * 1).toFixed(2);
+  };
+})();

src/js/controller/settings/application/TileApplicationController.js

@@ -0,0 +1,47 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.application');
+
+  ns.TileApplicationController = function (piskelController, applicationController) {
+    this.piskelController = piskelController;
+    this.applicationController = applicationController;
+  };
+
+  pskl.utils.inherit(ns.TileApplicationController, pskl.controller.settings.AbstractSettingController);
+
+  ns.TileApplicationController.prototype.init = function () {
+    // Seamless mode
+    var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
+    var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
+    if (seamlessMode) {
+      seamlessModeCheckbox.setAttribute('checked', seamlessMode);
+    }
+    this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
+
+    // Seamless mask opacity
+    var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
+    seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
+    this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
+    this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
+    this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
+  };
+
+  ns.TileApplicationController.prototype.onSeamlessModeChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
+  };
+
+  ns.TileApplicationController.prototype.onSeamlessOpacityChange_ = function (evt) {
+    var target = evt.target;
+    var opacity = parseFloat(target.value);
+    if (!isNaN(opacity)) {
+      pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
+      this.updateSeamlessOpacityText_(opacity);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
+    }
+  };
+
+  ns.TileApplicationController.prototype.updateSeamlessOpacityText_ = function (opacity) {
+    var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
+    seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
+  };
+})();

src/js/controller/settings/exportimage/ExportController.js

@@ -22,6 +22,7 @@
 
   ns.ExportController = function (piskelController) {
     this.piskelController = piskelController;
+    this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.EXPORT_TAB);
     this.onSizeInputChange_ = this.onSizeInputChange_.bind(this);
   };
 
@@ -47,47 +48,16 @@
     this.onSizeInputChange_();
 
     // Initialize tabs and panel
-    this.exportPanel = document.querySelector('.export-panel');
+    var container = document.querySelector('.settings-section-export');
-    this.exportTabs = document.querySelector('.export-tabs');
+    this.tabsWidget.init(container);
-    this.addEventListener(this.exportTabs, 'click', this.onTabsClicked_);
-
-    var tab = pskl.UserSettings.get(pskl.UserSettings.EXPORT_TAB);
-    this.selectTab(tab);
   };
 
   ns.ExportController.prototype.destroy = function () {
     this.sizeInputWidget.destroy();
-    this.currentController.destroy();
+    this.tabsWidget.destroy();
     this.superclass.destroy.call(this);
   };
 
-  ns.ExportController.prototype.selectTab = function (tabId) {
-    if (!tabs[tabId] || this.currentTab == tabId) {
-      return;
-    }
-
-    if (this.currentController) {
-      this.currentController.destroy();
-    }
-
-    this.exportPanel.innerHTML = pskl.utils.Template.get(tabs[tabId].template);
-    this.currentController = new tabs[tabId].controller(this.piskelController, this);
-    this.currentController.init();
-    this.currentTab = tabId;
-    pskl.UserSettings.set(pskl.UserSettings.EXPORT_TAB, tabId);
-
-    var selectedTab = this.exportTabs.querySelector('.selected');
-    if (selectedTab) {
-      selectedTab.classList.remove('selected');
-    }
-    this.exportTabs.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
-  };
-
-  ns.ExportController.prototype.onTabsClicked_ = function (e) {
-    var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
-    this.selectTab(tabId);
-  };
-
   ns.ExportController.prototype.onScaleChange_ = function () {
     var value = parseFloat(this.scaleInput.value);
     if (!isNaN(value)) {

src/js/utils/UserSettings.js

@@ -19,6 +19,7 @@
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
     COLOR_FORMAT: 'COLOR_FORMAT',
     TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
+    APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'MAX_FPS' : 24,
@@ -44,6 +45,7 @@
       },
       COLOR_FORMAT: 'hex',
       TRANSFORM_SHOW_MORE: false,
+      APPLICATION_SETTINGS_TAB: 'main',
     },
 
     /**

src/js/widgets/Tabs.js

@@ -0,0 +1,70 @@
+(function () {
+  var ns = $.namespace('pskl.widgets');
+
+  /**
+   * Simple layout widget to display one step element (DOM Element) at a time.
+   * When switching to another step, the new step element will slide over the
+   * current step element. When going back to the previous step, the current
+   * step element will slide out from the container to reveal the previous one.
+   *
+   * @param {Object} steps map of step descriptions with the step name as the key.
+   *        Each step description contains:
+   *        - el {Element} the DOM Element corresponding to this step
+   *        - name {String} the name of the step (redundant with the key)
+   * @param {Element} container the DOM Element in which the wizard should be
+   *        displayed.
+   */
+  ns.Tabs = function (tabs, parentController, settingsName) {
+    this.tabs = tabs;
+    this.parentController = parentController;
+    this.settingsName = settingsName;
+
+    this.currentTab = null;
+    this.currentController = null;
+  };
+
+  ns.Tabs.prototype.init = function (container) {
+    this.tabListEl = container.querySelector('.tab-list');
+    this.tabContentlEl = container.querySelector('.tab-content');
+    pskl.utils.Event.addEventListener(this.tabListEl, 'click', this.onTabsClicked_, this);
+
+    var tab = pskl.UserSettings.get(this.settingsName);
+    if (tab) {
+      this.selectTab(tab);
+    }
+  };
+
+  ns.Tabs.prototype.destroy = function () {
+    if (this.currentController) {
+      this.currentController.destroy();
+    }
+    pskl.utils.Event.removeAllEventListeners(this);
+  };
+
+  ns.Tabs.prototype.selectTab = function (tabId) {
+    if (!this.tabs[tabId] || this.currentTab == tabId) {
+      return;
+    }
+
+    if (this.currentController) {
+      this.currentController.destroy();
+    }
+
+    this.tabContentlEl.innerHTML = pskl.utils.Template.get(this.tabs[tabId].template);
+    this.currentController = new this.tabs[tabId].controller(pskl.app.piskelController, this.parentController);
+    this.currentController.init();
+    this.currentTab = tabId;
+    pskl.UserSettings.set(this.settingsName, tabId);
+
+    var selectedTab = this.tabListEl.querySelector('.selected');
+    if (selectedTab) {
+      selectedTab.classList.remove('selected');
+    }
+    this.tabListEl.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
+  };
+
+  ns.Tabs.prototype.onTabsClicked_ = function (e) {
+    var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
+    this.selectTab(tabId);
+  };
+})();

src/piskel-script-list.js

@@ -122,6 +122,9 @@
 
   // Settings sub-controllers
   "js/controller/settings/AbstractSettingController.js",
+  "js/controller/settings/application/GridApplicationController.js",
+  "js/controller/settings/application/MainApplicationController.js",
+  "js/controller/settings/application/TileApplicationController.js",
   "js/controller/settings/ApplicationSettingsController.js",
   "js/controller/settings/exportimage/GifExportController.js",
   "js/controller/settings/exportimage/PngExportController.js",
@@ -160,6 +163,7 @@
   "js/widgets/HslRgbColorPicker.js",
   "js/widgets/SizeInput.js",
   "js/widgets/SynchronizedInputs.js",
+  "js/widgets/Tabs.js",
   "js/widgets/Wizard.js",
 
   // Services

src/piskel-style-list.js

@@ -39,5 +39,6 @@
   "css/minimap.css",
   "css/widgets-anchor.css",
   "css/widgets-frame-picker.css",
+  "css/widgets-tabs.css",
   "css/widgets-wizard.css"
 ];

src/templates/settings/application.html

@@ -1,71 +1,12 @@
 <script type="text/html" id="templates/settings/application.html">
-  <form action="" method="POST" name="application-settings-form" class="application-settings-form">
   <div class="settings-section settings-section-application">
-      <div class="settings-title">
+    <div class="settings-title">Settings</div>
-        General
+    <div class="tab-list">
+      <div class="tab-item" data-tab-id="main">Main</div>
+      <div class="tab-item" data-tab-id="grid">Grid</div>
+      <div class="tab-item" data-tab-id="tile">Tile mode</div>
     </div>
-
+    <div class="tab-content"></div>
-      <div class="settings-item">
-        <label>Background</label>
-        <div class="background-picker-wrapper">
-          <div class="background-picker light-picker-background" data-background="light-canvas-background"
-                rel="tooltip" data-placement="bottom" title="light / high contrast">
-          </div>
-          <div class="background-picker medium-picker-background" data-background="medium-canvas-background"
-                rel="tooltip" data-placement="bottom" title="medium / high contrast">
-          </div>
-          <div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
-                rel="tooltip" data-placement="bottom" title="medium / low contrast">
-          </div>
-          <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
-                rel="tooltip" data-placement="bottom" title="dark / low contrast">
-          </div>
-        </div>
-      </div>
-
-      <div class="settings-item">
-        <label for="grid-width">Pixel grid</label>
-        <select id="grid-width" class="grid-width-select">
-          <option value="0">Disabled</option>
-          <option value="1">1px</option>
-          <option value="2">2px</option>
-          <option value="3">3px</option>
-          <option value="4">4px</option>
-        </select>
-      </div>
-
-      <div class="settings-item">
-        <label>Layer opacity</label>
-        <input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
-        <span class="settings-opacity-text layer-opacity-text"></span>
-      </div>
-
-      <div class="settings-item">
-        <label>
-          Seamless drawing mode
-          <input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
-        </label>
-      </div>
-
-      <div class="settings-item">
-        <label>Seamless opacity</label>
-        <input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0"  max="0.5" step="0.01"/>
-        <span class="settings-opacity-text seamless-opacity-text"></span>
-      </div>
-
-      <div class="settings-item">
-        <label>Maximum FPS</label>
-        <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
-      </div>
-
-      <div class="settings-item">
-        <label for="color-format">Color format</label>
-        <select id="color-format" class="color-format-select">
-          <option value="hex">Hex</option>
-          <option value="rgb">RGB</option>
-        </select>
-      </div>
-
     <div class="settings-version-info">
       Piskel
       <span rel="tooltip" data-placement="bottom" title="View release notes">
@@ -73,8 +14,6 @@
             href="https://github.com/piskelapp/piskel/releases/tag/v@@releaseVersion">v@@releaseVersion</a>
       </span>
     </div>
-
-      <input type="submit" class="button button-primary" value="Apply settings" />
   </div>
-  </form>
+
 </script>

src/templates/settings/application/grid.html

@@ -0,0 +1,14 @@
+<script type="text/html" id="templates/settings/application/grid.html">
+  <div class="application-panel-grid">
+    <div class="settings-item">
+      <label for="grid-width">Pixel grid</label>
+      <select id="grid-width" class="grid-width-select">
+        <option value="0">Disabled</option>
+        <option value="1">1px</option>
+        <option value="2">2px</option>
+        <option value="3">3px</option>
+        <option value="4">4px</option>
+      </select>
+    </div>
+  </div>
+</script>

src/templates/settings/application/main.html

@@ -0,0 +1,40 @@
+<script type="text/html" id="templates/settings/application/main.html">
+  <div class="application-panel-main">
+    <div class="settings-item">
+      <label>Background</label>
+      <div class="background-picker-wrapper">
+        <div class="background-picker light-picker-background" data-background="light-canvas-background"
+              rel="tooltip" data-placement="bottom" title="light / high contrast">
+        </div>
+        <div class="background-picker medium-picker-background" data-background="medium-canvas-background"
+              rel="tooltip" data-placement="bottom" title="medium / high contrast">
+        </div>
+        <div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
+              rel="tooltip" data-placement="bottom" title="medium / low contrast">
+        </div>
+        <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
+              rel="tooltip" data-placement="bottom" title="dark / low contrast">
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-item">
+      <label>Layer opacity</label>
+      <input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
+      <span class="settings-opacity-text layer-opacity-text"></span>
+    </div>
+
+    <div class="settings-item">
+      <label>Maximum FPS</label>
+      <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
+    </div>
+
+    <div class="settings-item">
+      <label for="color-format">Color format</label>
+      <select id="color-format" class="color-format-select">
+        <option value="hex">Hex</option>
+        <option value="rgb">RGB</option>
+      </select>
+    </div>
+  </div>
+</script>

src/templates/settings/application/tile.html

@@ -0,0 +1,16 @@
+<script type="text/html" id="templates/settings/application/tile.html">
+  <div class="application-panel-tile">
+    <div class="settings-item">
+      <label>
+        Seamless drawing mode
+        <input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
+      </label>
+    </div>
+
+    <div class="settings-item">
+      <label>Seamless opacity</label>
+      <input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0"  max="0.5" step="0.01"/>
+      <span class="settings-opacity-text seamless-opacity-text"></span>
+    </div>
+  </div>
+</script>

src/templates/settings/export.html

@@ -14,12 +14,12 @@
       <div class="resize-label">x</div>
       <input type="text" class="textfield  resize-field  resize-height" autocomplete="off" name="resize-height"/>
     </div>
-    <div class="export-tabs">
+    <div class="export-tabs tab-list">
-      <div class="export-tab" data-tab-id="gif">GIF</div>
+      <div class="export-tab tab-item" data-tab-id="gif">GIF</div>
-      <div class="export-tab" data-tab-id="png">PNG</div>
+      <div class="export-tab tab-item" data-tab-id="png">PNG</div>
-      <div class="export-tab" data-tab-id="zip">Zip</div>
+      <div class="export-tab tab-item" data-tab-id="zip">Zip</div>
-      <div class="export-tab" data-tab-id="misc">Others</div>
+      <div class="export-tab tab-item" data-tab-id="misc">Others</div>
     </div>
-    <div class="export-panel"></div>
+    <div class="export-panel tab-content"></div>
   </div>
 </script>