remove old stylesheet

weaveworks · Feb 20, 2017 · 4df3f7f · 4df3f7f
1 parent 0d6fff4
commit 4df3f7f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/client/app/scripts/charts/node-container.js b/client/app/scripts/charts/node-container.js
@@ -3,12 +3,9 @@ import { omit } from 'lodash';
 import { Motion, spring } from 'react-motion';
 
 import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
-import { isContrastMode } from '../utils/contrast-utils';
 import Node from './node';
 
 
-const nodeBlurOpacity = isContrastMode() ? 0.6 : 0.25;
-
 const transformedNode = (otherProps, { x, y, k, opacity }) => (
   // NOTE: Controlling blurring and transform from here seems to re-render
   // faster than adding a CSS class and controlling it from there.
@@ -19,7 +16,8 @@ const transformedNode = (otherProps, { x, y, k, opacity }) => (
 
 export default class NodeContainer extends React.PureComponent {
   render() {
-    const { dx, dy, isAnimated, scale, blurred } = this.props;
+    const { dx, dy, isAnimated, scale, blurred, contrastMode } = this.props;
+    const nodeBlurOpacity = contrastMode ? 0.6 : 0.25;
     const forwardedProps = omit(this.props, 'dx', 'dy', 'isAnimated', 'scale', 'blurred');
     const opacity = blurred ? nodeBlurOpacity : 1;
 

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
@@ -127,7 +127,13 @@ class Node extends React.Component {
           this.renderStandardLabels(labelClassName, labelMinorClassName, labelOffsetY, mouseEvents)}
 
         <g {...mouseEvents} ref={this.saveShapeRef}>
-          <NodeShapeType id={id} highlighted={highlighted} color={color} metric={metric} />
+          <NodeShapeType
+            id={id}
+            highlighted={highlighted}
+            color={color}
+            metric={metric}
+            contrastMode={this.props.contrastMode}
+          />
         </g>
 
         {showingNetworks && <NodeNetworksOverlay networks={networks} stack={stack} />}
@@ -158,7 +164,8 @@ class Node extends React.Component {
 function mapStateToProps(state) {
   return {
     exportingGraph: state.get('exportingGraph'),
-    showingNetworks: state.get('showingNetworks')
+    showingNetworks: state.get('showingNetworks'),
+    contrastMode: state.get('contrastMode')
   };
 }
 

diff --git a/client/app/scripts/charts/nodes-chart-nodes.js b/client/app/scripts/charts/nodes-chart-nodes.js
@@ -77,7 +77,7 @@ class NodesChartNodes extends React.Component {
   }
 
   render() {
-    const { layoutNodes, isAnimated } = this.props;
+    const { layoutNodes, isAnimated, contrastMode } = this.props;
 
     const nodesToRender = layoutNodes.toIndexedSeq()
       .map(this.nodeHighlightedDecorator)
@@ -111,6 +111,7 @@ class NodesChartNodes extends React.Component {
             dy={node.get('y')}
             scale={node.get('scale')}
             isAnimated={isAnimated}
+            contrastMode={contrastMode}
           />
         ))}
       </g>
@@ -130,6 +131,7 @@ function mapStateToProps(state) {
     selectedNetwork: state.get('selectedNetwork'),
     selectedNodeId: state.get('selectedNodeId'),
     searchQuery: state.get('searchQuery'),
+    contrastMode: state.get('contrastMode')
   };
 }
 

diff --git a/client/app/scripts/utils/contrast-utils.js b/client/app/scripts/utils/contrast-utils.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-underscore-dangle */
+import last from 'lodash/last';
 /**
  * Change the Scope UI theme from normal to high-contrast.
  * This will inject a stylesheet into <head> and override the styles.
@@ -7,6 +8,9 @@
  * the filename (and content hash) needed to download the file.
  */
 
+function getFilename(href) {
+  return last(href.split('/'));
+}
 
 export function loadTheme(theme = 'normal') {
   if (window.__WEAVE_SCOPE_THEMES) {
@@ -16,6 +20,18 @@ export function loadTheme(theme = 'normal') {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
     link.href = `${window.__WEAVE_SCOPE_THEMES.publicPath}${stylesheet}`;
+    link.onload = () => {
+      // Remove the old stylesheet to prevent weird overlapping styling issues
+      const oldTheme = theme === 'normal' ? 'contrast' : 'normal';
+      const links = document.querySelectorAll('head link');
+      for (let i = 0; i < links.length; i += 1) {
+        const l = links[i];
+        if (getFilename(l.href) === getFilename(window.__WEAVE_SCOPE_THEMES[oldTheme])) {
+          head.removeChild(l);
+          break;
+        }
+      }
+    };
 
     head.appendChild(link);
   }