From 08a4e58b8f3abad8dcda36c1df32d1f5efd2096f Mon Sep 17 00:00:00 2001 From: Vladimir Polyakov Date: Sun, 14 Jun 2015 14:24:31 +0300 Subject: [PATCH 1/2] new project selector --- static/css/sources/components/projects.less | 43 ++++++++++++++++++ static/js/app/components/app/component.js | 1 - static/js/app/components/app/template.jade | 7 +-- static/js/app/components/builds/list.jade | 2 + static/js/app/components/header/component.js | 6 ++- static/js/app/components/header/template.jade | 7 ++- static/js/app/components/projects/index.js | 8 ++-- static/js/app/components/projects/item.jade | 3 -- static/js/app/components/projects/item.js | 19 -------- static/js/app/components/projects/list.jade | 3 -- static/js/app/components/projects/list.js | 32 ------------- .../components/projects/selector/index.jade | 23 ++++++++++ .../app/components/projects/selector/index.js | 45 +++++++++++++++++++ 13 files changed, 125 insertions(+), 74 deletions(-) delete mode 100644 static/js/app/components/projects/item.jade delete mode 100644 static/js/app/components/projects/item.js delete mode 100644 static/js/app/components/projects/list.jade delete mode 100644 static/js/app/components/projects/list.js create mode 100644 static/js/app/components/projects/selector/index.jade create mode 100644 static/js/app/components/projects/selector/index.js diff --git a/static/css/sources/components/projects.less b/static/css/sources/components/projects.less index e69de29..9bbc48b 100644 --- a/static/css/sources/components/projects.less +++ b/static/css/sources/components/projects.less @@ -0,0 +1,43 @@ +.projects-selector { + position: relative; + width: 300px; + color: white; + cursor: pointer; + &_preview { + color: rgba(255, 255, 255, 0.5); + padding: 5px 25px 5px 5px; + &_text { + padding-left: 10px; + } + } + + &_input { + width: 80%; + padding-bottom: 3px; + padding-left: 10px; + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.5); + background: transparent; + outline: none; + } + + &_items { + position: absolute; + width: 100%; + padding: 15px 5px 5px; + left: 0; + background: #2c3e50; + list-style: none; + } + + &_item { + padding: 5px 10px; + &_run { + color: rgba(255, 255, 255, 0.5); + &:hover { + color: white; + text-decoration: none; + } + } + } +} diff --git a/static/js/app/components/app/component.js b/static/js/app/components/app/component.js index aa07059..3ab330e 100644 --- a/static/js/app/components/app/component.js +++ b/static/js/app/components/app/component.js @@ -9,7 +9,6 @@ define([ 'templates/app/components/app/template' ], function(React, ProjectActions, BuildActions, Projects, Builds, template) { template = template.locals({ - ProjectsList: Projects.List, BuildsList: Builds.List }); diff --git a/static/js/app/components/app/template.jade b/static/js/app/components/app/template.jade index efcd1d9..649297b 100644 --- a/static/js/app/components/app/template.jade +++ b/static/js/app/components/app/template.jade @@ -1,8 +1,5 @@ .main-row .row - .col-md-4.col-md-push-8 - h2 Projects - ProjectsList() - - .col-md-8.col-md-pull-4 + .col-md-8 + h2 Active builds BuildsList() diff --git a/static/js/app/components/builds/list.jade b/static/js/app/components/builds/list.jade index f7e74ec..38e4ede 100644 --- a/static/js/app/components/builds/list.jade +++ b/static/js/app/components/builds/list.jade @@ -1,4 +1,6 @@ - console.log('builds', items) .builds + if !items.length + p Build queue is empty each build, index in items Item(build=build, key=build.id) diff --git a/static/js/app/components/header/component.js b/static/js/app/components/header/component.js index edea596..7e9ecf8 100644 --- a/static/js/app/components/header/component.js +++ b/static/js/app/components/header/component.js @@ -3,10 +3,12 @@ define([ 'react', 'react-router', + 'app/components/projects/selector/index', 'templates/app/components/header/template' -], function(React, Router, template) { +], function(React, Router, ProjectsSelector, template) { template = template.locals({ - Link: Router.Link + Link: Router.Link, + ProjectsSelector: ProjectsSelector }); var Component = React.createClass({ diff --git a/static/js/app/components/header/template.jade b/static/js/app/components/header/template.jade index 334d683..1a93c6f 100644 --- a/static/js/app/components/header/template.jade +++ b/static/js/app/components/header/template.jade @@ -2,7 +2,6 @@ .container-fluid .navbar-header a.navbar-brand(href="/") - span Company Brand Name CI - form.navbar-left.navbar-form - .form-group - input.form-control(placeholder="Start typing project name...", style={width: '220px'}) + span NCI + .navbar-left.navbar-form(style={paddingTop: "11px"}) + ProjectsSelector() diff --git a/static/js/app/components/projects/index.js b/static/js/app/components/projects/index.js index 1cd9ed4..1b24ecc 100644 --- a/static/js/app/components/projects/index.js +++ b/static/js/app/components/projects/index.js @@ -1,11 +1,9 @@ 'use strict'; define([ - 'app/components/projects/item', - 'app/components/projects/list' -], function(Item, List) { + 'app/components/projects/selector/index' +], function(Selector) { return { - Item: Item, - List: List + Selector: Selector }; }); diff --git a/static/js/app/components/projects/item.jade b/static/js/app/components/projects/item.jade deleted file mode 100644 index 05e60a6..0000000 --- a/static/js/app/components/projects/item.jade +++ /dev/null @@ -1,3 +0,0 @@ -li.list-group-item - a.pull-right(href="javascript:void(0);", onClick=onProjectSelect(item.name)) start build - span= item.name diff --git a/static/js/app/components/projects/item.js b/static/js/app/components/projects/item.js deleted file mode 100644 index 60ac47a..0000000 --- a/static/js/app/components/projects/item.js +++ /dev/null @@ -1,19 +0,0 @@ -'use strict'; - -define([ - 'react', 'app/actions/project', 'templates/app/components/projects/item', -], function(React, ProjectActions, template) { - var Component = React.createClass({ - onProjectSelect: function(projectName) { - ProjectActions.run(projectName) - }, - render: function() { - return template({ - item: this.props.item, - onProjectSelect: this.onProjectSelect - }); - } - }); - - return Component; -}); diff --git a/static/js/app/components/projects/list.jade b/static/js/app/components/projects/list.jade deleted file mode 100644 index 5e07d46..0000000 --- a/static/js/app/components/projects/list.jade +++ /dev/null @@ -1,3 +0,0 @@ -ul.list-group - each project, index in items - Item(item=project, key=project.name) diff --git a/static/js/app/components/projects/list.js b/static/js/app/components/projects/list.js deleted file mode 100644 index 91f00f4..0000000 --- a/static/js/app/components/projects/list.js +++ /dev/null @@ -1,32 +0,0 @@ -'use strict'; - -define([ - 'react', - 'reflux', - './item', - 'app/stores/project', - 'templates/app/components/projects/list' -], function(React, Reflux, Item, projectStore, template) { - var Component = React.createClass({ - mixins: [Reflux.ListenerMixin], - componentDidMount: function() { - this.listenTo(projectStore, this.updateItems); - }, - updateItems: function(items) { - this.setState({items: items}); - }, - render: function() { - return template({ - Item: Item, - items: this.state.items - }); - }, - getInitialState: function() { - return { - items: [] - }; - } - }); - - return Component; -}); diff --git a/static/js/app/components/projects/selector/index.jade b/static/js/app/components/projects/selector/index.jade new file mode 100644 index 0000000..3d0e96f --- /dev/null +++ b/static/js/app/components/projects/selector/index.jade @@ -0,0 +1,23 @@ +.projects-selector(href="javascript:void(0);") + if !this.state.showSearch + span.projects-selector_preview(onClick=this.onSearchProject) + i.fa.fa-fw.fa-bars + span.projects-selector_preview_text Select a project... + else + input.projects-selector_input( + type="text", + value=this.state.searchQuery, + onChange=this.onSearchChange, + ref=this.onInputMount, + onBlur=this.onBlurSearch + ) + ul.projects-selector_items + each project in this.state.projects + li.projects-selector_item.row(key=project.name) + .col-md-8 + p= 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 new file mode 100644 index 0000000..e47992a --- /dev/null +++ b/static/js/app/components/projects/selector/index.js @@ -0,0 +1,45 @@ +'use strict'; + +define([ + 'react', 'reflux', 'app/actions/project', + 'app/stores/project', + 'templates/app/components/projects/selector/index' +], function(React, Reflux, ProjectActions, projectsStore, template) { + return React.createClass({ + mixins: [Reflux.ListenerMixin], + componentDidMount: function() { + this.listenTo(projectsStore, this.updateItems); + }, + getInitialState: function() { + return { + showSearch: false + }; + }, + onRunProject: function(projectName) { + ProjectActions.run(projectName) + this.setState({showSearch: false}); + }, + updateItems: function(projects) { + console.log(projects); + this.setState({projects: projects}); + }, + onSearchProject: function() { + this.setState({showSearch: true}); + }, + onInputMount: function(component) { + var node = React.findDOMNode(component); + if (node) { + node.focus(); + } + }, + onBlurSearch: function() { + this.setState({showSearch: false}); + }, + onSearchChange: function(event) { + var query = event.target.value; + this.setState({searchQuery: query}); + ProjectActions.readAll({nameQuery: query}); + }, + render: template, + }); +}); From 6b97f36d2bffd444588ff78f585130f4afa2774a Mon Sep 17 00:00:00 2001 From: Vladimir Polyakov Date: Sun, 14 Jun 2015 14:32:07 +0300 Subject: [PATCH 2/2] remove unused console.log --- static/js/app/components/projects/selector/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/static/js/app/components/projects/selector/index.js b/static/js/app/components/projects/selector/index.js index e47992a..a72b959 100644 --- a/static/js/app/components/projects/selector/index.js +++ b/static/js/app/components/projects/selector/index.js @@ -20,7 +20,6 @@ define([ this.setState({showSearch: false}); }, updateItems: function(projects) { - console.log(projects); this.setState({projects: projects}); }, onSearchProject: function() {