github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-28 17:51:21 +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

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 {