From 4258fbf44cc774185f619e032f87e211e2afd8a7 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Thu, 6 Apr 2017 16:37:19 +0200 Subject: [PATCH 1/2] Render highlight with strokes & use non-scaled highlight for stacks. --- client/app/scripts/charts/node-shape-stack.js | 26 ++++++------------- client/app/scripts/charts/node-shapes.js | 9 +++++-- client/app/styles/_base.scss | 25 +++++++----------- client/app/styles/_contrast-overrides.scss | 2 +- client/app/styles/_variables.scss | 2 +- 5 files changed, 27 insertions(+), 37 deletions(-) diff --git a/client/app/scripts/charts/node-shape-stack.js b/client/app/scripts/charts/node-shape-stack.js index 48de1d6b91..08d42d7c8f 100644 --- a/client/app/scripts/charts/node-shape-stack.js +++ b/client/app/scripts/charts/node-shape-stack.js @@ -2,27 +2,17 @@ import React from 'react'; import { NODE_BASE_SIZE } from '../constants/styles'; - export default function NodeShapeStack(props) { - const shift = props.contrastMode ? 0.15 : 0.1; - const highlightScale = [1, 1 + shift]; - const dy = NODE_BASE_SIZE * shift; - + const dx = NODE_BASE_SIZE * (props.contrastMode ? 0.06 : 0.05); + const dy = NODE_BASE_SIZE * (props.contrastMode ? 0.12 : 0.1); + const translateAlongAxis = t => `translate(${t * dx}, ${t * dy})`; const Shape = props.shape; + return ( - - - - - - - - - - - - - + + + + ); } diff --git a/client/app/scripts/charts/node-shapes.js b/client/app/scripts/charts/node-shapes.js index 1e39d4f867..3c421ab7cc 100644 --- a/client/app/scripts/charts/node-shapes.js +++ b/client/app/scripts/charts/node-shapes.js @@ -28,8 +28,13 @@ function NodeShape(shapeType, shapeElement, shapeProps, { id, highlighted, color return ( {highlighted && shapeElement({ - className: 'highlight', - transform: `scale(${NODE_BASE_SIZE * 0.7})`, + className: 'highlight-border', + transform: `scale(${NODE_BASE_SIZE * 0.5})`, + ...shapeProps, + })} + {highlighted && shapeElement({ + className: 'highlight-shadow', + transform: `scale(${NODE_BASE_SIZE * 0.5})`, ...shapeProps, })} {shapeElement({ diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index 33e4b9ee27..eddd93985a 100644 --- a/client/app/styles/_base.scss +++ b/client/app/styles/_base.scss @@ -425,17 +425,6 @@ } } - .stack .shape .highlight { - display: none; - } - - .stack .highlight .shape { - .border { display: none; } - .shadow { display: none; } - .node { display: none; } - .highlight { display: inline; } - } - .stack .shape .metric-fill { display: none; } @@ -444,14 +433,20 @@ transform: scale(1); cursor: pointer; - .highlight { - fill: $weave-blue; - fill-opacity: $node-highlight-fill-opacity; + .highlight-border { + fill: none; stroke: $weave-blue; - stroke-width: $node-highlight-stroke-width; + stroke-width: 0.7 + $node-highlight-stroke-width * 2; stroke-opacity: $node-highlight-stroke-opacity; } + .highlight-shadow { + fill: none; + stroke: white; + stroke-width: 0.7; + stroke-opacity: $node-highlight-shadow-opacity; + } + .background { stroke: none; fill: $background-lighter-color; diff --git a/client/app/styles/_contrast-overrides.scss b/client/app/styles/_contrast-overrides.scss index 4860c5a5fc..310f791668 100644 --- a/client/app/styles/_contrast-overrides.scss +++ b/client/app/styles/_contrast-overrides.scss @@ -12,7 +12,7 @@ $text-darker-color: darken($text-color, 20%); $white: white; $edge-color: black; -$node-highlight-fill-opacity: 0.3; +$node-highlight-shadow-opacity: 0.4; $node-highlight-stroke-opacity: 0.5; $node-highlight-stroke-width: 0.16; $node-border-stroke-width: 0.2; diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss index 2a9f759dc5..7abd7c2eec 100644 --- a/client/app/styles/_variables.scss +++ b/client/app/styles/_variables.scss @@ -30,7 +30,7 @@ $border-radius: 4px; $terminal-header-height: 44px; -$node-highlight-fill-opacity: 0.1; +$node-highlight-shadow-opacity: 0.5; $node-highlight-stroke-opacity: 0.4; $node-highlight-stroke-width: 0.04; $node-border-stroke-width: 0.12; From aedd48a763519c54a2b846c1882435ccf91da790 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Fri, 7 Apr 2017 17:24:59 +0200 Subject: [PATCH 2/2] Reverted part of the changes made to node stack highlighting. --- client/app/scripts/charts/node-shape-stack.js | 20 ++++++++++++------- client/app/styles/_base.scss | 7 +++++++ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/client/app/scripts/charts/node-shape-stack.js b/client/app/scripts/charts/node-shape-stack.js index 08d42d7c8f..d150d5d142 100644 --- a/client/app/scripts/charts/node-shape-stack.js +++ b/client/app/scripts/charts/node-shape-stack.js @@ -3,16 +3,22 @@ import React from 'react'; import { NODE_BASE_SIZE } from '../constants/styles'; export default function NodeShapeStack(props) { - const dx = NODE_BASE_SIZE * (props.contrastMode ? 0.06 : 0.05); - const dy = NODE_BASE_SIZE * (props.contrastMode ? 0.12 : 0.1); - const translateAlongAxis = t => `translate(${t * dx}, ${t * dy})`; + const verticalDistance = NODE_BASE_SIZE * (props.contrastMode ? 0.12 : 0.1); + const verticalTranslate = t => `translate(0, ${t * verticalDistance})`; const Shape = props.shape; + // Stack three shapes on top of one another pretending they are never highlighted. + // Instead, fake the highlight of the whole stack with a vertically stretched shape + // drawn in the background. This seems to give a good approximation of the stack + // highlight and prevents us from needing to do some render-heavy SVG clipping magic. return ( - - - - + + + + + + + ); } diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index eddd93985a..a8c68c3005 100644 --- a/client/app/styles/_base.scss +++ b/client/app/styles/_base.scss @@ -425,6 +425,13 @@ } } + .stack .highlight-only { + .background { display: none; } + .shadow { display: none; } + .border { display: none; } + .node { display: none; } + } + .stack .shape .metric-fill { display: none; }