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

Kinda nice

Browse Source
This commit is contained in:
Simon Howe
2016-10-05 10:05:38 +02:00
parent 0cc794248b
commit 7e0a44efc2
3 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/app/scripts/components/embedded-terminal.js
+5 -5
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { getNodeColor, getNodeColorDark } from '../utils/color-utils';
import { brightenColor, getNodeColorDark } from '../utils/color-utils';
import Terminal from './terminal';
import { DETAILS_PANEL_WIDTH, DETAILS_PANEL_MARGINS,
DETAILS_PANEL_OFFSET } from '../constants/styles';
@@ -12,13 +12,13 @@ class EmeddedTerminal extends React.Component {
const nodeId = pipe.get('nodeId');
const node = details.get(nodeId);
const d = node && node.details;
const titleBarColor = d && getNodeColorDark(d.rank, d.label);
const statusBarColor = d && getNodeColor(d.rank, d.label);
const titleBarColor = d && getNodeColorDark(d.rank, d.label, d.pseudo);
const statusBarColor = d && brightenColor(titleBarColor);
const title = d && d.label;
const style = {
right: DETAILS_PANEL_MARGINS.right + DETAILS_PANEL_WIDTH + 10 +
(details.size * DETAILS_PANEL_OFFSET)
right: DETAILS_PANEL_MARGINS.right + DETAILS_PANEL_WIDTH +
((details.size - 1) * DETAILS_PANEL_OFFSET)
};
// React unmount/remounts when key changes, this is important for cleaning up
client/app/scripts/components/terminal.js
+7 -1
View File
@@ -247,8 +247,14 @@ class Terminal extends React.Component {
}
getTerminalHeader() {
const dark = this.props.titleBarColor || getNeutralColor();
const light = this.props.statusBarColor || getNeutralColor();
const border = `4px solid ${dark}`;
const style = {
backgroundColor: this.props.titleBarColor || getNeutralColor()
borderTop: border,
borderBottom: border,
borderLeft: border,
backgroundColor: light,
};
return (
<div className="terminal-header" style={style}>
client/app/styles/main.less
+5 -6
View File
@@ -41,7 +41,7 @@
@details-window-padding-left: 36px;
@border-radius: 4px;
@terminal-header-height: 34px;
@terminal-header-height: 44px + 8px;
@node-opacity-blurred: 0.25;
@node-highlight-fill-opacity: 0.1;
@@ -979,7 +979,7 @@ h2 {
}
&-embedded {
z-index: 512;
z-index: 1024;
position: fixed;
top: 24px;
bottom: 48px;
@@ -996,18 +996,17 @@ h2 {
border: 0px solid #000000;
border-radius: 4px;
color: #f0f0f0;
font-family: @mono-font;
.shadow-2;
}
&-header {
.truncate;
text-align: center;
color: @white;
height: @terminal-header-height;
padding: 8px 24px;
background-color: @text-color;
position: relative;
font-size: 14px;
line-height: 28px;
&-title {
cursor: default;
@@ -1030,7 +1029,6 @@ h2 {
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
word-spacing: -4px;
&:hover {
opacity: 1;
@@ -1047,6 +1045,7 @@ h2 {
&-embedded &-inner { top: @terminal-header-height; }
&-app &-inner { top: 0; }
&-inner {
font-family: @mono-font;
position: absolute;
bottom: 0;
left: 0;