Revert "Amendments to text details panel (garris#1079)"

This reverts commit 3e66585.
dalin- · Aug 31, 2019 · d27e251 · d27e251
1 parent 7969e65
commit d27e251
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 74 deletions.
diff --git a/compare/output/index_bundle.js b/compare/output/index_bundle.js
diff --git a/compare/src/components/atoms/NavButtons.js b/compare/src/components/atoms/NavButtons.js
@@ -8,7 +8,9 @@ import iconDown from '../../assets/icons/iconDown.png';
 
 const Wrapper = styled.div`
   display: flex;
-  margin-left: auto;
+  position: absolute;
+  top: 15px;
+  right: 10px;
 
   a {
     display: inline-block;
@@ -24,15 +26,12 @@ const ButtonNav = styled.div`
   border-radius: 3px;
   height: 32px;
   width: 32px;
+  margin: 0 5px;
   transform: ${props => (props.prev ? `rotate(0)` : `rotate(180deg)`)};
 
   &:hover {
     cursor: pointer;
   }
-
-  &:not(:first-child) {
-    margin-left: 10px;
-  }
 `;
 
 export default class NavButtons extends React.Component {

diff --git a/compare/src/components/atoms/TextDetails.js b/compare/src/components/atoms/TextDetails.js
@@ -7,34 +7,12 @@ import UrlDetails from './UrlDetails';
 import { colors, fonts } from '../../styles';
 
 // styled
+const WrapperDetails = styled.div``;
+
 const Row = styled.div`
   padding: 5px 0;
 `;
 
-const RowDefault = styled(Row)`
-  display: block !important;
-`;
-
-const WrapperDetailsStatic = styled.div`
-  ${Row} {
-    display: ${props => (props.textInfo ? 'block' : 'none')};
-  }
-`;
-
-const WrapperDetailsPopup = styled.div`
-  position: absolute;
-  background-color: ${colors.white};
-  padding: 10px;
-  top: -28px;
-  left: 12px;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  z-index: 999;
-
-  ${Row} {
-    display: block;
-  }
-`;
-
 const Label = styled.span`
   font-family: ${fonts.latoRegular};
   color: ${colors.secondaryText};
@@ -49,18 +27,16 @@ const Value = styled.span`
   padding-right: 20px;
 `;
 
-const WrapperDetails = props => {
-  const {
-    children,
-    hidePanel,
-    showPanel,
-    textInfo
-  } = props;
-
-  return showPanel && !textInfo
-    ? <WrapperDetailsPopup onMouseLeave={hidePanel}>{children}</WrapperDetailsPopup>
-    : <WrapperDetailsStatic textInfo={textInfo}>{children}</WrapperDetailsStatic>;
-};
+const DetailsPanel = styled.div`
+  display: ${props => (props.showPanel ? 'block' : 'none')};
+  position: absolute;
+  background-color: ${colors.white};
+  padding: 10px;
+  top: -28px;
+  left: 20px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  z-index: 999;
+`;
 
 class TextDetails extends React.Component {
   constructor (props) {
@@ -96,33 +72,41 @@ class TextDetails extends React.Component {
       selector,
       diff,
       url,
-      referenceUrl,
-      viewportLabel
+      referenceUrl
     } = this.props.info;
-    const { textInfo } = this.props.settings;
+    const { settings } = this.props;
     const { showPanel } = this.state;
-    const hidePanel = this.hidePanel;
 
     return (
-      <WrapperDetails {...{ textInfo, showPanel, hidePanel }}>
-        <Row>
-          <Label>filename: </Label>
-          <Value>{fileName}</Value>
-        </Row>
-        <RowDefault onMouseOver={this.showPanel}>
+      <WrapperDetails>
+        <Row hidden={!settings.textInfo}>
           <Label>label: </Label>
           <Value>{label}</Value>
-          <Label>viewport: </Label>
-          <Value>{viewportLabel}</Value>
-        </RowDefault>
-        <Row>
           <Label>selector: </Label>
           <Value>{selector}</Value>
         </Row>
         <Row>
-          <UrlDetails url={url} referenceUrl={referenceUrl} />
-          <DiffDetails diff={diff} />
+          <Label>filename: </Label>
+          <Value onMouseOver={this.showPanel}>{fileName}</Value>
         </Row>
+        <DiffDetails suppress={!settings.textInfo} diff={diff} />
+
+        <DetailsPanel {...{ showPanel }} onMouseLeave={this.hidePanel}>
+          <Row>
+            <Label>label: </Label>
+            <Value>{label} </Value>
+            <Label>selector: </Label>
+            <Value>{selector} </Value>
+          </Row>
+          <Row>
+            <Label>filename: </Label>
+            <Value>{fileName} </Value>
+          </Row>
+          <Row>
+            <UrlDetails url={url} referenceUrl={referenceUrl} />
+            <DiffDetails diff={diff} />
+          </Row>
+        </DetailsPanel>
       </WrapperDetails>
     );
   }

diff --git a/compare/src/components/organisms/TestCard.js b/compare/src/components/organisms/TestCard.js
@@ -14,36 +14,38 @@ import TestImages from '../molecules/TestImages';
 const CardWrapper = styled.div`
   position: relative;
   margin: 5px auto;
-  padding: 10px 22px;
+  padding: 10px 30px;
   background-color: ${colors.cardWhite};
   box-shadow: ${shadows.shadow01};
   min-height: 40px;
   break-inside: avoid;
-  border-left: 8px solid transparent;
-  border-left-color: ${props => props.status === 'pass' ? colors.green : colors.red};
 
+  &:before {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 100%;
+    background-color: ${props => props.status === 'pass' ? colors.green : colors.red};
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
   @media print {
     box-shadow: none;
   }
 `;
 
-const CardHeader = styled.div`
-  display: flex;
-`;
-
 export default class TestCard extends React.Component {
   render () {
     let { pair: info, status } = this.props.test;
     let onlyText = this.props.onlyText;
 
     return (
       <CardWrapper id={this.props.id} status={status}>
-        <CardHeader>
-          <TextDetails info={info} />
-          {!onlyText && (
-            <NavButtons currentId={this.props.numId} lastId={this.props.lastId} />
-          )}
-        </CardHeader>
+        {!onlyText && (
+          <NavButtons currentId={this.props.numId} lastId={this.props.lastId} />
+        )}
+        <TextDetails info={info} />
         <TestImages info={info} status={status} />
         <ErrorMessages info={info} status={status} />
       </CardWrapper>