Basic tabs support; switch cargo console to tabs

tgui/package.json

@@ -3,12 +3,12 @@
   "private": true,
   "dependencies": {
     "autoprefixer": "6.3.1",
-    "babel-core": "6.4.5",
-    "babel-plugin-external-helpers": "6.4.0",
-    "babel-polyfill": "6.3.14",
-    "babel-preset-es2015": "6.3.13",
+    "babel-core": "6.5.1",
+    "babel-plugin-external-helpers": "6.5.0",
+    "babel-polyfill": "6.5.0",
+    "babel-preset-es2015": "6.5.0",
     "babel-preset-es2015-loose": "7.0.0",
-    "babel-register": "6.4.3",
+    "babel-register": "6.5.1",
     "babelify": "7.2.0",
     "babelify-external-helpers": "1.1.0",
     "browserify": "13.0.0",
@@ -23,11 +23,11 @@
     "gulp-cssnano": "2.1.0",
     "gulp-if": "2.0.0",
     "gulp-load-plugins": "1.2.0",
-    "gulp-postcss": "6.0.1",
+    "gulp-postcss": "6.1.0",
     "gulp-size": "2.0.0",
     "gulp-sourcemaps": "1.6.0",
     "gulp-stylus": "2.3.0",
-    "gulp-uglify": "1.5.1",
+    "gulp-uglify": "1.5.2",
     "gulplog": "1.0.0",
     "html5shiv": "3.7.3",
     "ie8": "0.3.2",
@@ -40,7 +40,7 @@
     "postcss-font-weights": "2.0.1",
     "postcss-opacity": "3.0.0",
     "ractive": "0.7.3",
-    "ractive-componentify": "0.2.3",
+    "ractive-componentify": "0.2.4",
     "ractive-events-keys": "0.2.1",
     "ractive-transitions-fade": "0.3.1",
     "require-globify": "1.3.0",

tgui/src/components/tabs.ract

@@ -0,0 +1,27 @@
+<link rel='ractive' href='components/tabs/tab.ract'>
+
+<script>
+  component.exports = {
+    oninit () {
+      this.set('active', this.findComponent('tab').get('name'))
+      this.on('switch', event => {
+        this.set('active', event.node.textContent.trim()) // Hack but it works...
+      })
+
+      this.observe('active', (newkey, oldkey, path) => {
+        for (let tab of this.findAllComponents('tab')) {
+          tab.set('shown', (tab.get('name') === newkey))
+        }
+      })
+    }
+  }
+</script>
+
+<header>
+  {{#each tabs}}
+    <ui-button pane='{{.}}' on-press='switch'>{{.}}</ui-button>
+  {{/each}}
+</header>
+<ui-display>
+  {{>content}}
+</ui-display>

tgui/src/components/tabs/tab.ract

@@ -0,0 +1,3 @@
+{{#if shown}}
+  {{yield}}
+{{/if}}

tgui/src/components/warnings.ract

@@ -1,25 +1,25 @@
 <script>
-const versions = [11, 10, 9, 8]
+  const versions = [11, 10, 9, 8]
 
-component.exports = {
-  data: {
-    userAgent: navigator.userAgent
-  },
-  computed: {
-    ie () {
-      if (document.documentMode) return document.documentMode
-      for (let version in versions) {
-        const div = document.createElement('div')
-        div.innerHTML = `<!--[if IE ${version}]><span></span><![endif]-->`
-        if (div.getElementsByTagName('span').length) return version
+  component.exports = {
+    data: {
+      userAgent: navigator.userAgent
+    },
+    computed: {
+      ie () {
+        if (document.documentMode) return document.documentMode
+        for (let version in versions) {
+          const div = document.createElement('div')
+          div.innerHTML = `<!--[if IE ${version}]><span></span><![endif]-->`
+          if (div.getElementsByTagName('span').length) return version
+        }
+        return undefined
       }
-      return undefined
+    },
+    oninit () {
+      this.on('debug', () => this.toggle('debug'))
     }
-  },
-  oninit () {
-    this.on('debug', () => this.toggle('debug'))
   }
-}
 </script>
 
 

tgui/src/interfaces/cargo.ract

@@ -1,24 +1,14 @@
 <script>
-  import { filterMulti } from 'util/filter'
   component.exports = {
-    data: {
-      filter: ''
-    },
-    oninit () {
-      this.observe('filter', (newkey, oldkey, keypath) => {
-        const categories = this.findAll('.display:nth-child(n+4)')
-        filterMulti(categories, this.get('filter').toLowerCase())
-      }, { init: false })
+    computed: {
+      tabs () {
+        return this.get('data.supplies').map(group => group.name)
+      }
     }
   }
 </script>
 
-<ui-display title='Cargo' button>
-  {{#partial button}}
-    {{#if config.fancy}}
-      <ui-input value='{{filter}}' placeholder='Filter...'/>
-    {{/if}}
-  {{/partial}}
+<ui-display title='Cargo'>
   <ui-section label='Shuttle'>
     {{#if data.docked && !data.requestonly}}
       <ui-button action='send'>{{data.location}}</ui-button>
@@ -85,12 +75,14 @@
       <span>No Requests</span>
     {{/each}}
 </ui-display>
-{{#each data.supplies}}
-  <ui-display title='{{name}}'>
-    {{#each packs}}
-      <ui-section label='{{name}}' candystripe right>
-        <ui-button action='add' params='{"id": "{{id}}"}'>{{cost}} Points</ui-button>
-      </ui-section>
-    {{/each}}
-  </ui-display>
-{{/each}}
+<ui-tabs tabs='{{tabs}}'>
+  {{#each data.supplies}}
+    <tab name='{{name}}'>
+      {{#each packs}}
+        <ui-section label='{{name}}' candystripe right>
+          <ui-button action='add' params='{"id": "{{id}}"}'>{{cost}} Points</ui-button>
+        </ui-section>
+      {{/each}}
+    </tab>
+  {{/each}}
+</ui-tabs>

tgui/src/tgui.ract

@@ -16,6 +16,7 @@ component.exports = {
     'ui-notice': require('components/notice'),
     'ui-section': require('components/section'),
     'ui-subdisplay': require('components/subdisplay'),
+    'ui-tabs': require('components/tabs'),
   },
   events: {
     enter: require('ractive-events-keys').enter,