diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 16:54:01 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-04-11 16:54:01 +0200 |
commit | 47c1c99d893517efc679ab29d675cc0bf44be8be (patch) | |
tree | 9cab9697096bef0ce56d8ee8709bc1c2c3a42deb /packages/forms/src | |
parent | test package order (diff) | |
download | ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.gz ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.zst ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.zip |
feat(App): Added Workspaces for all your daily routines 🥳
* merge default and fetched feature configs
* ignore intellij project files
* basic setup for workspaces feature
* define workspaces as premium feature
* add workspaces menu item in settings dialog
* basic setup of workspaces settings screen
* fix eslint error
* assign react key prop to workspace items
* add styles for workspace table
* setup logic to display workspace edit page
* consolidate workspace feature for further development
* prepare basic workspace edit form
* add on enter key handler for form input component
* add form for creating workspaces
* small fixes
* adds flow for deleting workspaces
* stop tracking google analytics in components
* pin gulp-sass-variables version to 1.1.1
* fix merge conflict
* fix bug in form input library
* improve workspace form setup
* finish basic workspace settings
* finish workspaces mvp
* fix eslint issues
* remove dev logs
* detach service when underlying webview unmounts
* disable no-param-reassign eslint rule
* add workspace drawer
* change workspace switch shortcuts to start with zero
* add workspace drawer toggle menu item and shortcut
* improve workspace switching ux
* style add workspace icon in drawer like the sidebar icons
* improve workspace drawer layout
* add i18n messages for service loading and workspace switching
* small fixes
* add tooltip to add workspace button in drawer
* add workspaces count badge in settings navigation
* fix merge conflicts with latest develop
* refactor state management for workspace feature
* reset api requests when workspace feature is stopped
* hide workspace feature if it is disabled
* handle get workspaces request errors in the ui
* show infobox when updating workspaces
* indicate any server interaction with spinners and infoboxes
* add analytic events for workspace actions
* improve styling of workspace switch indicator
* add workspace premium notice to dashboard
* add workspace feature info in drawer for free users
* add workspace premium badge in settings nav
* fix premium workspace badge in settings menu for light theme
* fix active workspaces settings premium badge in light theme
* give upgrade account button a bit more padding
* add open last used workspace logic
* use mobx-localstorage directly in the store
* fix wrong workspace tooltip shortcut in sidebar
* fix bug in workspace feature initialization
* show workspaces intro in drawer when user has none yet
* fix issues for users that have workspace but downgraded to free
* border radius for premium intro in workspace settings
* close workspace drawer after clicking on a workspace
* add hover effect for drawer workspace items
* ensure drawer is open on workspace settings routes
* add small text label for adding new workspace to drawer
* make workspace settings list items taller
* refactor workspace table css away from legacy styles
* render workspace service list like services + toggle
* change plus icon in workspace drawer to settings icon
* autofocus create workspace input field
* add css transition to drawer workspace item hover
* fix drawer add workspace label styles
* refactors workspace theme vars into object structure
* improve contrast of workspace switching indicator
* added generic pro badge component for settings nav
* add premium badge to workspace drawer headline
* add context menu for workspace drawer items
* handle deleted services that are attached to workspaces
Diffstat (limited to 'packages/forms/src')
-rw-r--r-- | packages/forms/src/input/index.tsx | 12 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 5 | ||||
-rw-r--r-- | packages/forms/src/label/styles.ts | 4 | ||||
-rw-r--r-- | packages/forms/src/select/index.tsx | 6 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 4 |
5 files changed, 25 insertions, 6 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index 5178904d3..a2d7c62d5 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -25,6 +25,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField | |||
25 | showPasswordToggle?: boolean; | 25 | showPasswordToggle?: boolean; |
26 | data: IData; | 26 | data: IData; |
27 | inputClassName?: string; | 27 | inputClassName?: string; |
28 | onEnterKey?: Function; | ||
28 | } | 29 | } |
29 | 30 | ||
30 | interface IState { | 31 | interface IState { |
@@ -33,7 +34,7 @@ interface IState { | |||
33 | } | 34 | } |
34 | 35 | ||
35 | class InputComponent extends Component<IProps, IState> { | 36 | class InputComponent extends Component<IProps, IState> { |
36 | public static defaultProps = { | 37 | static defaultProps = { |
37 | focus: false, | 38 | focus: false, |
38 | onChange: () => {}, | 39 | onChange: () => {}, |
39 | onBlur: () => {}, | 40 | onBlur: () => {}, |
@@ -81,6 +82,13 @@ class InputComponent extends Component<IProps, IState> { | |||
81 | } | 82 | } |
82 | } | 83 | } |
83 | 84 | ||
85 | onInputKeyPress(e: React.KeyboardEvent) { | ||
86 | if (e.key === "Enter") { | ||
87 | const { onEnterKey } = this.props; | ||
88 | onEnterKey && onEnterKey(); | ||
89 | } | ||
90 | } | ||
91 | |||
84 | render() { | 92 | render() { |
85 | const { | 93 | const { |
86 | classes, | 94 | classes, |
@@ -124,6 +132,7 @@ class InputComponent extends Component<IProps, IState> { | |||
124 | title={label} | 132 | title={label} |
125 | showLabel={showLabel} | 133 | showLabel={showLabel} |
126 | htmlFor={id} | 134 | htmlFor={id} |
135 | className={classes.label} | ||
127 | isRequired={required} | 136 | isRequired={required} |
128 | > | 137 | > |
129 | <div | 138 | <div |
@@ -152,6 +161,7 @@ class InputComponent extends Component<IProps, IState> { | |||
152 | onFocus={onFocus} | 161 | onFocus={onFocus} |
153 | onBlur={onBlur} | 162 | onBlur={onBlur} |
154 | disabled={disabled} | 163 | disabled={disabled} |
164 | onKeyPress={this.onInputKeyPress.bind(this)} | ||
155 | min={min} | 165 | min={min} |
156 | max={max} | 166 | max={max} |
157 | step={step} | 167 | step={step} |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index c038295cd..e2ab30a4f 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -10,6 +10,11 @@ const prefixStyles = (theme: Theme) => ({ | |||
10 | }); | 10 | }); |
11 | 11 | ||
12 | export default (theme: Theme) => ({ | 12 | export default (theme: Theme) => ({ |
13 | label: { | ||
14 | '& > div': { | ||
15 | marginTop: 5, | ||
16 | } | ||
17 | }, | ||
13 | disabled: { | 18 | disabled: { |
14 | opacity: theme.inputDisabledOpacity, | 19 | opacity: theme.inputDisabledOpacity, |
15 | }, | 20 | }, |
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts index f3998de04..c64c9b285 100644 --- a/packages/forms/src/label/styles.ts +++ b/packages/forms/src/label/styles.ts | |||
@@ -1,9 +1,7 @@ | |||
1 | import { Theme } from '../../../theme/lib'; | 1 | import { Theme } from '../../../theme/lib'; |
2 | 2 | ||
3 | export default (theme: Theme) => ({ | 3 | export default (theme: Theme) => ({ |
4 | content: { | 4 | content: {}, |
5 | marginTop: 5, | ||
6 | }, | ||
7 | label: { | 5 | label: { |
8 | color: theme.labelColor, | 6 | color: theme.labelColor, |
9 | fontSize: theme.uiFontSize, | 7 | fontSize: theme.uiFontSize, |
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index f419d0351..0e5ded176 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -56,6 +56,11 @@ const styles = (theme: Theme) => ({ | |||
56 | textAlign: 'left', | 56 | textAlign: 'left', |
57 | color: theme.selectColor, | 57 | color: theme.selectColor, |
58 | }, | 58 | }, |
59 | label: { | ||
60 | '& > div': { | ||
61 | marginTop: 5, | ||
62 | } | ||
63 | }, | ||
59 | popup: { | 64 | popup: { |
60 | opacity: 0, | 65 | opacity: 0, |
61 | height: 0, | 66 | height: 0, |
@@ -335,6 +340,7 @@ class SelectComponent extends Component<IProps> { | |||
335 | title={label} | 340 | title={label} |
336 | showLabel={showLabel} | 341 | showLabel={showLabel} |
337 | htmlFor={id} | 342 | htmlFor={id} |
343 | className={classes.label} | ||
338 | isRequired={required} | 344 | isRequired={required} |
339 | > | 345 | > |
340 | <div | 346 | <div |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index 6487f1d07..d84508a5f 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 3 | import CSS from 'csstype'; |
4 | import React, { Component, createRef } from 'react'; | 4 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 5 | import injectStyle from 'react-jss'; |
6 | 6 | ||
7 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; | 7 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; |
@@ -45,11 +45,11 @@ const styles = (theme: Theme) => ({ | |||
45 | }, | 45 | }, |
46 | toggleLabel: { | 46 | toggleLabel: { |
47 | display: 'flex', | 47 | display: 'flex', |
48 | alignItems: 'center', | ||
48 | 49 | ||
49 | '& > span': { | 50 | '& > span': { |
50 | order: 1, | 51 | order: 1, |
51 | marginLeft: 15, | 52 | marginLeft: 15, |
52 | marginTop: 2, | ||
53 | }, | 53 | }, |
54 | }, | 54 | }, |
55 | }); | 55 | }); |