import ProjectsListContainer from './ProjectsListContainer';
import ProjectsListFooterContainer from './ProjectsListFooterContainer';
import PageSidebarContainer from './PageSidebarContainer';
-import FavoriteFilterContainer from './FavoriteFilterContainer';
+import ProjectsListHeaderContainer from './ProjectsListHeaderContainer';
import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
import { parseUrlQuery } from '../store/utils';
import { translate } from '../../../helpers/l10n';
<div id="projects-page" className="page page-limited">
<Helmet title={translate('projects.page')} titleTemplate="SonarQube - %s"/>
- <PageHeaderContainer/>
-
<GlobalMessagesContainer/>
<div className="page-with-sidebar page-with-left-sidebar">
<div className="page-main">
- <ProjectsListContainer/>
- <ProjectsListFooterContainer query={this.state.query}/>
+ <div className="projects-list-container">
+ <ProjectsListHeaderContainer/>
+ <ProjectsListContainer/>
+ <ProjectsListFooterContainer query={this.state.query}/>
+ </div>
</div>
<aside className="page-sidebar-fixed projects-sidebar">
- <FavoriteFilterContainer/>
+ <PageHeaderContainer/>
<PageSidebarContainer query={this.state.query}/>
</aside>
</div>
}
return (
- <div className="button-group projects-favorite-filter">
+ <div className="button-group">
<IndexLink to="/projects" className="button" activeClassName="button-active">All</IndexLink>
<Link to="/projects/favorite" className="button" activeClassName="button-active">Favorite</Link>
</div>
import Helmet from 'react-helmet';
import PageHeaderContainer from './PageHeaderContainer';
import ProjectsListContainer from './ProjectsListContainer';
-import FavoriteFilterContainer from './FavoriteFilterContainer';
+import ProjectsListHeaderContainer from './ProjectsListHeaderContainer';
import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
import { translate } from '../../../helpers/l10n';
import '../styles.css';
<div id="projects-page" className="page page-limited">
<Helmet title={translate('projects.page')} titleTemplate="SonarQube - %s"/>
- <PageHeaderContainer/>
-
<GlobalMessagesContainer/>
<div className="page-with-sidebar page-with-left-sidebar">
<div className="page-main">
- <ProjectsListContainer/>
+ <div className="projects-list-container">
+ <ProjectsListHeaderContainer/>
+ <ProjectsListContainer/>
+ </div>
</div>
<aside className="page-sidebar-fixed projects-sidebar">
- <FavoriteFilterContainer/>
-
+ <PageHeaderContainer/>
<p className="note text-center">Filters are not available.</p>
</aside>
</div>
export default class PageHeader extends React.Component {
static propTypes = {
- total: React.PropTypes.number,
loading: React.PropTypes.bool
};
render () {
- const { total, loading } = this.props;
+ const { loading } = this.props;
return (
<header className="page-header">
{!!loading && (
<i className="spinner"/>
)}
-
- <div className="page-actions">
- {total != null && (
- <span><strong>{total}</strong> {translate('projects._projects')}</span>
- )}
- </div>
-
- <div className="page-description">
- {translate('projects.page.description')}
- </div>
</header>
);
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import React from 'react';
-import { List, AutoSizer, WindowScroller } from 'react-virtualized';
import ProjectCardContainer from './ProjectCardContainer';
import { translate } from '../../../helpers/l10n';
export default class ProjectsList extends React.Component {
static propTypes = {
- projects: React.PropTypes.arrayOf(React.PropTypes.string)
+ projects: React.PropTypes.arrayOf(React.PropTypes.string),
};
render () {
return null;
}
- if (projects.length === 0) {
- return (
- <div className="projects-empty-list">
- <h3>{translate('projects.no_projects.1')}</h3>
- <p className="big-spacer-top">{translate('projects.no_projects.2')}</p>
- </div>
- );
- }
-
- const rowRenderer = ({ key, index, style }) => {
- const projectKey = projects[index];
- return (
- <div key={key} style={style}>
- <ProjectCardContainer projectKey={projectKey}/>
- </div>
- );
- };
-
return (
- <WindowScroller>
- {({ height, scrollTop }) => (
- <AutoSizer disableHeight>
- {({ width }) => (
- <List
- className="projects-list"
- autoHeight
- width={width}
- height={height}
- rowCount={projects.length}
- rowHeight={135}
- rowRenderer={rowRenderer}
- scrollTop={scrollTop}
- overscanRowCount={100}/>
- )}
- </AutoSizer>
+ <div className="projects-list">
+ {projects.length > 0 ? (
+ projects.map(projectKey => (
+ <ProjectCardContainer key={projectKey} projectKey={projectKey}/>
+ ))
+ ) : (
+ <div className="projects-empty-list">
+ <h3>{translate('projects.no_projects.1')}</h3>
+ <p className="big-spacer-top">{translate('projects.no_projects.2')}</p>
+ </div>
)}
- </WindowScroller>
+ </div>
);
}
}
*/
import { connect } from 'react-redux';
import ProjectsList from './ProjectsList';
-import { getProjects } from '../../../app/store/rootReducer';
+import { getProjects, getProjectsAppState } from '../../../app/store/rootReducer';
export default connect(
state => ({
- projects: getProjects(state)
+ projects: getProjects(state),
+ total: getProjectsAppState(state).total
})
)(ProjectsList);
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import React from 'react';
+import FavoriteFilterContainer from './FavoriteFilterContainer';
+import { translate } from '../../../helpers/l10n';
+
+export default class ProjectsListHeader extends React.Component {
+ static propTypes = {
+ total: React.PropTypes.number
+ };
+
+ render () {
+ return (
+ <header className="page-header">
+ <div className="page-actions">
+ {this.props.total != null && (
+ <span>
+ <strong>{this.props.total}</strong> {translate('projects._projects')}
+ </span>
+ )}
+ </div>
+ <FavoriteFilterContainer/>
+ </header>
+ );
+ }
+}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { connect } from 'react-redux';
+import ProjectsListHeader from './ProjectsListHeader';
+import { getProjectsAppState } from '../../../app/store/rootReducer';
+
+const mapStateToProps = state => (
+ getProjectsAppState(state)
+);
+
+export default connect(
+ mapStateToProps
+)(ProjectsListHeader);
width: 260px;
}
-.projects-list {
- outline: none;
+.projects-list-container {
+ width: 740px;
+}
+
+.projects-list .page-actions {
+ margin-bottom: 0;
}
.projects-empty-list {
.projects-facets-reset .button {
}
-
-.projects-favorite-filter {
- width: 100%;
- margin-bottom: 30px;
- padding-left: 10px;
- padding-right: 10px;
- box-sizing: border-box;
-}
-
-.projects-favorite-filter > a {
- width: 50%;
-}
projects / sonarqube.git / commitdiff