aboutsummaryrefslogtreecommitdiffstats
path: root/src/features
diff options
context:
space:
mode:
Diffstat (limited to 'src/features')
-rw-r--r--src/features/todos/components/TodosWebview.js58
-rw-r--r--src/features/todos/store.js6
2 files changed, 6 insertions, 58 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index c06183e37..d052da6f2 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -6,14 +6,11 @@ import Webview from 'react-electron-web-view';
6import { Icon } from '@meetfranz/ui'; 6import { Icon } from '@meetfranz/ui';
7import { defineMessages, intlShape } from 'react-intl'; 7import { defineMessages, intlShape } from 'react-intl';
8 8
9import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; 9import { mdiCheckAll } from '@mdi/js';
10import * as environment from '../../../environment'; 10import * as environment from '../../../environment';
11import Appear from '../../../components/ui/effects/Appear'; 11import Appear from '../../../components/ui/effects/Appear';
12import UpgradeButton from '../../../components/ui/UpgradeButton'; 12import UpgradeButton from '../../../components/ui/UpgradeButton';
13 13
14const OPEN_TODOS_BUTTON_SIZE = 45;
15const CLOSE_TODOS_BUTTON_SIZE = 35;
16
17const messages = defineMessages({ 14const messages = defineMessages({
18 premiumInfo: { 15 premiumInfo: {
19 id: 'feature.todos.premium.info', 16 id: 'feature.todos.premium.info',
@@ -61,50 +58,6 @@ const styles = theme => ({
61 background: theme.todos.dragIndicator.background, 58 background: theme.todos.dragIndicator.background,
62 59
63 }, 60 },
64 openTodosButton: {
65 width: OPEN_TODOS_BUTTON_SIZE,
66 height: OPEN_TODOS_BUTTON_SIZE,
67 background: theme.todos.toggleButton.background,
68 position: 'absolute',
69 bottom: 120,
70 right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
71 borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
72 opacity: props => (props.isVisible ? 0 : 1),
73 transition: 'right 0.5s',
74 zIndex: 600,
75 display: 'flex',
76 alignItems: 'center',
77 justifyContent: 'center',
78 boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
79
80 borderTopRightRadius: props => (props.isVisible ? null : 0),
81 borderBottomRightRadius: props => (props.isVisible ? null : 0),
82
83 '& svg': {
84 fill: theme.todos.toggleButton.textColor,
85 transition: 'all 0.5s',
86 },
87 },
88 closeTodosButton: {
89 width: CLOSE_TODOS_BUTTON_SIZE,
90 height: CLOSE_TODOS_BUTTON_SIZE,
91 background: theme.todos.toggleButton.background,
92 position: 'absolute',
93 bottom: 120,
94 right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
95 borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
96 opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
97 transition: 'opacity 0.5s',
98 zIndex: 600,
99 display: 'flex',
100 alignItems: 'center',
101 justifyContent: 'center',
102 boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
103
104 '& svg': {
105 fill: theme.todos.toggleButton.textColor,
106 },
107 },
108 premiumContainer: { 61 premiumContainer: {
109 display: 'flex', 62 display: 'flex',
110 flexDirection: 'column', 63 flexDirection: 'column',
@@ -132,7 +85,6 @@ class TodosWebview extends Component {
132 static propTypes = { 85 static propTypes = {
133 classes: PropTypes.object.isRequired, 86 classes: PropTypes.object.isRequired,
134 isVisible: PropTypes.bool.isRequired, 87 isVisible: PropTypes.bool.isRequired,
135 togglePanel: PropTypes.func.isRequired,
136 handleClientMessage: PropTypes.func.isRequired, 88 handleClientMessage: PropTypes.func.isRequired,
137 setTodosWebview: PropTypes.func.isRequired, 89 setTodosWebview: PropTypes.func.isRequired,
138 resize: PropTypes.func.isRequired, 90 resize: PropTypes.func.isRequired,
@@ -228,7 +180,6 @@ class TodosWebview extends Component {
228 const { 180 const {
229 classes, 181 classes,
230 isVisible, 182 isVisible,
231 togglePanel,
232 isTodosIncludedInCurrentPlan, 183 isTodosIncludedInCurrentPlan,
233 } = this.props; 184 } = this.props;
234 185
@@ -247,13 +198,6 @@ class TodosWebview extends Component {
247 onMouseUp={() => this.stopResize()} 198 onMouseUp={() => this.stopResize()}
248 ref={(node) => { this.node = node; }} 199 ref={(node) => { this.node = node; }}
249 > 200 >
250 <button
251 onClick={() => togglePanel()}
252 className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
253 type="button"
254 >
255 <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
256 </button>
257 <div 201 <div
258 className={classes.resizeHandler} 202 className={classes.resizeHandler}
259 style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad 203 style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 05eef4ec1..abf176604 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -33,7 +33,7 @@ export default class TodoStore extends FeatureStore {
33 33
34 @computed get isTodosPanelForceHidden() { 34 @computed get isTodosPanelForceHidden() {
35 const { isAnnouncementShown } = this.stores.announcements; 35 const { isAnnouncementShown } = this.stores.announcements;
36 return delayAppState.isDelayAppScreenVisible || !this.settings.isFeatureEnabledByUser || isAnnouncementShown; 36 return delayAppState.isDelayAppScreenVisible || !this.isFeatureEnabledByUser || isAnnouncementShown;
37 } 37 }
38 38
39 @computed get isTodosPanelVisible() { 39 @computed get isTodosPanelVisible() {
@@ -41,6 +41,10 @@ export default class TodoStore extends FeatureStore {
41 return this.settings.isTodosPanelVisible; 41 return this.settings.isTodosPanelVisible;
42 } 42 }
43 43
44 @computed get isFeatureEnabledByUser() {
45 return this.settings.isFeatureEnabledByUser;
46 }
47
44 @computed get settings() { 48 @computed get settings() {
45 return localStorage.getItem('todos') || {}; 49 return localStorage.getItem('todos') || {};
46 } 50 }