diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/local_settings/page')
| -rw-r--r-- | app/javascript/flavours/glitch/features/local_settings/page/index.js | 32 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/features/local_settings/page/item/index.js | 95 |
2 files changed, 68 insertions, 59 deletions
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index ece80c4da..4f1b8525f 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -50,7 +50,8 @@ export default class LocalSettingsPage extends React.PureComponent { id='mastodon-settings--notifications-tab_badge' onChange={onChange} > - <FormattedMessage id='settings.notifications.tab_badge' defaultMessage="Display a badge for unread notifications if the notifications column isn't open" /> + <FormattedMessage id='settings.notifications.tab_badge' defaultMessage="Unread notifications badge" /> + <span className='hint'><FormattedMessage id='settings.notifications.tab_badge.hint' defaultMessage="Display a badge for unread notifications in the column icons when the notifications column isn't open" /></span> </LocalSettingsPageItem> <LocalSettingsPageItem settings={settings} @@ -58,7 +59,8 @@ export default class LocalSettingsPage extends React.PureComponent { id='mastodon-settings--notifications-favicon_badge' onChange={onChange} > - <FormattedMessage id='settings.notifications.favicon_badge' defaultMessage='Display unread notifications count in the favicon' /> + <FormattedMessage id='settings.notifications.favicon_badge' defaultMessage='Unread notifications favicon badge' /> + <span className='hint'><FormattedMessage id='settings.notifications.favicon_badge.hint' defaultMessage="Add a badge for unread notifications to the favicon" /></span> </LocalSettingsPageItem> </section> <section> @@ -83,6 +85,7 @@ export default class LocalSettingsPage extends React.PureComponent { onChange={onChange} > <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' /> + <span className='hint'><FormattedMessage id='settings.wide_view_hint' defaultMessage='Stretches columns to better fill the available space.' /></span> </LocalSettingsPageItem> <LocalSettingsPageItem settings={settings} @@ -112,7 +115,8 @@ export default class LocalSettingsPage extends React.PureComponent { id='mastodon-settings--preselect_on_reply' onChange={onChange} > - <FormattedMessage id='settings.preselect_on_reply' defaultMessage='Pre-select usernames past the first when replying to a toot with multiple participants' /> + <FormattedMessage id='settings.preselect_on_reply' defaultMessage='Pre-select usernames on reply' /> + <span className='hint'><FormattedMessage id='settings.preselect_on_reply_hint' defaultMessage='When replying to a conversation with multiple participants, pre-select usernames past the first' /></span> </LocalSettingsPageItem> <LocalSettingsPageItem settings={settings} @@ -186,6 +190,15 @@ export default class LocalSettingsPage extends React.PureComponent { > <FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' /> </LocalSettingsPageItem> + <LocalSettingsPageItem + settings={settings} + item={['collapsed', 'show_action_bar']} + id='mastodon-settings--collapsed-show-action-bar' + onChange={onChange} + dependsOn={[['collapsed', 'enabled']]} + > + <FormattedMessage id='settings.show_action_bar' defaultMessage='Show action buttons in collapsed toots' /> + </LocalSettingsPageItem> <section> <h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2> <LocalSettingsPageItem @@ -269,18 +282,6 @@ export default class LocalSettingsPage extends React.PureComponent { <FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' /> </LocalSettingsPageItem> </section> - <section> - <h2></h2> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'show_action_bar']} - id='mastodon-settings--collapsed-show-action-bar' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - > - <FormattedMessage id='settings.show_action_bar' defaultMessage='Show action buttons in collapsed toots' /> - </LocalSettingsPageItem> - </section> </div> ), ({ onChange, settings }) => ( @@ -293,6 +294,7 @@ export default class LocalSettingsPage extends React.PureComponent { onChange={onChange} > <FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' /> + <span className='hint'><FormattedMessage id='settings.media_letterbox_hint' defaultMessage='Scale down and letterbox media to fill the image containers instead of stretching and cropping them' /></span> </LocalSettingsPageItem> <LocalSettingsPageItem settings={settings} 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..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, @@ -48,57 +49,63 @@ 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} + {opt.hint && <span class='hint'>{opt.hint}</span>} + </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> ); } |