Skip to content

Commit 8854925

Browse files
VeraZabVeraZab
authored
Merge pull request #192 from plotly/mdi-icons
Mdi icons instead of fontastic icons
2 parents f3ac4cc + f64b45f commit 8854925

File tree

18 files changed

+13121
-101
lines changed

18 files changed

+13121
-101
lines changed

‎package-lock.json

Lines changed: 13032 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,28 @@
1313
"url": "https://github.com/plotly/react-plotly.js-editor/issues"
1414
},
1515
"scripts": {
16-
"make:combined-translation-keys": "babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
16+
"make:combined-translation-keys":
17+
"babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
1718
"make:translation-keys": "babel-node utils/findTranslationKeys.js",
18-
"make:lib": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
19-
"make:lib:css": "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
20-
"make:dist": "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
21-
"make:dist:css": "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
22-
"prepublishOnly": "npm run make:lib && npm run make:combined-translation-keys",
19+
"make:lib":
20+
"mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
21+
"make:lib:css":
22+
"mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
23+
"make:dist":
24+
"mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
25+
"make:dist:css":
26+
"mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
27+
"prepublishOnly":
28+
"npm run make:lib && npm run make:combined-translation-keys",
2329
"lint": "prettier --write \"src/**/*.js\"",
24-
"test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
25-
"test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
30+
"test:lint":
31+
"eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
32+
"test:pretty":
33+
"prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
2634
"test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
2735
"test": "npm run test:lint && npm run test:pretty && npm run test:js",
28-
"watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
36+
"watch":
37+
"babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
2938
"watch-test": "jest --watch"
3039
},
3140
"keywords": [
@@ -77,6 +86,7 @@
7786
"draft-js-import-html": "^1.2.1",
7887
"draft-js-utils": "^1.2.0",
7988
"fast-isnumeric": "^1.1.1",
89+
"plotly-icons": "^1.0.1",
8090
"plotly.js": "^1.31.2",
8191
"prop-types": "^15.5.10",
8292
"raf": "^3.4.0",
@@ -90,9 +100,7 @@
90100
"react": "React"
91101
},
92102
"jest": {
93-
"roots": [
94-
"<rootDir>/src/"
95-
],
103+
"roots": ["<rootDir>/src/"],
96104
"moduleNameMapper": {
97105
"^.+\\.css$": "<rootDir>/config/CSSStub.js"
98106
}

‎src/components/containers/Fold.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React, {Component} from 'react';
33
import classnames from 'classnames';
4+
import {CloseIcon, AngleDownIcon} from 'plotly-icons';
45

56
export default class Fold extends Component {
67
constructor() {
@@ -27,18 +28,24 @@ export default class Fold extends Component {
2728
'fold__top--active': !folded,
2829
});
2930

30-
const arrowClass = classnames('icon-angle-down', 'fold__top__arrow', {
31+
const arrowClass = classnames('fold__top__arrow', {
3132
'fold__top__arrow--active': !folded,
3233
});
3334

34-
const arrowIcon = <i className={arrowClass} />;
35+
const arrowIcon = (
36+
<div className={arrowClass}>
37+
<AngleDownIcon />
38+
</div>
39+
);
3540

3641
const deleteButton = handleClick =>
3742
doDelete && (
38-
<i
39-
className="icon-cancel fold__top__delete js-fold__delete"
43+
<div
44+
className="fold__top__delete js-fold__delete"
4045
onClick={handleClick}
41-
/>
46+
>
47+
<CloseIcon />
48+
</div>
4249
);
4350

4451
const foldHeader = !hideHeader && (

‎src/components/containers/MenuPanel.js

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React, {Component} from 'react';
1+
import ModalBox from './ModalBox';
22
import PropTypes from 'prop-types';
3+
import React, {Component} from 'react';
34
import classnames from 'classnames';
4-
import ModalBox from './ModalBox';
5+
import {QuestionIcon, CogIcon} from 'plotly-icons';
56

67
export default class MenuPanel extends Component {
78
constructor() {
@@ -11,20 +12,15 @@ export default class MenuPanel extends Component {
1112
this.togglePanel = this.togglePanel.bind(this);
1213
}
1314

14-
menupanelClasses() {
15-
if (this.props.iconClass) {
16-
return {
17-
iconClass: `menupanel__icon ${this.props.iconClass}`,
18-
spanClass: 'menupanel__icon-span',
19-
};
20-
} else if (this.props.question) {
15+
getIcon() {
16+
if (this.props.question) {
2117
return {
22-
iconClass: 'menupanel__icon icon-question-circle',
18+
icon: <QuestionIcon className="menupanel__icon" />,
2319
spanClass: `menupanel__icon-span menupanel__icon-span--question`,
2420
};
2521
}
2622
return {
27-
iconClass: 'menupanel__icon icon-cog',
23+
icon: <CogIcon className="menupanel__icon" />,
2824
spanClass: 'menupanel__icon-span menupanel__icon-span--cog',
2925
};
3026
}
@@ -39,13 +35,13 @@ export default class MenuPanel extends Component {
3935
'menupanel--ownline': this.props.ownline,
4036
});
4137

42-
const {iconClass, spanClass} = this.menupanelClasses();
38+
const {icon, spanClass} = this.getIcon();
4339

4440
return (
4541
<div className={containerClass}>
4642
<span className={spanClass}>
4743
<span>{this.props.label}</span>
48-
<i className={iconClass} onClick={this.togglePanel} />
44+
<span onClick={this.togglePanel}>{icon}</span>
4945
</span>
5046
{isOpen ? (
5147
<ModalBox onClose={this.togglePanel}>{this.props.children}</ModalBox>

‎src/components/widgets/NumericInput.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import EditableText from './EditableText';
22
import React, {Component} from 'react';
33
import PropTypes from 'prop-types';
44
import isNumeric from 'fast-isnumeric';
5+
import {CarretDownIcon, CarretUpIcon} from 'plotly-icons';
56

67
export const UP_ARROW = 38;
78
export const DOWN_ARROW = 40;
@@ -102,13 +103,13 @@ export default class NumericInput extends Component {
102103
className="numeric-input__caret js-numeric-increase"
103104
onClick={this.incrementValue.bind(this, 'increase')}
104105
>
105-
<i className="icon-caret-up numeric-top-caret-modifier" />
106+
<CarretUpIcon className="numeric-top-caret-modifier" />
106107
</div>
107108
<div
108109
className="numeric-input__caret js-numeric-decrease"
109110
onClick={this.incrementValue.bind(this, 'decrease')}
110111
>
111-
<i className="icon-caret-down numeric-bottom-caret-modifier" />
112+
<CarretDownIcon className="numeric-bottom-caret-modifier" />
112113
</div>
113114
</div>
114115
);

‎src/components/widgets/SymbolSelector.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
44
import ModalBox from '../containers/ModalBox';
5+
import {CarretDownIcon} from 'plotly-icons';
56

67
export default class SymbolSelector extends Component {
78
constructor(props) {
@@ -109,8 +110,8 @@ export default class SymbolSelector extends Component {
109110
<span className="symbol-selector__toggle_option">
110111
{this.renderActiveOption()}
111112
</span>
112-
<span className="symbol-selector__toggle__caret">
113-
<i className="icon-caret-down" />
113+
<span>
114+
<CarretDownIcon className="symbol-selector__toggle__caret" />
114115
</span>
115116
</div>
116117
{isOpen ? (

‎src/components/widgets/text_editors/RichText/configuration.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import {INLINE_STYLE} from 'draft-js-utils';
3+
import {LinkIcon} from 'plotly-icons';
34

45
export const SUPERSCRIPT = 'SUPERSCRIPT';
56
export const SUBSCRIPT = 'SUBSCRIPT';
@@ -79,7 +80,7 @@ export const INLINE_STYLES = [
7980
{
8081
label: (
8182
<span>
82-
<i className="icon-link" />
83+
<LinkIcon className="icon-link" />
8384
</span>
8485
),
8586
value: LINK,

‎src/lib/bem.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,3 @@ export default function bem(block, element, modifiers) {
4343

4444
return out.join(' ');
4545
}
46-
47-
export function icon(iconName) {
48-
return `icon-${iconName}`;
49-
}

‎src/lib/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import bem, {icon} from './bem';
1+
import bem from './bem';
22
import connectAnnotationToLayout from './connectAnnotationToLayout';
33
import connectAxesToLayout from './connectAxesToLayout';
44
import connectLayoutToPlot, {getLayoutContext} from './connectLayoutToPlot';
@@ -42,7 +42,6 @@ export {
4242
findFullTraceIndex,
4343
getDisplayName,
4444
getLayoutContext,
45-
icon,
4645
isPlainObject,
4746
localize,
4847
localizeString,

‎src/styles/_shame.scss

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/styles/components/containers/_menupanel.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,8 @@
1818
padding-left: 6px;
1919
padding-right: 6px;
2020
vertical-align: middle;
21+
// gets overridden by user agent stylesheet otherwise
22+
width: 15px !important;
23+
height: 15px !important;
24+
fill: $color-link-light !important;
2125
}

‎src/styles/components/fields/_symbolselector.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
border-radius: 4px;
44
width: 80px;
55
cursor: pointer;
6-
padding: $quarter-spacing-unit 10px;
6+
padding: 6px 6px 3px 6px;
77
@include clearfix();
88
}
99

@@ -17,13 +17,17 @@
1717

1818
.symbol-selector__toggle__caret {
1919
float: right;
20-
color: $color-secondary-text;
20+
fill: $color-secondary-text;
21+
padding-top: 3px;
22+
// prevent user agent override
23+
width: 13px !important;
24+
height: 13px !important;
2125
}
2226

2327
.symbol-selector__menu {
2428
max-width: 225px;
2529
position: absolute;
26-
@include z-index("orbit");
30+
@include z-index('orbit');
2731
border: 1px solid $color-border;
2832
padding: $font-size;
2933
box-shadow: 2px 2px $font-size $color-border-secondary;

‎src/styles/components/widgets/_multi-format-text-editor.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
$multi-format-editor-background: #fafbfd;
44

55
.multi-format-editor {
6-
76
* {
87
box-sizing: border-box;
98
}
@@ -53,6 +52,10 @@ $multi-format-editor-background: #fafbfd;
5352
.icon-link {
5453
transform: translateY(3px);
5554
display: inline-block;
55+
fill: $color-text;
56+
// prevent user agent override
57+
width: 15px !important;
58+
height: 15px !important;
5659
}
5760
}
5861
}
@@ -95,7 +98,7 @@ $multi-format-editor-background: #fafbfd;
9598
border-top: 1px solid $color-border;
9699
width: 100%;
97100
display: block;
98-
color:$color-text;
101+
color: $color-text;
99102
}
100103

101104
&.selected {
@@ -124,7 +127,7 @@ $multi-format-editor-background: #fafbfd;
124127

125128
.confirmation-panel__message {
126129
line-height: 20px;
127-
&-primary{
130+
&-primary {
128131
font-weight: $font-weight-semibold;
129132
color: $color-text;
130133
}

‎src/styles/components/widgets/_numeric-input.scss

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,20 @@
4040
background-color: #f8f8f9;
4141
border: 1px solid #bec8d9;
4242
border-radius: 1px;
43-
width: $font-size;
44-
height: $font-size;
4543
line-height: 12px;
4644
text-align: center;
4745
}
46+
47+
.numeric-top-caret-modifier {
48+
// to prevent user agent override
49+
width: 13px !important;
50+
height: 13px !important;
51+
fill: $color-text !important;
52+
}
53+
54+
.numeric-bottom-caret-modifier {
55+
// to prevent user agent override
56+
width: 13px !important;
57+
height: 13px !important;
58+
fill: $color-text !important;
59+
}

‎src/styles/icons/_icons.scss

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/styles/icons/_main.scss

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/styles/main.scss

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,14 @@
66
.plotly-editor {
77
position: relative;
88
width: $layout-panel-width;
9-
flex-shrink:0;
9+
flex-shrink: 0;
1010
overflow: hidden;
1111
display: flex;
1212
font-family: $ff-default;
1313
@import 'components/main';
14-
@import 'icons/main';
1514
@include font-smoothing;
16-
&__wrapper{
15+
&__wrapper {
1716
display: flex;
1817
flex-grow: 1;
1918
}
2019
}
21-
22-
@import 'shame';

0 commit comments

Comments
 (0)