diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/local_settings')
4 files changed, 80 insertions, 63 deletions
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..cf02101cf 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.js @@ -38,37 +38,42 @@ export default class LocalSettingsNavigation extends React.PureComponent { active={index === 0} index={0} onNavigate={onNavigate} + icon='cogs' title={intl.formatMessage(messages.general)} /> <LocalSettingsNavigationItem active={index === 1} index={1} onNavigate={onNavigate} + icon='pencil' title={intl.formatMessage(messages.compose)} /> <LocalSettingsNavigationItem active={index === 2} index={2} onNavigate={onNavigate} + textIcon='CW' title={intl.formatMessage(messages.content_warnings)} /> <LocalSettingsNavigationItem active={index === 3} index={3} onNavigate={onNavigate} + icon='angle-double-up' title={intl.formatMessage(messages.collapsed)} /> <LocalSettingsNavigationItem active={index === 4} index={4} onNavigate={onNavigate} + icon='image' title={intl.formatMessage(messages.media)} /> <LocalSettingsNavigationItem active={index === 5} href='/settings/preferences' index={5} - icon='cog' + icon='sliders' title={intl.formatMessage(messages.preferences)} /> <LocalSettingsNavigationItem @@ -76,6 +81,7 @@ export default class LocalSettingsNavigation extends React.PureComponent { className='close' index={6} onNavigate={onClose} + icon='times' title={intl.formatMessage(messages.close)} /> </nav> 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 ? <i className={`fa fa-fw fa-${icon}`} /> : null; + const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null); if (href) return ( <a href={href} className={finalClassName} > - {iconElem} {title} + {iconElem} <span>{title}</span> </a> ); else if (onNavigate) return ( @@ -57,7 +59,7 @@ export default class LocalSettingsPage extends React.PureComponent { tabIndex='0' className={finalClassName} > - {iconElem} {title} + {iconElem} <span>{title}</span> </a> ); else return null; 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> ); } |