Select background

scss/_global.scss

@@ -136,3 +136,4 @@ code {
   image-rendering: -o-crisp-edges;
   image-rendering: pixelated;
 }
+

scss/modules/_settings.scss

@@ -0,0 +1,17 @@
+
+// ChatView Background selector
+
+.background-preview {
+    width: 100pt;
+    height: 100pt;
+    border-radius: 5pt;
+    background-image: url(../images/background_light.svg);
+    background-color: var(--chatViewBg);
+}
+
+.background-options {
+    display: flex;
+    flex-direction: column;
+    padding-left: 8pt;
+    justify-content: space-evenly;
+}

scss/modules/index.scss

@@ -10,6 +10,8 @@
 @import 'emoji-mart-overwrites';
 
 
+@import 'settings';
+
 // Module: Contact Name
 
 .module-contact-name__profile-name {

src/main/ipc.js

@@ -1,6 +1,6 @@
 module.exports = { init }
 
-const { app, ipcMain } = require('electron')
+const { app, ipcMain, dialog } = require('electron')
 const rimraf = require('rimraf')
 const path = require('path')
 const fs = require('fs')
@@ -173,11 +173,34 @@ function init (cwd, state, logHandler) {
     e.returnValue = app.localeData
   })
 
-  ipcMain.on('updateDesktopSetting', (e, key, value) => {
+  const updateDesktopSetting = (e, key, value) => {
     const { saved } = app.state
     saved[key] = value
     app.saveState({ saved })
     render()
+  }
+  ipcMain.on('updateDesktopSetting', updateDesktopSetting)
+
+  ipcMain.on('selectBackgroundImage', (e) => {
+    dialog.showOpenDialog(undefined, {
+      title: 'Select Background Image',
+      filters: [
+        { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
+        { name: 'All Files', extensions: ['*'] }
+      ],
+      properties: ['openFile']
+    }, (filenames) => {
+      if (!filenames) { return }
+      log.info('BG-IMG Selected File:', filenames[0])
+      const newPath = path.join(getConfigPath(), 'background' + path.extname(filenames[0]))
+      fs.copyFile(filenames[0], newPath, (err) => {
+        if (err) {
+          log.error('BG-IMG Copy Failed', err)
+          return
+        }
+        updateDesktopSetting(null, 'chatViewBgImg', `url("${newPath}")`)
+      })
+    })
   })
 
   ipcMain.on('updateCredentials', (e, credentials) => {

src/main/state.js

@@ -38,7 +38,8 @@ function getDefaultState () {
       showNotificationContent: true,
       locale: 'en',
       credentials: null,
-      enableOnDemandLocationStreaming: false
+      enableOnDemandLocationStreaming: false,
+      chatViewBgImgPath: undefined
     }
   }
 }

src/renderer/ThemeBackend.js

@@ -209,6 +209,7 @@ export function ThemeDataBuilder (theme) {
     themeData = Object.assign(themeData, theme.raw)
     log.debug('theme.raw', theme.raw, themeData)
   }
+
   return themeData
 }
 

src/renderer/components/ChatView.js

@@ -9,6 +9,7 @@ const MessageWrapper = require('./MessageWrapper')
 const log = require('../../logger').getLogger('renderer/chatView')
 
 const { isDisplayableByRenderMedia } = require('./Attachment')
+const SettingsContext = require('../contexts/SettingsContext')
 
 const MutationObserver = window.MutationObserver
 
@@ -23,7 +24,7 @@ const ChatViewWrapper = styled.div`
   margin-top: 50px;
   background-image: ${props => props.theme.chatViewBgImgPath};
   background-size: cover;
-  background-color: ${props => props.theme.chatViewBg};
+  background-color: var(--chatViewBg);
 
 }
 `
@@ -242,36 +243,44 @@ class ChatView extends React.Component {
   render () {
     const { onDeadDropClick, chat } = this.props
     return (
-      <ChatViewWrapper
-        style={{ gridTemplateRows: `auto ${this.state.composerSize}px` }}
-        ref={this.ChatViewWrapperRef} onDrop={this.onDrop.bind({ props: { chat } })} onDragOver={this.onDragOver} >
-        <ConversationWrapper>
-          <div id='the-conversation' ref={this.conversationDiv}>
-            <ul>
-              {chat.messages.map(rawMessage => {
-                const message = MessageWrapper.convert(rawMessage)
-                message.onReply = () => log.debug('reply to', message)
-                message.onForward = this.onForward.bind(this, message)
-                return MessageWrapper.render({
-                  message,
-                  chat,
-                  onClickContactRequest: () => onDeadDropClick(message),
-                  onClickSetupMessage: this.onClickSetupMessage.bind(this, message),
-                  onShowDetail: this.onShowDetail.bind(this, message),
-                  onClickAttachment: this.onClickAttachment.bind(this, message)
-                })
-              })}
-            </ul>
-          </div>
-        </ConversationWrapper>
-        <Composer
-          ref={this.refComposer}
-          chatId={chat.id}
-          draft={chat.draft}
-          onSubmit={this.writeMessage}
-          setComposerSize={this.setComposerSize.bind(this)}
-        />
-      </ChatViewWrapper>
+      <SettingsContext.Consumer>
+        {(settings) => (
+          <ChatViewWrapper
+            style={{
+              gridTemplateRows: `auto ${this.state.composerSize}px`,
+              background: settings['chatViewBgImg'],
+              backgroundSize: 'cover'
+            }}
+            ref={this.ChatViewWrapperRef} onDrop={this.onDrop.bind({ props: { chat } })} onDragOver={this.onDragOver} >
+            <ConversationWrapper>
+              <div id='the-conversation' ref={this.conversationDiv}>
+                <ul>
+                  {chat.messages.map(rawMessage => {
+                    const message = MessageWrapper.convert(rawMessage)
+                    message.onReply = () => log.debug('reply to', message)
+                    message.onForward = this.onForward.bind(this, message)
+                    return MessageWrapper.render({
+                      message,
+                      chat,
+                      onClickContactRequest: () => onDeadDropClick(message),
+                      onClickSetupMessage: this.onClickSetupMessage.bind(this, message),
+                      onShowDetail: this.onShowDetail.bind(this, message),
+                      onClickAttachment: this.onClickAttachment.bind(this, message)
+                    })
+                  })}
+                </ul>
+              </div>
+            </ConversationWrapper>
+            <Composer
+              ref={this.refComposer}
+              chatId={chat.id}
+              draft={chat.draft}
+              onSubmit={this.writeMessage}
+              setComposerSize={this.setComposerSize.bind(this)}
+            />
+          </ChatViewWrapper>
+        )}
+      </SettingsContext.Consumer>
     )
   }
 }

src/renderer/components/dialogs/Settings.js

@@ -309,6 +309,10 @@ export default class Settings extends React.Component {
             <H5>{this.translate('pref_experimental_features')}</H5>
             { this.renderDTSettingSwitch('enableOnDemandLocationStreaming', this.translate('pref_on_demand_location_streaming')) }
           </Card>
+          <Card elevation={Elevation.ONE}>
+            <H5>{this.translate('pref_background')}</H5>
+            <BackgroundSelector onChange={(val) => this.handleDesktopSettingsChange('chatViewBgImg', val)} />
+          </Card>
         </div>
       )
     } else if (this.state.show === 'login') {
@@ -363,3 +367,68 @@ export default class Settings extends React.Component {
     )
   }
 }
+
+class BackgroundSelector extends React.Component {
+  constructor () {
+    super()
+    this.fileInput = React.createRef()
+    this.colorInput = React.createRef()
+  }
+
+  render () {
+    const tx = window.translate
+    return (<div style={{ display: 'flex' }}>
+      <SettingsContext.Consumer>
+        {(settings) => (
+          <div
+            style={{ background: settings['chatViewBgImg'], backgroundSize: 'cover' }}
+            aria-label={tx('a11y_background_preview_label')}
+            className={'background-preview'}
+          />
+        )}
+      </SettingsContext.Consumer>
+      <div className={'background-options'}>
+        <button onClick={this.onButton.bind(this, 'def')}>{tx('pref_background_default')}</button>
+        <button onClick={this.onButton.bind(this, 'def_color')}>{tx('pref_background_default_color')}</button>
+        <button onClick={this.onButton.bind(this, 'image')}>{tx('pref_background_custom')}</button>
+        <button onClick={this.onButton.bind(this, 'color')}>{tx('pref_background_custom_color')}</button>
+      </div>
+      <div hidden>
+        <input
+          type={'color'}
+          onChange={this.onColor.bind(this)}
+          ref={this.colorInput} /> // todo put this somewhere where it isn't closed by react rerender imidiately
+      </div>
+    </div>
+    )
+  }
+
+  setValue (val) {
+    this.props.onChange(val)
+  }
+
+  onButton (type, ev) {
+    switch (type) {
+      case 'def':
+        this.setValue(undefined)
+        break
+      case 'def_color':
+        this.setValue('var(--chatViewBg)')
+        break
+      case 'image':
+        ipcRenderer.send('selectBackgroundImage')
+        break
+      case 'color':
+        this.colorInput.current && this.colorInput.current.click()
+        break
+      default:
+        /* ignore-console-log */
+        console.error("this shouldn't happen")
+    }
+  }
+
+  onColor (ev) {
+    // TODO debounce
+    this.setValue(ev.target.value)
+  }
+}