github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-19 13:29:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created styled components Scope themes

Browse Source
This commit is contained in:
Filip Barl
2019-10-02 19:13:52 +02:00
parent 3432e70fa1
commit 1aa9080576
8 changed files with 264 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/app/scripts/components/app.js
View File

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
import { debounce, isEqual } from 'lodash';
import { ThemeProvider } from 'styled-components';
import theme from 'weaveworks-ui-components/lib/theme';
import commonTheme from 'weaveworks-ui-components/lib/theme';
import GlobalStyle from './global-style';
import Logo from './logo';
@@ -55,6 +55,8 @@ import {
isTableViewModeSelector,
isGraphViewModeSelector,
} from '../selectors/topology';
import defaultTheme from '../themes/default';
import contrastTheme from '../themes/contrast';
import { VIEWPORT_RESIZE_DEBOUNCE_INTERVAL } from '../constants/timer';
import {
ESC_KEY_CODE,
@@ -206,7 +208,7 @@ class App extends React.Component {
const isIframe = window !== window.top;
return (
<ThemeProvider theme={{...theme, scope: { background: contrastMode ? '#f00' : '#00f' }}}>
<ThemeProvider theme={{...commonTheme, scope: contrastMode ? contrastTheme : defaultTheme }}>
<>
<GlobalStyle />

169
client/app/scripts/components/global-style.js
View File

@@ -1,9 +1,178 @@
import { createGlobalStyle } from 'styled-components';
import { color } from 'weaveworks-ui-components/lib/theme/selectors';
const GlobalStyle = createGlobalStyle`
div {
background: ${props => props.theme.scope.background};
}
/**
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
* https://github.com/chjj/term.js
* @license MIT
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
* Originally forked from (with the author's permission):
* Fabrice Bellard's javascript vt100 for jslinux:
* http://bellard.org/jslinux/
* Copyright (c) 2011 Fabrice Bellard
* The original design remains. The terminal itself
* has been extended to include xterm CSI codes, among
* other features.
*/
/**
* Default styles for xterm.js
*/
.xterm {
font-family: $font-family-monospace;
font-feature-settings: "liga" 0;
position: relative;
user-select: none;
/* stylelint-disable property-no-vendor-prefix */
-ms-user-select: none;
-webkit-user-select: none;
/* stylelint-enable property-no-vendor-prefix */
}
.xterm.focus,
.xterm:focus {
outline: none;
}
.xterm .xterm-helpers {
position: absolute;
top: 0;
/**
* The z-index of the helpers must be higher than the canvases in order for
* IMEs to appear on top.
*/
/* stylelint-disable sh-waqar/declaration-use-variable */
z-index: 10;
/* stylelint-enable sh-waqar/declaration-use-variable */
}
.xterm .xterm-helper-textarea {
/*
* HACK: to fix IE's blinking cursor
* Move textarea out of the screen to the far left, so that the cursor is not visible.
*/
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
/* stylelint-disable sh-waqar/declaration-use-variable */
z-index: -10;
/* stylelint-enable sh-waqar/declaration-use-variable */
/** Prevent wrapping so the IME appears against the textarea at the correct position */
white-space: nowrap;
overflow: hidden;
resize: none;
}
.xterm .composition-view {
/* TODO: Composition position got messed up somewhere */
background: ${color('black')};
color: ${color('white')};
display: none;
position: absolute;
white-space: nowrap;
z-index: ${props => props.theme.layers.front};
}
.xterm .composition-view.active {
display: block;
}
.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: ${color('black')};
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.xterm .xterm-screen {
position: relative;
}
.xterm .xterm-screen canvas {
position: absolute;
left: 0;
top: 0;
}
.xterm .xterm-scroll-area {
visibility: hidden;
}
.xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
top: 0;
left: -9999em;
line-height: normal;
}
.xterm.enable-mouse-events {
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
cursor: default;
}
.xterm:not(.enable-mouse-events) {
cursor: text;
}
.xterm .xterm-accessibility,
.xterm .xterm-message {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
/* stylelint-disable sh-waqar/declaration-use-variable */
z-index: 100;
/* stylelint-enable sh-waqar/declaration-use-variable */
color: transparent;
}
.xterm .live-region {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.xterm-cursor-pointer {
cursor: pointer;
}
`;
export default GlobalStyle;

38
client/app/scripts/themes/contrast.js Normal file
View File

@@ -0,0 +1,38 @@
import { color } from 'weaveworks-ui-components/lib/theme/selectors';
import defaultTheme from './default';
const contrastTheme = {
...defaultTheme,
/* contrast overrides */
background: '#ccf',
backgroundColor: color('white'),
backgroundDarkerColor: color('purple200'),
backgroundDarkerSecondaryColor: color('purple200'),
bodyBackgroundColor: color('white'),
borderLightColor: color('gray600'),
btnOpacityDefault: 1,
btnOpacityDisabled: 0.4,
btnOpacitySelected: 1,
edgeColor: color('black'),
edgeHighlightOpacity: 0.3,
edgeOpacityBlurred: 0,
labelBackgroundColor: color('white'),
linkOpacityDefault: 1,
nodeBorderStrokeWidth: 0.2,
nodeElementsInBackgroundOpacity: 0.4,
nodeHighlightShadowOpacity: 0.4,
nodeHighlightStrokeOpacity: 0.5,
nodeHighlightStrokeWidth: 0.25,
nodePseudoOpacity: 1,
searchBorderColor: color('purple200'),
searchBorderWidth: '2px',
textColor: color('black'),
textDarkerColor: color('black'),
textSecondaryColor: color('black'),
textTertiaryColor: color('black'),
};
export default contrastTheme;

45
client/app/scripts/themes/default.js Normal file
View File

@@ -0,0 +1,45 @@
import { color } from 'weaveworks-ui-components/lib/theme/selectors';
import { transparentize } from 'polished';
const defaultTheme = {
background: '#fcc',
backgroundColor: color('gray50'), // $background-color: $color-gray-50;
backgroundDarkColor: color('purple900'), // $background-dark-color: $color-purple-900;
backgroundDarkerColor: color('purple100'), // $background-darker-color: $color-purple-100;
backgroundDarkerSecondaryColor: color('gray50'), // $background-darker-secondary-color: $color-gray-50;
backgroundLighterColor: color('white'), // $background-lighter-color: $color-white;
baseEase: 'ease-in-out', // $base-ease: ease-in-out;
bodyBackgroundColor: color('purple25'), // $body-background-color: $color-purple-25;
borderLightColor: color('purple100'), // $border-light-color: $color-purple-100;
btnOpacityDefault: 0.9, // $btn-opacity-default: 0.9;
btnOpacityDisabled: 0.25, // $btn-opacity-disabled: 0.25;
btnOpacityHover: 1, // $btn-opacity-hover: 1;
btnOpacitySelected: 0.9, // $btn-opacity-selected: 0.9;
detailsWindowPaddingLeft: '30px', // $details-window-padding-left: 30px;
detailsWindowWidth: '420px', // $details-window-width: 420px;
edgeColor: color('purple500'), // $edge-color: $color-purple-500;
edgeHighlightOpacity: 0.1, // $edge-highlight-opacity: 0.1;
edgeOpacity: 0.5, // $edge-opacity: 0.5;
edgeOpacityBlurred: 0.2, // $edge-opacity-blurred: 0.2;
labelBackgroundColor: props => transparentize(0.3, props.theme.colors.purple25),
linkOpacityDefault: 0.8, // $link-opacity-default: 0.8;
nodeBorderStrokeWidth: 0.12, // $node-border-stroke-width: 0.12;
nodeElementsInBackgroundOpacity: 0.7, // $node-elements-in-background-opacity: 0.7;
nodeHighlightShadowOpacity: 0.5, // $node-highlight-shadow-opacity: 0.5;
nodeHighlightStrokeOpacity: 0.4, // $node-highlight-stroke-opacity: 0.4;
nodeHighlightStrokeWidth: 0.04, // $node-highlight-stroke-width: 0.04;
nodePseudoOpacity: 0.8, // $node-pseudo-opacity: 0.8;
nodeShadowStrokeWidth: 0.18, // $node-shadow-stroke-width: 0.18;
nodeTextScale: 2, // $node-text-scale: 2;
searchBorderColor: 'transparent', // $search-border-color: transparent;
searchBorderWidth: '1px', // $search-border-width: 1px;
terminalHeaderHeight: '44px', // $terminal-header-height: 44px;
textColor: color('purple800'), // $text-color: $color-purple-800;
textDarkerColor: color('purple900'), // $text-darker-color: $color-purple-900;
textSecondaryColor: color('purple600'), // $text-secondary-color: $color-purple-600;
textTertiaryColor: color('purple400'), // $text-tertiary-color: $color-purple-400;
timelineHeight: '55px', // $timeline-height: 55px;
};
export default defaultTheme;

1
client/app/styles/main.scss
View File

@@ -1,7 +1,6 @@
// Load the default theme initially to apply it on the global html level.
@import "default-theme";
@import "base";
@import "terminal";
.scope-app.contrast-mode {
// Load the contrast theme and reload all the CSS in the scope-app container.

167
client/app/styles/terminal.scss
View File

@@ -1,167 +0,0 @@
/**
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
* https://github.com/chjj/term.js
* @license MIT
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
* Originally forked from (with the author's permission):
* Fabrice Bellard's javascript vt100 for jslinux:
* http://bellard.org/jslinux/
* Copyright (c) 2011 Fabrice Bellard
* The original design remains. The terminal itself
* has been extended to include xterm CSI codes, among
* other features.
*/
/**
* Default styles for xterm.js
*/
.xterm {
font-family: $font-family-monospace;
font-feature-settings: "liga" 0;
position: relative;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.xterm.focus,
.xterm:focus {
outline: none;
}
.xterm .xterm-helpers {
position: absolute;
top: 0;
/**
* The z-index of the helpers must be higher than the canvases in order for
* IMEs to appear on top.
*/
/* sass-lint:disable variable-for-property */
z-index: 10;
/* sass-lint:enable variable-for-property */
}
.xterm .xterm-helper-textarea {
/*
* HACK: to fix IE's blinking cursor
* Move textarea out of the screen to the far left, so that the cursor is not visible.
*/
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
/* sass-lint:disable variable-for-property */
z-index: -10;
/* sass-lint:enable variable-for-property */
/** Prevent wrapping so the IME appears against the textarea at the correct position */
white-space: nowrap;
overflow: hidden;
resize: none;
}
.xterm .composition-view {
/* TODO: Composition position got messed up somewhere */
background: $color-black;
color: $color-white;
display: none;
position: absolute;
white-space: nowrap;
/* sass-lint:disable variable-for-property */
z-index: 1;
/* sass-lint:enable variable-for-property */
}
.xterm .composition-view.active {
display: block;
}
.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: $color-black;
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.xterm .xterm-screen {
position: relative;
}
.xterm .xterm-screen canvas {
position: absolute;
left: 0;
top: 0;
}
.xterm .xterm-scroll-area {
visibility: hidden;
}
.xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
top: 0;
left: -9999em;
line-height: normal;
}
.xterm.enable-mouse-events {
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
cursor: default;
}
.xterm:not(.enable-mouse-events) {
cursor: text;
}
.xterm .xterm-accessibility,
.xterm .xterm-message {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
/* sass-lint:disable variable-for-property */
z-index: 100;
/* sass-lint:enable variable-for-property */
color: transparent;
}
.xterm .live-region {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.xterm-cursor-pointer {
cursor: pointer;
}

1
client/package.json
View File

@@ -29,6 +29,7 @@
"lodash": "4.17.15",
"moment": "2.24.0",
"page": "1.11.4",
"polished": "3.4.1",
"prop-types": "15.7.2",
"rc-slider": "8.6.13",
"react": "16.9.0",

7
client/yarn.lock
View File

@@ -7374,6 +7374,13 @@ polished@1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/polished/-/polished-1.9.0.tgz#76d277d6610dbcb85477dbba1bd1aa8e642741b6"
polished@3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.1.tgz#1eb5597ec1792206365635811d465751f5cbf71c"
integrity sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg==
dependencies:
"@babel/runtime" "^7.4.5"
posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"