Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Minor styling improvements to the file sharing tab

master
Torjus 2018-07-30 16:33:06 +02:00
parent 6042d305ac
commit fbe509b930
11 changed files with 130 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/lib/RoomClient.js
View File

@ -215,8 +215,8 @@ export default class RoomClient
logger.error('sendFile() | failed: %o', error);
this._dispatch(requestActions.notify({
typ: 'error',
text: 'An error occurred while sharing a file'
typ : 'error',
text : 'An error occurred while sharing a file'
}));
});
}
@ -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;

44
app/lib/components/FileSharing/FileEntry.jsx
View File

@ -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 (
<Fragment>
<div>
{!this.state.active && !this.state.files && (
<Fragment>
<div className='file-entry'>
<img className='file-avatar' src={this.props.data.picture || DEFAULT_PICTURE} />
<div className='file-content'>
{this.props.data.me ? (
<p>You shared a file.</p>
) : (
<p>A new file was shared.</p>
<p>{this.props.data.name} shared a file.</p>
)}
<p>{magnet.decode(this.props.data.file.magnet).dn}</p>
{!this.state.active && !this.state.files && (
<div className='file-info'>
<span className='button' onClick={this.download}>
<img src='resources/images/download-icon.svg' />
</span>
<button onClick={this.download}>
Download
</button>
</Fragment>
<p>{magnet.decode(this.props.data.file.magnet).dn}</p>
</div>
)}
{this.state.active && this.state.numPeers === 0 && (
<div>
<p>
Locating peers
</div>
</p>
)}
{this.state.active && this.state.numPeers > 0 && (
@ -120,22 +124,22 @@ class FileEntry extends Component
)}
{this.state.files && (
<div>
<Fragment>
<p>Torrent finished downloading.</p>
{this.state.files.map((file, i) => (
<div key={i}>
{file.name}
<div className='file-info' key={i}>
<span className='button' onClick={() => this.saveFile(file)}>
<img src='resources/images/save-icon.svg' />
</span>
<button onClick={() => this.saveFile(file)}>
Save
</button>
<p>{file.name}</p>
</div>
))}
</div>
</Fragment>
)}
</div>
</Fragment>
</div>
);
}
}

20
app/lib/components/FileSharing/index.jsx
View File

@ -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 (
<div>
<div>
<div data-component='FileSharing'>
<div className='sharing-toolbar'>
<input
style={{ display: 'none' }}
ref={this.fileInput}
@ -108,18 +108,20 @@ class FileSharing extends Component
multiple
/>
<button
<div
type='button'
onClick={this.handleClick}
className='share-file'
>
share file
</button>
<span>Share file</span>
</div>
</div>
<div>
{this.props.sharing.map((entry) => (
<div className='shared-files'>
{this.props.sharing.map((entry, i) => (
<FileEntry
data={entry}
key={i}
/>
))}
</div>
@ -130,7 +132,7 @@ class FileSharing extends Component
const mapStateToProps = (state) =>
({
sharing: state.sharing
sharing : state.sharing
});
export default connect(

3
app/lib/redux/reducers/chatmessages.js
View File

@ -1,7 +1,6 @@
import
{
createNewMessage,
createNewFile
createNewMessage
} from './helper';
const chatmessages = (state = [], action) =>

2
app/lib/redux/reducers/sharing.js
View File

@ -3,7 +3,7 @@ const sharing = (state = [], action) =>
switch (action.type)
{
case 'SEND_FILE':
return [ ...state, { ...action.payload, me: true }];
return [ ...state, { ...action.payload, me: true } ];
case 'ADD_FILE':
return [ ...state, action.payload ];

7
app/lib/redux/requestActions.js
View File

@ -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 }
};
};

2
app/lib/redux/stateActions.js
View File

@ -444,7 +444,7 @@ export const dropMessages = () =>
export const addFile = (payload) =>
{
return {
type: 'ADD_FILE',
type : 'ADD_FILE',
payload
};
};

4
app/resources/images/download-icon.svg 100644
View File

@ -0,0 +1,4 @@
<svg fill="#FFF" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

4
app/resources/images/save-icon.svg 100644
View File

@ -0,0 +1,4 @@
<svg fill="#FFF" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

61
app/stylus/components/FileSharing.styl 100644
View File

@ -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;
}
}
}
}
}
}

1
app/stylus/index.styl
View File

@ -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