From faecb35fe0197ddc025b971aa9538d5ddbdea713 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 1 Oct 2018 17:40:56 +0200 Subject: [PATCH] Switch from selects to radio buttons for local settings, improve styling --- .../local_settings/page/item/index.js | 93 ++++++++++--------- .../styles/components/local_settings.scss | 25 ++++- 2 files changed, 70 insertions(+), 48 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 fe237f11e91..eacc7419c89 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) => ( - - )); - return ( - + checked={ currentValue === opt.value } + disabled={!enabled} + /> + {opt.message} + + ); + }); + return ( +
+
+ {children} + {optionElems} +
+
); } else if (placeholder) { return ( - +
+ +
); } else return ( - +
+ +
); } diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 9cd4e1fbe1b..a6e5c9892b9 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -11,8 +11,21 @@ max-height: 450px; overflow: hidden; - label { + label, legend { display: block; + font-size: 14px; + } + + .boolean label, .radio_buttons label { + position: relative; + padding-left: 28px; + padding-top: 3px; + + input { + position: absolute; + left: 0; + top: 0; + } } h1 { @@ -74,7 +87,11 @@ } .glitch.local-settings__page__item { - select { - margin-bottom: 5px; - } + margin-bottom: 2px; +} + +.glitch.local-settings__page__item.string, +.glitch.local-settings__page__item.radio_buttons { + margin-top: 10px; + margin-bottom: 10px; }