[ARVADOS-WORKBENCH2] updated: 1.1.4-324-g0a80eaa
Git user
git at public.curoverse.com
Wed Jul 18 05:14:53 EDT 2018
Summary of changes:
src/common/custom-theme.ts | 30 ++++++++++
src/components/side-panel/side-panel.tsx | 98 +++++++++++++++++++-------------
2 files changed, 87 insertions(+), 41 deletions(-)
via 0a80eaa377a404c55660ecae52b495a9ed2e9167 (commit)
from 082c172edc327afa52f9ec716f7702e3f29e58d6 (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 0a80eaa377a404c55660ecae52b495a9ed2e9167
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Jul 18 11:14:45 2018 +0200
refactoring side panel component
Feature #13797
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index e81473a..f412024 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -8,6 +8,8 @@ import purple from '@material-ui/core/colors/purple';
import blue from '@material-ui/core/colors/blue';
import grey from '@material-ui/core/colors/grey';
import green from '@material-ui/core/colors/green';
+import yellow from '@material-ui/core/colors/yellow';
+import red from '@material-ui/core/colors/red';
interface ArvadosThemeOptions extends ThemeOptions {
customs: any;
@@ -17,8 +19,16 @@ export interface ArvadosTheme extends Theme {
customs: any;
}
+// const red =
+const yellow700 = yellow["700"];
const purple800 = purple["800"];
+const grey200 = grey["200"];
+const grey300 = grey["300"];
+const grey500 = grey["500"];
const grey600 = grey["600"];
+const grey700 = grey["700"];
+const grey900 = grey["900"];
+
const themeOptions: ArvadosThemeOptions = {
customs: {
colors: {
@@ -26,6 +36,11 @@ const themeOptions: ArvadosThemeOptions = {
}
},
overrides: {
+ MuiTypography: {
+ body1: {
+ fontSize: '0.8125rem'
+ }
+ },
MuiAppBar: {
colorPrimary: {
backgroundColor: purple800
@@ -44,6 +59,21 @@ const themeOptions: ArvadosThemeOptions = {
fontWeight: 700,
color: purple800
}
+ },
+ MuiList: {
+ root: {
+ color: grey900
+ }
+ },
+ MuiListItemText: {
+ root: {
+ padding: 0
+ }
+ },
+ MuiListItemIcon: {
+ root: {
+ fontSize: '1.25rem'
+ }
}
},
mixins: {
diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index eedc499..2d384ef 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -30,7 +30,7 @@ interface SidePanelProps {
class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
render(): ReactElement<any> {
const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
- const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, iconArrowContainer } = classes;
+ const { leftSidePanelContainer, row, list, toggableIconContainer } = classes;
return (
<div className={leftSidePanelContainer}>
<List>
@@ -39,15 +39,16 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
<ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
<span className={row}>
{it.openAble ? (
- <i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
- <SidePanelRightArrowIcon className={this.getIconClassNames(it.open, it.active)} />
+ <i onClick={() => toggleOpen(it.id)} className={toggableIconContainer}>
+ <ListItemIcon className={this.getToggableIconClassNames(it.open, it.active)}>
+ {< SidePanelRightArrowIcon />}
+ </ListItemIcon>
</i>
) : null}
- <ListItemIcon className={it.active ? active : ''}>
- {<it.icon className={`${icon} ${it.margin ? projectIconMargin : ''}`} />}
+ <ListItemIcon className={this.getListItemIconClassNames(it.margin, it.active)}>
+ {<it.icon />}
</ListItemIcon>
- <ListItemText className={listItemText}
- primary={renderListItemText(it.name, active, it.active)} />
+ <ListItemText primary={this.renderListItemText(it.name, it.active)} />
</span>
</ListItem>
{it.openAble ? (
@@ -62,12 +63,33 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
);
}
- getIconClassNames = (itemOpen ?: boolean, itemActive ?: boolean) => {
+ getToggableIconClassNames = (isOpen?: boolean, isActive ?: boolean) => {
const { classes } = this.props;
- return classnames(classes.iconArrow, {
- [classes.iconOpen]: itemOpen,
- [classes.iconClose]: !itemOpen,
- [classes.active]: itemActive
+ return classnames(classes.toggableIcon, {
+ [classes.iconOpen]: isOpen,
+ [classes.iconClose]: !isOpen,
+ [classes.active]: isActive
+ });
+ }
+
+ 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
});
}
@@ -77,55 +99,49 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
}
-const renderListItemText = (itemName: string, active: string, itemActive?: boolean) =>
- <Typography className={itemActive ? active : ''}>{itemName}</Typography>;
-
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' |
- 'projectIconMargin' | 'iconClose' | 'iconOpen' | 'iconArrowContainer' | 'iconArrow';
+type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' |
+ 'hasMargin' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- active: {
- color: theme.palette.primary.main,
+ leftSidePanelContainer: {
+ overflowY: 'auto',
+ minWidth: '240px',
+ whiteSpace: 'nowrap',
+ marginTop: '52px',
+ display: 'flex',
+ flexGrow: 1,
},
- listItemText: {
- padding: '0px',
+ list: {
+ padding: '5px 0px 5px 14px',
+ minWidth: '240px',
},
row: {
display: 'flex',
alignItems: 'center',
},
- iconArrowContainer: {
+ toggableIconContainer: {
color: theme.palette.grey["700"],
height: '14px',
position: 'absolute'
},
- iconArrow: {
+ toggableIcon: {
fontSize: '14px'
},
+ listItemText: {
+ fontWeight: 700
+ },
+ active: {
+ color: theme.palette.primary.main,
+ },
+ hasMargin: {
+ marginLeft: '18px',
+ },
iconClose: {
transition: 'all 0.1s ease',
},
iconOpen: {
transition: 'all 0.1s ease',
transform: 'rotate(90deg)',
- },
- leftSidePanelContainer: {
- overflowY: 'auto',
- minWidth: '240px',
- whiteSpace: 'nowrap',
- marginTop: '52px',
- display: 'flex',
- flexGrow: 1,
- },
- list: {
- padding: '5px 0px 5px 14px',
- minWidth: '240px',
- },
- icon: {
- fontSize: '20px'
- },
- projectIconMargin: {
- marginLeft: '17px',
}
});
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list