From daa4199964811b547ade9cd08fa592860b5dc8cd Mon Sep 17 00:00:00 2001 From: Jeffrey Morgan Date: Mon, 19 Jan 2015 14:20:22 -0500 Subject: [PATCH] Add active container to ContainerStore --- app/ContainerModal.react.js | 6 ++ app/ContainerStore.js | 8 ++ app/Containers.react.js | 26 +++-- app/styles/main.less | 206 ++++++++++++++++++++++++++++++++++++ app/styles/theme.less | 2 +- app/styles/variables.less | 2 +- 6 files changed, 237 insertions(+), 13 deletions(-) create mode 100644 app/styles/main.less diff --git a/app/ContainerModal.react.js b/app/ContainerModal.react.js index 9da1b4e8df..da2930212f 100644 --- a/app/ContainerModal.react.js +++ b/app/ContainerModal.react.js @@ -5,7 +5,10 @@ var RetinaImage = require('react-retina-image'); var $ = require('jquery'); var ContainerStore = require('./ContainerStore'); +var Navigation = Router.Navigation; + var ContainerModal = React.createClass({ + mixins: [Navigation], getInitialState: function () { return { query: '', @@ -36,7 +39,10 @@ var ContainerModal = React.createClass({ }, handleClick: function (event) { var name = event.target.getAttribute('name'); + var self = this; ContainerStore.create(name, 'latest', function (err, containerName) { + ContainerStore.setActive(containerName); + self.props.onRequestHide(); }); }, render: function () { diff --git a/app/ContainerStore.js b/app/ContainerStore.js index 3e0fb0e03a..44d273916e 100644 --- a/app/ContainerStore.js +++ b/app/ContainerStore.js @@ -9,6 +9,7 @@ var _ = require('underscore'); var ContainerStore = assign(EventEmitter.prototype, { _containers: {}, _logs: {}, + _active: null, init: function (callback) { // TODO: Load cached data from db on loading @@ -212,6 +213,13 @@ var ContainerStore = assign(EventEmitter.prototype, { // Pull image // When image is done pulling then }, + setActive: function (containerName) { + this._active = containerName; + this.emit('change'); + }, + active: function () { + return this._active; + }, logs: function (containerName) { return logs[containerId]; }, diff --git a/app/Containers.react.js b/app/Containers.react.js index b5df11c4c0..d1f3acbbd9 100644 --- a/app/Containers.react.js +++ b/app/Containers.react.js @@ -18,15 +18,18 @@ var ContainerList = React.createClass({ mixins: [Navigation], getInitialState: function () { return { + active: null, containers: [] }; }, componentDidMount: function () { this.update(); - ContainerStore.addChangeListener(this.update); - if (this.state.active) { - this.transitionTo('container', {name: this.state.active}); + if (this.state.containers.length > 0) { + var name = this.state.containers[0].Name.replace('/', ''); + active = name; + ContainerStore.setActive(name); } + ContainerStore.addChangeListener(this.update); }, componentWillMount: function () { this._start = Date.now(); @@ -38,17 +41,18 @@ var ContainerList = React.createClass({ var containers = _.values(ContainerStore.containers()).sort(function (a, b) { return a.Name.localeCompare(b.Name); }); - var state = {}; - if (!this.state.active && containers.length > 0) { - state.active = containers[0].Name.replace('/', ''); + + this.setState({ + active: ContainerStore.active(), + containers: containers + }); + + if (ContainerStore.active()) { + this.transitionTo('container', {name: ContainerStore.active()}); } - state.containers = containers; - this.setState(state); }, handleClick: function (containerId) { - this.setState({ - active: containerId - }); + ContainerStore.setActive(name); }, render: function () { var self = this; diff --git a/app/styles/main.less b/app/styles/main.less new file mode 100644 index 0000000000..b812f33746 --- /dev/null +++ b/app/styles/main.less @@ -0,0 +1,206 @@ +@import "bootstrap/bootstrap.less"; +@import "clearsans.less"; +@import "theme.less"; +@import "icons.less"; +@import "retina.less"; +@import "setup.less"; +@import "radial.less"; +@import "header.less"; +@import "containers.less"; + +html, body { + height: 100%; + width: 100%; + overflow: hidden; + -webkit-font-smoothing: antialiased; + user-select: none; + font-family: 'Clear Sans', sans-serif; +} + +::-webkit-scrollbar { + width: 13px; +} + +::-webkit-scrollbar-track { + margin: 3px; + -webkit-border-radius: 5px; + border-radius: 5px; + background: none; +} + +::-webkit-scrollbar-thumb { + border: 3px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + width: 7px; + border-radius: 8px; + background-color: rgba(0,0,0,0.2); +} + +.create-modal { + @modal-padding: 32px; + @search-width: 372px; + @custom-width: 270px; + .modal-dialog { + margin-top: 8%; + width: calc(@modal-padding + @search-width + 2 * @modal-padding + @custom-width); + } + .modal-content { + //box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10); + border: none; //1px solid #ccc; + height: 610px; + } + .modal-body { + display: flex; + flex-direction: row; + padding: 32px 32px; + + .title { + color: #CCD3D5; + font-weight: 400; + font-size: 13px; + } + + aside.custom { + flex: 0 auto; + padding-left: 32px; + min-width: 270px; + } + + section.search { + flex: 0 auto; + min-width: 404px; + padding-right: 32px; + border-right: 1px solid #eee; + + .question { + a { + color: #CCD3D5; + } + font-size: 10px; + text-align: right; + } + + input { + border-radius: 20px; + font-size: 13px; + height: 38px; + padding: 8px 16px; + font-weight: 400; + color: #666; + + &:focus { + box-shadow: none; + border-color: #bbb; + } + + &::-webkit-input-placeholder { + color: #ddd; + font-weight: 300; + } + } + + .results { + overflow: auto; + + .title { + margin-top: 16px; + } + + ul { + list-style: none; + color: #555; + padding: 0; + + li { + display: flex; + flex-direction: row; + margin: 12px; + border-bottom: 1px solid #eee; + .info { + .name { + max-width: 278px; + img { + margin-right: 6px; + margin-left: 2px; + } + font-size: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .stars { + color: #A7A7A7; + margin-top: 2px; + + .star-count { + font-size: 10px; + display: inline-block; + position: relative; + top: -3px; + left: 1px; + height: 17px; + } + + .icon { + overflow: hidden; + display: inline-block; + font-size: 15px; + height: 15px; + } + } + flex: 0 auto; + } + .action { + text-align: right; + flex: 1 auto; + } + } + } + } + } + } +} + +.modal-backdrop.in { + background: rgba(227,230,230,0.95); + opacity: 1; + height: 100%; +} + +@-webkit-keyframes translatedownload { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } +} + +@-webkit-keyframes translatewave { + from { + -webkit-transform: translateX(0px); + } + to { + -webkit-transform: translateX(20px); + } +} + +@-webkit-keyframes translatedownload { + 0% { + -webkit-transform: translateY(6px); + opacity: 0; + } + 25% { + opacity: 1; + -webkit-transform: translateY(6px); + } + 50% { + opacity: 1; + -webkit-transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(20px); + } +} diff --git a/app/styles/theme.less b/app/styles/theme.less index 9d80a8194e..41d5e83de2 100644 --- a/app/styles/theme.less +++ b/app/styles/theme.less @@ -24,7 +24,7 @@ .btn-styles(@btn-color: #555) { .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners background-repeat: repeat-x; - border-color: darken(@btn-color, 14%); + // border-color: darken(@btn-color, 14%); &:hover, &:focus { diff --git a/app/styles/variables.less b/app/styles/variables.less index b247968deb..e11e816a84 100644 --- a/app/styles/variables.less +++ b/app/styles/variables.less @@ -1,4 +1,4 @@ -@brand-primary: #49CEF2; +@brand-primary: #24B8EB; @brand-action: #49CEF2; @brand-positive: #3AD86D; @brand-negative: #F74B1F;