github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-04-21 18:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use more colors from the theme in TimeTravelComponent.

Browse Source
This commit is contained in:
Filip Barl
2017-10-16 20:19:55 +02:00
parent 0056424357
commit 760f1d919e
3 changed files with 16 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/app/scripts/components/time-control.js
View File

@@ -6,8 +6,6 @@ import { connect } from 'react-redux';
import { trackAnalyticsEvent } from '../utils/tracking-utils';
import { pauseTimeAtNow, resumeTime, startTimeTravel } from '../actions/app-actions';
import { TIMELINE_TICK_INTERVAL } from '../constants/timer';
const className = isSelected => (
classNames('time-control-action', { 'time-control-action-selected': isSelected })
@@ -24,8 +22,8 @@ class TimeControl extends React.Component {
}
componentDidMount() {
// Force periodic for the paused info.
this.timer = setInterval(() => { this.forceUpdate(); }, TIMELINE_TICK_INTERVAL);
// Force periodic updates every one second for the paused info.
this.timer = setInterval(() => { this.forceUpdate(); }, 1000);
}
componentWillUnmount() {

31
client/app/scripts/components/time-travel-component.js
View File

@@ -17,13 +17,6 @@ import {
} from '../utils/time-utils';
import {
TIMELINE_DEBOUNCE_INTERVAL,
TIMELINE_TICK_INTERVAL,
ZOOM_TRACK_DEBOUNCE_INTERVAL,
} from '../constants/timer';
const TICK_SETTINGS_PER_PERIOD = {
year: {
format: 'YYYY',
@@ -64,6 +57,10 @@ const TICK_SETTINGS_PER_PERIOD = {
},
};
const ZOOM_TRACK_DEBOUNCE_INTERVAL = 5000;
const TIMELINE_DEBOUNCE_INTERVAL = 500;
const TIMELINE_TICK_INTERVAL = 1000;
const TIMELINE_HEIGHT = '55px';
const MIN_DURATION_PER_PX = moment.duration(250, 'milliseconds');
const INIT_DURATION_PER_PX = moment.duration(1, 'minute');
@@ -112,14 +109,14 @@ const TimelineContainer = styled.div`
height: ${TIMELINE_HEIGHT};
&:before, &:after {
border: 1px solid ${props => props.theme.colors.white};
background-color: ${props => props.theme.colors.accent.orange};
content: '';
position: absolute;
display: block;
left: 50%;
border: 1px solid white;
border-top: 0;
border-bottom: 0;
background-color: red;
margin-left: -1px;
width: 3px;
}
@@ -138,14 +135,14 @@ const TimelineContainer = styled.div`
const Timeline = FullyPannableCanvas.extend`
background-color: rgba(255, 255, 255, 0.85);
box-shadow: inset 0 0 7px #aaa;
box-shadow: inset 0 0 7px ${props => props.theme.colors.gray};
pointer-events: all;
margin: 0 7px;
`;
const DisabledRange = styled.rect`
fill: #888;
fill-opacity: 0.1;
fill: ${props => props.theme.colors.gray};
fill-opacity: 0.15;
`;
const TimestampLabel = styled.a`
@@ -153,7 +150,7 @@ const TimestampLabel = styled.a`
padding: 3px;
&[disabled] {
color: #aaa;
color: ${props => props.theme.colors.gray};
cursor: inherit;
}
`;
@@ -165,7 +162,7 @@ const TimelinePanButton = styled.a`
const TimestampContainer = styled.div`
background-color: ${props => props.theme.colors.white};
border: 1px solid #ccc;
border: 1px solid ${props => props.theme.colors.gray};
border-radius: 4px;
padding: 2px 8px;
pointer-events: all;
@@ -176,12 +173,12 @@ const TimestampContainer = styled.div`
`;
const TimestampInput = styled.input`
border: 0;
background-color: transparent;
font-size: 1rem;
width: 165px;
font-family: "Roboto", sans-serif;
text-align: center;
font-size: 1rem;
width: 165px;
border: 0;
outline: 0;
`;

4
client/app/scripts/constants/timer.js
View File

@@ -8,7 +8,3 @@ export const TABLE_ROW_FOCUS_DEBOUNCE_INTERVAL = 10;
export const VIEWPORT_RESIZE_DEBOUNCE_INTERVAL = 200;
export const ZOOM_CACHE_DEBOUNCE_INTERVAL = 500;
export const ZOOM_TRACK_DEBOUNCE_INTERVAL = 10000;
export const TIMELINE_DEBOUNCE_INTERVAL = 500;
export const TIMELINE_TICK_INTERVAL = 1000;