feat(App): Set background image UI

MikeDabrowski · Nov 2, 2018 · 27d67cd · 27d67cd
1 parent 8a25988
commit 27d67cd
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/actions/settings.js b/src/actions/settings.js
@@ -9,4 +9,6 @@ export default {
     type: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,
   },
+  setBackground: {},
+  resetBackground: {},
 };
diff --git a/src/assets/images/galaxy2.jpg b/src/assets/images/galaxy2.jpg
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
@@ -8,6 +8,7 @@ import { FRANZ_TRANSLATION } from '../../../config';
 
 import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
+import Input from '../../ui/Input';
 import Select from '../../ui/Select';
 import Toggle from '../../ui/Toggle';
 
@@ -84,11 +85,24 @@ const messages = defineMessages({
     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,
@@ -106,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({
@@ -119,6 +150,7 @@ export default class EditSettingsForm extends Component {
 
   render() {
     const {
+      actions,
       checkForUpdates,
       installUpdate,
       form,
@@ -131,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) {
@@ -170,6 +203,26 @@ export default class EditSettingsForm extends Component {
             <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} />

diff --git a/src/components/ui/Input.js b/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) });
     }
   }

diff --git a/src/components/ui/SearchInput.js b/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()}

diff --git a/src/config.js b/src/config.js
@@ -23,6 +23,7 @@ export const DEFAULT_APP_SETTINGS = {
   showDisabledServices: true,
   showMessageBadgeWhenMuted: true,
   theme: 'theme-regular',
+  appBackground: './assets/images/galaxy2.jpg',
   enableSpellchecking: true,
   locale: '',
   fallbackLocale: 'en-US',

diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
@@ -51,6 +51,10 @@ const messages = defineMessages({
     id: 'settings.app.form.theme',
     defaultMessage: '!!!Pick Franz theme',
   },
+  appBackground: {
+    id: 'settings.app.headlineBackground',
+    defaultMessage: '!!!Add app background',
+  },
   enableSpellchecking: {
     id: 'settings.app.form.enableSpellchecking',
     defaultMessage: '!!!Enable spell checking',
@@ -97,6 +101,7 @@ export default class EditSettingsScreen extends Component {
         showDisabledServices: settingsData.showDisabledServices,
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         theme: settingsData.theme,
+        appBackground: settingsData.appBackground || DEFAULT_APP_SETTINGS.appBackground,
         enableSpellchecking: settingsData.enableSpellchecking,
         beta: settingsData.beta, // we need this info in the main process as well
         locale: settingsData.locale, // we need this info in the main process as well
@@ -173,6 +178,11 @@ export default class EditSettingsScreen extends Component {
           options: themes,
           default: DEFAULT_APP_SETTINGS.theme,
         },
+        appBackground: {
+          label: intl.formatMessage(messages.appBackground),
+          value: settings.all.app.appBackground,
+          default: DEFAULT_APP_SETTINGS.appBackground,
+        },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
           value: settings.all.app.enableSpellchecking,
@@ -216,6 +226,7 @@ export default class EditSettingsScreen extends Component {
 
     return (
       <EditSettingsForm
+        actions={this.props.actions.settings}
         form={form}
         checkForUpdates={checkForUpdates}
         installUpdate={installUpdate}

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -147,13 +147,16 @@
   "settings.app.headlineUpdates": "Updates",
   "settings.app.headlineAppearance": "Appearance",
   "settings.app.headlineAppTheme": "Application theme",
+  "settings.app.headlineBackground": "Application background",
   "settings.app.headlineAdvanced": "Advanced",
   "settings.app.buttonSearchForUpdate": "Check for updates",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.updateStatusSearching": "Is searching for update",
   "settings.app.updateStatusAvailable": "Update available, downloading...",
   "settings.app.updateStatusUpToDate": "You are using the latest version of Franz",
   "settings.app.subheadlineCache": "Cache",
+  "settings.app.setBackground": "Set application background",
+  "settings.app.resetBackground": "Reset application background",
   "settings.app.cacheInfo": "Franz cache is currently using {size} of disk space.",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.form.autoLaunchOnStart": "Launch Franz on start",
@@ -169,6 +172,7 @@
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
   "settings.app.form.theme": "Pick Franz theme",
+  "settings.app.form.setBackground": "Set background",
   "settings.app.form.beta": "Include beta versions",
   "settings.app.translationHelp": "Help us to translate Franz into your language.",
   "settings.app.currentVersion": "Current version:",

diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
@@ -1,10 +1,11 @@
 import { action, computed, observable } from 'mobx';
 import localStorage from 'mobx-localstorage';
-
-import Store from './lib/Store';
+import { DEFAULT_APP_SETTINGS } from '../config';
 import SettingsModel from '../models/Settings';
-import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
+import Request from './lib/Request';
+
+import Store from './lib/Store';
 
 const debug = require('debug')('SettingsStore');
 
@@ -18,6 +19,8 @@ export default class SettingsStore extends Store {
     // Register action handlers
     this.actions.settings.update.listen(this._update.bind(this));
     this.actions.settings.remove.listen(this._remove.bind(this));
+    this.actions.settings.setBackground.listen(this._setBackground.bind(this));
+    this.actions.settings.resetBackground.listen(this._resetBackground.bind(this));
   }
 
   async setup() {
@@ -53,6 +56,18 @@ export default class SettingsStore extends Store {
     }
   }
 
+  @action _setBackground(background) {
+    if (background && typeof background === 'string') {
+      document.body.style.backgroundImage = `url("${background}")`;
+      this._update({ type: 'app', data: { backgrounds: window.bcgs, appBackground: background } });
+    }
+  }
+
+  @action _resetBackground() {
+    document.body.style.backgroundImage = '';
+    this._update({ type: 'app', data: { backgrounds: window.bcgs, appBackground: DEFAULT_APP_SETTINGS.appBackground } });
+  }
+
   @action async _remove({ type, key }) {
     if (type === 'app') return; // app keys can't be deleted
 
@@ -86,6 +101,7 @@ export default class SettingsStore extends Store {
           enableGPUAcceleration: legacySettings.enableGPUAcceleration,
           showMessageBadgeWhenMuted: legacySettings.showMessageBadgeWhenMuted,
           theme: legacySettings.theme,
+          appBackground: legacySettings.appBackground,
           showDisabledServices: legacySettings.showDisabledServices,
           enableSpellchecking: legacySettings.enableSpellchecking,
         },

diff --git a/src/styles/themes.scss b/src/styles/themes.scss
@@ -19,7 +19,7 @@ $theme-transparent-dark: (
 );
 
 /* TODO out */
-body {
+body.theme-transparent-dark {
   background-size: cover;
   background-image: url('../assets/images/galaxy2.jpg');
   &.transparent-dark .auth {
@@ -39,6 +39,22 @@ body {
     background: transparent;
   }
 }
+.add-bg-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  button {
+    flex: 1;
+  }
+  button:not(:first-child) {
+    margin-left: 16px;
+  }
+}
+.bcgs-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
 
 $all-themes: (
   theme-dark: $theme-dark,

diff --git a/yarn.lock b/yarn.lock
@@ -1959,7 +1959,7 @@ electron-download@^4.0.0:
     semver "^5.3.0"
     sumchecker "^2.0.1"
 
-electron-fetch@^1.1.0:
+electron-fetch@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/electron-fetch/-/electron-fetch-1.1.0.tgz#74b0ea547fe149620d38596a84fb104d34218e31"
   dependencies: