From 7ad4a6e40c42e0941510d30d61c40a37f64782e2 Mon Sep 17 00:00:00 2001
From: Jessie Keck <jessie.keck@gmail.com>
Date: Mon, 25 Feb 2019 17:14:59 -0800
Subject: [PATCH] Add custom icons.
---
src/components/WindowSideBarButtons.js | 5 +++--
src/components/WindowThumbnailSettings.js | 22 ++-----------------
src/components/WindowViewSettings.js | 13 ++---------
src/components/ZoomControls.js | 5 ++---
src/components/icons/BookViewIcon.js | 15 +++++++++++++
src/components/icons/CanvasIndexIcon.js | 15 +++++++++++++
src/components/icons/RestoreZoomIcon.js | 16 ++++++++++++++
.../icons/ThumbnailNavigationBottomIcon.js | 16 ++++++++++++++
.../icons/ThumbnailNavigationRightIcon.js | 17 ++++++++++++++
9 files changed, 88 insertions(+), 36 deletions(-)
create mode 100644 src/components/icons/BookViewIcon.js
create mode 100644 src/components/icons/CanvasIndexIcon.js
create mode 100644 src/components/icons/RestoreZoomIcon.js
create mode 100644 src/components/icons/ThumbnailNavigationBottomIcon.js
create mode 100644 src/components/icons/ThumbnailNavigationRightIcon.js
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index 6eb26ea7c..7ffc326f1 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/InfoSharp';
-import ListIcon from '@material-ui/icons/FormatAlignJustify';
+import CanvasIndexIcon from './icons/CanvasIndexIcon';
+
/**
*
@@ -47,7 +48,7 @@ export class WindowSideBarButtons extends Component {
}
onClick={() => (toggleWindowSideBarPanel('canvas_navigation'))}
>
- <ListIcon
+ <CanvasIndexIcon
color={this.sideBarPanelCurrentlySelected('canvas_navigation') ? 'primary' : 'inherit'}
/>
</IconButton>
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index 7ed18f974..ff0a3c419 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/src/components/WindowThumbnailSettings.js
@@ -4,9 +4,9 @@ import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Typography from '@material-ui/core/Typography';
import ThumbnailsOffIcon from '@material-ui/icons/CropDinSharp';
-import VideoLabelIcon from '@material-ui/icons/VideoLabel';
import PropTypes from 'prop-types';
-
+import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
+import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
/**
*
*/
@@ -64,24 +64,6 @@ export class WindowThumbnailSettings extends Component {
}
}
-/**
- * @private
- */
-function ThumbnailNavigationBottomIcon(props) {
- return (
- <VideoLabelIcon />
- );
-}
-
-/**
- * @private
- */
-function ThumbnailNavigationRightIcon(props) {
- return (
- <VideoLabelIcon style={{ transform: 'rotate(-90deg)' }} />
- );
-}
-
WindowThumbnailSettings.propTypes = {
windowId: PropTypes.string.isRequired,
setWindowThumbnailPosition: PropTypes.func.isRequired,
diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js
index f2efa7015..8b7d99a0d 100644
--- a/src/components/WindowViewSettings.js
+++ b/src/components/WindowViewSettings.js
@@ -4,8 +4,8 @@ import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Typography from '@material-ui/core/Typography';
import SingleIcon from '@material-ui/icons/CropOriginalSharp';
-import ViewAgendaIcon from '@material-ui/icons/ViewAgenda';
import PropTypes from 'prop-types';
+import BookViewIcon from './icons/BookViewIcon';
/**
*
@@ -48,7 +48,7 @@ export class WindowViewSettings extends Component {
/>
<FormControlLabel
value="book"
- control={<Radio color="primary" icon={<ViewAgendaIconRotated />} checkedIcon={<ViewAgendaIconRotated />} />}
+ control={<Radio color="primary" icon={<BookViewIcon />} checkedIcon={<BookViewIcon />} />}
label={t('book')}
labelPlacement="bottom"
/>
@@ -58,15 +58,6 @@ export class WindowViewSettings extends Component {
}
}
-/**
- * @private
- */
-function ViewAgendaIconRotated(props) {
- return (
- <ViewAgendaIcon style={{ transform: 'rotate(-90deg)' }} />
- );
-}
-
WindowViewSettings.propTypes = {
windowId: PropTypes.string.isRequired,
setWindowViewType: PropTypes.func.isRequired,
diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js
index 7edb63420..bd29e210c 100644
--- a/src/components/ZoomControls.js
+++ b/src/components/ZoomControls.js
@@ -4,9 +4,8 @@ import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import AddCircleIcon from '@material-ui/icons/AddCircleOutlineSharp';
import RemoveCircleIcon from '@material-ui/icons/RemoveCircleOutlineSharp';
-import RefreshIcon from '@material-ui/icons/Refresh';
import PropTypes from 'prop-types';
-
+import RestoreZoomIcon from './icons/RestoreZoomIcon';
/**
*/
export class ZoomControls extends Component {
@@ -87,7 +86,7 @@ export class ZoomControls extends Component {
</ListItem>
<ListItem>
<IconButton aria-label={t('zoomReset')} onClick={this.handleZoomResetClick}>
- <RefreshIcon />
+ <RestoreZoomIcon />
</IconButton>
</ListItem>
</List>
diff --git a/src/components/icons/BookViewIcon.js b/src/components/icons/BookViewIcon.js
new file mode 100644
index 000000000..3d38ba934
--- /dev/null
+++ b/src/components/icons/BookViewIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * BookViewIcon ~
+*/
+export default function BookViewIcon(props) {
+ return (
+ <SvgIcon {...props}>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M1,4V21H22.853V4.1ZM3,19V6h8V19Zm18,0H13V6h8ZM14,9.5h6V11H14ZM14,12h6v1.5H14Zm0,2.5h6V16H14Z" />
+ </svg>
+ </SvgIcon>
+ );
+}
diff --git a/src/components/icons/CanvasIndexIcon.js b/src/components/icons/CanvasIndexIcon.js
new file mode 100644
index 000000000..c977716bd
--- /dev/null
+++ b/src/components/icons/CanvasIndexIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * Render the canvas index svg
+ */
+export default function CanvasIndexIcon(props) {
+ return (
+ <SvgIcon {...props}>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M6.924,21H21V19H6.924ZM3,17H21V15H3Zm3.924-4H21V11H6.924Zm0-4H21V7H6.924ZM3,3V5H21V3Z" />
+ </svg>
+ </SvgIcon>
+ );
+}
diff --git a/src/components/icons/RestoreZoomIcon.js b/src/components/icons/RestoreZoomIcon.js
new file mode 100644
index 000000000..a9c6ba4a3
--- /dev/null
+++ b/src/components/icons/RestoreZoomIcon.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * RestoreZoomIcon ~
+*/
+export default function RestoreZoomIcon(props) {
+ return (
+ <SvgIcon {...props}>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M6,15H9v3h2V13H6Zm9-6V6H13v5h5V9Z" />
+ <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8,8,8,0,0,1-8,8Z" />
+ </svg>
+ </SvgIcon>
+ );
+}
diff --git a/src/components/icons/ThumbnailNavigationBottomIcon.js b/src/components/icons/ThumbnailNavigationBottomIcon.js
new file mode 100644
index 000000000..012b801ec
--- /dev/null
+++ b/src/components/icons/ThumbnailNavigationBottomIcon.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * ThumbnailNavigationBottomIcon ~
+*/
+export default function ThumbnailNavigationBottomIcon(props) {
+ return (
+ <SvgIcon {...props}>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M3,3H21V5H3Z" transform="translate(0 16)" />
+ <path d="M21,5H3V19H21ZM19,17H5V7H19Z" transform="translate(0 -2)" />
+ </svg>
+ </SvgIcon>
+ );
+}
diff --git a/src/components/icons/ThumbnailNavigationRightIcon.js b/src/components/icons/ThumbnailNavigationRightIcon.js
new file mode 100644
index 000000000..707ea3236
--- /dev/null
+++ b/src/components/icons/ThumbnailNavigationRightIcon.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * ThumbnailNavigationRightIcon ~
+*/
+export default function ThumbnailNavigationRightIcon(props) {
+ return (
+ <SvgIcon {...props}>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+ <path d="M0,0H24V24H0Z" transform="translate(24) rotate(90)" fill="none" />
+ <path d="M3,3H21V5H3Z" transform="translate(24) rotate(90)" />
+ <path d="M19,3H5V21H19ZM17,19H7V5H17Z" transform="translate(-2)" />
+ </svg>
+ </SvgIcon>
+ );
+}
--
GitLab