Merge branch 'master' of https://github.com/meetfranz/franz into fran…

…z-5.4.0
nessunluogo · Oct 9, 2019 · da9e8a3 · da9e8a3
2 parents c8ed6e1 + e17b623
commit da9e8a3
Show file tree

Hide file tree

Showing 22 changed files with 262 additions and 49 deletions.
diff --git a/electron-builder.yml b/electron-builder.yml
@@ -11,6 +11,7 @@ mac:
   gatekeeperAssess: false
   category: public.app-category.productivity
   icon: ./build-helpers/images/icon.icns
+  darkModeSupport: true
 
 afterSign: ./build-helpers/notarize.js
 

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "ferdi",
   "productName": "Ferdi",
   "appId": "com.kytwb.ferdi",
-  "version": "5.3.4-beta.7",
+  "version": "5.4.0-beta.1",
   "description": "Messaging app for WhatsApp, Slack, Telegram, HipChat, Hangouts and many many more.",
   "copyright": "kytwb",
   "main": "index.js",

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
@@ -66,6 +66,7 @@ export const selectSearchColor = inputBackground;
 
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
+export const colorModalBackground = colorContentBackground;
 
 // Services
 export const services = merge({}, defaultStyles.services, {

diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
@@ -145,6 +145,7 @@ export const badgeBorderRadius = 50;
 
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
+export const colorModalBackground = colorContentBackground;
 
 // Services
 export const services = {

diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
@@ -13,6 +13,7 @@ import ServiceDisabled from './ServiceDisabled';
 import ServiceWebview from './ServiceWebview';
 import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
+import { CUSTOM_WEBSITE_ID } from '../../../features/webControls/constants';
 
 export default @observer @inject('stores') class ServiceView extends Component {
   static propTypes = {
@@ -183,11 +184,16 @@ export default @observer @inject('stores') class ServiceView extends Component {
               <WebControlsScreen service={service} />
             )}
             {!this.state.hibernate ? (
-              <ServiceWebview
-                service={service}
-                setWebviewReference={setWebviewReference}
-                detachService={detachService}
-              />
+              <>
+                {service.recipe.id === CUSTOM_WEBSITE_ID && (
+                  <WebControlsScreen service={service} />
+                )}
+                <ServiceWebview
+                  service={service}
+                  setWebviewReference={setWebviewReference}
+                  detachService={detachService}
+                />
+              </>
             ) : (
               <div>
                 <span role="img" aria-label="Sleeping Emoji">😴</span>

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
@@ -38,6 +38,13 @@ class ServiceWebview extends Component {
     detachService({ service });
   }
 
+  refocusWebview = () => {
+    const { webview } = this;
+    if (!webview) return;
+    webview.view.blur();
+    webview.view.focus();
+  };
+
   render() {
     const {
       service,
@@ -46,7 +53,12 @@ class ServiceWebview extends Component {
 
     return (
       <ElectronWebView
-        ref={(webview) => { this.webview = webview; }}
+        ref={(webview) => {
+          this.webview = webview;
+          if (webview && webview.view) {
+            webview.view.addEventListener('did-stop-loading', this.refocusWebview);
+          }
+        }}
         autosize
         src={service.url}
         preload="./webview/recipe.js"

diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
@@ -64,16 +64,24 @@ export default @observer @injectSheet(styles) class Services extends Component {
 
   state = {
     showConfetti: true,
-  }
+  };
+
+  _confettiTimeout = null;
 
   componentDidMount() {
-    window.setTimeout(() => {
+    this._confettiTimeout = window.setTimeout(() => {
       this.setState({
         showConfetti: false,
       });
     }, ms('8s'));
   }
 
+  componentWillUnmount() {
+    if (this._confettiTimeout) {
+      clearTimeout(this._confettiTimeout);
+    }
+  }
+
   render() {
     const {
       services,

diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
@@ -13,7 +13,7 @@ export default theme => ({
     display: 'flex',
   },
   modal: {
-    background: '#FFF',
+    background: theme.colorModalBackground,
     maxWidth: '90%',
     height: 'auto',
     margin: 'auto auto',

diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
@@ -57,12 +57,12 @@ export default function init(stores) {
 
             setVisibility(true);
 
-            timeLastDelay = moment();
-            shownAfterLaunch = true;
 
             setTimeout(() => {
               debug('Resetting app delay');
 
+              shownAfterLaunch = true;
+              timeLastDelay = moment();
               setVisibility(false);
             }, config.delayDuration + 1000); // timer needs to be able to hit 0
           } else {

diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
@@ -3,11 +3,35 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
+import { defineMessages, intlShape } from 'react-intl';
 
 import {
-  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline,
+  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth,
 } from '@mdi/js';
 
+const messages = defineMessages({
+  goHome: {
+    id: 'webControls.goHome',
+    defaultMessage: '!!!Home',
+  },
+  openInBrowser: {
+    id: 'webControls.openInBrowser',
+    defaultMessage: '!!!Open in Browser',
+  },
+  back: {
+    id: 'webControls.back',
+    defaultMessage: '!!!Back',
+  },
+  forward: {
+    id: 'webControls.forward',
+    defaultMessage: '!!!Forward',
+  },
+  reload: {
+    id: 'webControls.reload',
+    defaultMessage: '!!!Reload',
+  },
+});
+
 const styles = theme => ({
   root: {
     background: theme.colorBackground,
@@ -18,7 +42,7 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    padding: [0, 20],
+    padding: [0, 10],
 
     '& + div': {
       height: 'calc(100% - 50px)',
@@ -45,7 +69,7 @@ const styles = theme => ({
   input: {
     marginBottom: 0,
     height: 'auto',
-    marginLeft: 10,
+    margin: [0, 10],
     flex: 1,
     border: 0,
     padding: [4, 10],
@@ -68,10 +92,15 @@ class WebControls extends Component {
     canGoForward: PropTypes.bool.isRequired,
     goForward: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    openInBrowser: PropTypes.func.isRequired,
     url: PropTypes.string.isRequired,
     navigate: PropTypes.func.isRequired,
   }
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   static getDerivedStateFromProps(props, state) {
     const { url } = props;
     const { editUrl } = state;
@@ -100,6 +129,7 @@ class WebControls extends Component {
       canGoForward,
       goForward,
       reload,
+      openInBrowser,
       url,
       navigate,
     } = this.props;
@@ -109,12 +139,16 @@ class WebControls extends Component {
       editUrl,
     } = this.state;
 
+    const { intl } = this.context;
+
     return (
       <div className={classes.root}>
         <button
           onClick={goHome}
           type="button"
           className={classes.button}
+          data-tip={intl.formatMessage(messages.goHome)}
+          data-place="bottom"
         >
           <Icon
             icon={mdiHomeOutline}
@@ -126,6 +160,8 @@ class WebControls extends Component {
           type="button"
           className={classes.button}
           disabled={!canGoBack}
+          data-tip={intl.formatMessage(messages.back)}
+          data-place="bottom"
         >
           <Icon
             icon={mdiArrowLeft}
@@ -137,6 +173,8 @@ class WebControls extends Component {
           type="button"
           className={classes.button}
           disabled={!canGoForward}
+          data-tip={intl.formatMessage(messages.forward)}
+          data-place="bottom"
         >
           <Icon
             icon={mdiArrowRight}
@@ -147,6 +185,8 @@ class WebControls extends Component {
           onClick={reload}
           type="button"
           className={classes.button}
+          data-tip={intl.formatMessage(messages.reload)}
+          data-place="bottom"
         >
           <Icon
             icon={mdiReload}
@@ -160,6 +200,7 @@ class WebControls extends Component {
             inputUrl: event.target.value,
           })}
           onFocus={(event) => {
+            console.log('on focus event');
             event.target.select();
             this.setState({
               editUrl: true,
@@ -182,6 +223,18 @@ class WebControls extends Component {
           }}
           ref={this.inputRef}
         />
+        <button
+          onClick={openInBrowser}
+          type="button"
+          className={classes.button}
+          data-tip={intl.formatMessage(messages.openInBrowser)}
+          data-place="bottom"
+        >
+          <Icon
+            icon={mdiEarth}
+            className={classes.icon}
+          />
+        </button>
       </div>
     );
   }

diff --git a/src/features/webControls/constants.js b/src/features/webControls/constants.js
@@ -0,0 +1 @@
+export const CUSTOM_WEBSITE_ID = 'franz-custom-website';
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
@@ -9,7 +9,6 @@ import Service from '../../../models/Service';
 
 const URL_EVENTS = [
   'load-commit',
-  // 'dom-ready',
   'will-navigate',
   'did-navigate',
   'did-navigate-in-page',
@@ -97,11 +96,20 @@ class WebControlsScreen extends Component {
     this.url = url;
   }
 
+  openInBrowser() {
+    const { openExternalUrl } = this.props.actions.app;
+
+    if (!this.webview) return;
+
+    openExternalUrl({ url: this.url });
+  }
+
   render() {
     return (
       <WebControls
         goHome={() => this.goHome()}
         reload={() => this.reload()}
+        openInBrowser={() => this.openInBrowser()}
         canGoBack={this.canGoBack}
         goBack={() => this.goBack()}
         canGoForward={this.canGoForward}
@@ -121,6 +129,9 @@ WebControlsScreen.wrappedComponent.propTypes = {
     services: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
     service: PropTypes.shape({
       reloadActive: PropTypes.func.isRequired,
     }).isRequired,

diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -199,8 +199,9 @@ class WorkspaceDrawer extends Component {
               }}
               services={getServicesForWorkspace(null)}
               isActive={actualWorkspace == null}
+              shortcutIndex={0}
             />
-            {workspaces.map(workspace => (
+            {workspaces.map((workspace, index) => (
               <WorkspaceDrawerItem
                 key={workspace.id}
                 name={workspace.name}
@@ -212,6 +213,7 @@ class WorkspaceDrawer extends Component {
                 }}
                 onContextMenuEditClick={() => workspaceActions.edit({ workspace })}
                 services={getServicesForWorkspace(workspace)}
+                shortcutIndex={index + 1}
               />
             ))}
             <div

diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
+import { ctrlKey } from '../../../environment';
 
 const { Menu } = remote;
 
@@ -69,6 +70,7 @@ class WorkspaceDrawerItem extends Component {
     onClick: PropTypes.func.isRequired,
     services: PropTypes.arrayOf(PropTypes.string).isRequired,
     onContextMenuEditClick: PropTypes.func,
+    shortcutIndex: PropTypes.number.isRequired,
   };
 
   static defaultProps = {
@@ -87,6 +89,7 @@ class WorkspaceDrawerItem extends Component {
       onClick,
       onContextMenuEditClick,
       services,
+      shortcutIndex,
     } = this.props;
     const { intl } = this.context;
 
@@ -112,6 +115,7 @@ class WorkspaceDrawerItem extends Component {
         onContextMenu={() => (
           onContextMenuEditClick && contextMenu.popup(remote.getCurrentWindow())
         )}
+        data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+Alt+${shortcutIndex})` : ''}`}
       >
         <span
           className={classnames([
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const CUSTOM_WEBSITE_ID = 'franz-custom-website';