diff options
author | 2019-04-11 16:54:01 +0200 | |
---|---|---|
committer | 2019-04-11 16:54:01 +0200 | |
commit | 47c1c99d893517efc679ab29d675cc0bf44be8be (patch) | |
tree | 9cab9697096bef0ce56d8ee8709bc1c2c3a42deb /src/components/layout/AppLayout.js | |
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 'src/components/layout/AppLayout.js')
-rw-r--r-- | src/components/layout/AppLayout.js | 26 |
1 files changed, 24 insertions, 2 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 593149e72..b7f7722dd 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { TitleBar } from 'electron-react-titlebar'; | 5 | import { TitleBar } from 'electron-react-titlebar'; |
6 | import injectSheet from 'react-jss'; | ||
6 | 7 | ||
7 | import InfoBar from '../ui/InfoBar'; | 8 | import InfoBar from '../ui/InfoBar'; |
8 | import { Component as DelayApp } from '../../features/delayApp'; | 9 | import { Component as DelayApp } from '../../features/delayApp'; |
@@ -13,6 +14,8 @@ import ErrorBoundary from '../util/ErrorBoundary'; | |||
13 | // import globalMessages from '../../i18n/globalMessages'; | 14 | // import globalMessages from '../../i18n/globalMessages'; |
14 | 15 | ||
15 | import { isWindows } from '../../environment'; | 16 | import { isWindows } from '../../environment'; |
17 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; | ||
18 | import { workspaceStore } from '../../features/workspaces'; | ||
16 | 19 | ||
17 | function createMarkup(HTMLString) { | 20 | function createMarkup(HTMLString) { |
18 | return { __html: HTMLString }; | 21 | return { __html: HTMLString }; |
@@ -45,10 +48,23 @@ const messages = defineMessages({ | |||
45 | }, | 48 | }, |
46 | }); | 49 | }); |
47 | 50 | ||
48 | export default @observer class AppLayout extends Component { | 51 | const styles = theme => ({ |
52 | appContent: { | ||
53 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | ||
54 | transition: 'transform 0.5s ease', | ||
55 | transform() { | ||
56 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; | ||
57 | }, | ||
58 | }, | ||
59 | }); | ||
60 | |||
61 | @injectSheet(styles) @observer | ||
62 | class AppLayout extends Component { | ||
49 | static propTypes = { | 63 | static propTypes = { |
64 | classes: PropTypes.object.isRequired, | ||
50 | isFullScreen: PropTypes.bool.isRequired, | 65 | isFullScreen: PropTypes.bool.isRequired, |
51 | sidebar: PropTypes.element.isRequired, | 66 | sidebar: PropTypes.element.isRequired, |
67 | workspacesDrawer: PropTypes.element.isRequired, | ||
52 | services: PropTypes.element.isRequired, | 68 | services: PropTypes.element.isRequired, |
53 | children: PropTypes.element, | 69 | children: PropTypes.element, |
54 | news: MobxPropTypes.arrayOrObservableArray.isRequired, | 70 | news: MobxPropTypes.arrayOrObservableArray.isRequired, |
@@ -76,7 +92,9 @@ export default @observer class AppLayout extends Component { | |||
76 | 92 | ||
77 | render() { | 93 | render() { |
78 | const { | 94 | const { |
95 | classes, | ||
79 | isFullScreen, | 96 | isFullScreen, |
97 | workspacesDrawer, | ||
80 | sidebar, | 98 | sidebar, |
81 | services, | 99 | services, |
82 | children, | 100 | children, |
@@ -102,9 +120,11 @@ export default @observer class AppLayout extends Component { | |||
102 | <div className={(darkMode ? 'theme__dark' : '')}> | 120 | <div className={(darkMode ? 'theme__dark' : '')}> |
103 | <div className="app"> | 121 | <div className="app"> |
104 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} | 122 | {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />} |
105 | <div className="app__content"> | 123 | <div className={`app__content ${classes.appContent}`}> |
124 | {workspacesDrawer} | ||
106 | {sidebar} | 125 | {sidebar} |
107 | <div className="app__service"> | 126 | <div className="app__service"> |
127 | <WorkspaceSwitchingIndicator /> | ||
108 | {news.length > 0 && news.map(item => ( | 128 | {news.length > 0 && news.map(item => ( |
109 | <InfoBar | 129 | <InfoBar |
110 | key={item.id} | 130 | key={item.id} |
@@ -176,3 +196,5 @@ export default @observer class AppLayout extends Component { | |||
176 | ); | 196 | ); |
177 | } | 197 | } |
178 | } | 198 | } |
199 | |||
200 | export default AppLayout; | ||