Inject ui-components Theme into App component.

This commit is contained in:
Filip Barl
2017-10-16 16:26:50 +02:00
parent 11b2e77898
commit 8a5eb637a6
3 changed files with 73 additions and 42 deletions

View File

@@ -4,6 +4,9 @@ import classNames from 'classnames';
import { connect } from 'react-redux';
import { debounce } from 'lodash';
import { ThemeProvider } from 'styled-components';
import theme from 'weaveworks-ui-components/lib/theme';
import Logo from './logo';
import Footer from './footer';
import Sidebar from './sidebar';
@@ -175,42 +178,44 @@ class App extends React.Component {
const isIframe = window !== window.top;
return (
<div className={className} ref={this.saveAppRef}>
{showingDebugToolbar() && <DebugToolbar />}
<ThemeProvider theme={theme}>
<div className={className} ref={this.saveAppRef}>
{showingDebugToolbar() && <DebugToolbar />}
{showingHelp && <HelpPanel />}
{showingHelp && <HelpPanel />}
{showingTroubleshootingMenu && <TroubleshootingMenu />}
{showingTroubleshootingMenu && <TroubleshootingMenu />}
{showingDetails && <Details />}
{showingDetails && <Details />}
<div className="header">
<TimeTravel />
<div className="selectors">
<div className="logo">
{!isIframe && <svg width="100%" height="100%" viewBox="0 0 1089 217">
<Logo />
</svg>}
<div className="header">
<TimeTravel />
<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>
);
}
}

View File

@@ -44,7 +44,7 @@
"reselect": "3.0.0",
"reselect-map": "1.0.1",
"styled-components": "^2.2.1",
"weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.28",
"weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.45",
"whatwg-fetch": "2.0.3",
"xterm": "2.5.0"
},

View File

@@ -710,6 +710,13 @@ babel-plugin-transform-object-rest-spread@6.23.0:
babel-plugin-syntax-object-rest-spread "^6.8.0"
babel-runtime "^6.22.0"
babel-plugin-transform-object-rest-spread@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
dependencies:
babel-plugin-syntax-object-rest-spread "^6.8.0"
babel-runtime "^6.26.0"
babel-plugin-transform-react-display-name@^6.23.0, babel-plugin-transform-react-display-name@^6.3.13:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.23.0.tgz#4398910c358441dc4cef18787264d0412ed36b37"
@@ -871,6 +878,13 @@ babel-runtime@6.x, babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6
core-js "^2.4.0"
regenerator-runtime "^0.10.0"
babel-runtime@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
core-js "^2.4.0"
regenerator-runtime "^0.11.0"
babel-template@^6.16.0, babel-template@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.24.1.tgz#04ae514f1f93b3a2537f2a0f60a5a45fb8308333"
@@ -4235,9 +4249,9 @@ node-pre-gyp@^0.6.29:
tar "^2.2.1"
tar-pack "^3.4.0"
node-sass@3.13.0:
version "3.13.0"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-3.13.0.tgz#d08b95bdebf40941571bd2c16a9334b980f8924f"
node-sass@4.5.2:
version "4.5.2"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
dependencies:
async-foreach "^0.1.3"
chalk "^1.1.1"
@@ -4248,17 +4262,19 @@ node-sass@3.13.0:
in-publish "^2.0.0"
lodash.assign "^4.2.0"
lodash.clonedeep "^4.3.2"
lodash.mergewith "^4.6.0"
meow "^3.7.0"
mkdirp "^0.5.1"
nan "^2.3.2"
node-gyp "^3.3.1"
npmlog "^4.0.0"
request "^2.61.0"
request "^2.79.0"
sass-graph "^2.1.1"
stdout-stream "^1.4.0"
node-sass@4.5.2:
version "4.5.2"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
node-sass@4.5.3:
version "4.5.3"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
dependencies:
async-foreach "^0.1.3"
chalk "^1.1.1"
@@ -4630,6 +4646,10 @@ pluralize@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
polished@^1.7.0:
version "1.8.1"
resolved "https://registry.yarnpkg.com/polished/-/polished-1.8.1.tgz#e50b9f789d37d98da64912f1be2bf759d8bfae6c"
postcss-calc@^5.2.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -5323,6 +5343,10 @@ regenerator-runtime@^0.10.0:
version "0.10.3"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
regenerator-runtime@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
regenerator-transform@0.9.11:
version "0.9.11"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
@@ -5392,7 +5416,7 @@ repeating@^2.0.0:
dependencies:
is-finite "^1.0.0"
request@2, request@^2.53.0, request@^2.61.0, request@^2.65.0, request@^2.72.0, request@^2.79.0, request@^2.81.0:
request@2, request@^2.53.0, request@^2.65.0, request@^2.72.0, request@^2.79.0, request@^2.81.0:
version "2.81.0"
resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
dependencies:
@@ -6224,16 +6248,18 @@ wd@^0.4.0:
underscore.string "~3.0.3"
vargs "~0.1.0"
"weaveworks-ui-components@git+https://github.com/weaveworks/ui-components.git#v0.1.28":
version "0.1.28"
resolved "git+https://github.com/weaveworks/ui-components.git#164a0d2770ee5c2318b2f1ab1948fb6046059909"
"weaveworks-ui-components@git+https://github.com/weaveworks/ui-components.git#v0.1.45":
version "0.1.45"
resolved "git+https://github.com/weaveworks/ui-components.git#9b700e6231599d0f7b353d8e2bb5f466394dc081"
dependencies:
babel-cli "^6.18.0"
babel-plugin-transform-export-extensions "6.8.0"
babel-plugin-transform-object-rest-spread "^6.26.0"
babel-preset-es2015 "6.18.0"
babel-preset-react "6.16.0"
classnames "^2.2.5"
node-sass "3.13.0"
node-sass "4.5.3"
polished "^1.7.0"
prop-types "^15.5.8"
webidl-conversions@^3.0.0: