github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-25 08:16:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prototype global inject of Scope theme

Browse Source
This commit is contained in:
Filip Barl
2019-10-02 15:28:00 +02:00
parent f3183cb3a8
commit 3432e70fa1
2 changed files with 52 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@ import { debounce, isEqual } from 'lodash';
import { ThemeProvider } from 'styled-components';
import theme from 'weaveworks-ui-components/lib/theme';
import GlobalStyle from './global-style';
import Logo from './logo';
import Footer from './footer';
import Sidebar from './sidebar';
@@ -205,52 +206,56 @@ class App extends React.Component {
const isIframe = window !== window.top;
return (
<ThemeProvider theme={theme}>
<div className={className} ref={this.saveAppRef}>
{showingDebugToolbar() && <DebugToolbar />}
<ThemeProvider theme={{...theme, scope: { background: contrastMode ? '#f00' : '#00f' }}}>
<>
<GlobalStyle />
{showingHelp && <HelpPanel />}
<div className={className} ref={this.saveAppRef}>
{showingDebugToolbar() && <DebugToolbar />}
{showingTroubleshootingMenu && <TroubleshootingMenu />}
{showingHelp && <HelpPanel />}
{showingDetails && (
<Details
renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
/>
)}
{showingTroubleshootingMenu && <TroubleshootingMenu />}
<div className="header">
{timeTravelSupported && this.props.renderTimeTravel()}
{showingDetails && (
<Details
renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
/>
)}
<div className="selectors">
<div className="logo">
{!isIframe
&& (
<svg width="100%" height="100%" viewBox="0 0 1089 217">
<Logo />
</svg>
)
}
<div className="header">
{timeTravelSupported && this.props.renderTimeTravel()}
<div className="selectors">
<div className="logo">
{!isIframe
&& (
<svg width="100%" height="100%" viewBox="0 0 1089 217">
<Logo />
</svg>
)
}
</div>
<Search />
<Topologies />
<ViewModeSelector />
<TimeControl />
</div>
<Search />
<Topologies />
<ViewModeSelector />
<TimeControl />
</div>
<Nodes />
<Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
{showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
{!isResourceViewMode && <Status />}
{!isResourceViewMode && <TopologyOptions />}
</Sidebar>
<Footer />
<Overlay faded={timeTravelTransitioning} />
</div>
<Nodes />
<Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
{showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
{!isResourceViewMode && <Status />}
{!isResourceViewMode && <TopologyOptions />}
</Sidebar>
<Footer />
<Overlay faded={timeTravelTransitioning} />
</div>
</>
</ThemeProvider>
);
}

9
client/app/scripts/components/global-style.js Normal file
View File

@@ -0,0 +1,9 @@
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
div {
background: ${props => props.theme.scope.background};
}
`;
export default GlobalStyle;