From 4df3f7f77cf72ec500b90b3552ee93538033df13 Mon Sep 17 00:00:00 2001 From: Jordan Pellizzari Date: Mon, 20 Feb 2017 11:43:38 -0800 Subject: [PATCH] remove old stylesheet --- client/app/scripts/charts/node-container.js | 6 ++---- client/app/scripts/charts/node.js | 11 +++++++++-- client/app/scripts/charts/nodes-chart-nodes.js | 4 +++- client/app/scripts/utils/contrast-utils.js | 16 ++++++++++++++++ 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/client/app/scripts/charts/node-container.js b/client/app/scripts/charts/node-container.js index 9b36c57c8e..4f5739620b 100644 --- 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 index d5322dfd4b..665c03a7fb 100644 --- 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)} - + {showingNetworks && } @@ -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 index 26e619b5e0..770048f0fe 100644 --- 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} /> ))} @@ -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 index 71ce989eaf..2bddd6227d 100644 --- 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 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); }