From fae0978b01a92ccd43667e9aac7030061abbe63c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 1 Dec 2017 16:19:25 -0800 Subject: [PATCH] Add theme selector to sidenav. --- src-docs/src/actions/theme_actions.js | 5 +- .../guide_page/guide_page_chrome.js | 62 ++++++++++++++++--- src-docs/src/index.js | 5 ++ src-docs/src/store/reducers/theme_reducer.js | 2 +- src-docs/src/theme_k6.scss | 3 + src-docs/src/views/app_view.js | 25 +++++--- src/global_styling/theme_k6_variables.scss | 5 ++ src/global_styling/theme_light_variables.scss | 3 - src/theme_k6.scss | 8 +++ 9 files changed, 94 insertions(+), 24 deletions(-) create mode 100644 src-docs/src/theme_k6.scss create mode 100644 src/global_styling/theme_k6_variables.scss create mode 100644 src/theme_k6.scss diff --git a/src-docs/src/actions/theme_actions.js b/src-docs/src/actions/theme_actions.js index 60b8fec4b79..3cc334cc2e3 100644 --- a/src-docs/src/actions/theme_actions.js +++ b/src-docs/src/actions/theme_actions.js @@ -1,5 +1,8 @@ import ActionTypes from './action_types'; -export const toggleTheme = () => ({ +export const toggleTheme = theme => ({ type: ActionTypes.TOGGLE_THEME, + data: { + theme, + }, }); diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index a7248fb3f71..6e6424a5b4c 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -8,10 +8,13 @@ import { import { EuiButtonEmpty, + EuiContextMenuItem, + EuiContextMenuPanel, EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiIcon, + EuiPopover, EuiSideNav, EuiSpacer, } from '../../../../src/components'; @@ -23,6 +26,7 @@ export class GuidePageChrome extends Component { this.state = { search: '', isSideNavOpenOnMobile: false, + isThemePopoverOpen: false, }; } @@ -49,6 +53,18 @@ export class GuidePageChrome extends Component { this.scrollTo($(`#${id}`).offset().top - 20); }; + onThemeButtonClick = () => { + this.setState({ + isThemePopoverOpen: !this.state.isThemePopoverOpen, + }); + }; + + closeThemePopover = () => { + this.setState({ + isThemePopoverOpen: false, + }); + }; + renderIdentity() { const homeLink = ( ); + const themeButton = ( + + Theme + + ); + + const themeOptions = ['Light', 'Dark', 'K6'].map(option => ( + { this.closeThemePopover(); this.props.onToggleTheme(option.toLowerCase()); }} + > + {`${option}`} + + )); + return ( @@ -66,16 +104,19 @@ export class GuidePageChrome extends Component { - - Flip theme - + + ); @@ -203,6 +244,9 @@ export class GuidePageChrome extends Component { GuidePageChrome.propTypes = { currentRouteName: PropTypes.string.isRequired, + onToggleTheme: PropTypes.func.isRequired, + selectedTheme: PropTypes.string.isRequired, + guidelines: PropTypes.array.isRequired, components: PropTypes.array.isRequired, sandboxes: PropTypes.array.isRequired, }; diff --git a/src-docs/src/index.js b/src-docs/src/index.js index 9d344cc2fe8..83d318a4c58 100644 --- a/src-docs/src/index.js +++ b/src-docs/src/index.js @@ -20,6 +20,7 @@ import { import themeLight from './theme_light.scss'; import themeDark from './theme_dark.scss'; +import themeK6 from './theme_k6.scss'; registerTheme('light', [ themeLight @@ -29,6 +30,10 @@ registerTheme('dark', [ themeDark ]); +registerTheme('k6', [ + themeK6 +]); + // Set up app const store = configureStore(); diff --git a/src-docs/src/store/reducers/theme_reducer.js b/src-docs/src/store/reducers/theme_reducer.js index 13301c95c73..b19ad3d4a2e 100644 --- a/src-docs/src/store/reducers/theme_reducer.js +++ b/src-docs/src/store/reducers/theme_reducer.js @@ -8,7 +8,7 @@ export default function sectionsReducer(state = defaultState, action) { switch (action.type) { case ActionTypes.TOGGLE_THEME: { return { - theme: (state.theme === 'light') ? 'dark' : 'light', + theme: action.data.theme, }; } diff --git a/src-docs/src/theme_k6.scss b/src-docs/src/theme_k6.scss new file mode 100644 index 00000000000..7dca2418675 --- /dev/null +++ b/src-docs/src/theme_k6.scss @@ -0,0 +1,3 @@ +@import "../../src/theme_k6"; +@import "./components/guide_components"; + diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 7948bd51db3..eb4eb55ba05 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -57,10 +57,18 @@ export class AppView extends Component { } renderContent() { - if (this.props.isSandbox) { + const { + children, + currentRoute, + isSandbox, + toggleTheme, + theme, + } = this.props; + + if (isSandbox) { return (
- {this.props.children} + {children}
); } else { @@ -69,9 +77,9 @@ export class AppView extends Component { - {this.props.children} + {children} @@ -101,14 +109,11 @@ export class AppView extends Component { AppView.propTypes = { children: PropTypes.any, currentRoute: PropTypes.object.isRequired, - sections: PropTypes.array, isSandbox: PropTypes.bool, - toggleTheme: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, - sections: PropTypes.array.isRequired, + toggleTheme: PropTypes.func.isRequired, }; AppView.defaultProps = { currentRoute: {}, - sections: [], }; diff --git a/src/global_styling/theme_k6_variables.scss b/src/global_styling/theme_k6_variables.scss new file mode 100644 index 00000000000..e2cb9e7e2c4 --- /dev/null +++ b/src/global_styling/theme_k6_variables.scss @@ -0,0 +1,5 @@ +// K6 custom values +@import 'k6/index'; + +// Configuration +@import 'variables/index'; diff --git a/src/global_styling/theme_light_variables.scss b/src/global_styling/theme_light_variables.scss index e2cb9e7e2c4..2869d11f876 100644 --- a/src/global_styling/theme_light_variables.scss +++ b/src/global_styling/theme_light_variables.scss @@ -1,5 +1,2 @@ -// K6 custom values -@import 'k6/index'; - // Configuration @import 'variables/index'; diff --git a/src/theme_k6.scss b/src/theme_k6.scss new file mode 100644 index 00000000000..34406790c30 --- /dev/null +++ b/src/theme_k6.scss @@ -0,0 +1,8 @@ +// Variables +@import 'global_styling/theme_k6_variables'; + +// Global styling +@import 'global_styling/core'; + +// Components +@import 'components/index';