From 0e28df0bd6de5b55d545bd75501a0d6ab6ec4fb4 Mon Sep 17 00:00:00 2001 From: Severiano Badajoz Date: Tue, 16 Jun 2020 10:48:28 -0700 Subject: [PATCH] Fix Truncation styling issues (#1558) * fix color inheritance * tweak width constants * update snapshot * Trigger workflow --- .../e2e/__snapshots__/e2e.test.js.snap | 4 ++-- .../src/components/categorical/value/index.js | 12 ++++++---- client/src/components/util/truncate.js | 22 ++++++++++--------- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/client/__tests__/e2e/__snapshots__/e2e.test.js.snap b/client/__tests__/e2e/__snapshots__/e2e.test.js.snap index 9f866bf8..6c411b0f 100644 --- a/client/__tests__/e2e/__snapshots__/e2e.test.js.snap +++ b/client/__tests__/e2e/__snapshots__/e2e.test.js.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`did launch page launched 1`] = `"pbmc3kc3k"`; +exports[`did launch page launched 1`] = `"pbmc3kc3k"`; -exports[`metadata loads categories and values from dataset appear 1`] = `"
louvainvain
tint
"`; +exports[`metadata loads categories and values from dataset appear 1`] = `"
louvainvain
tint
"`; diff --git a/client/src/components/categorical/value/index.js b/client/src/components/categorical/value/index.js index ae23a737..39644210 100644 --- a/client/src/components/categorical/value/index.js +++ b/client/src/components/categorical/value/index.js @@ -456,11 +456,11 @@ class CategoryValue extends React.Component { const valueToggleLabel = `value-toggle-checkbox-${displayString}`; const VALUE_HEIGHT = 11; - const LEFT_MARGIN = 33; + const LEFT_MARGIN = 60; const CHECKBOX = 26; - const CELL_NUMBER = 61; + const CELL_NUMBER = 50; const ANNO_MENU = 26; - const LABEL_MARGIN = 24; + const LABEL_MARGIN = 16; const otherElementsWidth = LEFT_MARGIN + @@ -470,10 +470,14 @@ class CategoryValue extends React.Component { (isUserAnno ? ANNO_MENU : 0); const CHART_WIDTH = 100; + const CHART_MARGIN = 24; const labelWidth = colorAccessor && !isColorBy - ? globals.leftSidebarWidth - otherElementsWidth - CHART_WIDTH + ? globals.leftSidebarWidth - + otherElementsWidth - + CHART_WIDTH - + CHART_MARGIN : globals.leftSidebarWidth - otherElementsWidth; return ( diff --git a/client/src/components/util/truncate.js b/client/src/components/util/truncate.js index 618c7831..81ab3158 100644 --- a/client/src/components/util/truncate.js +++ b/client/src/components/util/truncate.js @@ -16,17 +16,19 @@ const FIRST_HALF_STYLE = { flexShrink: 1, minWidth: "5px", }; +const SECOND_HALF_STYLE = { + position: "relative", + overflow: "hidden", + whiteSpace: "nowrap", +}; +const SECOND_HALF_SPACING_STYLE = { + color: "transparent", +}; const SECOND_HALF_INNER_STYLE = { position: "absolute", right: 0, }; -const SECOND_HALF_STYLE = { - color: "transparent", - position: "relative", - overflow: "hidden", - whiteSpace: "nowrap", -}; export default (props) => { const { children } = props; @@ -46,17 +48,17 @@ export default (props) => { const inheritedColor = children.props.style.color; const splitStyle = { ...children.props.style, ...SPLIT_STYLE }; - const secondHalfInnerStyle = { + const secondHalfContentStyle = { ...SECOND_HALF_INNER_STYLE, - color: inheritedColor || "initial", + color: inheritedColor || "inherit", }; const truncatedJSX = ( {firstString} - {secondString} - {secondString} + {secondString} + {secondString} );