diff --git a/README.md b/README.md index 90e7985b0b..cae55f027e 100755 --- a/README.md +++ b/README.md @@ -12,10 +12,12 @@ Kitematic's documentation and other information can be found at [http://kitemati ### Development -Kitematic uses a special version of node npm (found under `script/npm`) so packages are built against the same v8 headers as atom-shell. To run the app in development: - +- `sudo npm install -g less` - `./script/npm install` -- `./script/run` + +To run the app in development: + +- `./script/gulp` ### Building the Mac OS X Package diff --git a/app/ContainerDetails.react.js b/app/ContainerDetails.react.js index b8c93ae509..0e1d5d9481 100644 --- a/app/ContainerDetails.react.js +++ b/app/ContainerDetails.react.js @@ -60,10 +60,11 @@ var ContainerDetails = React.createClass({ }); }); }); + }, componentWillMount: function () { this.update(); - var self = this; + var self = this; var logs = []; var index = 0; docker.client().getContainer(this.getParams().name).logs({ @@ -105,10 +106,12 @@ var ContainerDetails = React.createClass({ }); }, componentDidMount: function () { - ContainerStore.addChangeListener(this.update); + var containerName = this.getParams().name; + ContainerStore.addChangeListener(containerName, this.update); }, componentWillUnmount: function () { - ContainerStore.removeChangeListener(this.update); + var containerName = this.getParams().name; + ContainerStore.removeChangeListener(containerName, this.update); }, update: function () { var containerName = this.getParams().name; @@ -123,6 +126,7 @@ var ContainerDetails = React.createClass({ return div.innerHTML; }, render: function () { + console.log('render details'); var self = this; if (!this.state) { diff --git a/app/ContainerStore.js b/app/ContainerStore.js index cf239b19eb..cb401dd744 100644 --- a/app/ContainerStore.js +++ b/app/ContainerStore.js @@ -7,6 +7,8 @@ var _ = require('underscore'); // Merge our store with Node's Event Emitter var ContainerStore = assign(EventEmitter.prototype, { + CONTAINERS: 'containers', + ACTIVE: 'active', _containers: {}, _logs: {}, _active: null, @@ -70,11 +72,14 @@ var ContainerStore = assign(EventEmitter.prototype, { return; } var containers = {}; - results.map(function (r) { + results.forEach(function (r) { containers[r.Name.replace('/', '')] = r; }); self._containers = containers; - self.emit('change'); + _.keys(self._containers).forEach(function(c) { + self.emit(c); + }); + self.emit(self.CONTAINERS); callback(null); }); }); @@ -211,7 +216,7 @@ var ContainerStore = assign(EventEmitter.prototype, { }, setActive: function (containerName) { this._active = containerName; - this.emit('change'); + this.emit(self.ACTIVE); }, active: function () { return this._active; @@ -219,11 +224,11 @@ var ContainerStore = assign(EventEmitter.prototype, { logs: function (containerName) { return logs[containerId]; }, - addChangeListener: function(callback) { - this.on('change', callback); + addChangeListener: function(eventType, callback) { + this.on(eventType, callback); }, - removeChangeListener: function(callback) { - this.removeListener('change', callback); + removeChangeListener: function(eventType, callback) { + this.removeListener(eventType, callback); }, }); diff --git a/app/Containers.react.js b/app/Containers.react.js index d1f3acbbd9..c87968ad5c 100644 --- a/app/Containers.react.js +++ b/app/Containers.react.js @@ -9,6 +9,7 @@ var Header = require('./Header.react'); var async = require('async'); var _ = require('underscore'); var docker = require('./docker'); +var $ = require('jquery'); var Link = Router.Link; var RouteHandler = Router.RouteHandler; @@ -29,13 +30,18 @@ var ContainerList = React.createClass({ active = name; ContainerStore.setActive(name); } - ContainerStore.addChangeListener(this.update); + ContainerStore.addChangeListener(ContainerStore.CONTAINERS, this.update); + ContainerStore.addChangeListener(ContainerStore.ACTIVE, this.update); }, componentWillMount: function () { this._start = Date.now(); }, componentWillUnmount: function () { - ContainerStore.removeChangeListener(this.update); + ContainerStore.removeChangeListener(ContainerStore.CONTAINERS, this.update); + ContainerStore.removeChangeListener(ContainerStore.ACTIVE, this.update); + }, + componentDidUpdate: function () { + }, update: function () { var containers = _.values(ContainerStore.containers()).sort(function (a, b) { diff --git a/app/styles/containers.less b/app/styles/containers.less index b1cc65c5e7..14aa1cdc43 100644 --- a/app/styles/containers.less +++ b/app/styles/containers.less @@ -10,14 +10,15 @@ .sidebar { display: flex; flex-direction: column; - min-width: 260px; + min-width: 240px; margin: 0; box-sizing: border-box; border-right: 1px solid #eee; .sidebar-header { flex: 0 auto; - min-width: 260px; + min-width: 240px; + min-height: 42px; display: flex; border-bottom: 1px solid transparent; transition: border-bottom 0.25s; @@ -79,14 +80,9 @@ } ul { - padding: 0; margin: 0; - min-width: 260px; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; + min-width: 240px; + padding: 0; display: flex; flex-direction: column; diff --git a/app/util.js b/app/util.js index 81b04ce23d..6df25646c6 100644 --- a/app/util.js +++ b/app/util.js @@ -3,7 +3,6 @@ var fs = require('fs'); var nodeCrypto = require('crypto'); var request = require('request'); var progress = require('request-progress'); -var ncp = require('ncp').ncp; var exec = require('exec'); var Util = {