github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-02 17:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move details panel styling dimensions into common constants file.

Browse Source 
They are used in a couple of places around the code base.
This commit is contained in:
Simon Howe
2016-01-29 13:16:33 +01:00
parent dcb621d7e6
commit ab75bb5e41
3 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/app/scripts/charts/nodes-chart.js
View File

@@ -5,6 +5,7 @@ import React from 'react';
import { Map as makeMap } from 'immutable';
import timely from 'timely';
import { DETAILS_PANEL_WIDTH } from '../constants/styles';
import { clickBackground } from '../actions/app-actions';
import AppStore from '../stores/app-store';
import Edge from './edge';
@@ -302,9 +303,8 @@ export default class NodesChart extends React.Component {
// move origin node to center of viewport
const zoomScale = state.scale;
const detailsWidth = 420;
const translate = state.panTranslate;
const centerX = (-translate[0] + (props.width + MARGINS.left - detailsWidth) / 2) / zoomScale;
const centerX = (-translate[0] + (props.width + MARGINS.left - DETAILS_PANEL_WIDTH) / 2) / zoomScale;
const centerY = (-translate[1] + (props.height + MARGINS.top) / 2) / zoomScale;
stateNodes = stateNodes.mergeIn([props.selectedNodeId], {
x: centerX,

23
client/app/scripts/components/details-card.js
View File

@@ -1,13 +1,8 @@
import React from 'react';
import NodeDetails from './node-details';
// card dimensions in px
const marginTop = 24;
const marginBottom = 48;
const marginRight = 36;
const panelWidth = 420;
const offset = 8;
import { DETAILS_PANEL_WIDTH as WIDTH, DETAILS_PANEL_OFFSET as OFFSET,
DETAILS_PANEL_MARGINS as MARGINS } from '../constants/styles';
export default class DetailsCard extends React.Component {
@@ -27,21 +22,21 @@ export default class DetailsCard extends React.Component {
render() {
let transform;
const origin = this.props.origin;
const panelHeight = window.innerHeight - marginBottom - marginTop;
const panelHeight = window.innerHeight - MARGINS.bottom - MARGINS.top;
if (origin && !this.state.mounted) {
// render small panel near origin, will transition into normal panel after being mounted
const scaleY = origin.height / (window.innerHeight - marginBottom - marginTop) / 2;
const scaleX = origin.width / panelWidth / 2;
const centerX = window.innerWidth - marginRight - (panelWidth / 2);
const centerY = (panelHeight) / 2 + marginTop;
const scaleY = origin.height / (window.innerHeight - MARGINS.bottom - MARGINS.top) / 2;
const scaleX = origin.width / WIDTH / 2;
const centerX = window.innerWidth - MARGINS.right - (WIDTH / 2);
const centerY = (panelHeight) / 2 + MARGINS.top;
const dx = (origin.left + origin.width / 2) - centerX;
const dy = (origin.top + origin.height / 2) - centerY;
transform = `translate(${dx}px, ${dy}px) scale(${scaleX},${scaleY})`;
} else {
// stack effect: shift top cards to the left, shrink lower cards vertically
const shiftX = -1 * this.props.index * offset;
const shiftX = -1 * this.props.index * OFFSET;
const position = this.props.cardCount - this.props.index - 1; // reverse index
const scaleY = position === 0 ? 1 : (panelHeight - 2 * offset * position) / panelHeight;
const scaleY = position === 0 ? 1 : (panelHeight - 2 * OFFSET * position) / panelHeight;
if (scaleY !== 1) {
transform = `translateX(${shiftX}px) scaleY(${scaleY})`;
} else {

10
client/app/scripts/constants/styles.js Normal file
View File

@@ -0,0 +1,10 @@
export const DETAILS_PANEL_WIDTH = 420;
export const DETAILS_PANEL_MARGINS = {
top: 24,
bottom: 48,
right: 36
};
export const DETAILS_PANEL_OFFSET = 8;