From faecb35fe0197ddc025b971aa9538d5ddbdea713 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 1 Oct 2018 17:40:56 +0200
Subject: Switch from selects to radio buttons for local settings, improve
 styling

---
 .../features/local_settings/page/item/index.js     | 93 ++++++++++++----------
 1 file changed, 49 insertions(+), 44 deletions(-)

(limited to 'app/javascript/flavours/glitch/features/local_settings/page/item/index.js')

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 fe237f11e..eacc7419c 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
@@ -48,57 +48,62 @@ export default class LocalSettingsPageItem extends React.PureComponent {
 
     if (options && options.length > 0) {
       const currentValue = settings.getIn(item);
-      const optionElems = options && options.length > 0 && options.map((opt) => (
-        <option
-          key={opt.value}
-          value={opt.value}
-        >
-          {opt.message}
-        </option>
-      ));
-      return (
-        <label className='glitch local-settings__page__item' htmlFor={id}>
-          <p>{children}</p>
-          <p>
-            <select
-              id={id}
-              disabled={!enabled}
+      const optionElems = options && options.length > 0 && options.map((opt) => {
+        let optionId = `${id}--${opt.value}`;
+        return (
+          <label htmlFor={optionId}>
+            <input type='radio'
+              name={id}
+              id={optionId}
+              value={opt.value}
               onBlur={handleChange}
               onChange={handleChange}
-              value={currentValue}
-            >
-              {optionElems}
-            </select>
-          </p>
-        </label>
+              checked={ currentValue === opt.value }
+              disabled={!enabled}
+            />
+            {opt.message}
+          </label>
+        );
+      });
+      return (
+        <div class='glitch local-settings__page__item radio_buttons'>
+          <fieldset>
+            <legend>{children}</legend>
+            {optionElems}
+          </fieldset>
+        </div>
       );
     } else if (placeholder) {
       return (
-        <label className='glitch local-settings__page__item' htmlFor={id}>
-          <p>{children}</p>
-          <p>
-            <input
-              id={id}
-              type='text'
-              value={settings.getIn(item)}
-              placeholder={placeholder}
-              onChange={handleChange}
-              disabled={!enabled}
-            />
-          </p>
-        </label>
+        <div className='glitch local-settings__page__item string'>
+          <label htmlFor={id}>
+            <p>{children}</p>
+            <p>
+              <input
+                id={id}
+                type='text'
+                value={settings.getIn(item)}
+                placeholder={placeholder}
+                onChange={handleChange}
+                disabled={!enabled}
+              />
+            </p>
+          </label>
+        </div>
       );
     } else return (
-      <label className='glitch local-settings__page__item' htmlFor={id}>
-        <input
-          id={id}
-          type='checkbox'
-          checked={settings.getIn(item)}
-          onChange={handleChange}
-          disabled={!enabled}
-        />
-        {children}
-      </label>
+      <div className='glitch local-settings__page__item boolean'>
+        <label htmlFor={id}>
+          <input
+            id={id}
+            type='checkbox'
+            checked={settings.getIn(item)}
+            onChange={handleChange}
+            disabled={!enabled}
+          />
+          {children}
+        </label>
+      </div>
     );
   }
 
-- 
cgit 


From 26409f3e8e00b9d8fb2c072951068e7628128baa Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 1 Oct 2018 22:11:11 +0200
Subject: Add support for hints (or extended descriptions) in local-settings
 pages

---
 .../flavours/glitch/features/local_settings/page/item/index.js       | 2 ++
 app/javascript/flavours/glitch/styles/components/local_settings.scss | 5 +++++
 2 files changed, 7 insertions(+)

(limited to 'app/javascript/flavours/glitch/features/local_settings/page/item/index.js')

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 eacc7419c..66b937365 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
@@ -17,6 +17,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
     options: PropTypes.arrayOf(PropTypes.shape({
       value: PropTypes.string.isRequired,
       message: PropTypes.string.isRequired,
+      hint: PropTypes.string,
     })),
     settings: ImmutablePropTypes.map.isRequired,
     placeholder: PropTypes.string,
@@ -62,6 +63,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
               disabled={!enabled}
             />
             {opt.message}
+            {opt.hint && <span class='hint'>{opt.hint}</span>}
           </label>
         );
       });
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index 1adf54a1b..75e7d370d 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -28,6 +28,11 @@
     }
   }
 
+  span.hint {
+    display: block;
+    color: $lighter-text-color;
+  }
+
   h1 {
     font-size: 18px;
     font-weight: 500;
-- 
cgit