diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-08-17 17:43:54 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2018-08-17 17:43:54 +0200 |
commit | 280d7b1df8566239f15130d8bf1e0e2c1d467fc0 (patch) | |
tree | 7903e071b0013fb15dcc5a74f6143239dcbaa2c2 /app/javascript | |
parent | 4a6bc2482a26aa0441485ca360a3d3c0eeea7fe4 (diff) | |
parent | 59f7f4c923494bb8dd6f2881a1610c7b51240d9c (diff) |
Merge branch 'master' into glitch-soc/merge-upstream
Conflicts: app/models/status.rb db/migrate/20180528141303_fix_accounts_unique_index.rb db/schema.rb Resolved by taking upstream changes (no real conflicts, just glitch-soc specific code too close to actual changes).
Diffstat (limited to 'app/javascript')
-rw-r--r-- | app/javascript/core/admin.js | 3 | ||||
-rw-r--r-- | app/javascript/mastodon/components/status_action_bar.js | 12 | ||||
-rw-r--r-- | app/javascript/mastodon/features/account/components/action_bar.js | 6 | ||||
-rw-r--r-- | app/javascript/mastodon/features/status/index.js | 4 | ||||
-rw-r--r-- | app/javascript/mastodon/features/video/index.js | 20 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 20 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/tables.scss | 16 |
7 files changed, 56 insertions, 25 deletions
diff --git a/app/javascript/core/admin.js b/app/javascript/core/admin.js index 3302454ab..28f27fbc6 100644 --- a/app/javascript/core/admin.js +++ b/app/javascript/core/admin.js @@ -1,9 +1,6 @@ // This file will be loaded on admin pages, regardless of theme. import { delegate } from 'rails-ujs'; -import { start } from '../mastodon/common'; - -start(); function handleDeleteStatus(event) { const [data] = event.detail; diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 0ae21e3f0..c799d4e98 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -32,6 +32,16 @@ const messages = defineMessages({ embed: { id: 'status.embed', defaultMessage: 'Embed' }, }); +const obfuscatedCount = count => { + if (count < 0) { + return 0; + } else if (count <= 1) { + return count; + } else { + return '1+'; + } +}; + @injectIntl export default class StatusActionBar extends ImmutablePureComponent { @@ -194,7 +204,7 @@ export default class StatusActionBar extends ImmutablePureComponent { return ( <div className='status__action-bar'> - <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /> + <div className='status__action-bar__counter'><IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /><span className='status__action-bar__counter__label' >{obfuscatedCount(status.get('replies_count'))}</span></div> <IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> {shareButton} diff --git a/app/javascript/mastodon/features/account/components/action_bar.js b/app/javascript/mastodon/features/account/components/action_bar.js index 43b4811e1..bc6f86628 100644 --- a/app/javascript/mastodon/features/account/components/action_bar.js +++ b/app/javascript/mastodon/features/account/components/action_bar.js @@ -147,17 +147,17 @@ export default class ActionBar extends React.PureComponent { <div className='account__action-bar'> <div className='account__action-bar-links'> - <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}> + <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`} title={intl.formatNumber(account.get('statuses_count'))}> <FormattedMessage id='account.posts' defaultMessage='Toots' /> <strong>{shortNumberFormat(account.get('statuses_count'))}</strong> </Link> - <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`}> + <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/following`} title={intl.formatNumber(account.get('following_count'))}> <FormattedMessage id='account.follows' defaultMessage='Follows' /> <strong>{shortNumberFormat(account.get('following_count'))}</strong> </Link> - <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`}> + <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}/followers`} title={intl.formatNumber(account.get('followers_count'))}> <FormattedMessage id='account.followers' defaultMessage='Followers' /> <strong>{shortNumberFormat(account.get('followers_count'))}</strong> </Link> diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index 89387ca43..0ffeaa4dc 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -355,7 +355,9 @@ export default class Status extends ImmutablePureComponent { if (status && ancestorsIds && ancestorsIds.size > 0) { const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1]; - element.scrollIntoView(true); + window.requestAnimationFrame(() => { + element.scrollIntoView(true); + }); this._scrolledIntoView = true; } } diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 47a165e16..55ea32acb 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -158,6 +158,9 @@ export default class Video extends React.PureComponent { this.setState({ dragging: true }); this.video.pause(); this.handleMouseMove(e); + + e.preventDefault(); + e.stopPropagation(); } handleMouseUp = () => { @@ -174,8 +177,10 @@ export default class Video extends React.PureComponent { const { x } = getPointerPosition(this.seek, e); const currentTime = Math.floor(this.video.duration * x); - this.video.currentTime = currentTime; - this.setState({ currentTime }); + if (!isNaN(currentTime)) { + this.video.currentTime = currentTime; + this.setState({ currentTime }); + } }, 60); togglePlay = () => { @@ -281,6 +286,15 @@ export default class Video extends React.PureComponent { playerStyle.height = height; } + let preload; + if (startTime || fullscreen || dragging) { + preload = 'auto'; + } else if (detailed) { + preload = 'metadata'; + } else { + preload = 'none'; + } + return ( <div role='menuitem' @@ -296,7 +310,7 @@ export default class Video extends React.PureComponent { ref={this.setVideoRef} src={src} poster={preview} - preload={startTime ? 'auto' : 'none'} + preload={preload} loop role='button' tabIndex='0' diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 8067b80bb..547bcfd1e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -921,15 +921,31 @@ align-items: center; display: flex; margin-top: 8px; + + &__counter { + display: inline-flex; + margin-right: 11px; + align-items: center; + + .status__action-bar-button { + margin-right: 4px; + } + + &__label { + display: inline-block; + width: 14px; + font-size: 12px; + font-weight: 500; + color: $action-button-color; + } + } } .status__action-bar-button { - float: left; margin-right: 18px; } .status__action-bar-dropdown { - float: left; height: 23.15px; width: 23.15px; } diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index e54c55947..c2206cf55 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -1,9 +1,3 @@ -@keyframes Swag { - 0% { background-position: 0% 0%; } - 50% { background-position: 100% 0%; } - 100% { background-position: 200% 0%; } -} - .table { width: 100%; max-width: 100%; @@ -191,14 +185,12 @@ a.table-action-link { .status__content { padding-top: 0; + summary { + display: list-item; + } + strong { font-weight: 700; - background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet,orange , yellow, green, cyan, blue, violet); - background-size: 200% 100%; - -webkit-background-clip: text; - background-clip: text; - color: transparent; - animation: Swag 2s linear 0s infinite; } } } |