From 1a797f7887446e4cb4370921695f99509bbb5c50 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 8 Oct 2019 13:52:38 +0200 Subject: [PATCH] feat(controls): add icons #8 --- assets/icons/fitview.svg | 1 + assets/icons/minus.svg | 1 + assets/icons/plus.svg | 1 + package-lock.json | 27 ++++++++++++++++++++++++++ package.json | 1 + rollup.config.js | 3 +++ src/plugins/Controls/index.js | 9 ++++++--- src/style.css | 36 ++++++++++++++++++++++------------- 8 files changed, 63 insertions(+), 16 deletions(-) create mode 100644 assets/icons/fitview.svg create mode 100644 assets/icons/minus.svg create mode 100644 assets/icons/plus.svg diff --git a/assets/icons/fitview.svg b/assets/icons/fitview.svg new file mode 100644 index 00000000..f18169fb --- /dev/null +++ b/assets/icons/fitview.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/minus.svg b/assets/icons/minus.svg new file mode 100644 index 00000000..d3597636 --- /dev/null +++ b/assets/icons/minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/plus.svg b/assets/icons/plus.svg new file mode 100644 index 00000000..00ffc635 --- /dev/null +++ b/assets/icons/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6934811a..9fef9dc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8372,6 +8372,33 @@ "opener": "1" } }, + "rollup-plugin-svg": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz", + "integrity": "sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ==", + "dev": true, + "requires": { + "rollup-pluginutils": "^1.3.1" + }, + "dependencies": { + "estree-walker": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz", + "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=", + "dev": true + }, + "rollup-pluginutils": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz", + "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=", + "dev": true, + "requires": { + "estree-walker": "^0.2.1", + "minimatch": "^3.0.2" + } + } + } + }, "rollup-plugin-uglify": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.3.tgz", diff --git a/package.json b/package.json index e485748e..46c8ca9c 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-postcss": "^2.0.3", "rollup-plugin-serve": "^1.0.1", + "rollup-plugin-svg": "^2.0.0", "rollup-plugin-uglify": "^6.0.3", "rollup-plugin-visualizer": "^2.6.0", "start-server-and-test": "^1.10.4", diff --git a/rollup.config.js b/rollup.config.js index 70e0bb67..9f33aa5f 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -5,6 +5,8 @@ import postcss from 'rollup-plugin-postcss'; import bundleSize from 'rollup-plugin-bundle-size'; import visualizer from 'rollup-plugin-visualizer'; import { uglify } from 'rollup-plugin-uglify'; +import svg from 'rollup-plugin-svg' + import pkg from './package.json'; @@ -41,6 +43,7 @@ export default [{ commonjs({ include: /node_modules/ }), + svg(), visualizer(), isProd && uglify() ]} diff --git a/src/plugins/Controls/index.js b/src/plugins/Controls/index.js index de2654c4..4e1dae55 100644 --- a/src/plugins/Controls/index.js +++ b/src/plugins/Controls/index.js @@ -2,6 +2,9 @@ import React from 'react'; import classnames from 'classnames'; import { fitView, zoomIn, zoomOut } from '../../utils/graph'; +import plusIcon from '../../../assets/icons/plus.svg'; +import minusIcon from '../../../assets/icons/minus.svg'; +import fitviewIcon from '../../../assets/icons/fitview.svg'; const baseStyle = { position: 'absolute', @@ -25,19 +28,19 @@ export default ({ style, className }) => { className="react-flow__controls-button react-flow__controls-zoomin" onClick={zoomIn} > - + +
- - +
- @ +
); diff --git a/src/style.css b/src/style.css index 64ba8720..6518a735 100644 --- a/src/style.css +++ b/src/style.css @@ -151,17 +151,27 @@ } } -.react-flow__controls-button { - background: #f8f8f8; - border: 1px solid #eee; - display: flex; - justify-content: center; - align-items: center; - width: 24px; - height: 24px; - cursor: pointer; -} +.react-flow__controls { + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); -.react-flow__controls-button:hover { - background: #eee; -} \ No newline at end of file + &-button { + background: #fefefe; + border-bottom: 1px solid #eee; + display: flex; + justify-content: center; + align-items: center; + width: 16px; + height: 16px; + cursor: pointer; + user-select: none; + padding: 5px; + + img { + width: 100%; + } + + &:hover { + background: #f4f4f4; + } + } +}