Merge remote-tracking branch 'gitlab/master'

CHANGELOG.md

@@ -1,3 +1,20 @@
+# [5.0.0-beta.19](https://github.com/meetfranz/franz/compare/v5.0.0-beta.18...v5.0.0-beta.19) (2018-11-02)
+
+
+### Bug Fixes
+
+* **App:** Allow hidden directories in franz recipes directory ([90d495f](https://github.com/meetfranz/franz/commit/90d495f))
+* **App:** Fix broken quit button and shortcut + body theme ([3e9eac5](https://github.com/meetfranz/franz/commit/3e9eac5))
+
+
+### Features
+
+* **App:** Add themes picker and two basic themes ([99612e8](https://github.com/meetfranz/franz/commit/99612e8))
+* **App:** Remove Google Analytics ([a1bc702](https://github.com/meetfranz/franz/commit/a1bc702))
+* **App:** Set background image UI ([ac1ace3](https://github.com/meetfranz/franz/commit/ac1ace3))
+
+
+
 <a name="5.0.0-beta.18"></a>
 # [5.0.0-beta.18](https://github.com/meetfranz/franz/compare/v5.0.0-beta.16...v5.0.0-beta.18) (2018-04-03)
 

README.md

@@ -1,3 +1,17 @@
+**This is my fork of Franz 5. Created mainly to add dark theme and later transparent and background image.**
+---
+
+
+### Transparent theme instructions
+Transparent theme works best with transparent services (apps). I added transparent themes for only those apps I use. 
+At the moment: Slack, Gmail, Messenger, Slack, Telegram, GoogleCalendar. If you wish some  other you can create issue with a request.
+
+To use transparent services it's best to clone whole repository to franz directory. Detailed instruction [here](https://github.com/MikeDabrowski/franz-transparent-recipes)
+
+
+---
+
+
 **This repository is only for Franz 5 and later, previous versions are no longer maintained.**
 ---
 

package.json

@@ -2,7 +2,7 @@
   "name": "franz",
   "productName": "Franz",
   "appId": "com.meetfranz.franz",
-  "version": "5.0.0-beta.18",
+  "version": "5.0.0-beta.19",
   "description": "Messaging app for WhatsApp, Slack, Telegram, HipChat, Hangouts and many many more.",
   "copyright": "adlk x franz - Stefan Malzner",
   "main": "index.js",
@@ -35,7 +35,7 @@
     "classnames": "^2.2.5",
     "debug-electron": "^0.0.4",
     "du": "^0.1.0",
-    "electron-fetch": "^1.1.0",
+    "electron-fetch": "1.1.0",
     "electron-react-titlebar": "^0.7.1",
     "electron-spellchecker": "^1.1.2",
     "electron-updater": "^2.4.3",

src/actions/settings.js

@@ -9,4 +9,6 @@ export default {
     type: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,
   },
+  setBackground: {},
+  resetBackground: {},
 };

src/actions/ui.js

@@ -8,4 +8,5 @@ export default {
   toggleServiceUpdatedInfoBar: {
     visible: PropTypes.bool,
   },
+  changeTheme: {},
 };

src/api/server/ServerApi.js

@@ -269,6 +269,7 @@ export default class ServerApi {
         fs.statSync(path.join(recipesDirectory, file)).isDirectory()
         && file !== 'temp'
         && file !== 'dev'
+        && !file.startsWith('.')
       ));
 
     this.recipes = paths.map((id) => {

src/app.js

@@ -16,7 +16,6 @@ import apiFactory from './api';
 import actions from './actions';
 import MenuFactory from './lib/Menu';
 import TouchBarFactory from './lib/TouchBar';
-import * as analytics from './lib/analytics';
 
 import I18N from './I18n';
 import AppLayoutContainer from './containers/layout/AppLayoutContainer';
@@ -59,7 +58,6 @@ window.addEventListener('load', () => {
     api,
     menu,
     touchBar,
-    analytics,
     render() {
       const preparedApp = (
         <Provider stores={stores} actions={actions}>

src/components/settings/settings/EditSettingsForm.js

@@ -1,15 +1,16 @@
 import { remote } from 'electron';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { defineMessages, intlShape } from 'react-intl';
 
+import { FRANZ_TRANSLATION } from '../../../config';
+
 import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
-import Toggle from '../../ui/Toggle';
+import Input from '../../ui/Input';
 import Select from '../../ui/Select';
-
-import { FRANZ_TRANSLATION } from '../../../config';
+import Toggle from '../../ui/Toggle';
 
 const messages = defineMessages({
   headline: {
@@ -80,11 +81,28 @@ const messages = defineMessages({
     id: 'settings.app.restartRequired',
     defaultMessage: '!!!Changes require restart',
   },
+  theme: {
+    id: 'settings.app.headlineAppTheme',
+    defaultMessage: '!!!Pick Franz theme',
+  },
+  appBackground: {
+    id: 'settings.app.headlineBackground',
+    defaultMessage: '!!!Add app background',
+  },
+  setBackground: {
+    id: 'settings.app.setBackground',
+    defaultMessage: '!!!Set background',
+  },
+  resetBackground: {
+    id: 'settings.app.resetBackground',
+    defaultMessage: '!!!Reset background',
+  },
 });
 
 @observer
 export default class EditSettingsForm extends Component {
   static propTypes = {
+    actions: PropTypes.any.isRequired,
     checkForUpdates: PropTypes.func.isRequired,
     installUpdate: PropTypes.func.isRequired,
     form: PropTypes.instanceOf(Form).isRequired,
@@ -102,6 +120,23 @@ export default class EditSettingsForm extends Component {
     intl: intlShape,
   };
 
+  compareCurrentBg(newBg) {
+    if (!newBg) {
+      return false;
+    }
+    const current = window.getComputedStyle(document.body)
+      .backgroundImage
+      .replace('url("', '')
+      .replace('")', '');
+    if (!current || current === 'none') {
+      return false;
+    }
+    if (newBg.startsWith('./')) {
+      return current.includes(newBg.substring(1));
+    }
+    return newBg !== current;
+  }
+
   submit(e) {
     e.preventDefault();
     this.props.form.submit({
@@ -115,6 +150,7 @@ export default class EditSettingsForm extends Component {
 
   render() {
     const {
+      actions,
       checkForUpdates,
       installUpdate,
       form,
@@ -127,6 +163,7 @@ export default class EditSettingsForm extends Component {
       cacheSize,
     } = this.props;
     const { intl } = this.context;
+    const { setBackground, resetBackground } = actions;
 
     let updateButtonLabelMessage = messages.buttonSearchForUpdate;
     if (isCheckingForUpdates) {
@@ -162,6 +199,30 @@ export default class EditSettingsForm extends Component {
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
+            {/* Theme */}
+            <h2 id="theme">{intl.formatMessage(messages.theme)}</h2>
+            <Select field={form.$('theme')} showLabel={false} />
+
+            {/* Backgrounds */}
+            <h2 id="theme">{intl.formatMessage(messages.appBackground)}</h2>
+            <div className={'add-bg-row'}>
+              <Input field={form.$('appBackground')} showLabel={false} />
+            </div>
+            <div className={'add-bg-row'}>
+              <Button
+                buttonType="success"
+                label={intl.formatMessage(messages.setBackground)}
+                onClick={() => setBackground(form.values().appBackground)}
+                disabled={!form.values().appBackground}
+              />
+              <Button
+                buttonType="danger"
+                label={intl.formatMessage(messages.resetBackground)}
+                onClick={() => resetBackground(form.values().appBackground)}
+                disabled={this.compareCurrentBg(form.values().appBackground)}
+              />
+            </div>
+
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />

src/components/ui/Input.js

@@ -32,7 +32,7 @@ export default class Input extends Component {
   state = {
     showPassword: false,
     passwordScore: 0,
-  }
+  };
 
   componentDidMount() {
     if (this.props.focus) {
@@ -45,7 +45,7 @@ export default class Input extends Component {
 
     field.onChange(e);
 
-    if (scorePassword) {
+    if (field.type === 'password' && scorePassword) {
       this.setState({ passwordScore: scorePasswordFunc(field.value) });
     }
   }

src/components/ui/SearchInput.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import uuidv1 from 'uuid/v1';
 import { debounce } from 'lodash';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import uuidv1 from 'uuid/v1';
 
 @observer
 export default class SearchInput extends Component {
@@ -17,6 +17,7 @@ export default class SearchInput extends Component {
     throttle: PropTypes.bool,
     throttleDelay: PropTypes.number,
     autoFocus: PropTypes.bool,
+    showLabels: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -29,7 +30,8 @@ export default class SearchInput extends Component {
     onChange: () => null,
     onReset: () => null,
     autoFocus: false,
-  }
+    showLabels: true,
+  };
 
   constructor(props) {
     super(props);
@@ -78,7 +80,7 @@ export default class SearchInput extends Component {
   input = null;
 
   render() {
-    const { className, name, placeholder } = this.props;
+    const { className, name, showLabels, placeholder } = this.props;
     const { value } = this.state;
 
     return (
@@ -88,10 +90,12 @@ export default class SearchInput extends Component {
           'search-input',
         ])}
       >
-        <label
-          htmlFor={name}
-          className="mdi mdi-magnify"
-        />
+        {showLabels && (
+          <label
+            htmlFor={name}
+            className="mdi mdi-magnify"
+          />
+        )}
         <input
           name={name}
           type="text"
@@ -100,7 +104,7 @@ export default class SearchInput extends Component {
           onChange={e => this.onChange(e)}
           ref={(ref) => { this.input = ref; }}
         />
-        {value.length > 0 && (
+        {showLabels && value.length > 0 && (
           <span
             className="mdi mdi-close-circle-outline"
             onClick={() => this.reset()}

src/config.js

@@ -7,7 +7,12 @@ export const CHECK_INTERVAL = 1000 * 3600; // How often should we perform checks
 export const LOCAL_API = 'http://localhost:3000';
 export const DEV_API = 'https://dev.franzinfra.com';
 export const LIVE_API = 'https://api.franzinfra.com';
-export const GA_ID = 'UA-74126766-6';
+
+export const APP_THEMES = {
+  'theme-regular': 'Regular',
+  'theme-dark': 'Dark',
+  'theme-transparent-dark': 'Transparent dark',
+};
 
 export const DEFAULT_APP_SETTINGS = {
   autoLaunchInBackground: false,
@@ -16,6 +21,8 @@ export const DEFAULT_APP_SETTINGS = {
   minimizeToSystemTray: false,
   showDisabledServices: true,
   showMessageBadgeWhenMuted: true,
+  theme: 'theme-regular',
+  appBackground: './assets/images/galaxy2.jpg',
   enableSpellchecking: true,
   locale: '',
   fallbackLocale: 'en-US',

src/containers/auth/ImportScreen.js

@@ -3,14 +3,9 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Import from '../../components/auth/Import';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 @inject('stores', 'actions') @observer
 export default class ImportScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Import');
-  }
-
   render() {
     const { actions, stores } = this.props;
 

src/containers/auth/InviteScreen.js

@@ -2,13 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
-import { gaPage } from '../../lib/analytics';
 
 @inject('stores', 'actions') @observer
 export default class InviteScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Invite');
-  }
 
   render() {
     const { actions } = this.props;

src/containers/auth/LoginScreen.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Login from '../../components/auth/Login';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -13,10 +12,6 @@ export default class LoginScreen extends Component {
     error: globalErrorPropType.isRequired,
   };
 
-  componentDidMount() {
-    gaPage('Auth/Login');
-  }
-
   render() {
     const { actions, stores, error } = this.props;
     return (

src/containers/auth/PasswordScreen.js

@@ -3,14 +3,9 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Password from '../../components/auth/Password';
 import UserStore from '../../stores/UserStore';
-import { gaPage } from '../../lib/analytics';
 
 @inject('stores', 'actions') @observer
 export default class PasswordScreen extends Component {
-  componentDidMount() {
-    gaPage('Auth/Password Retrieve');
-  }
-
   render() {
     const { actions, stores } = this.props;