mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pull request #1273: 3438 make highlighted inputs resizable 

Merge in DNS/adguard-home from 3438-inputs-height to master

Squashed commit of the following:

commit a049febdc8490505d665c0939c01a14da997f861
Merge: 7035339b 42b2c3ab
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 17:36:58 2021 +0300

    Merge branch 'master' into 3438-inputs-height

commit 7035339b26fa205a844e79713179c7b623c90ce0
Merge: 20ef34c4 784bc318
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 17:28:06 2021 +0300

    Merge branch 'master' into 3438-inputs-height

commit 20ef34c4a6078658c444e310800923b8b3f74c1c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 13:41:46 2021 +0300

    client: remove unused

commit f2ace4ef452bbdc4b955e510aa07d1c93ec79ee4
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 13:30:58 2021 +0300

    client: make highlighted inputs resizable
This commit is contained in:
Ildar Kamalov 2021-08-16 17:57:06 +03:00
parent 42b2c3ab85
commit 91c1c9e61d
3 changed files with 28 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/Filters/CustomRules.js
View File

@ -1,13 +1,12 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Trans, withTranslation } from 'react-i18next';
import classnames from 'classnames';
import Card from '../ui/Card';
import PageTitle from '../ui/PageTitle';
import Examples from './Examples';
import Check from './Check';
import { getTextareaCommentsHighlight, syncScroll } from '../../helpers/highlightTextareaComments';
import { COMMENT_LINE_DEFAULT_TOKEN, isFirefox } from '../../helpers/constants';
import { COMMENT_LINE_DEFAULT_TOKEN } from '../../helpers/constants';
import '../ui/texareaCommentsHighlight.css';
class CustomRules extends Component {
@ -52,26 +51,19 @@ class CustomRules extends Component {
return (
<>
<PageTitle title={t('custom_filtering_rules')} />
<Card
subtitle={t('custom_filter_rules_hint')}
>
<Card subtitle={t('custom_filter_rules_hint')}>
<form onSubmit={this.handleSubmit}>
<div className={classnames('col-12 text-edit-container form-control--textarea-large', {
'mb-4': !isFirefox,
'mb-6': isFirefox,
})}>
<textarea
className={classnames('form-control font-monospace text-input form-control--textarea-large', {
'text-input--largest': isFirefox,
})}
<div className="text-edit-container mb-4">
<textarea
className="form-control font-monospace text-input"
value={userRules}
onChange={this.handleChange}
onScroll={this.onScroll}
/>
/>
{getTextareaCommentsHighlight(
this.ref,
userRules,
classnames({ 'form-control--textarea-large': isFirefox }),
undefined,
[COMMENT_LINE_DEFAULT_TOKEN, '!'],
)}
</div>

30
client/src/components/Settings/Dns/Upstream/Form.js
View File

@ -9,7 +9,6 @@ import { renderRadioField, renderTextareaField, CheckboxField } from '../../../.
import {
DNS_REQUEST_OPTIONS,
FORM_NAME,
isFirefox,
UPSTREAM_CONFIGURATION_WIKI_LINK,
} from '../../../../helpers/constants';
import { testUpstreamWithFormValues } from '../../../../actions';
@ -90,25 +89,10 @@ renderTextareaWithHighlightField.propTypes = {
normalizeOnBlur: PropTypes.func,
onScroll: PropTypes.func,
placeholder: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
};
const INPUT_FIELDS = [
{
name: UPSTREAM_DNS_NAME,
type: 'text',
component: renderTextareaWithHighlightField,
className: classnames('form-control form-control--textarea font-monospace text-input', {
'text-input--larger': isFirefox,
}),
containerClass: classnames('text-edit-container', {
'mb-4': !isFirefox,
'mb-6': isFirefox,
}),
placeholder: 'upstream_dns',
normalizeOnBlur: removeEmptyLines,
},
{
name: UPSTREAM_MODE_NAME,
type: 'radio',
@ -176,6 +160,20 @@ const Form = ({
dns_providers
</Trans>
</label>
<div className="col-12 mb-4">
<div className="text-edit-container">
<Field
id={UPSTREAM_DNS_NAME}
name={UPSTREAM_DNS_NAME}
component={renderTextareaWithHighlightField}
type="text"
className="form-control form-control--textarea font-monospace text-input"
placeholder={t('upstream_dns')}
disabled={processingSetConfig || processingTestUpstream}
normalizeOnBlur={removeEmptyLines}
/>
</div>
</div>
{INPUT_FIELDS.map(renderField)}
<div className="col-12">
<Examples />

26
client/src/components/ui/texareaCommentsHighlight.css
View File

@ -1,6 +1,7 @@
.text-edit-container {
position: relative;
height: 10rem;
min-height: 240px;
overflow: hidden;
}
.text-input,
@ -10,33 +11,20 @@
left: 0;
width: 100%;
height: 100%;
padding: 1rem;
padding: 16px;
background: transparent;
white-space: pre-wrap;
line-height: 1.5rem;
line-height: 24px;
word-wrap: break-word;
font-size: var(--font-size-disable-autozoom);
margin: 0;
}
.form--upstream .text-input,
.form--upstream .text-output {
width: 98%;
left: 1%;
overscroll-behavior: none;
}
.text-input {
position: relative;
opacity: 1;
resize: none;
height: 10rem;
}
.text-input--larger {
height: 11rem;
}
.text-input--largest {
height: 16rem;
min-height: 240px;
}
.text-output {