jlfwong/speedscope
1
1
Fork 0
mirror of https://github.com/jlfwong/speedscope.git synced 2024-11-22 22:14:25 +03:00
Code Issues Projects Releases Wiki Activity

Switch to flexbox

Browse Source
This commit is contained in:
Jamie Wong 2017-12-29 20:44:40 -05:00
parent 7da9a14c2c
commit bcbb99a66e
3 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
flamechart-minimap-view.tsx
View File

@ -1,5 +1,5 @@
import * as regl from 'regl' import * as regl from 'regl'
import { vec3, ReglCommand, ReglCommandConstructor } from 'regl' import { vec3, ReglCommand } from 'regl'
import { h, Component } from 'preact' import { h, Component } from 'preact'
import { css } from 'aphrodite' import { css } from 'aphrodite'
import { Flamechart } from './flamechart' import { Flamechart } from './flamechart'
@ -155,7 +155,7 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
render() { render() {
return ( return (
<div <div
className={css(style.minimap)} > className={css(style.minimap, style.vbox)} >
<canvas <canvas
width={1} height={1} width={1} height={1}
ref={this.canvasRef} ref={this.canvasRef}

15
flamechart-style.ts
View File

@ -49,6 +49,11 @@ export const style = StyleSheet.create({
clip: { clip: {
overflow: 'hidden' overflow: 'hidden'
}, },
vbox: {
display: 'flex',
flexDirection: 'column',
position: 'relative',
},
fill: { fill: {
width: '100%', width: '100%',
height: '100%', height: '100%',
@ -57,18 +62,10 @@ export const style = StyleSheet.create({
top: 0 top: 0
}, },
minimap: { minimap: {
position: 'absolute',
left: 0,
top: 0,
height: Sizes.MINIMAP_HEIGHT, height: Sizes.MINIMAP_HEIGHT,
width: '100%',
borderBottom: `${Sizes.SEPARATOR_HEIGHT}px solid ${Colors.MEDIUM_GRAY}` borderBottom: `${Sizes.SEPARATOR_HEIGHT}px solid ${Colors.MEDIUM_GRAY}`
}, },
panZoomView: { panZoomView: {
position: 'absolute', flex: 1
left: 0,
top: Sizes.MINIMAP_HEIGHT + Sizes.SEPARATOR_HEIGHT,
width: '100%',
height: `calc(100% - ${Sizes.MINIMAP_HEIGHT + Sizes.SEPARATOR_HEIGHT}px)`,
}, },
}); });

4
flamechart-view.tsx
View File

@ -508,7 +508,7 @@ export class FlamechartPanZoomView extends ReloadableComponent<FlamechartPanZoom
render() { render() {
return ( return (
<div <div
className={css(style.panZoomView)} className={css(style.panZoomView, style.vbox)}
onMouseDown={this.onMouseDown} onMouseDown={this.onMouseDown}
onMouseMove={this.onMouseMove} onMouseMove={this.onMouseMove}
onWheel={this.onWheel}> onWheel={this.onWheel}>
@ -617,7 +617,7 @@ export class FlamechartView extends ReloadableComponent<FlamechartViewProps, Fla
render() { render() {
return ( return (
<div className={css(style.fill, style.clip)} ref={this.containerRef}> <div className={css(style.fill, style.clip, style.vbox)} ref={this.containerRef}>
<FlamechartMinimapView <FlamechartMinimapView
configSpaceViewportRect={this.state.configSpaceViewportRect} configSpaceViewportRect={this.state.configSpaceViewportRect}
flamechart={this.props.flamechart} /> flamechart={this.props.flamechart} />