diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/src/components/Avatar.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Contact.js | 4 | ||||
| -rw-r--r-- | vnext/src/components/Contacts.js | 24 | ||||
| -rw-r--r-- | vnext/src/components/Settings.js | 4 | ||||
| -rw-r--r-- | vnext/src/components/Spinner.js | 16 |
5 files changed, 30 insertions, 20 deletions
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js index 4c3ac0b6..002badde 100644 --- a/vnext/src/components/Avatar.js +++ b/vnext/src/components/Avatar.js @@ -8,7 +8,7 @@ import Icon from './Icon'; const Avatar = React.memo(props => { return ( - <div style={{ display: 'flex', padding: '12px' }}> + <div style={Object.assign({ display: 'flex', padding: '12px' }, props.style)}> <div className="msg-avatar"> { props.user.uname ? diff --git a/vnext/src/components/Contact.js b/vnext/src/components/Contact.js index 4b8901a8..dd68d338 100644 --- a/vnext/src/components/Contact.js +++ b/vnext/src/components/Contact.js @@ -3,9 +3,9 @@ import { UserType } from './Types'; import Avatar from './Avatar'; -const Contact = React.memo(({ user, ...rest }) => { +const Contact = React.memo(({ user, style, ...rest }) => { return ( - <Avatar user={user} link={`/pm/${user.uname}`}> + <Avatar user={user} link={`/pm/${user.uname}`} style={style}> {user.unreadCount && <span className="badge">{user.unreadCount}</span>} <div className="msg-ts">{user.lastMessageText}</div> </Avatar> diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js index 84a6ec9f..bdbc5a01 100644 --- a/vnext/src/components/Contacts.js +++ b/vnext/src/components/Contacts.js @@ -4,6 +4,7 @@ import { getChats } from '../api'; import Contact from './Contact.js'; +import { ChatSpinner } from './Spinner'; export default class Contacts extends React.Component { constructor(props) { @@ -28,17 +29,13 @@ export default class Contacts extends React.Component { render() { const { pms } = this.state; return ( - <div className="msgs"> - <div style={wrapperStyle} className="msg-cont"> - <ul style={chatListStyle}> - { - pms && pms.map((chat) => - <li key={chat.uname} style={chatTitleStyle}> - <Contact key={chat.uname} user={chat} /> - </li> - ) - } - </ul> + <div className="msg-cont"> + <div style={chatListStyle}> + { + pms.length ? pms.map((chat) => + <Contact key={chat.uname} user={chat} style={chatTitleStyle} /> + ) : <><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /></> + } </div> </div> ); @@ -51,17 +48,14 @@ const wrapperStyle = { }; const chatListStyle = { - boxSizing: 'border-box', - padding: '0 20px', display: 'flex', - alignItems: 'center', flexDirection: 'column', width: '100%' }; const chatTitleStyle = { width: '100%', - padding: '3px 6px', + padding: '12px', textAlign: 'left', background: '#fff', color: '#222', diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js index 14c81e38..06550194 100644 --- a/vnext/src/components/Settings.js +++ b/vnext/src/components/Settings.js @@ -68,7 +68,7 @@ export default class Settings extends React.Component { render() { const { me } = this.state; return ( - <article> + <div className="msg-cont"> <h1>Settings</h1> <fieldset> <legend>Changing your avatar</legend> @@ -231,7 +231,7 @@ export default class Settings extends React.Component { } </fieldset> - </article> + </div> ); } } diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js index a11426df..fffa2c80 100644 --- a/vnext/src/components/Spinner.js +++ b/vnext/src/components/Spinner.js @@ -20,3 +20,19 @@ export default function Spinner(props) { </div> ); } + +export function ChatSpinner(props) { + return ( + <ContentLoader + speed={2} + primaryColor="#f8f8f8" + secondaryColor="#ecebeb" + height="60px" + width="120px" + {...props}> + <rect x="56" y="6" rx="0" ry="0" width="117" height="6.4" /> + <rect x="56" y="20" rx="0" ry="0" width="85" height="6.4" /> + <rect x="0" y="0" rx="0" ry="0" width="48" height="48" /> + </ContentLoader> + ); +} |