From: Janicki Artur Date: Wed, 11 Jul 2018 13:15:49 +0000 (+0200) Subject: Merge branch 'master' into 13764-icons-colors-unification-refactoring X-Git-Tag: 1.2.0~43^2 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/e6039bec0497aa7e1391958e5c4f84bbaeef653e?hp=7db89c862386851d1f37e12a301aebbe92c5c6f1 Merge branch 'master' into 13764-icons-colors-unification-refactoring refs #13764 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index 0850f881..e81473ae 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -17,7 +17,7 @@ export interface ArvadosTheme extends Theme { customs: any; } -const purple900 = purple["900"]; +const purple800 = purple["800"]; const grey600 = grey["600"]; const themeOptions: ArvadosThemeOptions = { customs: { @@ -28,7 +28,7 @@ const themeOptions: ArvadosThemeOptions = { overrides: { MuiAppBar: { colorPrimary: { - backgroundColor: purple900 + backgroundColor: purple800 } }, MuiTabs: { @@ -36,13 +36,13 @@ const themeOptions: ArvadosThemeOptions = { color: grey600 }, indicator: { - backgroundColor: purple900 + backgroundColor: purple800 } }, MuiTab: { selected: { fontWeight: 700, - color: purple900 + color: purple800 } } }, diff --git a/src/components/attribute/attribute.tsx b/src/components/attribute/attribute.tsx index c0874f7d..4fb1d110 100644 --- a/src/components/attribute/attribute.tsx +++ b/src/components/attribute/attribute.tsx @@ -57,8 +57,10 @@ const styles: StyleRulesCallback = (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/abstract-item.tsx b/src/components/details-panel-factory/items/abstract-item.tsx index a50c867b..d4038703 100644 --- a/src/components/details-panel-factory/items/abstract-item.tsx +++ b/src/components/details-panel-factory/items/abstract-item.tsx @@ -3,8 +3,8 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { IconTypes } from '../../icon/icon'; import { DetailsPanelResource } from '../../../views-components/details-panel/details-panel'; +import { IconType } from '../../icon/icon'; export default abstract class AbstractItem { @@ -14,7 +14,7 @@ export default abstract class AbstractItem; abstract buildDetails(): React.ReactElement; buildActivity(): React.ReactElement { diff --git a/src/components/details-panel-factory/items/collection-item.tsx b/src/components/details-panel-factory/items/collection-item.tsx index 1fa28919..dab8101a 100644 --- a/src/components/details-panel-factory/items/collection-item.tsx +++ b/src/components/details-panel-factory/items/collection-item.tsx @@ -3,21 +3,23 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { IconTypes } from '../../icon/icon'; +import { CollectionIcon } from '../../icon/icon'; 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 { - getIcon(): IconTypes { - return IconTypes.COLLECTION; + getIcon(className?: string) { + return ; } - buildDetails(): React.ReactElement { + buildDetails() { return
- + diff --git a/src/components/details-panel-factory/items/empty-item.tsx b/src/components/details-panel-factory/items/empty-item.tsx index 16394c89..0edfe84f 100644 --- a/src/components/details-panel-factory/items/empty-item.tsx +++ b/src/components/details-panel-factory/items/empty-item.tsx @@ -3,19 +3,19 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { IconTypes } from '../../icon/icon'; +import { DefaultIcon, ProjectsIcon } from '../../icon/icon'; import AbstractItem from './abstract-item'; import EmptyState from '../../empty-state/empty-state'; import { EmptyResource } from '../../../models/empty'; export default class EmptyItem extends AbstractItem { - getIcon(): IconTypes { - return IconTypes.FOLDER; + getIcon(className?: string) { + return ; } - buildDetails(): React.ReactElement { - return ; } } \ No newline at end of file diff --git a/src/components/details-panel-factory/items/process-item.tsx b/src/components/details-panel-factory/items/process-item.tsx index 1ea34dee..215c5312 100644 --- a/src/components/details-panel-factory/items/process-item.tsx +++ b/src/components/details-panel-factory/items/process-item.tsx @@ -3,21 +3,23 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import IconBase, { IconTypes } from '../../icon/icon'; +import { ProcessIcon } from '../../icon/icon'; 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'; +import { resourceLabel } from '../../../common/labels'; export default class ProcessItem extends AbstractItem { - getIcon(): IconTypes { - return IconTypes.PROCESS; + getIcon(className?: string){ + return ; } - buildDetails(): React.ReactElement { + buildDetails() { return
- + diff --git a/src/components/details-panel-factory/items/project-item.tsx b/src/components/details-panel-factory/items/project-item.tsx index 559816e1..ae694e5c 100644 --- a/src/components/details-panel-factory/items/project-item.tsx +++ b/src/components/details-panel-factory/items/project-item.tsx @@ -3,21 +3,23 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { IconTypes } from '../../icon/icon'; +import { ProjectIcon } from '../../icon/icon'; 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'; +import { resourceLabel } from '../../../common/labels'; export default class ProjectItem extends AbstractItem { - getIcon(): IconTypes { - return IconTypes.FOLDER; + getIcon(className?: string) { + return ; } - buildDetails(): React.ReactElement { + buildDetails() { return
- + {/* Missing attr */} diff --git a/src/components/dropdown-menu/dropdown-menu.test.tsx b/src/components/dropdown-menu/dropdown-menu.test.tsx index 19924ad7..33964692 100644 --- a/src/components/dropdown-menu/dropdown-menu.test.tsx +++ b/src/components/dropdown-menu/dropdown-menu.test.tsx @@ -5,22 +5,21 @@ import * as React from "react"; import { shallow, configure } from "enzyme"; import DropdownMenu from "./dropdown-menu"; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; - import * as Adapter from 'enzyme-adapter-react-16'; import { MenuItem, IconButton, Menu } from "@material-ui/core"; +import { PaginationRightArrowIcon } from "../icon/icon"; configure({ adapter: new Adapter() }); describe("", () => { it("renders menu icon", () => { - const dropdownMenu = shallow(); - expect(dropdownMenu.find(ChevronRightIcon)).toHaveLength(1); + const dropdownMenu = shallow(} />); + expect(dropdownMenu.find(PaginationRightArrowIcon)).toHaveLength(1); }); it("render menu items", () => { const dropdownMenu = shallow( - + }> Item 1 Item 2 @@ -29,13 +28,13 @@ describe("", () => { }); it("opens on menu icon click", () => { - const dropdownMenu = shallow(); + const dropdownMenu = shallow(} />); dropdownMenu.find(IconButton).simulate("click", {currentTarget: {}}); expect(dropdownMenu.state().anchorEl).toBeDefined(); }); it("closes on menu click", () => { - const dropdownMenu = shallow(); + const dropdownMenu = shallow(} />); dropdownMenu.find(Menu).simulate("click", {currentTarget: {}}); expect(dropdownMenu.state().anchorEl).toBeUndefined(); }); diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx index 4f2b83af..98c29c64 100644 --- a/src/components/dropdown-menu/dropdown-menu.tsx +++ b/src/components/dropdown-menu/dropdown-menu.tsx @@ -3,13 +3,13 @@ // 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'; - interface DropdownMenuProps { id: string; - icon: React.ComponentType; + icon: React.ReactElement; } class DropdownMenu extends React.Component { @@ -24,7 +24,7 @@ class DropdownMenu extends React.Component { }; render() { - const { icon: Icon, id, children } = this.props; + const { icon, id, children } = this.props; const { anchorEl } = this.state; return (
@@ -32,10 +32,8 @@ class DropdownMenu extends React.Component { aria-owns={anchorEl ? id : undefined} aria-haspopup="true" color="inherit" - onClick={this.handleOpen} - - > - + onClick={this.handleOpen}> + {icon} { onClose={this.handleClose} onClick={this.handleClose} anchorOrigin={this.transformOrigin} - transformOrigin={this.transformOrigin} - > + transformOrigin={this.transformOrigin}> {children}
diff --git a/src/components/empty-state/empty-state.tsx b/src/components/empty-state/empty-state.tsx index 9ab30635..8a36213e 100644 --- a/src/components/empty-state/empty-state.tsx +++ b/src/components/empty-state/empty-state.tsx @@ -5,12 +5,12 @@ import * as React from 'react'; import Typography from '@material-ui/core/Typography'; import { WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core/styles'; -import { ArvadosTheme } from '../../common/custom-theme'; -import IconBase, { IconTypes } from '../icon/icon'; +import { ArvadosTheme } from 'src/common/custom-theme'; +import { IconType } from '../icon/icon'; export interface EmptyStateDataProps { message: string; - icon: IconTypes; + icon: IconType; details?: string; } @@ -19,10 +19,10 @@ type EmptyStateProps = EmptyStateDataProps & WithStyles; class EmptyState extends React.Component { render() { - const { classes, message, details, icon, children } = this.props; + const { classes, message, details, icon: Icon, children } = this.props; return ( - + {message} { details && {details} } { children && {children} } diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index c420a19c..e80fee8e 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -3,48 +3,71 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import * as classnames from "classnames"; -import CloseAnnouncement from '@material-ui/icons/Announcement'; -import CloseIcon from '@material-ui/icons/Close'; -import FolderIcon from '@material-ui/icons/Folder'; +import AccessTime from '@material-ui/icons/AccessTime'; +import ArrowDropDown from '@material-ui/icons/ArrowDropDown'; +import BubbleChart from '@material-ui/icons/BubbleChart'; +import Cached from '@material-ui/icons/Cached'; +import Code from '@material-ui/icons/Code'; +import ChevronLeft from '@material-ui/icons/ChevronLeft'; +import ChevronRight from '@material-ui/icons/ChevronRight'; +import Close from '@material-ui/icons/Close'; +import ContentCopy from '@material-ui/icons/ContentCopy'; +import CreateNewFolder from '@material-ui/icons/CreateNewFolder'; +import Delete from '@material-ui/icons/Delete'; +import Edit from '@material-ui/icons/Edit'; +import Folder from '@material-ui/icons/Folder'; +import GetApp from '@material-ui/icons/GetApp'; +import Help from '@material-ui/icons/Help'; +import Inbox from '@material-ui/icons/Inbox'; +import Info from '@material-ui/icons/Info'; +import Input from '@material-ui/icons/Input'; +import Menu from '@material-ui/icons/Menu'; +import MoreVert from '@material-ui/icons/MoreVert'; +import Notifications from '@material-ui/icons/Notifications'; +import People from '@material-ui/icons/People'; +import Person from '@material-ui/icons/Person'; +import PersonAdd from '@material-ui/icons/PersonAdd'; +import PlayArrow from '@material-ui/icons/PlayArrow'; +import RateReview from '@material-ui/icons/RateReview'; +import Search from '@material-ui/icons/Search'; +import Star from '@material-ui/icons/Star'; +import StarBorder from '@material-ui/icons/StarBorder'; -export enum IconTypes { - ANNOUNCEMENT = 'announcement', - FOLDER = 'folder', - CLOSE = 'close', - PROJECT = 'project', - COLLECTION = 'collection', - PROCESS = 'process' -} +export type IconType = React.SFC<{ className?: string }>; -interface IconBaseDataProps { - icon: IconTypes; - className?: string; -} - -type IconBaseProps = IconBaseDataProps; - -interface IconBaseState { - icon: IconTypes; -} - -const getSpecificIcon = (props: any) => ({ - announcement: , - folder: , - close: , - project: , - collection: , - process: -}); - -class IconBase extends React.Component { - state = { - icon: IconTypes.FOLDER, - }; - - render() { - return getSpecificIcon(this.props)[this.props.icon]; - } -} - -export default IconBase; \ No newline at end of file +export const AddFavoriteIcon: IconType = (props) => ; +export const AdvancedIcon: IconType = (props) => ; +export const CustomizeTableIcon: IconType = (props) => ; +export const CopyIcon: IconType = (props) => ; +export const CollectionIcon: IconType = (props) => ; +export const CloseIcon: IconType = (props) => ; +export const DefaultIcon: IconType = (props) => ; +export const DetailsIcon: IconType = (props) => ; +export const DownloadIcon: IconType = (props) => ; +export const FavoriteIcon: IconType = (props) => ; +export const HelpIcon: IconType = (props) => ; +export const LogIcon: IconType = (props) => ; +export const MoreOptionsIcon: IconType = (props) => ; +export const MoveToIcon: IconType = (props) => ; +export const NewProjectIcon: IconType = (props) => ; +export const NotificationIcon: IconType = (props) => ; +export const PaginationDownIcon: IconType = (props) => ; +export const PaginationLeftArrowIcon: IconType = (props) => ; +export const PaginationRightArrowIcon: IconType = (props) => ; +export const ProcessIcon: IconType = (props) => ; +export const ProjectIcon: IconType = (props) => ; +export const ProjectsIcon: IconType = (props) => ; +export const ProvenanceGraphIcon: IconType = (props) => ; +export const RecentIcon: IconType = (props) => ; +export const RemoveIcon: IconType = (props) => ; +export const RemoveFavoriteIcon: IconType = (props) => ; +export const RenameIcon: IconType = (props) => ; +export const ReRunProcessIcon: IconType = (props) => ; +export const SearchIcon: IconType = (props) => ; +export const ShareIcon: IconType = (props) => ; +export const ShareMeIcon: IconType = (props) => ; +export const SidePanelRightArrowIcon: IconType = (props) => ; +export const TrashIcon: IconType = (props) => ; +export const UserPanelIcon: IconType = (props) => ; +export const UsedByIcon: IconType = (props) => ; +export const WorkflowIcon: IconType = (props) => ; \ No newline at end of file diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx index a7783fb2..eedc499f 100644 --- a/src/components/side-panel/side-panel.tsx +++ b/src/components/side-panel/side-panel.tsx @@ -4,19 +4,16 @@ 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 { SidePanelRightArrowIcon, IconType } from '../icon/icon'; +import * as classnames from "classnames"; export interface SidePanelItem { id: string; name: string; - icon: string; + icon: IconType; active?: boolean; open?: boolean; margin?: boolean; @@ -33,7 +30,7 @@ interface SidePanelProps { class SidePanel extends React.Component> { render(): ReactElement { 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, iconArrowContainer } = classes; return (
@@ -41,18 +38,23 @@ class SidePanel extends React.Component> { toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}> - {it.openAble ? toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow} - ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null} + {it.openAble ? ( + toggleOpen(it.id)} className={iconArrowContainer}> + + + ) : null} - + {} - {it.name}} /> + {it.openAble ? ( {children} - ) : null} + + ) : null} ))} @@ -60,18 +62,30 @@ class SidePanel extends React.Component> { ); } + getIconClassNames = (itemOpen ?: boolean, itemActive ?: boolean) => { + const { classes } = this.props; + return classnames(classes.iconArrow, { + [classes.iconOpen]: itemOpen, + [classes.iconClose]: !itemOpen, + [classes.active]: itemActive + }); + } + handleRowContextMenu = (item: SidePanelItem) => (event: React.MouseEvent) => item.openAble ? this.props.onContextMenu(event, item) : null } -type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIconMargin' | - 'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition'; +const renderListItemText = (itemName: string, active: string, itemActive?: boolean) => + {itemName}; + +type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | + 'projectIconMargin' | 'iconClose' | 'iconOpen' | 'iconArrowContainer' | 'iconArrow'; -const styles: StyleRulesCallback = (theme: Theme) => ({ +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ active: { - color: '#4285F6', + color: theme.palette.primary.main, }, listItemText: { padding: '0px', @@ -80,19 +94,20 @@ const styles: StyleRulesCallback = (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 +118,11 @@ const styles: StyleRulesCallback = (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 942c16eb..5edd9021 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 { ProjectsIcon } 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: ProjectsIcon, open: false, active: false, } @@ -21,7 +22,7 @@ describe('side-panel-reducer', () => { { id: "1", name: "Projects", - icon: "fas fa-th fa-fw", + icon: ProjectsIcon, open: false, active: true, } @@ -36,7 +37,7 @@ describe('side-panel-reducer', () => { { id: "1", name: "Projects", - icon: "fas fa-th fa-fw", + icon: ProjectsIcon, open: false, active: false, } @@ -45,7 +46,7 @@ describe('side-panel-reducer', () => { { id: "1", name: "Projects", - icon: "fas fa-th fa-fw", + icon: ProjectsIcon, open: true, active: false, } @@ -60,7 +61,7 @@ describe('side-panel-reducer', () => { { id: "1", name: "Projects", - icon: "fas fa-th fa-fw", + icon: ProjectsIcon, open: false, active: true, } @@ -69,7 +70,7 @@ describe('side-panel-reducer', () => { { id: "1", name: "Projects", - icon: "fas fa-th fa-fw", + icon: ProjectsIcon, 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 ca26eeb6..a0da7db9 100644 --- a/src/store/side-panel/side-panel-reducer.ts +++ b/src/store/side-panel/side-panel-reducer.ts @@ -3,9 +3,9 @@ // SPDX-License-Identifier: AGPL-3.0 import * as _ from "lodash"; - import actions, { SidePanelAction } from './side-panel-action'; import { SidePanelItem } from '../../components/side-panel/side-panel'; +import { ProjectsIcon, ShareMeIcon, WorkflowIcon, RecentIcon, FavoriteIcon, TrashIcon } from "../../components/icon/icon"; export type SidePanelState = SidePanelItem[]; @@ -48,7 +48,7 @@ export const sidePanelData = [ { id: SidePanelIdentifiers.Projects, name: "Projects", - icon: "fas fa-th fa-fw", + icon: ProjectsIcon, open: false, active: false, margin: true, @@ -57,31 +57,31 @@ export const sidePanelData = [ { id: SidePanelIdentifiers.SharedWithMe, name: "Shared with me", - icon: "fas fa-users fa-fw", + icon: ShareMeIcon, active: false, }, { id: SidePanelIdentifiers.Workflows, name: "Workflows", - icon: "fas fa-cogs fa-fw", + icon: WorkflowIcon, active: false, }, { id: SidePanelIdentifiers.RecentOpen, name: "Recent open", - icon: "icon-time fa-fw", + icon: RecentIcon, active: false, }, { id: SidePanelIdentifiers.Favourites, name: "Favorites", - icon: "fas fa-star fa-fw", + icon: FavoriteIcon, active: false, }, { id: SidePanelIdentifiers.Trash, name: "Trash", - icon: "fas fa-trash-alt fa-fw", + icon: TrashIcon, active: false, } ]; diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx index 34195784..f2212fc5 100644 --- a/src/views-components/details-panel/details-panel.tsx +++ b/src/views-components/details-panel/details-panel.tsx @@ -3,21 +3,16 @@ // 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'; import actions from "../../store/details-panel/details-panel-action"; import { ProjectResource } from '../../models/project'; import { CollectionResource } from '../../models/collection'; -import IconBase, { IconTypes } from '../../components/icon/icon'; +import { CloseIcon } from '../../components/icon/icon'; import { ProcessResource } from '../../models/process'; import DetailsPanelFactory from '../../components/details-panel-factory/details-panel-factory'; import AbstractItem from '../../components/details-panel-factory/items/abstract-item'; @@ -54,7 +49,7 @@ class DetailsPanel extends React.Component { - + {item.getIcon(classes.headerIcon)} @@ -63,7 +58,7 @@ class DetailsPanel extends React.Component { - + {} 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 d2082395..30eee0d2 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 { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "../../components/icon/icon"; export interface MainAppBarMenuItem { label: string; @@ -77,7 +74,7 @@ export const MainAppBar: React.SFC = (props) => { onContextMenu={props.onContextMenu} /> } - + { } ; @@ -89,16 +86,16 @@ const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps <> - + {} - + } id="account-menu"> {getUserFullname(user)} {renderMenuItems(menuItems.accountMenu, onMenuItemClick)} - + } id="help-menu"> {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}