client: make highlighted inputs resizable

AdguardTeam · Aug 16, 2021 · f2ace4e · f2ace4e
1 parent 394c2f6
commit f2ace4e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 47 deletions.
diff --git a/client/src/components/Filters/CustomRules.js b/client/src/components/Filters/CustomRules.js
@@ -52,26 +52,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>

diff --git a/client/src/components/Settings/Dns/Upstream/Form.js b/client/src/components/Settings/Dns/Upstream/Form.js
@@ -90,25 +90,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 +161,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 />

diff --git a/client/src/components/ui/texareaCommentsHighlight.css b/client/src/components/ui/texareaCommentsHighlight.css
@@ -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 {