e2m
/
dispatch
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Scroll text inputs into view, use red labels in text inputs when theres an error, only autocapitalize the name field

This commit is contained in:
Ken-Håvard Lieng 2018-06-03 06:18:03 +02:00
parent f5de115534
commit d2c1297cf7
12 changed files with 204 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/bindata.go
View File

File diff suppressed because one or more lines are too long

1
client/package.json
View File

@ -52,6 +52,7 @@
"autolinker": "^1.4.3",
"backo": "^1.1.0",
"base64-arraybuffer": "^0.1.5",
"classnames": "^2.2.5",
"es6-promise": "^4.2.4",
"fontfaceobserver": "^2.0.9",
"formik": "1.0.0-beta.1",

2
client/src/css/style.css
View File

@ -91,7 +91,7 @@ i[class*=' icon-']:before {
pointer-events: none;
user-select: none;
transform: translateZ(0);
transition: all 0.2s;
transition: all 0.2s, color 0s;
color: #777;
}

9
client/src/js/components/App.js
View File

@ -4,6 +4,7 @@ import Chat from 'containers/Chat';
import Connect from 'containers/Connect';
import Settings from 'containers/Settings';
import TabList from 'components/TabList';
import classnames from 'classnames';
export default class App extends Component {
handleClick = () => {
@ -24,9 +25,11 @@ export default class App extends Component {
select,
push
} = this.props;
const mainClass = showTabList
? 'main-container off-canvas'
: 'main-container';
const mainClass = classnames('main-container', {
'off-canvas': showTabList
});
return (
<div className="wrap">
{!connected && (

6
client/src/js/components/TabList.js
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import TabListItem from './TabListItem';
export default class TabList extends PureComponent {
@ -8,9 +9,12 @@ export default class TabList extends PureComponent {
render() {
const { tab, channels, servers, privateChats, showTabList } = this.props;
const className = showTabList ? 'tablist off-canvas' : 'tablist';
const tabs = [];
const className = classnames('tablist', {
'off-canvas': showTabList
});
channels.forEach(server => {
const { address } = server;
const srv = servers[address];

24
client/src/js/components/TabListItem.js
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react';
import classnames from 'classnames';
export default class TabListItem extends PureComponent {
handleClick = () => {
@ -8,25 +9,16 @@ export default class TabListItem extends PureComponent {
render() {
const { target, content, selected, connected } = this.props;
const classes = [];
const style = {};
if (!target) {
classes.push('tab-server');
if (connected) {
classes.push('success');
} else {
classes.push('error');
}
}
if (selected) {
classes.push('selected');
}
const className = classnames({
'tab-server': !target,
success: !target && connected,
error: !target && !connected,
selected
});
return (
<p className={classes.join(' ')} style={style} onClick={this.handleClick}>
<p className={className} onClick={this.handleClick}>
<span className="tab-content">{content}</span>
</p>
);

9
client/src/js/components/pages/Chat/Message.js
View File

@ -1,13 +1,16 @@
import React, { PureComponent } from 'react';
import classnames from 'classnames';
export default class Message extends PureComponent {
handleNickClick = () => this.props.onNickClick(this.props.message.from);
render() {
const { message } = this.props;
const className = message.type
? `message message-${message.type}`
: 'message';
const className = classnames('message', {
[`message-${message.type}`]: message.type
});
const style = {
paddingLeft: `${window.messageIndent + 15}px`,
textIndent: `-${window.messageIndent}px`,

10
client/src/js/components/pages/Chat/MessageInput.js
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import Editable from 'components/ui/Editable';
import { isValidNick } from 'utils';
@ -51,14 +52,13 @@ export default class MessageInput extends PureComponent {
onNickChange,
onNickEditDone
} = this.props;
return (
<div className="message-input-wrap">
<Editable
className={
isValidNick(nick)
? 'message-input-nick'
: 'message-input-nick invalid'
}
className={classnames('message-input-nick', {
invalid: !isValidNick(nick)
})}
value={nick}
onBlur={onNickEditDone}
onChange={onNickChange}

6
client/src/js/components/pages/Chat/UserList.js
View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react';
import { List } from 'react-virtualized/dist/commonjs/List';
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
import classnames from 'classnames';
import UserListItem from './UserListItem';
export default class UserList extends PureComponent {
@ -29,7 +30,10 @@ export default class UserList extends PureComponent {
render() {
const { users, showUserList } = this.props;
const className = showUserList ? 'userlist off-canvas' : 'userlist';
const className = classnames('userlist', {
'off-canvas': showUserList
});
return (
<div className={className}>

2
client/src/js/components/pages/Connect.js
View File

@ -73,7 +73,7 @@ class Connect extends Component {
form = (
<Form className="connect-form">
<h1>Connect</h1>
<TextInput name="name" placeholder="Name" />
<TextInput name="name" placeholder="Name" autoCapitalize="words" />
<div className="connect-form-address">
<TextInput name="host" placeholder="Host" />
<TextInput name="port" type="number" placeholder="Port" />

104
client/src/js/components/ui/TextInput.js
View File

@ -1,30 +1,80 @@
import React from 'react';
import React, { PureComponent } from 'react';
import { Field } from 'formik';
import classnames from 'classnames';
const TextInput = ({ name, placeholder, ...props }) => (
<Field
name={name}
render={({ field }) => (
<div className="textinput">
<input
className={field.value ? 'value' : null}
type="text"
name={name}
autoCorrect="off"
autoComplete="off"
spellCheck="false"
{...field}
{...props}
/>
<span className={field.value ? 'textinput-1 value' : 'textinput-1'}>
{placeholder}
</span>
<span className={field.value ? 'textinput-2 value' : 'textinput-2'}>
{placeholder}
</span>
</div>
)}
/>
);
export default class TextInput extends PureComponent {
constructor(props) {
super(props);
this.input = React.createRef();
window.addEventListener('resize', this.handleResize);
}
export default TextInput;
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize = () => {
if (this.scroll) {
this.scroll = false;
this.scrollIntoView();
}
};
handleFocus = () => {
this.scroll = true;
setTimeout(() => {
this.scroll = false;
}, 2000);
};
scrollIntoView = () => {
if (this.input.current.scrollIntoViewIfNeeded) {
this.input.current.scrollIntoViewIfNeeded();
} else {
this.input.current.scrollIntoView();
}
};
render() {
const { name, placeholder, ...props } = this.props;
return (
<Field
name={name}
render={({ field, form }) => (
<div className="textinput">
<input
className={field.value && 'value'}
type="text"
name={name}
autoCapitalize="off"
autoCorrect="off"
autoComplete="off"
spellCheck="false"
ref={this.input}
onFocus={this.handleFocus}
{...field}
{...props}
/>
<span
className={classnames('textinput-1', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}
>
{placeholder}
</span>
<span
className={classnames('textinput-2', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}
>
{placeholder}
</span>
</div>
)}
/>
);
}
}

160
client/yarn.lock
View File

@ -2062,7 +2062,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.3:
classnames@^2.2.3, classnames@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
@ -3152,15 +3152,15 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
dependencies:
homedir-polyfill "^1.0.1"
expect@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/expect/-/expect-23.0.1.tgz#99131f2fd9115595f8cc3697401e7f0734d45fef"
expect@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/expect/-/expect-23.1.0.tgz#bfdfd57a2a20170d875999ee9787cc71f01c205f"
dependencies:
ansi-styles "^3.2.0"
jest-diff "^23.0.1"
jest-get-type "^22.1.0"
jest-matcher-utils "^23.0.1"
jest-message-util "^23.0.0"
jest-message-util "^23.1.0"
jest-regex-util "^23.0.0"
express-http-proxy@^1.2.0:
@ -4517,8 +4517,8 @@ jest-changed-files@^23.0.1:
throat "^4.0.0"
jest-cli@^23.1.0:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-23.0.1.tgz#351a5ba51cf28ecf20336d97a30b970d1f530a56"
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-23.1.0.tgz#eb8bdd4ce0d15250892e31ad9b69bc99d2a8f6bf"
dependencies:
ansi-escapes "^3.0.0"
chalk "^2.0.1"
@ -4532,18 +4532,19 @@ jest-cli@^23.1.0:
istanbul-lib-instrument "^1.10.1"
istanbul-lib-source-maps "^1.2.4"
jest-changed-files "^23.0.1"
jest-config "^23.0.1"
jest-environment-jsdom "^23.0.1"
jest-config "^23.1.0"
jest-environment-jsdom "^23.1.0"
jest-get-type "^22.1.0"
jest-haste-map "^23.0.1"
jest-message-util "^23.0.0"
jest-haste-map "^23.1.0"
jest-message-util "^23.1.0"
jest-regex-util "^23.0.0"
jest-resolve-dependencies "^23.0.1"
jest-runner "^23.0.1"
jest-runtime "^23.0.1"
jest-runner "^23.1.0"
jest-runtime "^23.1.0"
jest-snapshot "^23.0.1"
jest-util "^23.0.1"
jest-util "^23.1.0"
jest-validate "^23.0.1"
jest-watcher "^23.1.0"
jest-worker "^23.0.1"
micromatch "^2.3.11"
node-notifier "^5.2.1"
@ -4555,21 +4556,21 @@ jest-cli@^23.1.0:
which "^1.2.12"
yargs "^11.0.0"
jest-config@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-23.0.1.tgz#6798bff1247c7a390b1327193305001582fc58fa"
jest-config@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-23.1.0.tgz#708ca0f431d356ee424fb4895d3308006bdd8241"
dependencies:
babel-core "^6.0.0"
babel-jest "^23.0.1"
chalk "^2.0.1"
glob "^7.1.1"
jest-environment-jsdom "^23.0.1"
jest-environment-node "^23.0.1"
jest-environment-jsdom "^23.1.0"
jest-environment-node "^23.1.0"
jest-get-type "^22.1.0"
jest-jasmine2 "^23.0.1"
jest-jasmine2 "^23.1.0"
jest-regex-util "^23.0.0"
jest-resolve "^23.0.1"
jest-util "^23.0.1"
jest-resolve "^23.1.0"
jest-util "^23.1.0"
jest-validate "^23.0.1"
pretty-format "^23.0.1"
@ -4592,35 +4593,35 @@ jest-docblock@^23.0.1:
dependencies:
detect-newline "^2.1.0"
jest-each@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-23.0.1.tgz#a6e5dbf530afc6bf9d74792dde69d8db70f84706"
jest-each@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-23.1.0.tgz#16146b592c354867a5ae5e13cdf15c6c65b696c6"
dependencies:
chalk "^2.0.1"
pretty-format "^23.0.1"
jest-environment-jsdom@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-23.0.1.tgz#da689eb9358dc16e5708abb208f4eb26a439575c"
jest-environment-jsdom@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-23.1.0.tgz#85929914e23bed3577dac9755f4106d0697c479c"
dependencies:
jest-mock "^23.0.1"
jest-util "^23.0.1"
jest-mock "^23.1.0"
jest-util "^23.1.0"
jsdom "^11.5.1"
jest-environment-node@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-23.0.1.tgz#676b740e205f1f2be77241969e7812be824ee795"
jest-environment-node@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-23.1.0.tgz#452c0bf949cfcbbacda1e1762eeed70bc784c7d5"
dependencies:
jest-mock "^23.0.1"
jest-util "^23.0.1"
jest-mock "^23.1.0"
jest-util "^23.1.0"
jest-get-type@^22.1.0:
version "22.4.3"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
jest-haste-map@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-23.0.1.tgz#cd89052abfc8cba01f560bbec09d4f36aec25d4f"
jest-haste-map@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-23.1.0.tgz#18e6c7d5a8d27136f91b7d9852f85de0c7074c49"
dependencies:
fb-watchman "^2.0.0"
graceful-fs "^4.1.11"
@ -4630,20 +4631,20 @@ jest-haste-map@^23.0.1:
micromatch "^2.3.11"
sane "^2.0.0"
jest-jasmine2@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-23.0.1.tgz#16d875356e6360872bba48426f7d31fdc1b0bcea"
jest-jasmine2@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-23.1.0.tgz#4afab31729b654ddcd2b074add849396f13b30b8"
dependencies:
chalk "^2.0.1"
co "^4.6.0"
expect "^23.0.1"
expect "^23.1.0"
is-generator-fn "^1.0.0"
jest-diff "^23.0.1"
jest-each "^23.0.1"
jest-each "^23.1.0"
jest-matcher-utils "^23.0.1"
jest-message-util "^23.0.0"
jest-message-util "^23.1.0"
jest-snapshot "^23.0.1"
jest-util "^23.0.1"
jest-util "^23.1.0"
pretty-format "^23.0.1"
jest-leak-detector@^23.0.1:
@ -4660,9 +4661,9 @@ jest-matcher-utils@^23.0.1:
jest-get-type "^22.1.0"
pretty-format "^23.0.1"
jest-message-util@^23.0.0:
version "23.0.0"
resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.0.0.tgz#073f3d76c701f7c718a4b9af1eb7f138792c4796"
jest-message-util@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.1.0.tgz#9a809ba487ecac5ce511d4e698ee3b5ee2461ea9"
dependencies:
"@babel/code-frame" "^7.0.0-beta.35"
chalk "^2.0.1"
@ -4670,9 +4671,9 @@ jest-message-util@^23.0.0:
slash "^1.0.0"
stack-utils "^1.0.1"
jest-mock@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-23.0.1.tgz#1569f477968c668fc728273a17c3767773b46357"
jest-mock@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-23.1.0.tgz#a381c31b121ab1f60c462a2dadb7b86dcccac487"
jest-regex-util@^23.0.0:
version "23.0.0"
@ -4685,35 +4686,35 @@ jest-resolve-dependencies@^23.0.1:
jest-regex-util "^23.0.0"
jest-snapshot "^23.0.1"
jest-resolve@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.0.1.tgz#3f8403462b10a34c2df1d47aab5574c4935bcd24"
jest-resolve@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.1.0.tgz#b9e316eecebd6f00bc50a3960d1527bae65792d2"
dependencies:
browser-resolve "^1.11.2"
chalk "^2.0.1"
realpath-native "^1.0.0"
jest-runner@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-23.0.1.tgz#b176ae3ecf9e194aa4b84a7fcf70d1b8db231aa7"
jest-runner@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-23.1.0.tgz#fa20a933fff731a5432b3561e7f6426594fa29b5"
dependencies:
exit "^0.1.2"
graceful-fs "^4.1.11"
jest-config "^23.0.1"
jest-config "^23.1.0"
jest-docblock "^23.0.1"
jest-haste-map "^23.0.1"
jest-jasmine2 "^23.0.1"
jest-haste-map "^23.1.0"
jest-jasmine2 "^23.1.0"
jest-leak-detector "^23.0.1"
jest-message-util "^23.0.0"
jest-runtime "^23.0.1"
jest-util "^23.0.1"
jest-message-util "^23.1.0"
jest-runtime "^23.1.0"
jest-util "^23.1.0"
jest-worker "^23.0.1"
source-map-support "^0.5.6"
throat "^4.0.0"
jest-runtime@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-23.0.1.tgz#b1d765fb03fb6d4043805af270676a693f504d57"
jest-runtime@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-23.1.0.tgz#b4ae0e87259ecacfd4a884b639db07cf4dd620af"
dependencies:
babel-core "^6.0.0"
babel-plugin-istanbul "^4.1.6"
@ -4722,13 +4723,13 @@ jest-runtime@^23.0.1:
exit "^0.1.2"
fast-json-stable-stringify "^2.0.0"
graceful-fs "^4.1.11"
jest-config "^23.0.1"
jest-haste-map "^23.0.1"
jest-message-util "^23.0.0"
jest-config "^23.1.0"
jest-haste-map "^23.1.0"
jest-message-util "^23.1.0"
jest-regex-util "^23.0.0"
jest-resolve "^23.0.1"
jest-resolve "^23.1.0"
jest-snapshot "^23.0.1"
jest-util "^23.0.1"
jest-util "^23.1.0"
jest-validate "^23.0.1"
micromatch "^2.3.11"
realpath-native "^1.0.0"
@ -4752,16 +4753,17 @@ jest-snapshot@^23.0.1:
natural-compare "^1.4.0"
pretty-format "^23.0.1"
jest-util@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-23.0.1.tgz#68ea5bd7edb177d3059f9797259f8e0dacce2f99"
jest-util@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-23.1.0.tgz#c0251baf34644c6dd2fea78a962f4263ac55772d"
dependencies:
callsites "^2.0.0"
chalk "^2.0.1"
graceful-fs "^4.1.11"
is-ci "^1.0.10"
jest-message-util "^23.0.0"
jest-message-util "^23.1.0"
mkdirp "^0.5.1"
slash "^1.0.0"
source-map "^0.6.0"
jest-validate@^23.0.1:
@ -4773,6 +4775,14 @@ jest-validate@^23.0.1:
leven "^2.1.0"
pretty-format "^23.0.1"
jest-watcher@^23.1.0:
version "23.1.0"
resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-23.1.0.tgz#a8d5842e38d9fb4afff823df6abb42a58ae6cdbd"
dependencies:
ansi-escapes "^3.0.0"
chalk "^2.0.1"
string-length "^2.0.0"
jest-worker@^23.0.1:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-23.0.1.tgz#9e649dd963ff4046026f91c4017f039a6aa4a7bc"