Merge: + client: Use monospace font in coding-like inputs
Close #1650 Squashed commit of the following: commit 0956b77d2675bf569ab8413bf1a905167f068fbd Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue May 12 18:22:55 2020 +0300 Replace css variable commit 7c65954e3727c09404999d4d029276f78a8d0ffe Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue May 12 18:06:31 2020 +0300 + client: Use monospace font in coding-like inputs
This commit is contained in:
parent
4d66d25fda
commit
1f954ab673
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -30,3 +34,7 @@ body {
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
|
@ -54,7 +54,7 @@ class CustomRules extends Component {
|
|||
>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<textarea
|
||||
className="form-control form-control--textarea-large"
|
||||
className="form-control form-control--textarea-large font-monospace"
|
||||
value={userRules}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
|
|
|
@ -5,61 +5,58 @@ import { Trans, withNamespaces } from 'react-i18next';
|
|||
import flow from 'lodash/flow';
|
||||
import { renderTextareaField } from '../../../../helpers/form';
|
||||
|
||||
const fields = [
|
||||
{
|
||||
id: 'allowed_clients',
|
||||
title: 'access_allowed_title',
|
||||
subtitle: 'access_allowed_desc',
|
||||
},
|
||||
{
|
||||
id: 'disallowed_clients',
|
||||
title: 'access_disallowed_title',
|
||||
subtitle: 'access_disallowed_desc',
|
||||
},
|
||||
{
|
||||
id: 'blocked_hosts',
|
||||
title: 'access_blocked_title',
|
||||
subtitle: 'access_blocked_desc',
|
||||
},
|
||||
];
|
||||
|
||||
const Form = (props) => {
|
||||
const {
|
||||
handleSubmit, submitting, invalid, processingSet,
|
||||
} = props;
|
||||
|
||||
const renderField = ({
|
||||
id, title, subtitle, disabled = processingSet,
|
||||
}) => <div key={id} className="form__group mb-5">
|
||||
<label className="form__label form__label--with-desc" htmlFor={id}>
|
||||
<Trans>{title}</Trans>
|
||||
</label>
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>{subtitle}</Trans>
|
||||
</div>
|
||||
<Field
|
||||
id={id}
|
||||
name={id}
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea font-monospace"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>;
|
||||
|
||||
renderField.propTypes = {
|
||||
id: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form__group mb-5">
|
||||
<label className="form__label form__label--with-desc" htmlFor="allowed_clients">
|
||||
<Trans>access_allowed_title</Trans>
|
||||
</label>
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>access_allowed_desc</Trans>
|
||||
</div>
|
||||
<Field
|
||||
id="allowed_clients"
|
||||
name="allowed_clients"
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea"
|
||||
disabled={processingSet}
|
||||
/>
|
||||
</div>
|
||||
<div className="form__group mb-5">
|
||||
<label className="form__label form__label--with-desc" htmlFor="disallowed_clients">
|
||||
<Trans>access_disallowed_title</Trans>
|
||||
</label>
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>access_disallowed_desc</Trans>
|
||||
</div>
|
||||
<Field
|
||||
id="disallowed_clients"
|
||||
name="disallowed_clients"
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea"
|
||||
disabled={processingSet}
|
||||
/>
|
||||
</div>
|
||||
<div className="form__group mb-5">
|
||||
<label className="form__label form__label--with-desc" htmlFor="blocked_hosts">
|
||||
<Trans>access_blocked_title</Trans>
|
||||
</label>
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>access_blocked_desc</Trans>
|
||||
</div>
|
||||
<Field
|
||||
id="blocked_hosts"
|
||||
name="blocked_hosts"
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea"
|
||||
disabled={processingSet}
|
||||
/>
|
||||
</div>
|
||||
{fields.map(renderField)}
|
||||
<div className="card-actions">
|
||||
<div className="btn-list">
|
||||
<button
|
||||
|
|
|
@ -17,7 +17,7 @@ const getInputFields = (parallel_requests_selected, fastest_addr_selected) => [{
|
|||
name: 'upstream_dns',
|
||||
type: 'text',
|
||||
component: 'textarea',
|
||||
className: 'form-control form-control--textarea',
|
||||
className: 'form-control form-control--textarea font-monospace',
|
||||
placeholder: 'upstream_dns',
|
||||
},
|
||||
{
|
||||
|
@ -96,7 +96,7 @@ let Form = (props) => {
|
|||
name="bootstrap_dns"
|
||||
component="textarea"
|
||||
type="text"
|
||||
className="form-control form-control--textarea form-control--textarea-small"
|
||||
className="form-control form-control--textarea form-control--textarea-small font-monospace"
|
||||
placeholder={t('bootstrap_dns')}
|
||||
disabled={processingSetConfig}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue