Fix jaegertracing#269 - Column resizer overlays trace header (jaegert…

…racing#280) Signed-off-by: Joe Farro <joef@uber.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar · Dec 17, 2018 · 4ac29c8 · 4ac29c8
1 parent 8d5783d
commit 4ac29c8
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 44 deletions.
diff --git a/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css b/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css
@@ -19,6 +19,7 @@ limitations under the License.
   display: flex;
   flex: none;
   justify-content: center;
+  margin-right: 0.5rem;
 }
 
 .TimelineCollapser--tooltipTitle {
@@ -27,7 +28,15 @@ limitations under the License.
 
 .TimelineCollapser--btn,
 .TimelineCollapser--btn-expand {
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
   margin-right: 0.3rem;
+  padding: 0.1rem;
+}
+
+.TimelineCollapser--btn:hover,
+.TimelineCollapser--btn-expand:hover {
+  color: rgba(0, 0, 0, 0.85);
 }
 
 .TimelineCollapser--btn-expand {

diff --git a/.../src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.css b/.../src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.css
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 .TimelineColumnResizer {
-  bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
+  top: 0;
 }
 
 .TimelineColumnResizer--wrapper {
@@ -28,31 +28,30 @@ limitations under the License.
 }
 
 .TimelineColumnResizer--dragger {
-  border-left: 1px solid transparent;
-  bottom: 0;
+  border-left: 2px solid transparent;
   cursor: col-resize;
-  position: fixed;
+  height: 5000px;
+  position: absolute;
   top: 0;
   width: 5px;
 }
 
 .TimelineColumnResizer--dragger:hover {
-  border-left: 1px solid #999;
+  border-left: 2px solid rgba(0, 0, 0, 0.3);
 }
 
-.TimelineColumnResizer--wrapper.isDraggingLeft > .TimelineColumnResizer--dragger,
-.TimelineColumnResizer--wrapper.isDraggingRight > .TimelineColumnResizer--dragger {
-  /* #808 === rgb(136, 0, 136) */
+.TimelineColumnResizer.isDraggingLeft > .TimelineColumnResizer--dragger,
+.TimelineColumnResizer.isDraggingRight > .TimelineColumnResizer--dragger {
   background: rgba(136, 0, 136, 0.05);
-  width: auto;
+  width: unset;
 }
 
-.TimelineColumnResizer--wrapper.isDraggingLeft > .TimelineColumnResizer--dragger {
+.TimelineColumnResizer.isDraggingLeft > .TimelineColumnResizer--dragger {
   border-left: 2px solid #808;
   border-right: 1px solid #999;
 }
 
-.TimelineColumnResizer--wrapper.isDraggingRight > .TimelineColumnResizer--dragger {
+.TimelineColumnResizer.isDraggingRight > .TimelineColumnResizer--dragger {
   border-left: 1px solid #999;
   border-right: 2px solid #808;
 }
@@ -66,8 +65,8 @@ limitations under the License.
   content: ' ';
 }
 
-.TimelineColumnResizer--wrapper.isDraggingLeft > .TimelineColumnResizer--dragger::before,
-.TimelineColumnResizer--wrapper.isDraggingRight > .TimelineColumnResizer--dragger::before {
+.TimelineColumnResizer.isDraggingLeft > .TimelineColumnResizer--dragger::before,
+.TimelineColumnResizer.isDraggingRight > .TimelineColumnResizer--dragger::before {
   left: -2000px;
   right: -2000px;
 }
@@ -80,25 +79,21 @@ limitations under the License.
 
 .TimelineColumnResizer--gripIcon::before,
 .TimelineColumnResizer--gripIcon::after {
-  position: absolute;
-  content: ' ';
-  top: -15px;
-  bottom: 3px;
-  right: 8px;
   border-right: 1px solid #ccc;
+  content: ' ';
+  height: 9px;
+  position: absolute;
+  right: 9px;
+  top: 25px;
 }
 
 .TimelineColumnResizer--gripIcon::after {
-  right: 4px;
+  right: 5px;
 }
 
-.TimelineColumnResizer--wrapper:hover > .TimelineColumnResizer--gripIcon::before,
-.TimelineColumnResizer--wrapper:hover > .TimelineColumnResizer--gripIcon::after {
-  border-right: 1px solid #999;
-}
-.TimelineColumnResizer--wrapper.isDraggingLeft > .TimelineColumnResizer--gripIcon::before,
-.TimelineColumnResizer--wrapper.isDraggingRight > .TimelineColumnResizer--gripIcon::before,
-.TimelineColumnResizer--wrapper.isDraggingLeft > .TimelineColumnResizer--gripIcon::after,
-.TimelineColumnResizer--wrapper.isDraggingRight > .TimelineColumnResizer--gripIcon::after {
+.TimelineColumnResizer.isDraggingLeft > .TimelineColumnResizer--gripIcon::before,
+.TimelineColumnResizer.isDraggingRight > .TimelineColumnResizer--gripIcon::before,
+.TimelineColumnResizer.isDraggingLeft > .TimelineColumnResizer--gripIcon::after,
+.TimelineColumnResizer.isDraggingRight > .TimelineColumnResizer--gripIcon::after {
   border-right: 1px solid rgba(136, 0, 136, 0.5);
 }
diff --git a/...i/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.js b/...i/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.js
@@ -92,11 +92,14 @@ export default class TimelineColumnResizer extends React.PureComponent<
   render() {
     let left;
     let draggerStyle;
-    let wrapperCls = '';
+    let isDraggingCls = '';
+    const { position } = this.props;
     const { dragPosition } = this.state;
+    left = `${position * 100}%`;
+    const gripStyle = { left };
+
     if (this._dragManager.isDragging() && this._rootElm && dragPosition != null) {
-      const { position } = this.props;
-      wrapperCls = cx({
+      isDraggingCls = cx({
         isDraggingLeft: dragPosition < position,
         isDraggingRight: dragPosition > position,
       });
@@ -110,21 +113,17 @@ export default class TimelineColumnResizer extends React.PureComponent<
       const draggerRight = `calc(${(1 - Math.max(position, dragPosition)) * 100}% - 1px)`;
       draggerStyle = { left: draggerLeft, right: draggerRight };
     } else {
-      const { position } = this.props;
-      left = `${position * 100}%`;
-      draggerStyle = { left };
+      draggerStyle = gripStyle;
     }
     return (
-      <div className="TimelineColumnResizer" ref={this._setRootElm}>
-        <div className={`TimelineColumnResizer--wrapper ${wrapperCls}`} style={{ left }}>
-          <div className="TimelineColumnResizer--gripIcon" />
-          <div
-            aria-hidden
-            className="TimelineColumnResizer--dragger"
-            onMouseDown={this._dragManager.handleMouseDown}
-            style={draggerStyle}
-          />
-        </div>
+      <div className={`TimelineColumnResizer ${isDraggingCls}`} ref={this._setRootElm}>
+        <div className="TimelineColumnResizer--gripIcon" style={gripStyle} />
+        <div
+          aria-hidden
+          className="TimelineColumnResizer--dragger"
+          onMouseDown={this._dragManager.handleMouseDown}
+          style={draggerStyle}
+        />
       </div>
     );
   }

diff --git a/.../components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js b/.../components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js
@@ -37,7 +37,6 @@ describe('<TimelineColumnResizer>', () => {
   it('renders without exploding', () => {
     expect(wrapper).toBeDefined();
     expect(wrapper.find('.TimelineColumnResizer').length).toBe(1);
-    expect(wrapper.find('.TimelineColumnResizer--wrapper').length).toBe(1);
     expect(wrapper.find('.TimelineColumnResizer--gripIcon').length).toBe(1);
     expect(wrapper.find('.TimelineColumnResizer--dragger').length).toBe(1);
   });