[ARVADOS-WORKBENCH2] updated: 1.1.4-325-g1d9efaa
Git user
git at public.curoverse.com
Wed Jul 18 08:24:17 EDT 2018
Summary of changes:
src/components/side-panel/side-panel.tsx | 44 ++-----------
.../single-list-item/single-list-item.tsx | 74 ++++++++++++++++++++++
src/components/tree/tree.tsx | 7 +-
src/views-components/project-tree/project-tree.tsx | 46 ++++----------
4 files changed, 98 insertions(+), 73 deletions(-)
create mode 100644 src/components/single-list-item/single-list-item.tsx
via 1d9efaa46b5e30f4b69fa8ebca99ea234a5d40c7 (commit)
from 0a80eaa377a404c55660ecae52b495a9ed2e9167 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 1d9efaa46b5e30f4b69fa8ebca99ea234a5d40c7
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Jul 18 14:24:09 2018 +0200
refatoring project tree component, create component for list item
Feature #13797
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index 2d384ef..8105ba7 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -9,6 +9,7 @@ import { ArvadosTheme } from '../../common/custom-theme';
import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
import * as classnames from "classnames";
+import SingleListItem from '../single-list-item/single-list-item';
export interface SidePanelItem {
id: string;
@@ -30,9 +31,9 @@ interface SidePanelProps {
class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
render(): ReactElement<any> {
const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
- const { leftSidePanelContainer, row, list, toggableIconContainer } = classes;
+ const { root, row, list, toggableIconContainer } = classes;
return (
- <div className={leftSidePanelContainer}>
+ <div className={root}>
<List>
{sidePanelItems.map(it => (
<span key={it.name}>
@@ -41,14 +42,11 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
{it.openAble ? (
<i onClick={() => toggleOpen(it.id)} className={toggableIconContainer}>
<ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
- {< SidePanelRightArrowIcon />}
+ < SidePanelRightArrowIcon />
</ListItemIcon>
</i>
) : null}
- <ListItemIcon className={this.getListItemIconClassNames(it.margin, it.active)}>
- {<it.icon />}
- </ListItemIcon>
- <ListItemText primary={this.renderListItemText(it.name, it.active)} />
+ <SingleListItem icon={it.icon} name={it.name} isActive={it.active} hasMargin={it.margin} />
</span>
</ListItem>
{it.openAble ? (
@@ -72,38 +70,16 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
});
}
- getListItemIconClassNames = (hasMargin?: boolean, isActive?: boolean) => {
- const { classes } = this.props;
- return classnames({
- [classes.hasMargin]: hasMargin,
- [classes.active]: isActive
- });
- }
-
- renderListItemText = (name: string, isActive?: boolean) => {
- return <Typography variant='body1' className={this.getListItemTextClassNames(isActive)}>
- {name}
- </Typography>;
- }
-
- getListItemTextClassNames = (isActive?: boolean) => {
- const { classes } = this.props;
- return classnames(classes.listItemText, {
- [classes.active]: isActive
- });
- }
-
handleRowContextMenu = (item: SidePanelItem) =>
(event: React.MouseEvent<HTMLElement>) =>
item.openAble ? this.props.onContextMenu(event, item) : null
}
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' |
- 'hasMargin' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon';
+type CssRules = 'active' | 'row' | 'root' | 'list' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- leftSidePanelContainer: {
+ root: {
overflowY: 'auto',
minWidth: '240px',
whiteSpace: 'nowrap',
@@ -127,15 +103,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
toggableIcon: {
fontSize: '14px'
},
- listItemText: {
- fontWeight: 700
- },
active: {
color: theme.palette.primary.main,
},
- hasMargin: {
- marginLeft: '18px',
- },
iconClose: {
transition: 'all 0.1s ease',
},
diff --git a/src/components/single-list-item/single-list-item.tsx b/src/components/single-list-item/single-list-item.tsx
new file mode 100644
index 0000000..13338c3
--- /dev/null
+++ b/src/components/single-list-item/single-list-item.tsx
@@ -0,0 +1,74 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from '../../common/custom-theme';
+import { ListItemIcon, ListItemText, Typography } from '@material-ui/core';
+import { IconType } from '../icon/icon';
+import * as classnames from "classnames";
+
+export interface SingleListItemDataProps {
+ icon: IconType;
+ name: string;
+ isActive?: boolean;
+ hasMargin?: boolean;
+}
+
+type SingleListItemProps = SingleListItemDataProps & WithStyles<CssRules>;
+
+class SingleListItem extends React.Component<SingleListItemProps, {}> {
+ render() {
+ const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
+ return (
+ <Typography component='span' className={classes.root}>
+ <ListItemIcon className={this.getListItemIconClassNames(hasMargin, isActive)}>
+ <Icon />
+ </ListItemIcon>
+ <ListItemText primary={
+ <Typography variant='body1' className={this.getListItemTextClassNames(isActive)}>
+ {name}
+ </Typography>
+ } />
+ </Typography>
+ );
+ }
+
+ getListItemIconClassNames = (hasMargin?: boolean, isActive?: boolean) => {
+ const { classes } = this.props;
+ return classnames({
+ [classes.hasMargin]: hasMargin,
+ [classes.active]: isActive
+ });
+ }
+
+ getListItemTextClassNames = (isActive?: boolean) => {
+ const { classes } = this.props;
+ return classnames(classes.listItemText, {
+ [classes.active]: isActive
+ });
+ }
+
+
+}
+
+type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center'
+ },
+ listItemText: {
+ fontWeight: 700
+ },
+ active: {
+ color: theme.palette.primary.main,
+ },
+ hasMargin: {
+ marginLeft: '18px',
+ },
+});
+
+export default withStyles(styles)(SingleListItem);
\ No newline at end of file
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 8de9bda..1ceb3b9 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -5,10 +5,11 @@
import * as React from 'react';
import List from "@material-ui/core/List/List";
import ListItem from "@material-ui/core/ListItem/ListItem";
-import { StyleRulesCallback, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
import { ReactElement } from "react";
import Collapse from "@material-ui/core/Collapse/Collapse";
import CircularProgress from '@material-ui/core/CircularProgress';
+import { ArvadosTheme } from '../../common/custom-theme';
export enum TreeItemStatus {
Initial,
@@ -77,13 +78,13 @@ class Tree<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
type CssRules = 'list' | 'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition' | 'loader' | 'arrowVisibility';
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
list: {
paddingBottom: '3px',
paddingTop: '3px',
},
activeArrow: {
- color: '#4285F6',
+ color: theme.palette.primary.main,
position: 'absolute',
},
inactiveArrow: {
diff --git a/src/views-components/project-tree/project-tree.tsx b/src/views-components/project-tree/project-tree.tsx
index 17592a7..68c4c85 100644
--- a/src/views-components/project-tree/project-tree.tsx
+++ b/src/views-components/project-tree/project-tree.tsx
@@ -5,12 +5,11 @@
import * as React from 'react';
import { ReactElement } from 'react';
import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
-import ListItemText from "@material-ui/core/ListItemText/ListItemText";
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import Typography from '@material-ui/core/Typography';
-
import Tree, { TreeItem, TreeItemStatus } from '../../components/tree/tree';
import { ProjectResource } from '../../models/project';
+import { ProjectIcon } from '../../components/icon/icon';
+import { ArvadosTheme } from '../../common/custom-theme';
+import SingleListItem from '../../components/single-list-item/single-list-item';
export interface ProjectTreeProps {
projects: Array<TreeItem<ProjectResource>>;
@@ -22,46 +21,27 @@ export interface ProjectTreeProps {
class ProjectTree<T> extends React.Component<ProjectTreeProps & WithStyles<CssRules>> {
render(): ReactElement<any> {
const { classes, projects, toggleOpen, toggleActive, onContextMenu } = this.props;
- const { active, listItemText, row, treeContainer } = classes;
+ const { root } = classes;
return (
- <div className={treeContainer}>
+ <div className={root}>
<Tree items={projects}
onContextMenu={onContextMenu}
toggleItemOpen={toggleOpen}
toggleItemActive={toggleActive}
- render={(project: TreeItem<ProjectResource>) =>
- <span className={row}>
- <ListItemIcon className={project.active ? active : ''}>
- <i className="fas fa-folder" />
- </ListItemIcon>
- <ListItemText className={listItemText} primary={
- <Typography className={project.active ? active : ''}>{project.data.name}</Typography>
- } />
- </span>
- } />
+ render={
+ (project: TreeItem<ProjectResource>) =>
+ <SingleListItem icon={ProjectIcon} name={project.data.name} isActive={project.active} hasMargin={true} />
+ }/>
</div>
);
}
}
-type CssRules = 'active' | 'listItemText' | 'row' | 'treeContainer';
+type CssRules = 'root';
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
- active: {
- color: '#4285F6',
- },
- listItemText: {
- padding: '0px',
- },
- row: {
- display: 'flex',
- alignItems: 'center',
- marginLeft: '20px',
- },
- treeContainer: {
- minWidth: '240px',
- whiteSpace: 'nowrap',
- marginLeft: '13px',
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ marginLeft: `${theme.spacing.unit * 1.5}px`,
}
});
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list