Merge tag 'v5.1.0'

# Conflicts:
#	README.md
#	src/components/layout/AppLayout.js

2 files changed, 99 insertions, 28 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index a1641bc4a..d0476ef04 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -3,14 +3,20 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
+import injectSheet from 'react-jss';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
+import { Component as ShareFranz } from '../../features/shareFranz';
 import ErrorBoundary from '../util/ErrorBoundary';
 
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
+import AnnouncementScreen from '../../features/announcements/components/AnnouncementScreen';
+import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
+import { workspaceStore } from '../../features/workspaces';
+import { announcementActions } from '../../features/announcements/actions';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -43,18 +49,30 @@ const messages = defineMessages({
   },
 });
 
-export default
-@observer
+const styles = theme => ({
+  appContent: {
+    width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
+    transition: 'transform 0.5s ease',
+    transform() {
+      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
+    },
+  },
+});
+
+@injectSheet(styles) @observer
 class AppLayout extends Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     isFullScreen: PropTypes.bool.isRequired,
     sidebar: PropTypes.element.isRequired,
+    workspacesDrawer: PropTypes.element.isRequired,
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
     // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
+    nextAppReleaseVersion: PropTypes.string,
     removeNewsItem: PropTypes.func.isRequired,
     reloadServicesAfterUpdate: PropTypes.func.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
@@ -63,10 +81,13 @@ class AppLayout extends Component {
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
     darkMode: PropTypes.bool.isRequired,
+    isDelayAppScreenVisible: PropTypes.bool.isRequired,
+    isAnnouncementVisible: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
     children: [],
+    nextAppReleaseVersion: null,
   };
 
   static contextTypes = {
@@ -75,7 +96,9 @@ class AppLayout extends Component {
 
   render() {
     const {
+      classes,
       isFullScreen,
+      workspacesDrawer,
       sidebar,
       services,
       children,
@@ -83,6 +106,7 @@ class AppLayout extends Component {
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
+      nextAppReleaseVersion,
       removeNewsItem,
       reloadServicesAfterUpdate,
       installAppUpdate,
@@ -91,6 +115,8 @@ class AppLayout extends Component {
       retryRequiredRequests,
       areRequiredRequestsLoading,
       darkMode,
+      isDelayAppScreenVisible,
+      isAnnouncementVisible,
     } = this.props;
 
     const { intl } = this.context;
@@ -99,29 +125,23 @@ class AppLayout extends Component {
       <ErrorBoundary>
         <div className={darkMode ? 'theme__dark' : ''}>
           <div className="app">
-            {isWindows && !isFullScreen && (
-              <TitleBar
-                menu={window.franz.menu.template}
-                icon="assets/images/logo.svg"
-              />
-            )}
-            <div className="app__content">
+            {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+            <div className={`app__content ${classes.appContent}`}>
+              {workspacesDrawer}
               {sidebar}
               <div className="app__service">
-                {news.length > 0
-                  && news.map(item => (
-                    <InfoBar
-                      key={item.id}
-                      position="top"
-                      type={item.type}
-                      sticky={item.sticky}
-                      onHide={() => removeNewsItem({ newsId: item.id })}
-                    >
-                      <span
-                        dangerouslySetInnerHTML={createMarkup(item.message)}
-                      />
-                    </InfoBar>
-                  ))}
+                <WorkspaceSwitchingIndicator />
+                {news.length > 0 && news.map(item => (
+                  <InfoBar
+                    key={item.id}
+                    position="top"
+                    type={item.type}
+                    sticky={item.sticky}
+                    onHide={() => removeNewsItem({ newsId: item.id })}
+                  >
+                    <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                  </InfoBar>
+                ))}
                 {/* {!isOnline && (
                   <InfoBar
                     type="danger"
@@ -164,12 +184,18 @@ class AppLayout extends Component {
                     <span className="mdi mdi-information" />
                     {intl.formatMessage(messages.updateAvailable)}
                     {' '}
-                    <a href="https://meetfranz.com/changelog" target="_blank">
+                    <button
+                      className="info-bar__inline-button"
+                      type="button"
+                      onClick={() => announcementActions.show({ targetVersion: nextAppReleaseVersion })}
+                    >
                       <u>{intl.formatMessage(messages.changelog)}</u>
-                    </a>
+                    </button>
                   </InfoBar>
                 )}
                 <BasicAuth />
+                <ShareFranz />
+                {isAnnouncementVisible && (<AnnouncementScreen />)}
                 {services}
               </div>
             </div>
@@ -180,3 +206,5 @@ class AppLayout extends Component {
     );
   }
 }
+
+export default AppLayout;
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 609a3b604..36c1f2e39 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -6,6 +6,8 @@ import { observer } from 'mobx-react';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
+import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
+import { gaEvent } from '../../lib/analytics';
 
 const messages = defineMessages({
   settings: {
@@ -24,6 +26,14 @@ const messages = defineMessages({
     id: 'sidebar.unmuteApp',
     defaultMessage: '!!!Enable notifications & audio',
   },
+  openWorkspaceDrawer: {
+    id: 'sidebar.openWorkspaceDrawer',
+    defaultMessage: '!!!Open workspace drawer',
+  },
+  closeWorkspaceDrawer: {
+    id: 'sidebar.closeWorkspaceDrawer',
+    defaultMessage: '!!!Close workspace drawer',
+  },
 });
 
 export default @observer class Sidebar extends Component {
@@ -31,7 +41,9 @@ export default @observer class Sidebar extends Component {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
-  }
+    isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
+    toggleWorkspaceDrawer: PropTypes.func.isRequired,
+  };
 
   static contextTypes = {
     intl: intlShape,
@@ -53,9 +65,23 @@ export default @observer class Sidebar extends Component {
     this.setState({ tooltipEnabled: false });
   }
 
+  updateToolTip() {
+    this.disableToolTip();
+    setTimeout(this.enableToolTip.bind(this));
+  }
+
   render() {
-    const { openSettings, toggleMuteApp, isAppMuted } = this.props;
+    const {
+      openSettings,
+      toggleMuteApp,
+      isAppMuted,
+      isWorkspaceDrawerOpen,
+      toggleWorkspaceDrawer,
+    } = this.props;
     const { intl } = this.context;
+    const workspaceToggleMessage = (
+      isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
+    );
 
     return (
       <div className="sidebar">
@@ -64,9 +90,26 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
+        {workspaceStore.isFeatureEnabled ? (
+          <button
+            type="button"
+            onClick={() => {
+              toggleWorkspaceDrawer();
+              this.updateToolTip();
+              gaEvent(GA_CATEGORY_WORKSPACES, 'toggleDrawer', 'sidebar');
+            }}
+            className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+            data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+          >
+            <i className="mdi mdi-view-grid" />
+          </button>
+        ) : null}
         <button
           type="button"
-          onClick={toggleMuteApp}
+          onClick={() => {
+            toggleMuteApp();
+            this.updateToolTip();
+          }}
           className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
           data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
         >