Skip to content
Permalink
Browse files

feat(Todos): Move todos toggle to sidebar

  • Loading branch information...
adlk committed Sep 11, 2019
1 parent 0f2fe50 commit 7ffcf8cf417e76fe1206b945d417095534b3cad8
@@ -8,6 +8,8 @@ import Tabbar from '../services/tabs/Tabbar';
import { ctrlKey } from '../../environment';
import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
import { gaEvent } from '../../lib/analytics';
import { todosStore, GA_CATEGORY_TODOS } from '../../features/todos';
import todoActions from '../../features/todos/actions';

const messages = defineMessages({
settings: {
@@ -34,6 +36,14 @@ const messages = defineMessages({
id: 'sidebar.closeWorkspaceDrawer',
defaultMessage: '!!!Close workspace drawer',
},
openTodosDrawer: {
id: 'sidebar.openTodosDrawer',
defaultMessage: '!!!Open Franz Todos',
},
closeTodosDrawer: {
id: 'sidebar.closeTodosDrawer',
defaultMessage: '!!!Close Franz Todos',
},
});

export default @observer class Sidebar extends Component {
@@ -79,6 +89,10 @@ export default @observer class Sidebar extends Component {
toggleWorkspaceDrawer,
} = this.props;
const { intl } = this.context;
const todosToggleMessage = (
todosStore.isTodosPanelVisible ? messages.closeTodosDrawer : messages.openTodosDrawer
);

const workspaceToggleMessage = (
isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
);
@@ -90,6 +104,20 @@ export default @observer class Sidebar extends Component {
enableToolTip={() => this.enableToolTip()}
disableToolTip={() => this.disableToolTip()}
/>
{todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
<button
type="button"
onClick={() => {
todoActions.toggleTodosPanel();
this.updateToolTip();
gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'sidebar');
}}
className="sidebar__button sidebar__button--workspaces"
data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
>
<i className="mdi mdi-check-all" />
</button>
) : null}
{workspaceStore.isFeatureEnabled ? (
<button
type="button"
@@ -61,50 +61,6 @@ const styles = theme => ({
background: theme.todos.dragIndicator.background,

},
openTodosButton: {
width: OPEN_TODOS_BUTTON_SIZE,
height: OPEN_TODOS_BUTTON_SIZE,
background: theme.todos.toggleButton.background,
position: 'absolute',
bottom: 120,
right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
opacity: props => (props.isVisible ? 0 : 1),
transition: 'right 0.5s',
zIndex: 600,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],

borderTopRightRadius: props => (props.isVisible ? null : 0),
borderBottomRightRadius: props => (props.isVisible ? null : 0),

'& svg': {
fill: theme.todos.toggleButton.textColor,
transition: 'all 0.5s',
},
},
closeTodosButton: {
width: CLOSE_TODOS_BUTTON_SIZE,
height: CLOSE_TODOS_BUTTON_SIZE,
background: theme.todos.toggleButton.background,
position: 'absolute',
bottom: 120,
right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
transition: 'opacity 0.5s',
zIndex: 600,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],

'& svg': {
fill: theme.todos.toggleButton.textColor,
},
},
premiumContainer: {
display: 'flex',
flexDirection: 'column',
@@ -132,7 +88,6 @@ class TodosWebview extends Component {
static propTypes = {
classes: PropTypes.object.isRequired,
isVisible: PropTypes.bool.isRequired,
togglePanel: PropTypes.func.isRequired,
handleClientMessage: PropTypes.func.isRequired,
setTodosWebview: PropTypes.func.isRequired,
resize: PropTypes.func.isRequired,
@@ -228,7 +183,6 @@ class TodosWebview extends Component {
const {
classes,
isVisible,
togglePanel,
isTodosIncludedInCurrentPlan,
} = this.props;

@@ -247,13 +201,6 @@ class TodosWebview extends Component {
onMouseUp={() => this.stopResize()}
ref={(node) => { this.node = node; }}
>
<button
onClick={() => togglePanel()}
className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
type="button"
>
<Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
</button>
<div
className={classes.resizeHandler}
style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
@@ -765,78 +765,104 @@
"defaultMessage": "!!!Settings",
"end": {
"column": 3,
"line": 16
"line": 18
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.settings",
"start": {
"column": 12,
"line": 13
"line": 15
}
},
{
"defaultMessage": "!!!Add new service",
"end": {
"column": 3,
"line": 20
"line": 22
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.addNewService",
"start": {
"column": 17,
"line": 17
"line": 19
}
},
{
"defaultMessage": "!!!Disable notifications & audio",
"end": {
"column": 3,
"line": 24
"line": 26
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.muteApp",
"start": {
"column": 8,
"line": 21
"line": 23
}
},
{
"defaultMessage": "!!!Enable notifications & audio",
"end": {
"column": 3,
"line": 28
"line": 30
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.unmuteApp",
"start": {
"column": 10,
"line": 25
"line": 27
}
},
{
"defaultMessage": "!!!Open workspace drawer",
"end": {
"column": 3,
"line": 32
"line": 34
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.openWorkspaceDrawer",
"start": {
"column": 23,
"line": 29
"line": 31
}
},
{
"defaultMessage": "!!!Close workspace drawer",
"end": {
"column": 3,
"line": 36
"line": 38
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.closeWorkspaceDrawer",
"start": {
"column": 24,
"line": 33
"line": 35
}
},
{
"defaultMessage": "!!!Open Franz Todos",
"end": {
"column": 3,
"line": 42
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.openTodosDrawer",
"start": {
"column": 19,
"line": 39
}
},
{
"defaultMessage": "!!!Close Franz Todos",
"end": {
"column": 3,
"line": 46
},
"file": "src/components/layout/Sidebar.js",
"id": "sidebar.closeTodosDrawer",
"start": {
"column": 20,
"line": 43
}
}
],
@@ -93,7 +93,7 @@
"menu.services.addNewService": "Add New Service...",
"menu.services.setNextServiceActive": "Activate next service",
"menu.todos": "Todos",
"menu.todos.enableTodos": "!!!Enable Todos",
"menu.todos.enableTodos": "Enable Todos",
"menu.view": "View",
"menu.view.enterFullScreen": "Enter Full Screen",
"menu.view.exitFullScreen": "Exit Full Screen",
@@ -329,8 +329,10 @@
"settings.workspaces.workspaceFeatureInfo": "Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
"settings.workspaces.workspacesRequestFailed": "Could not load your workspaces",
"sidebar.addNewService": "Add new service",
"sidebar.closeTodosDrawer": "Close Franz Todos",
"sidebar.closeWorkspaceDrawer": "Close workspace drawer",
"sidebar.muteApp": "Disable notifications & audio",
"sidebar.openTodosDrawer": "Open Franz Todos",
"sidebar.openWorkspaceDrawer": "Open workspace drawer",
"sidebar.settings": "Settings",
"sidebar.unmuteApp": "Enable notifications & audio",
@@ -380,4 +382,4 @@
"workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
"workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
"workspaces.switchingIndicator.switchingTo": "Switching to"
}
}
@@ -4,11 +4,11 @@
"defaultMessage": "!!!Settings",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 13,
"line": 15,
"column": 12
},
"end": {
"line": 16,
"line": 18,
"column": 3
}
},
@@ -17,11 +17,11 @@
"defaultMessage": "!!!Add new service",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 17,
"line": 19,
"column": 17
},
"end": {
"line": 20,
"line": 22,
"column": 3
}
},
@@ -30,11 +30,11 @@
"defaultMessage": "!!!Disable notifications & audio",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 21,
"line": 23,
"column": 8
},
"end": {
"line": 24,
"line": 26,
"column": 3
}
},
@@ -43,11 +43,11 @@
"defaultMessage": "!!!Enable notifications & audio",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 25,
"line": 27,
"column": 10
},
"end": {
"line": 28,
"line": 30,
"column": 3
}
},
@@ -56,11 +56,11 @@
"defaultMessage": "!!!Open workspace drawer",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 29,
"line": 31,
"column": 23
},
"end": {
"line": 32,
"line": 34,
"column": 3
}
},
@@ -69,11 +69,37 @@
"defaultMessage": "!!!Close workspace drawer",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 33,
"line": 35,
"column": 24
},
"end": {
"line": 36,
"line": 38,
"column": 3
}
},
{
"id": "sidebar.openTodosDrawer",
"defaultMessage": "!!!Open Franz Todos",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 39,
"column": 19
},
"end": {
"line": 42,
"column": 3
}
},
{
"id": "sidebar.closeTodosDrawer",
"defaultMessage": "!!!Close Franz Todos",
"file": "src/components/layout/Sidebar.js",
"start": {
"line": 43,
"column": 20
},
"end": {
"line": 46,
"column": 3
}
}

0 comments on commit 7ffcf8c

Please sign in to comment.
You can’t perform that action at this time.