- Tabs are nice now.

lib/middleware/webpack.js

@@ -5,8 +5,8 @@ var _ = require('lodash')
 var webpackOptions = require('../../webpack.config.js')
 
 var overrideOptions = {
-  debug: false,
+  debug: true,
-//  devtool: 'eval'
+  devtool: 'eval'
 }
 
 var finalOptions = _.assign(webpackOptions, overrideOptions)

res/app/components/stf/common-ui/nice-tabs/README.md

@@ -0,0 +1,34 @@
+# nice-tabs
+
+This are nice tabs. They wrap:
+- Angular Bootstrap tabs
+- Feature Font Awesome icon support
+- Load and preload templates for each tab
+- Save last selected tab to localForage
+- Support tab show/hide (?)
+
+
+
+
+
+### Current syntax
+```html
+<nice-tabs key='ControlBottomTabs' direction='below' tabs='tabs'></nice-tabs>
+```
+
+```javascript
+function Ctrl($scope) {
+	$scope.tabs = [
+    	{title: 'Tab One', icon: 'fa-bolt', templateUrl='terminal/tab-one.jade'},
+    	{title: 'Tab One', icon: 'fa-bolt', templateUrl='terminal/tab-one.jade'},
+	]
+}
+```
+
+### Declarative syntax (future):
+```html
+<nice-tabs key='ControlBottomTabs' direction='below'>
+      <nice-tab title='Tab One' icon='fa-bolt' templateUrl='"terminal/tab-one.jade"'></nice-tab>
+      <nice-tab title='Tab Two' icon='fa-bolt' templateUrl='"terminal/tab-two.jade"' ng-show='showOtherTabs'></nice-tab>
+</nice-tabs>
+```

res/app/components/stf/common-ui/nice-tabs/index.js

@@ -0,0 +1,5 @@
+module.exports = angular.module('stf.nice-tabs', [
+
+])
+  .directive('niceTab', require('./nice-tab-directive'))
+  .directive('niceTabs', require('./nice-tabs-directive'))

res/app/components/stf/common-ui/nice-tabs/nice-tab-directive.js

@@ -0,0 +1,14 @@
+// Declarative syntax not implemented yet
+module.exports = function niceTabDirective() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+
+    },
+    template: require('./nice-tab.jade'),
+    link: function (scope, element, attrs) {
+
+    }
+  }
+}

res/app/components/stf/common-ui/nice-tabs/nice-tabs-directive.js

@@ -0,0 +1,36 @@
+module.exports = function niceTabsDirective() {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: {
+      tabs: '=',
+      filter: '='
+    },
+    template: require('./nice-tabs.jade'),
+    link: function (scope, element, attrs) {
+      // TODO: add support for 'key' for saving in localstorage
+      // TODO: add support for 'direction=below' for below tabs
+      scope.$watch('tabs', function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          scope.tabs = newValue
+        }
+      })
+
+      scope.$watch('filter', function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          scope.filter = newValue
+        }
+      })
+
+      scope.tabFound = function (tab) {
+        var found = false
+        angular.forEach(tab.filters, function (value) {
+          if (value === scope.filter) {
+            found = true
+          }
+        })
+        return found
+      }
+    }
+  }
+}

res/app/components/stf/common-ui/nice-tabs/nice-tabs-spec.js

@@ -0,0 +1,23 @@
+describe('niceTabs', function () {
+
+  beforeEach(module('stf.nice-tabs'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div nice-tabs name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});

res/app/components/stf/common-ui/nice-tabs/nice-tabs.jade

@@ -0,0 +1,8 @@
+.heading-for-tabs.tabs
+  tabset
+    tab(ng-repeat='tab in tabs', active='tab.active', ng-hide='!tabFound(tab)')
+      tab-heading
+        i.fa(ng-class='tab.icon')
+        span {{tab.title}}
+      div(ng-if='tab.active')
+        div(ng-include='tab.templateUrl')

res/app/control-panes/control-panes-controller.js

@@ -1,3 +1,43 @@
-module.exports = function ControlPanesCtrl() {
+module.exports = function ControlPanesCtrl($scope, gettext) {
+
+  var sharedTabs = [
+    {
+      title: gettext('OneShared'),
+      icon: 'fa-laptop',
+      templateUrl: 'settings/notifications/notifications.jade',
+      filters: ['web']
+    },
+    {
+      title: gettext('TwoShared'),
+      icon: 'fa-pencil',
+      templateUrl: 'settings/local/local-settings.jade',
+      filters: ['native', 'web']
+    }
+  ]
+
+  $scope.topTabs = [
+    {
+      title: gettext('1stTop'),
+      icon: 'fa-laptop',
+      templateUrl: 'settings/notifications/notifications.jade',
+      filters: ['native', 'web']
+    }
+  ].concat(angular.copy(sharedTabs))
+
+  $scope.belowTabs = [
+    {
+      title: gettext('1stBelow'),
+      icon: 'fa-pencil',
+      templateUrl: 'settings/local/local-settings.jade',
+      filters: ['native', 'web']
+    },
+    {
+      title: gettext('2ndBelow'),
+      icon: 'fa-rocket',
+      templateUrl: 'settings/language/language.jade',
+      filters: ['native']
+    }
+  ].concat(angular.copy(sharedTabs))
+
 
 }

res/app/control-panes/control-panes.jade

@@ -5,21 +5,7 @@ div(pane, pane-anchor='west', pane-size='30% + 2px', pane-min='200px', pane-max=
     //include control-screen
 div(pane, pane-anchor='south', pane-size='30% + 2px', pane-handle='4').pane-bottom-p
   .widget-container.fluid-height
-    .heading-for-tabs.tabs
+    nice-tabs(key='ControlBottomTabs', direction='below', tabs='belowTabs', filter='$root.platform')
-      tabset(direction='"below"')
-        tab(ng-repeat='tab in tabsBottom', active='tab.active')
-          tab-heading
-            i.fa(ng-class='tab.icon')
-            | {{tab.title|translate}}
-          div(ng-if='tab.active')
-            div(ng-include='tab.templateUrl')
 div(pane, pane-anchor='')
   .widget-container.fluid-height
-    .heading-for-tabs.tabs
+    nice-tabs(key='ControlBottomTabs', tabs='topTabs', filter='$root.platform')
-      tabset
-        tab(ng-repeat='tab in tabsTop', active='tab.active')
-          tab-heading
-            i.fa(ng-class='tab.icon')
-            | {{tab.title|translate}}
-          div(ng-if='tab.active')
-            div(ng-include='tab.templateUrl')

res/app/control-panes/index.js

@@ -4,6 +4,7 @@ require('fa-borderlayout/build-0.3.1/stf-style.css')
 
 
 module.exports = angular.module('control-panes', [
+  require('stf/common-ui/nice-tabs').name
 ])
   .config(['$routeProvider', function ($routeProvider) {
     $routeProvider.when('/control-panes', {