Restyle "show more context" buttons (#280)

* normalize text by sorting lines

* change link color, remove underlines

* getting close to something

* css arrows

* hollow triangles

* expand tabs

* more reviewable style

* push it in

* not bad

* adjust show more color too

* cleanup

Author: danvk

ts/codediff/SkipRow.tsx

@@ -24,34 +24,29 @@ export function SkipRow(props: SkipRowProps) {
   };
   const arrows =
     numRows <= expandLines ? (
-      <span className="skip" title={`show ${numRows} skipped lines`} onClick={showAll}>
+      <span className="skip right" title={`show ${numRows} skipped lines`} onClick={showAll}>
         ↕
       </span>
     ) : (
       <>
         <span
-          className="skip expand-up"
+          className="skip right expand-up"
           title={`show ${expandLines} more lines above`}
           onClick={() => {
             onShowMore(range, -expandLines);
           }}>
-          ↥
+          ∨ EXPAND
         </span>
         <span
-          className="skip expand-down"
+          className="skip right expand-down"
           title={`show ${expandLines} more lines below`}
           onClick={() => {
             onShowMore(range, expandLines);
           }}>
-          ↧
+          ∧ EXPAND
         </span>
       </>
     );
-  const showMore = (
-    <a href="#" onClick={showAll}>
-      Show {numRows} more lines
-    </a>
-  );
   const headerHTML = header ? <span className="hunk-header">{header}</span> : '';
 
   const rowRef = React.useRef<HTMLTableRowElement>(null);
@@ -63,9 +58,11 @@ export function SkipRow(props: SkipRowProps) {
   return (
     <tr ref={rowRef} className={'skip-row' + (isSelected ? ` selected` : '')}>
       <td colSpan={4} className="skip code">
-        <span className="arrows-left">{arrows}</span>
-        {showMore} {headerHTML}
-        <span className="arrows-right">{arrows}</span>
+        {arrows}
+        <a href="#" onClick={showAll} className="show-more">
+          ↕ Show {numRows} more lines
+        </a>{' '}
+        {headerHTML}
       </td>
     </tr>
   );

webdiff/static/codediff.js/codediff.css

@@ -154,3 +154,53 @@ span.skip {
   -ms-user-select: text;
   user-select: text;
 }
+
+a, a:visited {
+  text-decoration: none;
+  color: #00a;
+}
+
+tr.skip-row {
+  position: relative;
+  line-height: 1.5em;
+}
+.skip.right {
+  position: absolute;
+}
+.skip.right {
+  right: 32px;
+}
+.skip.expand-up, .skip.expand-down {
+  font-size: 12px;
+  font-family: Inconsolata, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  color: #aaa;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  padding: 0px 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: 1.3;
+  letter-spacing: 0.04em;
+}
+.skip.expand-up:hover, .skip.expand-down:hover {
+  background: #f5f5f5;
+  color: #888;
+  border-color: #ccc;
+}
+/* tab hangs down from the row above: no top border, rounded bottom corners */
+.skip.expand-up {
+  top: 0;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+}
+/* tab sticks up from the row below: no bottom border, rounded top corners */
+.skip.expand-down {
+  bottom: 0;
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+}
+
+a.show-more {
+  color: #888;
+}