From fbe509b9303c5d5cf618ed3a34c9ad0ccec77b4e Mon Sep 17 00:00:00 2001 From: Torjus Date: Mon, 30 Jul 2018 16:33:06 +0200 Subject: [PATCH] Minor styling improvements to the file sharing tab --- app/lib/RoomClient.js | 16 ++--- app/lib/components/FileSharing/FileEntry.jsx | 50 ++++++++-------- app/lib/components/FileSharing/index.jsx | 20 ++++--- app/lib/redux/reducers/chatmessages.js | 3 +- app/lib/redux/reducers/sharing.js | 18 +++--- app/lib/redux/requestActions.js | 7 +-- app/lib/redux/stateActions.js | 2 +- app/resources/images/download-icon.svg | 4 ++ app/resources/images/save-icon.svg | 4 ++ app/stylus/components/FileSharing.styl | 61 ++++++++++++++++++++ app/stylus/index.styl | 1 + 11 files changed, 130 insertions(+), 56 deletions(-) create mode 100644 app/resources/images/download-icon.svg create mode 100644 app/resources/images/save-icon.svg create mode 100644 app/stylus/components/FileSharing.styl diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index c15bee4..5ae52af 100644 --- a/app/lib/RoomClient.js +++ b/app/lib/RoomClient.js @@ -211,14 +211,14 @@ export default class RoomClient return this._protoo.send('send-file', { file }) .catch((error) => - { - logger.error('sendFile() | failed: %o', error); + { + logger.error('sendFile() | failed: %o', error); - this._dispatch(requestActions.notify({ - typ: 'error', - text: 'An error occurred while sharing a file' - })); - }); + this._dispatch(requestActions.notify({ + typ : 'error', + text : 'An error occurred while sharing a file' + })); + }); } getChatHistory() @@ -1171,7 +1171,7 @@ export default class RoomClient this._dispatch(stateActions.addFile(payload)); this._dispatch(requestActions.notify({ - text: `${payload.name} shared a file` + text : `${payload.name} shared a file` })); break; diff --git a/app/lib/components/FileSharing/FileEntry.jsx b/app/lib/components/FileSharing/FileEntry.jsx index 96af9d7..cbe5fc8 100644 --- a/app/lib/components/FileSharing/FileEntry.jsx +++ b/app/lib/components/FileSharing/FileEntry.jsx @@ -5,6 +5,8 @@ import * as requestActions from '../../redux/requestActions'; import { saveAs } from 'file-saver/FileSaver'; import { client } from './index'; +const DEFAULT_PICTURE = 'resources/images/avatar-empty.jpeg'; + class FileEntry extends Component { state = { @@ -91,28 +93,30 @@ class FileEntry extends Component render() { return ( - -
+
+ + +
+ {this.props.data.me ? ( +

You shared a file.

+ ) : ( +

{this.props.data.name} shared a file.

+ )} + {!this.state.active && !this.state.files && ( - - {this.props.data.me ? ( -

You shared a file.

- ) : ( -

A new file was shared.

- )} +
+ + +

{magnet.decode(this.props.data.file.magnet).dn}

- - - +
)} {this.state.active && this.state.numPeers === 0 && ( -
+

Locating peers -

+

)} {this.state.active && this.state.numPeers > 0 && ( @@ -120,22 +124,22 @@ class FileEntry extends Component )} {this.state.files && ( -
+

Torrent finished downloading.

{this.state.files.map((file, i) => ( -
- {file.name} +
+ this.saveFile(file)}> + + - +

{file.name}

))} -
+ )}
- +
); } } diff --git a/app/lib/components/FileSharing/index.jsx b/app/lib/components/FileSharing/index.jsx index 3d93835..b1a46b7 100644 --- a/app/lib/components/FileSharing/index.jsx +++ b/app/lib/components/FileSharing/index.jsx @@ -25,7 +25,7 @@ const notifyPeers = (file) => store.dispatch(requestActions.sendFile(file, displayName, picture)); }; -const shareFiles = async (files) => +const shareFiles = async(files) => { const notification = { @@ -98,8 +98,8 @@ class FileSharing extends Component render() { return ( -
-
+
+
- + Share file +
-
- {this.props.sharing.map((entry) => ( +
+ {this.props.sharing.map((entry, i) => ( ))}
@@ -130,7 +132,7 @@ class FileSharing extends Component const mapStateToProps = (state) => ({ - sharing: state.sharing + sharing : state.sharing }); export default connect( diff --git a/app/lib/redux/reducers/chatmessages.js b/app/lib/redux/reducers/chatmessages.js index 7896ccb..e9ed22f 100644 --- a/app/lib/redux/reducers/chatmessages.js +++ b/app/lib/redux/reducers/chatmessages.js @@ -1,7 +1,6 @@ import { - createNewMessage, - createNewFile + createNewMessage } from './helper'; const chatmessages = (state = [], action) => diff --git a/app/lib/redux/reducers/sharing.js b/app/lib/redux/reducers/sharing.js index 7243b2d..270844f 100644 --- a/app/lib/redux/reducers/sharing.js +++ b/app/lib/redux/reducers/sharing.js @@ -1,16 +1,16 @@ const sharing = (state = [], action) => { - switch (action.type) - { - case 'SEND_FILE': - return [ ...state, { ...action.payload, me: true }]; + switch (action.type) + { + case 'SEND_FILE': + return [ ...state, { ...action.payload, me: true } ]; - case 'ADD_FILE': - return [ ...state, action.payload ]; + case 'ADD_FILE': + return [ ...state, action.payload ]; - default: - return state; - } + default: + return state; + } }; export default sharing; \ No newline at end of file diff --git a/app/lib/redux/requestActions.js b/app/lib/redux/requestActions.js index e892bbf..6ad7fbc 100644 --- a/app/lib/redux/requestActions.js +++ b/app/lib/redux/requestActions.js @@ -2,8 +2,7 @@ import randomString from 'random-string'; import * as stateActions from './stateActions'; import { - createNewMessage, - createNewFile + createNewMessage } from './reducers/helper'; export const joinRoom = ( @@ -217,8 +216,8 @@ export const sendChatMessage = (text, name, picture) => export const sendFile = (file, name, picture) => { return { - type: 'SEND_FILE', - payload: { file, name, picture } + type : 'SEND_FILE', + payload : { file, name, picture } }; }; diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index 832a55c..a83e25c 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -444,7 +444,7 @@ export const dropMessages = () => export const addFile = (payload) => { return { - type: 'ADD_FILE', + type : 'ADD_FILE', payload }; }; diff --git a/app/resources/images/download-icon.svg b/app/resources/images/download-icon.svg new file mode 100644 index 0000000..f97c18f --- /dev/null +++ b/app/resources/images/download-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/resources/images/save-icon.svg b/app/resources/images/save-icon.svg new file mode 100644 index 0000000..ecd9ab5 --- /dev/null +++ b/app/resources/images/save-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl new file mode 100644 index 0000000..5af968d --- /dev/null +++ b/app/stylus/components/FileSharing.styl @@ -0,0 +1,61 @@ +[data-component='FileSharing'] { + > .sharing-toolbar { + > .share-file { + cursor: pointer; + width: 100%; + background: #252525; + border: 1px solid #151515; + padding: 1rem; + border-bottom: 5px solid #151515; + border-radius: 3px 3px 0 0; + } + } + + > .shared-files { + > .file-entry { + background-color: rgba(0,0,0,0.1); + border-radius: 5px; + width: 100%; + padding: 0.5rem; + display: flex; + margin-top: 0.5rem; + + > .file-avatar { + height: 2rem; + border-radius: 50%; + } + + > .file-content { + flex-grow: 1; + padding-left: 0.5rem; + + > p:not(:first-child) { + margin-top: 0.5rem; + } + + > .file-info { + display: flex; + padding-top: 0.5rem; + align-items: center; + + > .button { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background: #252525; + border: 1px solid #151515; + padding: 0.3rem; + border-bottom: 5px solid #151515; + border-radius: 3px 3px 0 0; + } + + > p { + flex-grow: 1; + padding-left: 0.5rem; + } + } + } + } + } +} \ No newline at end of file diff --git a/app/stylus/index.styl b/app/stylus/index.styl index 5e67e46..328df97 100644 --- a/app/stylus/index.styl +++ b/app/stylus/index.styl @@ -51,6 +51,7 @@ body { @import './components/FullScreenView'; @import './components/FullView'; @import './components/Filmstrip'; + @import './components/FileSharing'; } // Hack to detect in JS the current media query