Allow users to set the trigger height for lengthy toot auto-collapse (#2070)
* Allow users to set the trigger height for lengthy toot autocollapse Add a field in the glitch-soc preferences to set the exact height in pixels of a "lengthy toot" where auto-collapse is triggered Originally authored by Dean Bassett (github.com/deanveloper) Squashed 3 commits from neatchee/mastodon and returned some values to project defaults: * ef665c1df5821e684c8da3392049f33243fafa74 * 0fce108d210efe55027a3af061bfc57aaaa83843 * 998f701a2b2e37edbda7dffb11a61f67f5559b18 * Remove bad escape characters * Apply feedback from glitch-soc code review - move input width specification to CSS - adjust language for clarity * Update comments re: lengthy toot height * Fix inconsistent indentation * Use a calculated width that scales better with browser font instead of static 45px width
This commit is contained in:
neatchee
GitHub
parent
7acf26e777
commit
20abef6590
6 changed files with 36 additions and 7 deletions
|
|
@ -224,7 +224,7 @@ class Status extends ImmutablePureComponent {
|
|||
// - The user has decided to collapse all notifications ('muted'
|
||||
// statuses).
|
||||
// - The user has decided to collapse long statuses and the status is
|
||||
// over 400px (without media, or 650px with).
|
||||
// over the user set value (default 400 without media, or 610px with).
|
||||
// - The status is a reply and the user has decided to collapse all
|
||||
// replies.
|
||||
// - The status contains media and the user has decided to collapse all
|
||||
|
|
@ -251,10 +251,15 @@ class Status extends ImmutablePureComponent {
|
|||
// as it could cause surprising changes when receiving notifications
|
||||
if (settings.getIn(['content_warnings', 'shared_state']) && status.get('spoiler_text').length && !status.get('hidden')) return;
|
||||
|
||||
let autoCollapseHeight = parseInt(autoCollapseSettings.get('height'));
|
||||
if (status.get('media_attachments').size && !muted) {
|
||||
autoCollapseHeight += 210;
|
||||
}
|
||||
|
||||
if (collapse ||
|
||||
autoCollapseSettings.get('all') ||
|
||||
(autoCollapseSettings.get('notifications') && muted) ||
|
||||
(autoCollapseSettings.get('lengthy') && node.clientHeight > ((status.get('media_attachments').size && !muted) ? 650 : 400)) ||
|
||||
(autoCollapseSettings.get('lengthy') && node.clientHeight > autoCollapseHeight) ||
|
||||
(autoCollapseSettings.get('reblogs') && prepend === 'reblogged_by') ||
|
||||
(autoCollapseSettings.get('replies') && status.get('in_reply_to_id', null) !== null) ||
|
||||
(autoCollapseSettings.get('media') && !(status.get('spoiler_text').length) && status.get('media_attachments').size > 0)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
|
||||
|
||||
// Our imports
|
||||
import { expandSpoilers, disableSwiping } from 'flavours/glitch/initial_state';
|
||||
import { expandSpoilers } from 'flavours/glitch/initial_state';
|
||||
import { preferenceLink } from 'flavours/glitch/utils/backend_links';
|
||||
import LocalSettingsPageItem from './item';
|
||||
import DeprecatedLocalSettingsPageItem from './deprecated_item';
|
||||
|
|
@ -406,6 +406,18 @@ class LocalSettingsPage extends React.PureComponent {
|
|||
>
|
||||
<FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['collapsed', 'auto', 'height']}
|
||||
id='mastodon-settings--collapsed-auto-height'
|
||||
placeholder='400'
|
||||
onChange={onChange}
|
||||
dependsOn={[['collapsed', 'enabled']]}
|
||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||
inputProps={{type: 'number', min: '200', max: '999'}}
|
||||
>
|
||||
<FormattedMessage id='settings.auto_collapse_height' defaultMessage='Height (in pixels) for a toot to be considered lengthy' />
|
||||
</LocalSettingsPageItem>
|
||||
</section>
|
||||
<section>
|
||||
<h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
|
|||
id: PropTypes.string.isRequired,
|
||||
item: PropTypes.array.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
inputProps: PropTypes.object,
|
||||
options: PropTypes.arrayOf(PropTypes.shape({
|
||||
value: PropTypes.string.isRequired,
|
||||
message: PropTypes.string.isRequired,
|
||||
|
|
@ -34,7 +35,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
|
|||
|
||||
render () {
|
||||
const { handleChange } = this;
|
||||
const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
|
||||
const { settings, item, id, inputProps, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
|
||||
let enabled = !disabled;
|
||||
|
||||
if (dependsOn) {
|
||||
|
|
@ -54,14 +55,17 @@ export default class LocalSettingsPageItem extends React.PureComponent {
|
|||
let optionId = `${id}--${opt.value}`;
|
||||
return (
|
||||
<label htmlFor={optionId}>
|
||||
<input type='radio'
|
||||
<input
|
||||
type='radio'
|
||||
name={id}
|
||||
id={optionId}
|
||||
key={optionId}
|
||||
value={opt.value}
|
||||
onBlur={handleChange}
|
||||
onChange={handleChange}
|
||||
checked={ currentValue === opt.value }
|
||||
checked={currentValue === opt.value}
|
||||
disabled={!enabled}
|
||||
{...inputProps}
|
||||
/>
|
||||
{opt.message}
|
||||
{opt.hint && <span className='hint'>{opt.hint}</span>}
|
||||
|
|
@ -89,6 +93,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
|
|||
placeholder={placeholder}
|
||||
onChange={handleChange}
|
||||
disabled={!enabled}
|
||||
{...inputProps}
|
||||
/>
|
||||
</p>
|
||||
</label>
|
||||
|
|
@ -103,7 +108,8 @@ export default class LocalSettingsPageItem extends React.PureComponent {
|
|||
checked={settings.getIn(item)}
|
||||
onChange={handleChange}
|
||||
disabled={!enabled}
|
||||
/>
|
||||
{...inputProps}
|
||||
/>
|
||||
{children}
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@
|
|||
"settings.auto_collapse_all": "Everything",
|
||||
"settings.auto_collapse_lengthy": "Lengthy toots",
|
||||
"settings.auto_collapse_media": "Toots with media",
|
||||
"settings.auto_collapse_height": "Height (in pixels) for a toot to be considered lengthy",
|
||||
"settings.auto_collapse_notifications": "Notifications",
|
||||
"settings.auto_collapse_reblogs": "Boosts",
|
||||
"settings.auto_collapse_replies": "Replies",
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const initialState = ImmutableMap({
|
|||
reblogs : false,
|
||||
replies : false,
|
||||
media : false,
|
||||
height : 400,
|
||||
}),
|
||||
backgrounds : ImmutableMap({
|
||||
user_backgrounds : false,
|
||||
|
|
|
|||
|
|
@ -110,6 +110,10 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
#mastodon-settings--collapsed-auto-height {
|
||||
width: calc(4ch + 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.glitch.local-settings__page__item.string,
|
||||
|
|
|
|||
Loading…
Reference in a new issue