[ARVADOS-WORKBENCH2] created: 1.1.4-291-gdca9116
Git user
git at public.curoverse.com
Mon Jul 16 03:22:30 EDT 2018
at dca911684e2f09e518e976f9e1e3d3c2aec2c86a (commit)
commit dca911684e2f09e518e976f9e1e3d3c2aec2c86a
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Jul 11 15:15:49 2018 +0200
improve attributes and dt-factory, modify side-panel, main-app-bar and icons
Feature #13764
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/attribute/attribute.tsx b/src/components/attribute/attribute.tsx
index ea35f5b..319b241 100644
--- a/src/components/attribute/attribute.tsx
+++ b/src/components/attribute/attribute.tsx
@@ -57,8 +57,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
textTransform: 'capitalize'
},
link: {
+ width: '60%',
color: theme.palette.primary.main,
- textDecoration: 'none'
+ textDecoration: 'none',
+ overflowWrap: 'break-word'
}
});
diff --git a/src/components/details-panel-factory/items/collection-item.tsx b/src/components/details-panel-factory/items/collection-item.tsx
index 1fa2891..9b978ea 100644
--- a/src/components/details-panel-factory/items/collection-item.tsx
+++ b/src/components/details-panel-factory/items/collection-item.tsx
@@ -8,6 +8,8 @@ import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { CollectionResource } from '../../../models/collection';
import { formatDate } from '../../../common/formatters';
+import { resourceLabel } from '../../../common/labels';
+import { ResourceKind } from '../../../models/resource';
export default class CollectionItem extends AbstractItem<CollectionResource> {
@@ -17,7 +19,7 @@ export default class CollectionItem extends AbstractItem<CollectionResource> {
buildDetails(): React.ReactElement<any> {
return <div>
- <Attribute label='Type' value='Data Collection' />
+ <Attribute label='Type' value={resourceLabel(ResourceKind.Collection)} />
<Attribute label='Size' value='---' />
<Attribute label='Owner' value={this.item.ownerUuid} />
<Attribute label='Last modified' value={formatDate(this.item.modifiedAt)} />
diff --git a/src/components/details-panel-factory/items/process-item.tsx b/src/components/details-panel-factory/items/process-item.tsx
index 1ea34de..cbb3c23 100644
--- a/src/components/details-panel-factory/items/process-item.tsx
+++ b/src/components/details-panel-factory/items/process-item.tsx
@@ -8,6 +8,7 @@ import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { ProcessResource } from '../../../models/process';
import { formatDate } from '../../../common/formatters';
+import { ResourceKind } from '../../../models/resource';
export default class ProcessItem extends AbstractItem<ProcessResource> {
@@ -17,7 +18,7 @@ export default class ProcessItem extends AbstractItem<ProcessResource> {
buildDetails(): React.ReactElement<any> {
return <div>
- <Attribute label='Type' value='Process' />
+ <Attribute label='Type' value={ResourceKind.Process} />
<Attribute label='Size' value='---' />
<Attribute label='Owner' value={this.item.ownerUuid} />
diff --git a/src/components/details-panel-factory/items/project-item.tsx b/src/components/details-panel-factory/items/project-item.tsx
index 559816e..5094bec 100644
--- a/src/components/details-panel-factory/items/project-item.tsx
+++ b/src/components/details-panel-factory/items/project-item.tsx
@@ -8,6 +8,7 @@ import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { ProjectResource } from '../../../models/project';
import { formatDate } from '../../../common/formatters';
+import { ResourceKind } from '../../../models/resource';
export default class ProjectItem extends AbstractItem<ProjectResource> {
@@ -17,7 +18,7 @@ export default class ProjectItem extends AbstractItem<ProjectResource> {
buildDetails(): React.ReactElement<any> {
return <div>
- <Attribute label='Type' value={this.item.groupClass} />
+ <Attribute label='Type' value={ResourceKind.Collection} />
{/* Missing attr */}
<Attribute label='Size' value='---' />
<Attribute label='Owner' value={this.item.ownerUuid} />
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 4f2b83a..fe285fa 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -3,13 +3,15 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Menu, IconButton } from '@material-ui/core';
+import Menu from '@material-ui/core/Menu';
+import IconButton from '@material-ui/core/IconButton';
import { PopoverOrigin } from '@material-ui/core/Popover';
-
+import IconBase, { IconTypes } from '../icon/icon';
interface DropdownMenuProps {
id: string;
- icon: React.ComponentType;
+ icon: IconTypes;
+ // icon: React.ComponentType;
}
class DropdownMenu extends React.Component<DropdownMenuProps> {
@@ -24,7 +26,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
};
render() {
- const { icon: Icon, id, children } = this.props;
+ const { icon, id, children } = this.props;
const { anchorEl } = this.state;
return (
<div>
@@ -35,7 +37,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
onClick={this.handleOpen}
>
- <Icon />
+ <IconBase icon={icon} />
</IconButton>
<Menu
id={id}
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index c420a19..c6a7466 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -4,17 +4,40 @@
import * as React from 'react';
import * as classnames from "classnames";
+
+import AccessTime from '@material-ui/icons/AccessTime';
+import CodeIcon from '@material-ui/icons/Code';
import CloseAnnouncement from '@material-ui/icons/Announcement';
import CloseIcon from '@material-ui/icons/Close';
+import DeleteIcon from '@material-ui/icons/Delete';
import FolderIcon from '@material-ui/icons/Folder';
+import InboxIcon from '@material-ui/icons/Inbox';
+import InfoIcon from '@material-ui/icons/Info';
+import HelpIcon from '@material-ui/icons/Help';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import PeopleIcon from '@material-ui/icons/People';
+import PersonIcon from '@material-ui/icons/Person';
+import PlayArrow from '@material-ui/icons/PlayArrow';
+import StarIcon from '@material-ui/icons/Star';
export enum IconTypes {
+ ACCESS_TIME = 'access_time',
ANNOUNCEMENT = 'announcement',
- FOLDER = 'folder',
+ CODE = 'code',
+ COLLECTION = 'collection',
CLOSE = 'close',
+ DELETE = 'delete',
+ FOLDER = 'folder',
+ HELP = 'help',
+ INBOX = 'inbox',
+ INFO = 'info',
+ NOTIFICATIONS = 'notifications',
+ PEOPLE = 'people',
+ PERSON = 'person',
+ PLAY_ARROW = 'play_arrow',
+ PROCESS = 'process',
PROJECT = 'project',
- COLLECTION = 'collection',
- PROCESS = 'process'
+ STAR = 'star'
}
interface IconBaseDataProps {
@@ -29,12 +52,23 @@ interface IconBaseState {
}
const getSpecificIcon = (props: any) => ({
+ access_time: <AccessTime className={props.className} />,
announcement: <CloseAnnouncement className={props.className} />,
- folder: <FolderIcon className={props.className} />,
+ code: <CodeIcon className={props.className} />,
+ collection: <i className={classnames([props.className, 'fas fa-archive fa-lg'])} />,
close: <CloseIcon className={props.className} />,
+ delete: <DeleteIcon className={props.className} />,
+ folder: <FolderIcon className={props.className} />,
+ help: <HelpIcon className={props.className} />,
+ info: <InfoIcon className={props.className} />,
+ inbox: <InboxIcon className={props.className} />,
+ notifications: <NotificationsIcon className={props.className} />,
+ people: <PeopleIcon className={props.className} />,
+ person: <PersonIcon className={props.className} />,
+ play_arrow: <PlayArrow className={props.className} />,
+ process: <i className={classnames([props.className, 'fas fa-cogs fa-lg'])} />,
project: <i className={classnames([props.className, 'fas fa-folder fa-lg'])} />,
- collection: <i className={classnames([props.className, 'fas fa-archive fa-lg'])} />,
- process: <i className={classnames([props.className, 'fas fa-cogs fa-lg'])} />
+ star: <StarIcon className={props.className} />
});
class IconBase extends React.Component<IconBaseProps, IconBaseState> {
diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index a7783fb..8b4398b 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -4,19 +4,15 @@
import * as React from 'react';
import { ReactElement } from 'react';
-import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
-import List from "@material-ui/core/List/List";
-import ListItem from "@material-ui/core/ListItem/ListItem";
-import ListItemText from "@material-ui/core/ListItemText/ListItemText";
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import Collapse from "@material-ui/core/Collapse/Collapse";
-
-import { Typography } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from '../../common/custom-theme';
+import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
+import IconBase, { IconTypes } from '../icon/icon';
export interface SidePanelItem {
id: string;
name: string;
- icon: string;
+ icon: IconTypes;
active?: boolean;
open?: boolean;
margin?: boolean;
@@ -33,7 +29,8 @@ 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, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
+ const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active,
+ iconOpen, iconClose, iconArrow, iconArrowContainer } = classes;
return (
<div className={leftSidePanelContainer}>
<List>
@@ -41,18 +38,29 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
<span key={it.name}>
<ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
<span className={row}>
- {it.openAble ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow}
- ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
+ {it.openAble ? (
+ <i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
+ <IconBase icon={IconTypes.PLAY_ARROW}
+ className={`
+ ${iconArrow}
+ ${it.active ? active : ''}
+ ${it.open ? iconOpen : iconClose}
+ `} />
+ </i>
+ ) : null}
<ListItemIcon className={it.active ? active : ''}>
- <i className={`${it.icon} ${icon} ${it.margin ? projectIconMargin : ''}`} />
+ <IconBase icon={it.icon}
+ className={ `${icon} ${it.margin ? projectIconMargin : ''}` } />
</ListItemIcon>
- <ListItemText className={listItemText} primary={<Typography className={it.active ? active : ''}>{it.name}</Typography>} />
+ <ListItemText className={listItemText}
+ primary={renderListItemText(it.name, active, it.active)} />
</span>
</ListItem>
{it.openAble ? (
<Collapse in={it.open} timeout="auto" unmountOnExit>
{children}
- </Collapse>) : null}
+ </Collapse>
+ ) : null}
</span>
))}
</List>
@@ -66,12 +74,15 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
}
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIconMargin' |
- 'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition';
+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';
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
active: {
- color: '#4285F6',
+ color: theme.palette.primary.main,
},
listItemText: {
padding: '0px',
@@ -80,19 +91,20 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
display: 'flex',
alignItems: 'center',
},
- activeArrow: {
- color: '#4285F6',
- position: 'absolute',
+ iconArrowContainer: {
+ color: theme.palette.grey["700"],
+ height: '14px',
+ position: 'absolute'
},
- inactiveArrow: {
- position: 'absolute',
+ iconArrow: {
+ fontSize: '14px'
},
- arrowTransition: {
+ iconClose: {
transition: 'all 0.1s ease',
},
- arrowRotate: {
+ iconOpen: {
transition: 'all 0.1s ease',
- transform: 'rotate(-90deg)',
+ transform: 'rotate(90deg)',
},
leftSidePanelContainer: {
overflowY: 'auto',
@@ -103,13 +115,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
flexGrow: 1,
},
list: {
- paddingBottom: '5px',
- paddingTop: '5px',
- paddingLeft: '14px',
+ padding: '5px 0px 5px 14px',
minWidth: '240px',
},
icon: {
- minWidth: '20px',
+ fontSize: '20px'
},
projectIconMargin: {
marginLeft: '17px',
diff --git a/src/store/side-panel/side-panel-reducer.test.ts b/src/store/side-panel/side-panel-reducer.test.ts
index 942c16e..dc31e89 100644
--- a/src/store/side-panel/side-panel-reducer.test.ts
+++ b/src/store/side-panel/side-panel-reducer.test.ts
@@ -4,6 +4,7 @@
import sidePanelReducer from "./side-panel-reducer";
import actions from "./side-panel-action";
+import { IconTypes } from "../../components/icon/icon";
describe('side-panel-reducer', () => {
@@ -12,7 +13,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: IconTypes.INBOX,
open: false,
active: false,
}
@@ -21,7 +22,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: IconTypes.FOLDER,
open: false,
active: true,
}
@@ -36,7 +37,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: IconTypes.INBOX,
open: false,
active: false,
}
@@ -45,7 +46,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: IconTypes.FOLDER,
open: true,
active: false,
}
@@ -60,7 +61,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: IconTypes.INBOX,
open: false,
active: true,
}
@@ -69,7 +70,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: IconTypes.FOLDER,
open: false,
active: false,
}
diff --git a/src/store/side-panel/side-panel-reducer.ts b/src/store/side-panel/side-panel-reducer.ts
index ca26eeb..b5ab785 100644
--- a/src/store/side-panel/side-panel-reducer.ts
+++ b/src/store/side-panel/side-panel-reducer.ts
@@ -6,6 +6,7 @@ import * as _ from "lodash";
import actions, { SidePanelAction } from './side-panel-action';
import { SidePanelItem } from '../../components/side-panel/side-panel';
+import { IconTypes } from "../../components/icon/icon";
export type SidePanelState = SidePanelItem[];
@@ -48,7 +49,7 @@ export const sidePanelData = [
{
id: SidePanelIdentifiers.Projects,
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: IconTypes.INBOX,
open: false,
active: false,
margin: true,
@@ -57,31 +58,31 @@ export const sidePanelData = [
{
id: SidePanelIdentifiers.SharedWithMe,
name: "Shared with me",
- icon: "fas fa-users fa-fw",
+ icon: IconTypes.PEOPLE,
active: false,
},
{
id: SidePanelIdentifiers.Workflows,
name: "Workflows",
- icon: "fas fa-cogs fa-fw",
+ icon: IconTypes.CODE,
active: false,
},
{
id: SidePanelIdentifiers.RecentOpen,
name: "Recent open",
- icon: "icon-time fa-fw",
+ icon: IconTypes.ACCESS_TIME,
active: false,
},
{
id: SidePanelIdentifiers.Favourites,
name: "Favorites",
- icon: "fas fa-star fa-fw",
+ icon: IconTypes.STAR,
active: false,
},
{
id: SidePanelIdentifiers.Trash,
name: "Trash",
- icon: "fas fa-trash-alt fa-fw",
+ icon: IconTypes.DELETE,
active: false,
}
];
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 3419578..83508ca 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -3,14 +3,9 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import Drawer from '@material-ui/core/Drawer';
-import IconButton from "@material-ui/core/IconButton";
+import { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from '../../common/custom-theme';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
import * as classnames from "classnames";
import { connect, Dispatch } from 'react-redux';
import { RootState } from '../../store/store';
diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index d208239..bf9c657 100644
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -4,14 +4,11 @@
import * as React from "react";
import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Button, MenuItem } from "@material-ui/core";
-import NotificationsIcon from "@material-ui/icons/Notifications";
-import PersonIcon from "@material-ui/icons/Person";
-import HelpIcon from "@material-ui/icons/Help";
-import InfoIcon from '@material-ui/icons/Info';
+import { User, getUserFullname } from "../../models/user";
import SearchBar from "../../components/search-bar/search-bar";
import Breadcrumbs, { Breadcrumb } from "../../components/breadcrumbs/breadcrumbs";
import DropdownMenu from "../../components/dropdown-menu/dropdown-menu";
-import { User, getUserFullname } from "../../models/user";
+import IconBase, { IconTypes } from "../../components/icon/icon";
export interface MainAppBarMenuItem {
label: string;
@@ -77,7 +74,7 @@ export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
onContextMenu={props.onContextMenu} />
}
<IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
- <InfoIcon />
+ <IconBase icon={IconTypes.INFO} />
</IconButton>
</Toolbar>
</AppBar>;
@@ -89,16 +86,16 @@ const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps
<>
<IconButton color="inherit">
<Badge badgeContent={3} color="primary">
- <NotificationsIcon />
+ <IconBase icon={IconTypes.NOTIFICATIONS} />
</Badge>
</IconButton>
- <DropdownMenu icon={PersonIcon} id="account-menu">
+ <DropdownMenu icon={IconTypes.PERSON} id="account-menu">
<MenuItem>
{getUserFullname(user)}
</MenuItem>
{renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
</DropdownMenu>
- <DropdownMenu icon={HelpIcon} id="help-menu">
+ <DropdownMenu icon={IconTypes.HELP} id="help-menu">
{renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
</DropdownMenu>
</>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list