bring back line number background

go1t · go1t · commit 242ed2ecf015 · 2016-07-19T22:51:43.000-07:00
diff --git a/src/client/app/modules/components/code-view.jsx b/src/client/app/modules/components/code-view.jsx
@@ -22,6 +22,20 @@ export const LineNumbers = ({start, length, lno}) => {
   )
 }
 
+export const LineNumbersBackground = ({start, length, lno}) => {
+  start = Math.max(start, 1)
+  return (
+    <div className="LineNumbersBackgroundContainer">
+        {_.range(start, start+length).map((number) => {
+            var classes = classnames('LineNumber', {
+              'LineNumber--focused': lno == number
+            });
+            return <div key={number} className={classes}>&nbsp;</div>
+        })}
+    </div>
+  )
+}
+
 function loadingString(filePath) {
   return 'Loading ...';
 }
@@ -143,6 +157,7 @@ export class CodeView extends React.Component {
         }
         <pre className="Snippet-code">
           {length? <LineNumbers start={start} length={length} lno={lno}/> : null}
+          {length? <LineNumbersBackground start={start} length={length} lno={lno}/> : null}
           <SuperFuckingAwesomeHorizontalScrollbars>
             <CodeInnerView
               key={filePath}
diff --git a/src/client/sass/partials/_code.scss b/src/client/sass/partials/_code.scss
@@ -48,6 +48,16 @@
   z-index: 100;
   color: #999;
   background: #2b303b;
+  box-sizing: border-box;
+}
+
+.LineNumbersBackgroundContainer {
+  position: absolute;
+  width: 100%;
+  font-family: 'Inconsolata', monospace;
+  margin: 16px 0;
+  padding: 0;
+  color: #999;
   text-align: right;
   padding-right: 10px;
   box-sizing: border-box;
