Allow users to set the trigger height for lengthy toot auto-collapse (#2070)

* Allow users to set the trigger height for lengthy toot autocollapse

Add a field in the glitch-soc preferences to set the exact height in pixels of a "lengthy toot" where auto-collapse is triggered

Originally authored by Dean Bassett (github.com/deanveloper)

Squashed 3 commits from neatchee/mastodon and returned some values to project defaults:
* ef665c1df5821e684c8da3392049f33243fafa74
* 0fce108d210efe55027a3af061bfc57aaaa83843
* 998f701a2b2e37edbda7dffb11a61f67f5559b18

* Remove bad escape characters

* Apply feedback from glitch-soc code review
- move input width specification to CSS
- adjust language for clarity

* Update comments re: lengthy toot height

* Fix inconsistent indentation

* Use a calculated width that scales better with browser font instead of static 45px width

1 files changed, 10 insertions, 4 deletions

diff --git a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
index 6b24e4143..86da640ba 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
@@ -14,6 +14,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
     id: PropTypes.string.isRequired,
     item: PropTypes.array.isRequired,
     onChange: PropTypes.func.isRequired,
+    inputProps: PropTypes.object,
     options: PropTypes.arrayOf(PropTypes.shape({
       value: PropTypes.string.isRequired,
       message: PropTypes.string.isRequired,
@@ -34,7 +35,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
 
   render () {
     const { handleChange } = this;
-    const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
+    const { settings, item, id, inputProps, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
     let enabled = !disabled;
 
     if (dependsOn) {
@@ -54,14 +55,17 @@ export default class LocalSettingsPageItem extends React.PureComponent {
         let optionId = `${id}--${opt.value}`;
         return (
           <label htmlFor={optionId}>
-            <input type='radio'
+            <input 
+              type='radio'
               name={id}
               id={optionId}
+              key={optionId}
               value={opt.value}
               onBlur={handleChange}
               onChange={handleChange}
-              checked={ currentValue === opt.value }
+              checked={currentValue === opt.value}
               disabled={!enabled}
+              {...inputProps}
             />
             {opt.message}
             {opt.hint && <span className='hint'>{opt.hint}</span>}
@@ -89,6 +93,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
                 placeholder={placeholder}
                 onChange={handleChange}
                 disabled={!enabled}
+	        {...inputProps}
               />
             </p>
           </label>
@@ -103,7 +108,8 @@ export default class LocalSettingsPageItem extends React.PureComponent {
             checked={settings.getIn(item)}
             onChange={handleChange}
             disabled={!enabled}
-          />
+            {...inputProps}
+	    />
           {children}
         </label>
       </div>