From ec77cd05ec22bbad0acda508fa936bfe412ce5c1 Mon Sep 17 00:00:00 2001 From: ivaosthu Date: Sun, 2 Oct 2016 17:26:00 +0200 Subject: [PATCH] Adjusted layout #153 - fill full screen - be more responsive (don't show hamburger on desktop) --- .../lib/helper/legacy-feature-mapper.js | 4 ++ packages/unleash-frontend-next/src/App.jsx | 27 ++++++------ .../component/feature/AddFeatureToggle.jsx | 4 +- .../feature/FeatureListContainer.jsx | 2 +- .../{actions.js => featureToggleActions.js} | 43 +++++++++++++++++-- .../src/store/features.js | 2 +- packages/unleash-frontend-next/src/style.scss | 11 +++-- .../src/theme/_config.scss | 23 +++++++--- .../unleash-frontend-next/webpack.config.js | 2 +- 9 files changed, 86 insertions(+), 32 deletions(-) rename packages/unleash-frontend-next/src/store/{actions.js => featureToggleActions.js} (57%) diff --git a/packages/unleash-api/lib/helper/legacy-feature-mapper.js b/packages/unleash-api/lib/helper/legacy-feature-mapper.js index 35f93237c5..36d25a0659 100644 --- a/packages/unleash-api/lib/helper/legacy-feature-mapper.js +++ b/packages/unleash-api/lib/helper/legacy-feature-mapper.js @@ -2,6 +2,10 @@ function addOldFields (feature) { const modifiedFeature = Object.assign({}, feature); + if (!feature.strategies) { + modifiedFeature.strategies = []; + return modifiedFeature; + } modifiedFeature.strategy = feature.strategies[0].name; modifiedFeature.parameters = Object.assign({}, feature.strategies[0].parameters); return modifiedFeature; diff --git a/packages/unleash-frontend-next/src/App.jsx b/packages/unleash-frontend-next/src/App.jsx index 961a98d855..a44938c947 100644 --- a/packages/unleash-frontend-next/src/App.jsx +++ b/packages/unleash-frontend-next/src/App.jsx @@ -14,21 +14,24 @@ export default class App extends Component { }; } + onOverlayClick = () => this.setState({ drawerActive: false }); + render () { return (
- - - - - - -
- {this.props.children} -
- - - + +
+ + + + + +
+ {this.props.children} +
+ + +
); } diff --git a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx index 3417df7660..25fa78fd5b 100644 --- a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx +++ b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import { connect } from 'react-redux'; import { Input, Switch, Button } from 'react-toolbox'; -import { addFeatureToggle } from '../../store/actions'; +import { createFeatureToggles } from '../../store/featureToggleActions'; class AddFeatureToggle extends React.Component { @@ -32,7 +32,7 @@ class AddFeatureToggle extends React.Component { onSubmit = (evt) => { evt.preventDefault(); - this.props.dispatch(addFeatureToggle(this.state.featureToggle)); + this.props.dispatch(createFeatureToggles(this.state.featureToggle)); this.context.router.push('/features'); }; diff --git a/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx b/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx index 951a9514e0..94f0cd5275 100644 --- a/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx +++ b/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { toggleFeature, fetchFeatureToggles } from '../../store/actions'; +import { toggleFeature, fetchFeatureToggles } from '../../store/featureToggleActions'; import FeatureList from './FeatureList'; const mapStateToProps = (state) => ({ diff --git a/packages/unleash-frontend-next/src/store/actions.js b/packages/unleash-frontend-next/src/store/featureToggleActions.js similarity index 57% rename from packages/unleash-frontend-next/src/store/actions.js rename to packages/unleash-frontend-next/src/store/featureToggleActions.js index 523a3302fd..e980c770c1 100644 --- a/packages/unleash-frontend-next/src/store/actions.js +++ b/packages/unleash-frontend-next/src/store/featureToggleActions.js @@ -3,11 +3,22 @@ export const TOGGLE_FEATURE_TOGGLE = 'TOGGLE_FEATURE_TOGGLE'; export const REQUEST_FEATURE_TOGGLES = 'REQUEST_FEATURE_TOGGLES'; export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES'; export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES'; +export const ERROR_CREATING_FEATURE_TOGGLE = 'ERROR_CREATING_FEATURE_TOGGLE'; -export const addFeatureToggle = (featureToggle) => ({ - type: ADD_FEATURE_TOGGLE, - featureToggle, -}); +function addFeatureToggle (featureToggle) { + return { + type: ADD_FEATURE_TOGGLE, + featureToggle, + }; +}; + +function errorCreatingFeatureToggle (statusCode) { + return { + type: ERROR_CREATING_FEATURE_TOGGLE, + statusCode, + receivedAt: Date.now(), + }; +} export const toggleFeature = (featureName) => ({ type: TOGGLE_FEATURE_TOGGLE, @@ -54,3 +65,27 @@ export function fetchFeatureToggles () { .catch(error => dispatch(errorReceiveFeatureToggles(error))); }; } + + +export function createFeatureToggles (featureToggle) { + return dispatch => { + dispatch(requestFeatureToggles()); + return fetch('/features', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify(featureToggle), + }) + .then(response => { + if (!response.ok) { + let error = new Error('failed fetching'); + error.status = response.status; + throw error; + } + }) + .then(() => dispatch(addFeatureToggle(featureToggle))) + .catch(error => dispatch(errorCreatingFeatureToggle(error))); + }; +} diff --git a/packages/unleash-frontend-next/src/store/features.js b/packages/unleash-frontend-next/src/store/features.js index 2c0797c03a..915a144385 100644 --- a/packages/unleash-frontend-next/src/store/features.js +++ b/packages/unleash-frontend-next/src/store/features.js @@ -2,7 +2,7 @@ import { ADD_FEATURE_TOGGLE, TOGGLE_FEATURE_TOGGLE, RECEIVE_FEATURE_TOGGLES, -} from './actions'; +} from './featureToggleActions'; const feature = (state = {}, action) => { switch (action.type) { diff --git a/packages/unleash-frontend-next/src/style.scss b/packages/unleash-frontend-next/src/style.scss index 06eaa15467..2bb912f3e9 100644 --- a/packages/unleash-frontend-next/src/style.scss +++ b/packages/unleash-frontend-next/src/style.scss @@ -1,14 +1,17 @@ .container { - height: auto; position: absolute; - left: 0; - right: 0; top: 0; bottom: 0; + left: 0; + right: 0; + width: 100%; + height: auto; + overflow-y: auto; } .navigation { .active { background-color: #EEE; } -} \ No newline at end of file +} + diff --git a/packages/unleash-frontend-next/src/theme/_config.scss b/packages/unleash-frontend-next/src/theme/_config.scss index 2b301c05f3..23243086ea 100644 --- a/packages/unleash-frontend-next/src/theme/_config.scss +++ b/packages/unleash-frontend-next/src/theme/_config.scss @@ -3,15 +3,11 @@ @import "~react-toolbox/lib/mixins"; @import "~react-toolbox/lib/commons"; - $color-primary:$palette-blue-400; $color-primary-dark: $palette-blue-700; -$appbar-height-m-portrait: 5.6 * $unit !default; -$appbar-height-m-landscape: 4.8 * $unit !default; - -$navigation-drawer-desktop-width: 3 * $standard-increment-desktop !default; -$navigation-drawer-max-desktop-width: 40 * $unit !default; +$navigation-drawer-desktop-width: 4 * $standard-increment-desktop !default; +$navigation-drawer-max-desktop-width: 70 * $unit !default; // Mobile: // Width = Screen width − 56 dp @@ -19,4 +15,17 @@ $navigation-drawer-max-desktop-width: 40 * $unit !default; $navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default; // sass doesn't like use of variable here: calc(100% - $standard-increment-mobile); -$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default; \ No newline at end of file +$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default; + +.appBar { + .leftIcon { + transition-timing-function: $animation-curve-default; + transition-duration: $animation-duration; + transition-property: width, min-width; + } + @media screen and (min-width: $layout-breakpoint-sm) { + .leftIcon { + display: none; + } + } +} \ No newline at end of file diff --git a/packages/unleash-frontend-next/webpack.config.js b/packages/unleash-frontend-next/webpack.config.js index a159e39a86..df10d40f28 100644 --- a/packages/unleash-frontend-next/webpack.config.js +++ b/packages/unleash-frontend-next/webpack.config.js @@ -59,7 +59,7 @@ module.exports = { devServer: { proxy: { '/features': { - target: 'http://localhost:3001/', + target: 'http://localhost:4242', secure: false, }, },