Merge pull request #391 from fsih/tooltips

Tooltips
2024-12-22 21:42:30 -05:00 · 2018-04-20 11:14:26 -04:00 · 2018-04-20 11:14:26 -04:00 · 57f3be36ec
commit 57f3be36ec
parent 99534eb24c bfb3948244
15 changed files with 273 additions and 0 deletions
--- a/src/components/bit-eraser-mode/bit-eraser-mode.jsx
+++ b/src/components/bit-eraser-mode/bit-eraser-mode.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import eraserIcon from './eraser.svg';
+
+const BitEraserComponent = () => (
+    <ComingSoonTooltip
+        place="right"
+        tooltipId="bit-eraser-mode"
+    >
+        <ToolSelectComponent
+            disabled
+            imgDescriptor={{
+                defaultMessage: 'Eraser',
+                description: 'Label for the eraser tool',
+                id: 'paint.eraserMode.eraser'
+            }}
+            imgSrc={eraserIcon}
+            isSelected={false}
+            onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+        />
+    </ComingSoonTooltip>
+);
+
+export default BitEraserComponent;
--- a/src/components/bit-eraser-mode/eraser.svg
+++ b/src/components/bit-eraser-mode/eraser.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>eraser</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="eraser" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9.30022904,14.1996946 L7.89984723,14.1996946 L7.89984723,12.7997327 L6.49988541,12.7997327 L6.49988541,11.3997709 L5.09992359,11.3997709 L5.09992359,9.99840913 L3.69996177,9.99840913 L3.69996177,8.59984728 L2.29999995,8.59984728 L2.29999995,7.19988546 L3.69996177,7.19988546 L3.69996177,5.79992364 L5.09992359,5.79992364 L5.09992359,4.39996182 L6.49988541,4.39996182 L6.49988541,3 L7.89984723,3 L7.89984723,4.39996182 L9.30120901,4.39996182 L9.30120901,5.79992364 L10.7011708,5.79992364 L10.7011708,7.19988546 L12.1011326,7.19988546 L12.1011326,8.59984728 L13.4996945,8.59984728 L13.4996945,9.99840913 L12.1011326,9.99840913 L12.1011326,11.3997709 L10.7011708,11.3997709 L10.7011708,12.7997327 L9.30120901,12.7997327 L9.30120901,14.1995546 L10.7001909,14.1995546 L10.7001909,15.5995164 L9.30022904,15.5995164 L9.30022904,14.1996946 Z M10.7001909,16.9994782 L10.7001909,15.5995164 L14.9000763,15.5995164 L14.9000763,16.9994782 L10.7001909,16.9994782 Z M14.9000763,15.5995164 L14.9000763,14.1995546 L16.3000381,14.1995546 L16.3000381,15.5995164 L14.9000763,15.5995164 Z M14.9000763,12.7995927 L14.9000763,11.3996309 L16.3000381,11.3996309 L16.3000381,12.7995927 L14.9000763,12.7995927 Z M16.3000381,14.1995546 L16.3000381,12.7995927 L17.7,12.7995927 L17.7,14.1995546 L16.3000381,14.1995546 Z M13.5001145,11.3996309 L13.5001145,9.99826914 L14.9000763,9.99826914 L14.9000763,11.3996309 L13.5001145,11.3996309 Z" id="Combined-Shape" fill="#575E75"></path>
+    </g>
+</svg>
--- a/src/components/bit-fill-mode/bit-fill-mode.jsx
+++ b/src/components/bit-fill-mode/bit-fill-mode.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import fillIcon from './fill.svg';
+
+const BitFillComponent = () => (
+    <ComingSoonTooltip
+        place="right"
+        tooltipId="bit-fill-mode"
+    >
+        <ToolSelectComponent
+            disabled
+            imgDescriptor={{
+                defaultMessage: 'Fill',
+                description: 'Label for the fill tool',
+                id: 'paint.fillMode.fill'
+            }}
+            imgSrc={fillIcon}
+            isSelected={false}
+            onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+        />
+    </ComingSoonTooltip>
+);
+
+export default BitFillComponent;
--- a/src/components/bit-fill-mode/fill.svg
+++ b/src/components/bit-fill-mode/fill.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>fill</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="fill" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.7000634,5.80137446 L9.29979614,5.80137446 L9.29979614,8.59994895 L7.89980891,8.59994895 L7.89980891,4.39998724 L6.49982167,4.39998724 L6.49982167,5.80137446 L5.09983443,5.80137446 L5.09983443,3 L9.29979614,3 L9.29979614,4.39998724 L10.7011834,4.39998724 L10.7011834,5.80123446 L12.1000506,5.80123446 L12.1000506,7.2012217 L10.7000634,7.2012217 L10.7000634,5.80137446 Z M5.10011443,8.60120894 L5.10011443,7.2012217 L6.50010167,7.2012217 L6.50010167,8.60120894 L5.10011443,8.60120894 Z M16.3000123,16.9997324 L16.3000123,10.0011962 L17.6999996,10.0011962 L17.6999996,16.9997324 L16.3000123,16.9997324 Z M12.1003306,7.20080171 L13.5003179,7.20080171 L13.5003179,8.60078894 L16.3002923,8.60078894 L16.3002923,10.0007762 L14.9003051,10.0007762 L14.9003051,11.3573638 L13.5003179,11.3573638 L13.5003179,12.758751 L12.1003306,12.758751 L12.1003306,14.1587383 L10.7003434,14.1587383 L10.7003434,15.5587255 L9.29895615,15.5587255 L9.29895615,16.9587128 L7.89896891,16.9587128 L7.89896891,15.5587255 L6.49898168,15.5587255 L6.49898168,14.1587383 L5.10039442,14.1587383 L5.10039442,12.758751 L3.70040719,12.758751 L3.70040719,11.3573638 L6.49898168,11.3573638 L6.49898168,11.3713637 L9.29895615,11.3713637 L9.29895615,10.0007762 L12.1003306,10.0007762 L12.1003306,7.20080171 Z M3.69998719,8.60064895 L5.09997443,8.60064895 L5.09997443,10.0006362 L3.69998719,10.0006362 L3.69998719,11.3572238 L2.29999995,11.3572238 L2.29999995,9.95723658 L3.69998719,9.95723658 L3.69998719,8.60064895 Z" id="Combined-Shape" fill="#575E75"></path>
+    </g>
+</svg>
--- a/src/components/bit-line-mode/bit-line-mode.jsx
+++ b/src/components/bit-line-mode/bit-line-mode.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import lineIcon from './line.svg';
+
+const BitLineComponent = () => (
+    <ComingSoonTooltip
+        place="right"
+        tooltipId="bit-line-mode"
+    >
+        <ToolSelectComponent
+            disabled
+            imgDescriptor={{
+                defaultMessage: 'Line',
+                description: 'Label for the line tool, which draws straight line segments',
+                id: 'paint.lineMode.line'
+            }}
+            imgSrc={lineIcon}
+            isSelected={false}
+            onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+        />
+    </ComingSoonTooltip>
+);
+
+export default BitLineComponent;
--- a/src/components/bit-line-mode/line.svg
+++ b/src/components/bit-line-mode/line.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,7.998 L12,6 L14,6 L14,8 L12.002,8 L12.002,10 L10,10 L10,7.998 L12,7.998 Z M8,12 L8,10 L10,10 L10,12 L8,12 Z M14,6 L14,4 L16,4 L16,6 L14,6 Z M4,16 L4,14 L6,14 L6,16 L4,16 Z M6,14 L6,12 L8,12 L8,14 L6,14 Z" id="Combined-Shape" fill="#575E75"></path>
+    </g>
+</svg>
--- a/src/components/bit-oval-mode/bit-oval-mode.jsx
+++ b/src/components/bit-oval-mode/bit-oval-mode.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import ovalIcon from './oval.svg';
+
+const BitOvalComponent = () => (
+    <ComingSoonTooltip
+        place="right"
+        tooltipId="bit-oval-mode"
+    >
+        <ToolSelectComponent
+            disabled
+            imgDescriptor={{
+                defaultMessage: 'Circle',
+                description: 'Label for the oval-drawing tool',
+                id: 'paint.ovalMode.oval'
+            }}
+            imgSrc={ovalIcon}
+            isSelected={false}
+            onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+        />
+    </ComingSoonTooltip>
+);
+
+export default BitOvalComponent;
--- a/src/components/bit-oval-mode/oval.svg
+++ b/src/components/bit-oval-mode/oval.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>oval</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="oval" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Page-1" fill="#575E75" points="6.66666667 4 6.66666667 5.33333333 5.33333333 5.33333333 5.33333333 6.66666667 4 6.66666667 4 13.3333333 5.33333333 13.3333333 5.33333333 14.6666667 6.66666667 14.6666667 6.66666667 16 13.3333333 16 13.3333333 14.6666667 14.6666667 14.6666667 14.6666667 13.3333333 16 13.3333333 16 6.66666667 14.6666667 6.66666667 14.6666667 5.33333333 13.3333333 5.33333333 13.3333333 4"></polygon>
+    </g>
+</svg>
--- a/src/components/bit-rect-mode/bit-rect-mode.jsx
+++ b/src/components/bit-rect-mode/bit-rect-mode.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import rectIcon from './rectangle.svg';
+
+const BitRectComponent = () => (
+    <ComingSoonTooltip
+        place="right"
+        tooltipId="bit-rect-mode"
+    >
+        <ToolSelectComponent
+            disabled
+            imgDescriptor={{
+                defaultMessage: 'Rectangle',
+                description: 'Label for the rectangle tool',
+                id: 'paint.rectMode.rect'
+            }}
+            imgSrc={rectIcon}
+            isSelected={false}
+            onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+        />
+    </ComingSoonTooltip>
+);
+
+export default BitRectComponent;
--- a/src/components/bit-rect-mode/rectangle.svg
+++ b/src/components/bit-rect-mode/rectangle.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>rectange</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="rectange" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="rectangle-icon" fill="#575E75" x="4" y="4" width="12" height="12"></rect>
+    </g>
+</svg>
--- a/src/components/bit-select-mode/bit-select-mode.jsx
+++ b/src/components/bit-select-mode/bit-select-mode.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import selectIcon from './marquee.svg';
+
+const BitSelectComponent = () => (
+    <ComingSoonTooltip
+        place="right"
+        tooltipId="bit-select-mode"
+    >
+        <ToolSelectComponent
+            disabled
+            imgDescriptor={{
+                defaultMessage: 'Select',
+                description: 'Label for the select tool, which allows selecting, moving, and resizing shapes',
+                id: 'paint.selectMode.select'
+            }}
+            imgSrc={selectIcon}
+            isSelected={false}
+            onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+        />
+    </ComingSoonTooltip>
+);
+
+export default BitSelectComponent;
--- a/src/components/bit-select-mode/marquee.svg
+++ b/src/components/bit-select-mode/marquee.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>marquee</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="marquee" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M4.5,4.18186116 L4.5,3 L5.68186116,3 L5.68186116,4.18186116 L4.5,4.18186116 Z M11.591167,4.18186116 L11.591167,3 L12.7730281,3 L12.7730281,4.18186116 L11.591167,4.18186116 Z M4.5,13.6367504 L4.5,12.4537074 L5.68186116,12.4537074 L5.68186116,13.6367504 L4.5,13.6367504 Z M9.22697189,6.54570166 L10.4100149,6.54570166 L10.4100149,7.72756282 L11.5918761,7.72756282 L11.5918761,8.90942398 L12.7737372,8.90942398 L12.7737372,10.0912851 L13.9555984,10.0912851 L13.9555984,11.2731463 L15.1362777,11.2731463 L15.1362777,12.4538256 L16.3181388,12.4538256 L16.3181388,13.6368686 L17.5,13.6368686 L17.5,14.8187298 L12.7737372,14.8187298 L12.7737372,16.0005909 L11.5918761,16.0005909 L11.5918761,17.1824521 L10.4100149,17.1824521 L10.4100149,18.3643132 L9.22697189,18.3643132 L9.22697189,6.54570166 Z M13.9548893,8.90930579 L13.9548893,7.72744463 L15.1367504,7.72744463 L15.1367504,8.90930579 L13.9548893,8.90930579 Z M6.86372232,4.18186116 L6.86372232,3 L8.04558348,3 L8.04558348,4.18186116 L6.86372232,4.18186116 Z M4.5,11.2730281 L4.5,10.091167 L5.68186116,10.091167 L5.68186116,11.2730281 L4.5,11.2730281 Z M13.9548893,4.18186116 L13.9548893,3 L15.1367504,3 L15.1367504,4.18186116 L13.9548893,4.18186116 Z M9.22744463,4.18186116 L9.22744463,3 L10.4104877,3 L10.4104877,4.18186116 L9.22744463,4.18186116 Z M4.5,8.90930579 L4.5,7.72744463 L5.68186116,7.72744463 L5.68186116,8.90930579 L4.5,8.90930579 Z M4.5,6.54558348 L4.5,5.36372232 L5.68186116,5.36372232 L5.68186116,6.54558348 L4.5,6.54558348 Z M13.9548893,6.54558348 L13.9548893,5.36372232 L15.1367504,5.36372232 L15.1367504,6.54558348 L13.9548893,6.54558348 Z M6.86372232,13.6367504 L6.86372232,12.4537074 L8.04558348,12.4537074 L8.04558348,13.6367504 L6.86372232,13.6367504 Z" id="Combined-Shape" fill="#575E75"></path>
+    </g>
+</svg>
--- a/src/components/bit-text-mode/bit-text-mode.jsx
+++ b/src/components/bit-text-mode/bit-text-mode.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import textIcon from './text.svg';
+
+const BitTextComponent = () => (
+    <ComingSoonTooltip
+        place="right"
+        tooltipId="bit-text-mode"
+    >
+        <ToolSelectComponent
+            disabled
+            imgDescriptor={{
+                defaultMessage: 'Text',
+                description: 'Label for the text tool',
+                id: 'paint.textMode.text'
+            }}
+            imgSrc={textIcon}
+            isSelected={false}
+            onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+        />
+    </ComingSoonTooltip>
+);
+
+export default BitTextComponent;
--- a/src/components/bit-text-mode/text.svg
+++ b/src/components/bit-text-mode/text.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>text</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Page-1" fill="#575E75" points="4 4 4 8 6 8 6 6 9 6 9 14 7 14 7 16 13 16 13 14 11 14 11 6 14 6 14 8 16 8 16 4"></polygon>
+    </g>
+</svg>
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@ -11,6 +11,13 @@ import {shouldShowGroup, shouldShowUngroup} from '../../helper/group';
 import {shouldShowBringForward, shouldShowSendBackward} from '../../helper/order';

 import BitBrushMode from '../../containers/bit-brush-mode.jsx';
+import BitLineMode from '../../components/bit-line-mode/bit-line-mode.jsx';
+import BitOvalMode from '../../components/bit-oval-mode/bit-oval-mode.jsx';
+import BitRectMode from '../../components/bit-rect-mode/bit-rect-mode.jsx';
+import BitTextMode from '../../components/bit-text-mode/bit-text-mode.jsx';
+import BitFillMode from '../../components/bit-fill-mode/bit-fill-mode.jsx';
+import BitEraserMode from '../../components/bit-eraser-mode/bit-eraser-mode.jsx';
+import BitSelectMode from '../../components/bit-select-mode/bit-select-mode.jsx';
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 import ButtonGroup from '../button-group/button-group.jsx';
@ -403,6 +410,13 @@ const PaintEditorComponent = props => {
                        <BitBrushMode
                            onUpdateSvg={props.onUpdateSvg}
                        />
+                        <BitLineMode />
+                        <BitOvalMode />
+                        <BitRectMode />
+                        <BitTextMode />
+                        <BitFillMode />
+                        <BitEraserMode />
+                        <BitSelectMode />
                    </div>
                ) : null}