From faecb35fe0197ddc025b971aa9538d5ddbdea713 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 1 Oct 2018 17:40:56 +0200 Subject: Switch from selects to radio buttons for local settings, improve styling --- .../glitch/styles/components/local_settings.scss | 25 ++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components/local_settings.scss') diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 9cd4e1fbe..a6e5c9892 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; } -- cgit From edb9ec8543e49a8992ea76c04d6c595830996683 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 1 Oct 2018 22:09:57 +0200 Subject: Add icons for each of the local-setting pages --- .../flavours/glitch/features/local_settings/navigation/index.js | 6 ++++++ .../glitch/features/local_settings/navigation/item/index.js | 8 +++++--- .../flavours/glitch/styles/components/local_settings.scss | 2 +- 3 files changed, 12 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components/local_settings.scss') diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/index.js b/app/javascript/flavours/glitch/features/local_settings/navigation/index.js index a992b1ffc..1a6485753 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.js @@ -38,30 +38,35 @@ export default class LocalSettingsNavigation extends React.PureComponent { active={index === 0} index={0} onNavigate={onNavigate} + icon='cogs' title={intl.formatMessage(messages.general)} /> diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js index b67d479e7..68a998b6c 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js @@ -12,6 +12,7 @@ export default class LocalSettingsPage extends React.PureComponent { className: PropTypes.string, href: PropTypes.string, icon: PropTypes.string, + textIcon: PropTypes.string, index: PropTypes.number.isRequired, onNavigate: PropTypes.func, title: PropTypes.string, @@ -32,6 +33,7 @@ export default class LocalSettingsPage extends React.PureComponent { className, href, icon, + textIcon, onNavigate, title, } = this.props; @@ -40,14 +42,14 @@ export default class LocalSettingsPage extends React.PureComponent { active, }, className); - const iconElem = icon ? : null; + const iconElem = icon ? : (textIcon ? {textIcon} : null); if (href) return ( - {iconElem} {title} + {iconElem} {title} ); else if (onNavigate) return ( @@ -57,7 +59,7 @@ export default class LocalSettingsPage extends React.PureComponent { tabIndex='0' className={finalClassName} > - {iconElem} {title} + {iconElem} {title} ); else return null; diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index a6e5c9892..288248f7c 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -72,7 +72,7 @@ .glitch.local-settings__navigation { background: lighten($ui-secondary-color, 8%); - width: 200px; + width: 212px; font-size: 15px; line-height: 20px; overflow-y: auto; -- cgit From 5f308a7f05a067211417307f249870d0b3fb8ebd Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 1 Oct 2018 22:10:30 +0200 Subject: When screen width is too narrow, hide local-settings page text, keep only icons --- .../flavours/glitch/styles/components/local_settings.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'app/javascript/flavours/glitch/styles/components/local_settings.scss') diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 288248f7c..1adf54a1b 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -95,3 +95,18 @@ margin-top: 10px; margin-bottom: 10px; } + +@media screen and (max-width: 630px) { + .glitch.local-settings__navigation { + width: 40px; + flex-shrink: 0; + } + + .glitch.local-settings__navigation__item { + padding: 10px; + + span:last-of-type { + display: none; + } + } +} -- cgit From 26409f3e8e00b9d8fb2c072951068e7628128baa Mon Sep 17 00:00:00 2001 From: Thibaut Girka 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/styles/components/local_settings.scss') 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 && {opt.hint}} ); }); 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 From 269edc0e48886ea90455283f08a646c86387cfbc Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 2 Oct 2018 00:17:22 +0200 Subject: Fix CW icon color in local-settings modal --- app/javascript/flavours/glitch/styles/components/local_settings.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/javascript/flavours/glitch/styles/components/local_settings.scss') diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 75e7d370d..0b7a74575 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -60,6 +60,11 @@ outline: none; transition: background .3s; + .text-icon-button { + color: inherit; + transition: unset; + } + &:hover { background: $ui-secondary-color; } -- cgit