Use popover

Signed-off-by: Davit Yeghshatyan <davo@uber.com>
vvvprabhakar · Jul 2, 2018 · 6152402 · 6152402
1 parent e75c5de
commit 6152402
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css b/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css
@@ -15,9 +15,10 @@ limitations under the License.
 */
 
 .TimelineCollapser {
-  float: right;
-  margin: 0 0.8rem 0 0;
+  float: left;
+  margin: 0 0 0 0.15rem;
   display: inline-block;
+  border-right: 1px solid #ccc;
 }
 
 .TimelineCollapserBtn {

diff --git a/...er-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js b/...er-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js
@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { Tooltip, Icon } from 'antd';
+import { Popover, Icon } from 'antd';
 
 import './TimelineCollapser.css';
 
@@ -29,20 +29,34 @@ type CollapserProps = {
 
 export default function TimelineCollapser(props: CollapserProps) {
   const { onExpandAll, onExpandOne, onCollapseAll, onCollapseOne } = props;
+  const content = (
+    <div>
+      <Icon type="right" onClick={onExpandOne} className="TimelineCollapserBtn ExpandBtn" />
+      <a onClick={onExpandOne} role="button">
+        Expand +1
+      </a>
+      <br />
+      <Icon type="right" onClick={onCollapseOne} className="TimelineCollapserBtn" />
+      <a onClick={onCollapseOne} role="button">
+        Collapse +1
+      </a>
+      <br />
+      <Icon type="double-right" onClick={onExpandAll} className="TimelineCollapserBtn ExpandBtn" />
+      <a onClick={onExpandAll} role="button">
+        Expand All
+      </a>
+      <br />
+      <Icon type="double-right" onClick={onCollapseAll} className="TimelineCollapserBtn" />
+      <a onClick={onCollapseAll} role="button">
+        Collapse All
+      </a>
+    </div>
+  );
   return (
     <span className="TimelineCollapser">
-      <Tooltip title="Expand +1">
-        <Icon type="right" onClick={onExpandOne} className="TimelineCollapserBtn ExpandBtn" />
-      </Tooltip>
-      <Tooltip title="Collapse +1">
-        <Icon type="right" onClick={onCollapseOne} className="TimelineCollapserBtn" />
-      </Tooltip>
-      <Tooltip title="Expand All">
-        <Icon type="double-right" onClick={onExpandAll} className="TimelineCollapserBtn ExpandBtn" />
-      </Tooltip>
-      <Tooltip title="Collapse All">
-        <Icon type="double-right" onClick={onCollapseAll} className="TimelineCollapserBtn" />
-      </Tooltip>
+      <Popover placement="rightBottom" content={content} title="Expand/Collapse" trigger="hover">
+        <Icon type="double-right" className="TimelineCollapserBtn ExpandBtn" />
+      </Popover>
     </span>
   );
 }
diff --git a/...er-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js b/...er-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js
@@ -57,13 +57,13 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
   return (
     <TimelineRow className="TimelineHeaderRow">
       <TimelineRow.Cell width={nameColumnWidth}>
-        <h3 className="TimelineHeaderRow--title">Service &amp; Operation</h3>
         <TimelineCollapser
           onCollapseAll={onCollapseAll}
           onExpandAll={onExpandAll}
           onCollapseOne={onCollapseOne}
           onExpandOne={onExpandOne}
         />
+        <h3 className="TimelineHeaderRow--title">Service &amp; Operation</h3>
       </TimelineRow.Cell>
       <TimelineRow.Cell width={1 - nameColumnWidth}>
         <TimelineViewingLayer