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

Clean up some things

This commit is contained in:
Ken-Håvard Lieng 2018-05-25 04:12:02 +02:00
parent e2a895a1b9
commit e7cff1686e
9 changed files with 121 additions and 135 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

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

@ -29,13 +29,30 @@ input {
outline: none;
}
input::-ms-clear {
display: none;
}
button {
width: 100%;
height: 50px;
background: #6bb758;
color: #fff;
font: 16px Montserrat, sans-serif;
border: none;
outline: none;
user-select: none;
cursor: pointer;
}
button:hover {
background: #7bbf6a;
}
button:active {
background: #6bb758;
}
p {
line-height: 1.5;
}
@ -45,6 +62,11 @@ i[class*=' icon-']:before {
margin: 0;
}
::selection {
background: #ddd;
color: #000;
}
.success {
color: #6bb758 !important;
}
@ -59,13 +81,7 @@ i[class*=' icon-']:before {
}
.textinput input {
padding: 17.5px 15px;
}
.textinput input:focus,
.textinput input.value {
padding-top: 25px;
padding-bottom: 10px;
padding: 25px 15px 10px;
}
.textinput span {
@ -73,6 +89,7 @@ i[class*=' icon-']:before {
top: 0;
left: 0;
pointer-events: none;
user-select: none;
transform: translateZ(0);
transition: all 0.2s;
color: #777;
@ -144,6 +161,7 @@ i[class*=' icon-']:before {
color: #fff;
font-family: Montserrat, sans-serif;
transition: transform 0.2s;
user-select: none;
}
.tab-container {
@ -200,21 +218,6 @@ i[class*=' icon-']:before {
color: #999;
}
.button-connect {
width: 100%;
height: 50px;
background: #6bb758;
color: #fff;
}
.button-connect:hover {
background: #7bbf6a;
}
.button-connect:active {
background: #6bb758;
}
.side-buttons {
position: absolute;
bottom: 0;
@ -293,31 +296,26 @@ i[class*=' icon-']:before {
.connect-form input {
margin-top: 5px;
border: none;
}
.connect-form input[type='submit'],
.connect-form input[type='text'],
.connect-form input[type='password'] {
width: 100%;
}
.connect-form input[type='submit'] {
height: 50px;
margin-top: 0;
input[type='number'] {
appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
.connect-form label {
user-select: none;
cursor: default;
}
.connect-form button {
margin-bottom: 20px;
font-family: Montserrat, sans-serif;
background: #6bb758;
color: #fff;
cursor: pointer;
}
.connect-form input[type='submit']:hover {
background: #7bbf6a;
}
.connect-form input[type='submit']:active {
background: #6bb758;
}
.connect-form-address {
@ -426,15 +424,20 @@ i[class*=' icon-']:before {
}
.chat-title {
margin-left: 15px;
margin-left: 10px;
padding: 0 5px;
font: 24px Montserrat, sans-serif;
white-space: nowrap;
background: none;
line-height: 50px;
}
.chat-server .chat-title {
padding-right: 1px;
cursor: pointer;
}
input.chat-title {
background: none;
cursor: text !important;
}
.chat-topic-wrap {
@ -617,10 +620,19 @@ i[class*=' icon-']:before {
line-height: 30px;
height: 30px;
padding: 0 10px;
background: #6bb758 !important;
background: #6bb758;
color: #fff;
font-family: Montserrat, sans-serif !important;
margin-right: 0;
cursor: pointer;
}
input.message-input-nick {
cursor: text;
}
input.message-input-nick.invalid {
background: #f6546a;
}
.message-input {
@ -670,20 +682,9 @@ i[class*=' icon-']:before {
.settings button {
margin: 5px;
color: #fff;
background: #6bb758;
padding: 10px 20px;
width: 200px;
}
.settings button:hover {
background: #7bbf6a;
}
.settings button:active {
background: #6bb758;
}
.settings div {
display: inline-block;
}

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

@ -62,9 +62,7 @@ export default class TabList extends PureComponent {
return (
<div className={className}>
<button className="button-connect" onClick={this.handleConnectClick}>
Connect
</button>
<button onClick={this.handleConnectClick}>Connect</button>
<div className="tab-container">{tabs}</div>
<div className="side-buttons">
<i className="icon-user" />

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

@ -1,5 +1,6 @@
import React, { PureComponent } from 'react';
import Editable from 'components/ui/Editable';
import { isValidNick } from 'utils';
export default class MessageInput extends PureComponent {
state = {
@ -53,7 +54,11 @@ export default class MessageInput extends PureComponent {
return (
<div className="message-input-wrap">
<Editable
className="message-input-nick"
className={
isValidNick(nick)
? 'message-input-nick'
: 'message-input-nick invalid'
}
value={nick}
onBlur={onNickEditDone}
onChange={onNickChange}

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

@ -11,9 +11,6 @@ const getSortedDefaultChannels = createSelector(
channels => channels.split(',').sort()
);
const Error = ({ children }) =>
children ? <div className="form-error">{children}</div> : null;
class Connect extends Component {
state = {
showOptionals: false
@ -21,32 +18,35 @@ class Connect extends Component {
handleSSLChange = e => {
const { values, setFieldValue } = this.props;
if (e.target.checked && values.port === '6667') {
setFieldValue('port', '6697', false);
} else if (!e.target.checked && values.port === '6697') {
setFieldValue('port', '6667', false);
if (e.target.checked && values.port === 6667) {
setFieldValue('port', 6697, false);
} else if (!e.target.checked && values.port === 6697) {
setFieldValue('port', 6667, false);
}
setFieldValue('tls', e.target.checked);
};
handleShowClick = () => {
this.setState({ showOptionals: !this.state.showOptionals });
};
renderOptionals = () => {
const { errors, touched } = this.props;
return (
<div>
<TextInput name="username" placeholder="Username" />
{touched.username && <Error>{errors.username}</Error>}
<TextInput type="password" name="password" placeholder="Password" />
<TextInput name="realname" placeholder="Realname" />
</div>
);
renderOptionals = () => (
<div>
<TextInput name="username" placeholder="Username" />
{this.renderError('username')}
<TextInput type="password" name="password" placeholder="Password" />
<TextInput name="realname" placeholder="Realname" />
</div>
);
renderError = name => {
const { touched, errors } = this.props;
if (touched[name] && errors[name]) {
return <div className="form-error">{errors[name]}</div>;
}
};
render() {
const { defaults, values, errors, touched } = this.props;
const { defaults, values } = this.props;
const { readonly, showDetails } = defaults;
let form;
@ -65,8 +65,8 @@ class Connect extends Component {
</div>
)}
<TextInput name="nick" placeholder="Nick" />
{touched.nick && <Error>{errors.nick}</Error>}
<input type="submit" value="Connect" />
{this.renderError('nick')}
<button>Connect</button>
</Form>
);
} else {
@ -76,18 +76,18 @@ class Connect extends Component {
<TextInput name="name" placeholder="Name" />
<div className="connect-form-address">
<TextInput name="host" placeholder="Host" />
<TextInput name="port" placeholder="Port" />
<TextInput name="port" type="number" placeholder="Port" />
<Checkbox name="tls" label="SSL" onChange={this.handleSSLChange} />
</div>
{touched.host && <Error>{errors.host}</Error>}
{touched.port && <Error>{errors.port}</Error>}
{this.renderError('host')}
{this.renderError('port')}
<TextInput name="nick" placeholder="Nick" />
{touched.nick && <Error>{errors.nick}</Error>}
{this.renderError('nick')}
<TextInput name="channels" placeholder="Channels" />
{touched.channels && <Error>{errors.channels}</Error>}
{this.renderError('channels')}
{this.state.showOptionals && this.renderOptionals()}
<i className="icon-ellipsis" onClick={this.handleShowClick} />
<input type="submit" value="Connect" />
<button>Connect</button>
</Form>
);
}
@ -103,11 +103,11 @@ class Connect extends Component {
export default withFormik({
mapPropsToValues: ({ defaults }) => {
let port = '6667';
let port = 6667;
if (defaults.port) {
port = `${defaults.port}`;
({ port } = defaults);
} else if (defaults.ssl) {
port = '6697';
port = 6697;
}
return {
@ -138,7 +138,7 @@ export default withFormik({
}
if (!values.port) {
values.port = values.tls ? '6697' : '6667';
values.port = values.tls ? 6697 : 6667;
} else if (!isInt(values.port, 1, 65535)) {
errors.port = 'Invalid port';
}
@ -178,6 +178,7 @@ export default withFormik({
const channels = values.channels.split(',');
delete values.channels;
values.port = `${values.port}`;
connect(values);
select(values.host);

25
client/src/js/components/ui/Editable.js
View File

@ -12,32 +12,31 @@ export default class Editable extends PureComponent {
componentWillReceiveProps(nextProps) {
if (this.state.editing && nextProps.value !== this.props.value) {
this.setState({
width: this.getInputWidth(nextProps.value)
});
this.updateInputWidth(nextProps.value);
}
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.editing && this.state.editing) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
width: this.getInputWidth(this.props.value)
});
this.updateInputWidth(this.props.value);
}
}
getInputWidth(value) {
updateInputWidth = value => {
if (this.input) {
const style = window.getComputedStyle(this.input);
const padding =
parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
const padding = parseInt(style.paddingRight, 10);
// Make sure the width is atleast 1px so the caret always shows
const width =
stringWidth(value, `${style.fontSize} ${style.fontFamily}`) || 1;
return padding + width;
this.setState({
width: width + padding * 2,
indent: padding
});
}
}
};
startEditing = () => {
if (this.props.editable) {
@ -84,7 +83,9 @@ export default class Editable extends PureComponent {
const { children, className, value } = this.props;
const style = {
width: this.state.width
width: this.state.width,
textIndent: this.state.indent,
paddingLeft: 0
};
return this.state.editing ? (

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

@ -10,6 +10,9 @@ const TextInput = ({ name, placeholder, ...props }) => (
className={field.value ? 'value' : null}
type="text"
name={name}
autoCorrect="off"
autoComplete="off"
spellCheck="false"
{...field}
{...props}
/>

18
client/src/js/utils/__tests__/util.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { isChannel, isValidNick, isValidChannel, isValidUsername, isInt } from '..';
import { isChannel, isValidNick, isValidChannel, isValidUsername } from '..';
import linkify from '../linkify';
describe('isChannel()', () => {
@ -76,22 +76,6 @@ describe('isValidUsername()', () => {
));
});
describe('isInt()', () => {
it('validates integers', () => {
expect(isInt('0')).toBe(true);
expect(isInt('1337')).toBe(true);
expect(isInt('0', 0, 65535)).toBe(true);
expect(isInt('0', 1, 65535)).toBe(false);
expect(isInt('1', 1, 65535)).toBe(true);
expect(isInt('65535', 1, 65535)).toBe(true);
expect(isInt('00065535', 1, 65535)).toBe(true);
expect(isInt('65536', 1, 65535)).toBe(false);
expect(isInt('1cake', 1, 65535)).toBe(false);
expect(isInt('cake1', 1, 65535)).toBe(false);
expect(isInt('', 1, 65535)).toBe(false);
});
});
describe('linkify()', () => {
const proto = href => (href.indexOf('http') !== 0 ? `http://${href}` : href);
const linkTo = href => (

11
client/src/js/utils/index.js
View File

@ -122,18 +122,11 @@ export function isValidUsername(username) {
return true;
}
export function isInt(str, min, max) {
if (!str || str < min || str > max) {
export function isInt(i, min, max) {
if (i < min || i > max || Math.floor(i) !== i) {
return false;
}
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
if (char < 48 || char > 57) {
return false;
}
}
return true;
}