deriv-com · bruce-binary · Oct 19, 2018 · Oct 5, 2018 · Oct 6, 2018 · Oct 6, 2018
diff --git a/.babelrc b/.babelrc
@@ -10,14 +10,6 @@
         ["@babel/plugin-proposal-decorators", { "legacy": true }],
         ["@babel/plugin-syntax-dynamic-import"],
         ["@babel/plugin-proposal-class-properties", { "loose" : true }],
-        ["inline-react-svg", {
-            "svgo": {
-                "plugins": [
-                    { "cleanupIDs": false },
-                    { "removeTitle": true }
-                ]
-            }
-        }]
     ],
     "env": {
         "test": {
@@ -31,15 +23,7 @@
             "plugins": [
                 ["@babel/plugin-proposal-decorators", { "legacy": true }],
                 ["@babel/plugin-proposal-class-properties", { "loose" : true }],
-                "istanbul",
-                ["inline-react-svg", {
-                    "svgo": {
-                        "plugins": [
-                            { "cleanupIDs": false },
-                            { "removeTitle": true }
-                        ]
-                    }
-                }]
+                "istanbul"
             ] }
     }
 }
diff --git a/README.md b/README.md
@@ -293,6 +293,32 @@ Each time a new translation string is added to the code, you need to update the
 Once the new `messages.pot` is merged into the `dev` branch, it will automatically be updated in [CrowdIn](https://crowdin.com/project/smartcharts/settings#files). You should expect to see a PR with the title **New Crowdin translations**
  in a few minutes; this PR will update the `*.po` files.
 
+ ### Dealing With SVGs
+
+ SmartCharts has 2 ways of utilizing SVG files: as CSS background image and as external SVG.
+
+##### CSS Background Image SVG
+
+These SVG are added inline into the CSS via [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg). Currently the only place where this is used is the loader, because if the external SVG is not loaded yet we would at least want a loading screen to be present.
+
+ ##### External SVG
+
+ The SVG files included in the `js` and `jsx` files are automatically put together into a sprite sheet. Manipulating external SVG can be tricky - developers can only control stroke and fill color of the whole SVG file via CSS:
+
+ ```scss
+.ic-icon.active {
+    svg {
+        stroke: #2e8836;
+        fill: #ff3d38;
+    }
+}
+```
+
+ **Important Note:** These stroke and fill colors will not be affected by CSS if the corresponding attributes are declared in the SVG file. Therefore, it is not uncommon SmartCharts developers would need to tweak the SVG files by hand to be able to manipulate its color. 
+
+ This has much less freedom compared to [inline SVG](https://github.com/MoOx/react-svg-inline) where a developer can control individual parts of the SVG, but having external SVG results in a much smaller library, and allows parts of the code not rendered by React to use them. External SVG is also cached by the browser (using shadow DOM), so though the same SVG may be used multiple times, only one copy exists in the DOM.
+
+
  ### State Management and the `connect` Method
 
  SmartCharts uses a variation of [Mobdux](https://medium.com/@cameronfletcher92/mobdux-combining-the-good-parts-of-mobx-and-redux-61bac90ee448) to assist with state management using Mobx.

diff --git a/app/index.jsx b/app/index.jsx
@@ -107,7 +107,8 @@ class App extends Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        return this.state.symbol !== nextState.symbol;
+        return this.state.symbol !== nextState.symbol
+            || JSON.stringify(this.state.settings) !== JSON.stringify(nextState.settings);
     }
 
     symbolChange = (symbol) => {

diff --git a/package.json b/package.json
@@ -107,7 +107,10 @@
     "style-loader": "^0.21.0",
     "stylelint": "^9.3.0",
     "stylelint-webpack-plugin": "^0.10.5",
+    "svg-sprite-loader": "^4.1.2",
     "svg-url-loader": "^2.3.1",
+    "svgo": "^1.1.1",
+    "svgo-loader": "^2.2.0",
     "url-loader": "^1.0.1",
     "webpack": "^4.17.1",
     "webpack-bundle-analyzer": "^3.0.2",

diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -26,22 +26,6 @@ $small-icon-size: 16px;
     transition: pointer-events 0.2s cubic-bezier(0.64, 0.04, 0.35, 1), transform 0.25s cubic-bezier(0.64, 0.04, 0.35, 1), opacity 0.17s cubic-bezier(0.64, 0.04, 0.35, 1), z-index 0.17s cubic-bezier(0.64, 0.04, 0.35, 1);
 }
 
-@mixin svg-icon-color($color) {
-    svg, path, g, polyline {
-        @include themify($themes) {
-            fill: themed($color);
-        }
-    }
-}
-
-@mixin svg-icon-stroke($color) {
-    path {
-        @include themify($themes) {
-            stroke: themed($color);
-        }
-    }
-}
-
 /* --------- CSS Properties --------- */
 
 @mixin optional-at-root($sel) {

diff --git a/sass/components/_categorical-display.scss b/sass/components/_categorical-display.scss
@@ -76,12 +76,6 @@
             font-size: 9px;
             top: 7px;
             transition: right, opacity 0.2s ease-in-out;
-            @include svg-icon-color('CatDisplayFilterIcon');
-        }
-        > input:focus + .ic-icon svg path {
-            @include themify($themes) {
-                fill: themed('CatDisplayFilterIcon');
-            }
         }
     }
     .category {
@@ -92,21 +86,6 @@
         &:last-child {
             padding-bottom: 2.5em;
         }
-        &.category-active {
-            .category-content {
-                .cq-active-item {
-                    .cq-active-options {
-                        .ic-icon {
-                            path {
-                                @include themify($themes) {
-                                    fill: themed('CatDisplayCatContentIcon');
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
     }
     .category-content {
         margin: 0.4em 1em 0em;
@@ -174,24 +153,10 @@
             }
 
             .ic-icon {
-                &.ic-active {
-                    path, rect, circle {
-                        @include themify($themes) {
-                            fill: themed('CatDisplayActiveFilterIcon');
-                        }
-                    }
-                }
-                &.ic-forex,
-                &.ic-commodities,
-                &.ic-volidx,
-                &.ic-favorite,
-                &.ic-indicators,
-                &.ic-stocks,
-                &.ic-indices {
-                    path, rect, circle {
-                        @include themify($themes) {
-                            stroke: themed('CatDisplayActiveFilterIcon');
-                        }
+                svg {
+                    @include themify($themes) {
+                        fill: themed('CatDisplayActiveFilterIcon');
+                        stroke: themed('CatDisplayActiveFilterIcon');
                     }
                 }
             }
@@ -203,27 +168,6 @@
             height: $small-icon-size;
             margin-bottom: 2px;
             margin-right: 1.3em;
-
-            &.ic-active {
-                path, rect, circle {
-                    @include themify($themes) {
-                        fill: themed('CatDisplayFilterIcon');
-                    }
-                }
-            }
-            &.ic-forex,
-            &.ic-commodities,
-            &.ic-volidx,
-            &.ic-favorite,
-            &.ic-indicators,
-            &.ic-stocks,
-            &.ic-indices {
-                path, rect, circle {
-                    @include themify($themes) {
-                        stroke: themed('CatDisplayFilterIcon');
-                    }
-                }
-            }
         }
     }
     .cq-item,
@@ -250,15 +194,6 @@
             display: flex;
             align-items: center;
         }
-        .right {
-            .ic-icon.ciq-favorite {
-                path {
-                    @include themify($themes) {
-                        stroke: themed('CatDisplayCatContentIcon');
-                    }
-                }
-            }
-        }
         .closed-market {
             border: 1px solid #f44336;
             color: #f44336;

diff --git a/sass/components/_chart-controls.scss b/sass/components/_chart-controls.scss
@@ -42,7 +42,6 @@
                         @include themify($themes) {
                             color: themed('MenuActiveText');
                         }
-                        @include svg-icon-color('MenuActiveIcon');
 
                         .ic-subtitle {
                             font-weight: bold;
@@ -78,8 +77,6 @@
                         }
                     }
                 }
-                @include svg-icon-color('MenuIcon');
-
                 .ic-subtitle {
                     font-weight: normal;
                     font-style: normal;

diff --git a/sass/components/_chart-title.scss b/sass/components/_chart-title.scss
@@ -18,7 +18,7 @@
                 margin-right: 0px;
                 width: 24px;
 
-                svg g {
+                svg {
                     @include themify($themes) {
                         fill: themed('ChartTitleArrow');
                     }
@@ -34,10 +34,8 @@
                 svg {
                     transform: rotate(180deg);
 
-                    g {
-                        @include themify($themes) {
-                            fill: themed('ChartTitleActiveArrow');
-                        }
+                    @include themify($themes) {
+                        fill: themed('ChartTitleActiveArrow');
                     }
                 }
             }

diff --git a/sass/components/_chart-types.scss b/sass/components/_chart-types.scss
@@ -1,22 +1,4 @@
 .ciq-chart-types {
-    .cq-menu-btn {
-        .ic-icon {
-            path, circle, rect {
-                @include themify($themes) {
-                    fill: themed('ChartTypeListIcon');
-                    stroke: themed('ChartTypeListIcon');
-                }
-            }
-            &.active {
-                path, circle, rect {
-                    @include themify($themes) {
-                        fill: themed('MenuActiveIcon');
-                        stroke: themed('MenuActiveIcon');
-                    }
-                }
-            }
-        }
-    }
     .cq-menu-dropdown {
         width: 200px;
         box-sizing: border-box;
@@ -31,49 +13,16 @@
                 @include themify($themes) {
                     border-right: 2px solid themed('ChartTypeActiveListBorderRight');
                 }
-
-                > .left {
-                    .ic-icon {
-                        path, circle, rect {
-                            @include themify($themes) {
-                                fill: themed('ChartTypeActiveListIcon');
-                                stroke: themed('ChartTypeActiveListIcon');
-                            }
-                        }
-                    }
-                }
             }
             padding: 0;
             justify-content: space-between;
 
             > .left {
                 display: inline-flex;
                 align-items: center;
-
-                .ic-icon {
-                    path, circle, rect {
-                        @include themify($themes) {
-                            fill: themed('ChartTypeListIcon');
-                            stroke: themed('ChartTypeListIcon');
-                        }
-                    }
-                }
             }
             > .ciq-aggregate-setting {
                 margin-right: 5px;
-
-                > .ic-icon {
-                    > svg > path {
-                        @include themify($themes) {
-                            fill: themed('ChartTypeListIcon');
-                        }
-                    }
-                    &:hover > svg > path {
-                        @include themify($themes) {
-                            fill: themed('ChartTypeActiveListIcon');
-                        }
-                    }
-                }
             }
         }
     }

diff --git a/sass/components/_ciq-chart-setting.scss b/sass/components/_ciq-chart-setting.scss
@@ -37,24 +37,16 @@
                         .ic-icon {
                             cursor: pointer;
 
-                            rect {
+                            svg {
                                 @include themify($themes) {
                                     stroke: themed('ChartSettingIcon');
-                                }
-                            }
-                            path {
-                                @include themify($themes) {
                                     fill: themed('ChartSettingIcon');
                                 }
                             }
                             &.active {
-                                rect {
+                                svg {
                                     @include themify($themes) {
                                         stroke: themed('ChartSettingActiveIcon');
-                                    }
-                                }
-                                path {
-                                    @include themify($themes) {
                                         fill: themed('ChartSettingActiveIcon');
                                     }
                                 }

diff --git a/sass/components/_ciq-crosshair.scss b/sass/components/_ciq-crosshair.scss
@@ -6,7 +6,7 @@
     }
     .cq-toggle {
         &.active {
-            path {
+            svg {
                 @include themify($themes) {
                     fill: themed('MenuActiveIcon') !important;
                 }

diff --git a/sass/components/_ciq-download.scss b/sass/components/_ciq-download.scss
@@ -1,21 +1,5 @@
 
 .cq-download {
-    .cq-menu-btn > .ic-icon {
-        > svg > g > path {
-            fill: none !important;
-            @include themify($themes) {
-                stroke: themed('MenuIcon');
-            }
-        }
-        &.active {
-            > svg > g > path {
-                fill: none !important;
-                @include themify($themes) {
-                    stroke: themed('MenuActiveIcon');
-                }
-            }
-        }
-    }
     .cq-menu-dropdown {
         width: 280px;
     }