From f66f3b97d61df6f78214aa2a5ea5707abad81687 Mon Sep 17 00:00:00 2001 From: Vladimir Polyakov Date: Sat, 11 Jul 2015 15:24:35 +0300 Subject: [PATCH] new components structure, navigation in header --- static/css/sources/components/projects.less | 4 ++++ static/js/app/app.js | 6 ++--- static/js/app/components/app/index.jade | 6 +++++ static/js/app/components/app/index.js | 24 +++++++++++++++++++ .../template.jade => dashboard/index.jade} | 0 .../{app/component.js => dashboard/index.js} | 11 +++++---- .../header/{template.jade => index.jade} | 2 +- .../header/{component.js => index.js} | 2 +- static/js/app/components/index.js | 10 ++++---- .../components/projects/selector/index.jade | 3 ++- .../app/components/projects/selector/index.js | 5 +++- .../app/components/projects/view/index.jade | 5 ++-- static/js/app/index.jade | 5 ---- static/js/app/stores/terminal.js | 2 -- 14 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 static/js/app/components/app/index.jade create mode 100644 static/js/app/components/app/index.js rename static/js/app/components/{app/template.jade => dashboard/index.jade} (100%) rename static/js/app/components/{app/component.js => dashboard/index.js} (57%) rename static/js/app/components/header/{template.jade => index.jade} (81%) rename static/js/app/components/header/{component.js => index.js} (88%) delete mode 100644 static/js/app/index.jade diff --git a/static/css/sources/components/projects.less b/static/css/sources/components/projects.less index 9bbc48b..b552d58 100644 --- a/static/css/sources/components/projects.less +++ b/static/css/sources/components/projects.less @@ -32,6 +32,10 @@ &_item { padding: 5px 10px; + &_link { + color: white; + text-decoration: none; + } &_run { color: rgba(255, 255, 255, 0.5); &:hover { diff --git a/static/js/app/app.js b/static/js/app/app.js index 62ac40c..bc24df9 100644 --- a/static/js/app/app.js +++ b/static/js/app/app.js @@ -17,8 +17,8 @@ define([ DefaultRoute = React.createFactory(Router.DefaultRoute); var routes = ( - Route({name: 'index', path: '/'}, - Route({name: 'dashboard', path: '/', handler: Components.App}), + Route({handler: Components.App}, + Route({name: 'dashboard', path: '/', handler: Components.Dashboard}), Route({ name: 'projects', path: 'projects/:name', @@ -30,7 +30,7 @@ define([ Router.run(routes, Router.HistoryLocation, function(Handler) { React.render( - template({Component: Handler, Header: Components.Header}), + React.createElement(Handler), document.getElementById('content') ); }); diff --git a/static/js/app/components/app/index.jade b/static/js/app/components/app/index.jade new file mode 100644 index 0000000..ca9511a --- /dev/null +++ b/static/js/app/components/app/index.jade @@ -0,0 +1,6 @@ +div + Header() + + .container-fluid + .page-wrapper + RouteHandler() diff --git a/static/js/app/components/app/index.js b/static/js/app/components/app/index.js new file mode 100644 index 0000000..69dff16 --- /dev/null +++ b/static/js/app/components/app/index.js @@ -0,0 +1,24 @@ +'use strict'; + +define([ + 'react', + 'react-router', + 'app/actions/project', + 'app/components/header/index', + 'templates/app/components/app/index' +], function(React, Router, ProjectActions, Header, template) { + template = template.locals({ + Link: Router.Link, + Header: Header, + RouteHandler: Router.RouteHandler + }); + + var Component = React.createClass({ + componentWillMount: function() { + ProjectActions.readAll(); + }, + render: template + }); + + return Component; +}); diff --git a/static/js/app/components/app/template.jade b/static/js/app/components/dashboard/index.jade similarity index 100% rename from static/js/app/components/app/template.jade rename to static/js/app/components/dashboard/index.jade diff --git a/static/js/app/components/app/component.js b/static/js/app/components/dashboard/index.js similarity index 57% rename from static/js/app/components/app/component.js rename to static/js/app/components/dashboard/index.js index 3ab330e..a447e3b 100644 --- a/static/js/app/components/app/component.js +++ b/static/js/app/components/dashboard/index.js @@ -2,14 +2,15 @@ define([ 'react', + 'react-router', 'app/actions/project', 'app/actions/build', - 'app/components/projects/index', - 'app/components/builds/index', - 'templates/app/components/app/template' -], function(React, ProjectActions, BuildActions, Projects, Builds, template) { + 'app/components/builds/list', + 'templates/app/components/dashboard/index' +], function(React, Router, ProjectActions, BuildActions, BuildsList, template) { template = template.locals({ - BuildsList: Builds.List + Link: Router.Link, + BuildsList: BuildsList }); var Component = React.createClass({ diff --git a/static/js/app/components/header/template.jade b/static/js/app/components/header/index.jade similarity index 81% rename from static/js/app/components/header/template.jade rename to static/js/app/components/header/index.jade index 1a93c6f..7199e32 100644 --- a/static/js/app/components/header/template.jade +++ b/static/js/app/components/header/index.jade @@ -1,7 +1,7 @@ .navbar.navbar-default.navbar-fixed-top .container-fluid .navbar-header - a.navbar-brand(href="/") + Link.navbar-brand(to="dashboard") span NCI .navbar-left.navbar-form(style={paddingTop: "11px"}) ProjectsSelector() diff --git a/static/js/app/components/header/component.js b/static/js/app/components/header/index.js similarity index 88% rename from static/js/app/components/header/component.js rename to static/js/app/components/header/index.js index 7e9ecf8..62ac242 100644 --- a/static/js/app/components/header/component.js +++ b/static/js/app/components/header/index.js @@ -4,7 +4,7 @@ define([ 'react', 'react-router', 'app/components/projects/selector/index', - 'templates/app/components/header/template' + 'templates/app/components/header/index' ], function(React, Router, ProjectsSelector, template) { template = template.locals({ Link: Router.Link, diff --git a/static/js/app/components/index.js b/static/js/app/components/index.js index f1b0c42..a2d7480 100644 --- a/static/js/app/components/index.js +++ b/static/js/app/components/index.js @@ -3,13 +3,15 @@ define([ 'app/components/projects/index', 'app/components/builds/index', - 'app/components/app/component', - 'app/components/header/component' -], function(ProjectsComponents, BuildsComponents, App, Header) { + 'app/components/app/index', + 'app/components/header/index', + 'app/components/dashboard/index' +], function(ProjectsComponents, BuildsComponents, App, Header, Dashboard) { return { App: App, Header: Header, Project: ProjectsComponents, - Build: BuildsComponents + Build: BuildsComponents, + Dashboard: Dashboard }; }); diff --git a/static/js/app/components/projects/selector/index.jade b/static/js/app/components/projects/selector/index.jade index 3d0e96f..e621b4e 100644 --- a/static/js/app/components/projects/selector/index.jade +++ b/static/js/app/components/projects/selector/index.jade @@ -15,7 +15,8 @@ each project in this.state.projects li.projects-selector_item.row(key=project.name) .col-md-8 - p= project.name + Link.projects-selector_item_link(to="projects", params={name: project.name}, onMouseDown=this.onSelectProject(project.name)) + span= project.name .col-md-4.text-small.text-right a.projects-selector_item_run(href="javascript:void(0);", onMouseDown=this.onRunProject(project.name)) i.fa.fa-fw.fa-play diff --git a/static/js/app/components/projects/selector/index.js b/static/js/app/components/projects/selector/index.js index adc3f28..235d164 100644 --- a/static/js/app/components/projects/selector/index.js +++ b/static/js/app/components/projects/selector/index.js @@ -10,7 +10,7 @@ define([ }); return React.createClass({ - mixins: [Reflux.ListenerMixin], + mixins: [Reflux.ListenerMixin, Router.Navigation], componentDidMount: function() { this.listenTo(projectsStore, this.updateItems); }, @@ -23,6 +23,9 @@ define([ ProjectActions.run(projectName) this.setState({showSearch: false}); }, + onSelectProject: function(name) { + this.transitionTo('projects', {name: name}); + }, updateItems: function(projects) { this.setState({projects: projects}); }, diff --git a/static/js/app/components/projects/view/index.jade b/static/js/app/components/projects/view/index.jade index 8636d94..cc85d12 100644 --- a/static/js/app/components/projects/view/index.jade +++ b/static/js/app/components/projects/view/index.jade @@ -1,2 +1,3 @@ -h1= this.state.project.name -Builds() +div + h1= this.state.project.name + Builds() diff --git a/static/js/app/index.jade b/static/js/app/index.jade deleted file mode 100644 index 48f040c..0000000 --- a/static/js/app/index.jade +++ /dev/null @@ -1,5 +0,0 @@ -Header() - -.container-fluid - .page-wrapper - Component() diff --git a/static/js/app/stores/terminal.js b/static/js/app/stores/terminal.js index e6f0370..211c242 100644 --- a/static/js/app/stores/terminal.js +++ b/static/js/app/stores/terminal.js @@ -8,8 +8,6 @@ define([ listenables: BuildActions, init: function() { - console.log('init builds console output'); - // the only purpose of this hash to reconnect all the time // except first, see notes at using this.connectedResourcesHash = {};