diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css index c5e0db9792..022174aaf8 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css +++ b/packages/jaeger-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/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.css index 3ef33c3a42..e3ee42d720 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.css +++ b/packages/jaeger-ui/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/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.js index b9a573f489..cf4c787330 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.js +++ b/packages/jaeger-ui/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 ( -
-
-
-
-
+
+
+
); } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js index e09a223a38..439b387632 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js @@ -37,7 +37,6 @@ describe('', () => { 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); });