diff options
Diffstat (limited to 'app/javascript')
17 files changed, 130 insertions, 60 deletions
diff --git a/app/javascript/core/settings.js b/app/javascript/core/settings.js index af97c84f9..23a303747 100644 --- a/app/javascript/core/settings.js +++ b/app/javascript/core/settings.js @@ -1,30 +1,16 @@ // This file will be loaded on settings pages, regardless of theme. -const { length } = require('stringz'); const { delegate } = require('rails-ujs'); import emojify from '../mastodon/features/emoji/emoji'; delegate(document, '#account_display_name', 'input', ({ target }) => { - const nameCounter = document.querySelector('.name-counter'); - const name = document.querySelector('.card .display-name strong'); - - if (nameCounter) { - nameCounter.textContent = 30 - length(target.value); - } + const name = document.querySelector('.card .display-name strong'); if (name) { name.innerHTML = emojify(target.value); } }); -delegate(document, '#account_note', 'input', ({ target }) => { - const noteCounter = document.querySelector('.note-counter'); - - if (noteCounter) { - noteCounter.textContent = 500 - length(target.value); - } -}); - delegate(document, '#account_avatar', 'change', ({ target }) => { const avatar = document.querySelector('.card .avatar img'); const [file] = target.files || []; diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 3c775618e..d4618440d 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -363,4 +363,22 @@ body.rtl { margin-right: 15px; text-align: right; } + + .fa-chevron-left::before { + content: "\F054"; + } + + .fa-chevron-right::before { + content: "\F053"; + } + + .column-back-button__icon { + margin-right: 0; + margin-left: 5px; + } + + .column-header__setting-arrows .column-header__setting-btn:last-child { + padding-left: 0; + padding-right: 10px; + } } diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index fac8d32a1..86d83122f 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -142,7 +142,7 @@ export function submitCompose(routerHistory) { } }; - if (response.data.visibility === 'direct' && getState().getIn(['conversations', 'mounted']) <= 0) { + if (response.data.visibility === 'direct' && getState().getIn(['conversations', 'mounted']) <= 0 && routerHistory) { routerHistory.push('/timelines/direct'); } else if (response.data.visibility !== 'direct') { insertIfOnline('home'); diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 0b23e51f8..9fa8cc008 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -9,6 +9,7 @@ import DisplayName from './display_name'; import StatusContent from './status_content'; import StatusActionBar from './status_action_bar'; import AttachmentList from './attachment_list'; +import Card from '../features/status/components/card'; import { injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { MediaGallery, Video } from '../features/ui/util/async-components'; @@ -256,6 +257,14 @@ class Status extends ImmutablePureComponent { </Bundle> ); } + } else if (status.get('spoiler_text').length === 0 && status.get('card')) { + media = ( + <Card + onOpenMedia={this.props.onOpenMedia} + card={status.get('card')} + compact + /> + ); } if (otherAccounts) { diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 1b1a4f8d4..4b56c7fdd 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -89,7 +89,7 @@ class ComposeForm extends ImmutablePureComponent { return; } - this.props.onSubmit(this.context.router.history); + this.props.onSubmit(this.context.router ? this.context.router.history : null); } onSuggestionsClearRequested = () => { diff --git a/app/javascript/mastodon/features/compose/components/upload.js b/app/javascript/mastodon/features/compose/components/upload.js index 66c93452c..a1e99dcbb 100644 --- a/app/javascript/mastodon/features/compose/components/upload.js +++ b/app/javascript/mastodon/features/compose/components/upload.js @@ -44,11 +44,13 @@ class Upload extends ImmutablePureComponent { this.props.onSubmit(this.context.router.history); } - handleUndoClick = () => { + handleUndoClick = e => { + e.stopPropagation(); this.props.onUndo(this.props.media.get('id')); } - handleFocalPointClick = () => { + handleFocalPointClick = e => { + e.stopPropagation(); this.props.onOpenFocalPoint(this.props.media.get('id')); } @@ -68,6 +70,10 @@ class Upload extends ImmutablePureComponent { this.setState({ focused: true }); } + handleClick = () => { + this.setState({ focused: true }); + } + handleInputBlur = () => { const { dirtyDescription } = this.state; @@ -88,7 +94,7 @@ class Upload extends ImmutablePureComponent { const y = ((focusY / -2) + .5) * 100; return ( - <div className='compose-form__upload' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> + <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'> <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}> {({ scale }) => ( <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index 7277b7f0f..ffcd6d281 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js @@ -56,6 +56,7 @@ export default class Conversation extends ImmutablePureComponent { otherAccounts={accounts} onMoveUp={this.handleHotkeyMoveUp} onMoveDown={this.handleHotkeyMoveDown} + onClick={this.handleClick} /> ); } diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js b/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js index 4684548e0..635c03c1d 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversations_list.js @@ -9,14 +9,14 @@ import { debounce } from 'lodash'; export default class ConversationsList extends ImmutablePureComponent { static propTypes = { - conversationIds: ImmutablePropTypes.list.isRequired, + conversations: ImmutablePropTypes.list.isRequired, hasMore: PropTypes.bool, isLoading: PropTypes.bool, onLoadMore: PropTypes.func, shouldUpdateScroll: PropTypes.func, }; - getCurrentIndex = id => this.props.conversationIds.indexOf(id) + getCurrentIndex = id => this.props.conversations.findIndex(x => x.get('id') === id) handleMoveUp = id => { const elementIndex = this.getCurrentIndex(id) - 1; @@ -41,22 +41,22 @@ export default class ConversationsList extends ImmutablePureComponent { } handleLoadOlder = debounce(() => { - const last = this.props.conversationIds.last(); + const last = this.props.conversations.last(); - if (last) { - this.props.onLoadMore(last); + if (last && last.get('last_status')) { + this.props.onLoadMore(last.get('last_status')); } }, 300, { leading: true }) render () { - const { conversationIds, onLoadMore, ...other } = this.props; + const { conversations, onLoadMore, ...other } = this.props; return ( <ScrollableList {...other} onLoadMore={onLoadMore && this.handleLoadOlder} scrollKey='direct' ref={this.setRef}> - {conversationIds.map(item => ( + {conversations.map(item => ( <ConversationContainer - key={item} - conversationId={item} + key={item.get('id')} + conversationId={item.get('id')} onMoveUp={this.handleMoveUp} onMoveDown={this.handleMoveDown} /> diff --git a/app/javascript/mastodon/features/direct_timeline/containers/conversations_list_container.js b/app/javascript/mastodon/features/direct_timeline/containers/conversations_list_container.js index 81ea812ad..57e17d96f 100644 --- a/app/javascript/mastodon/features/direct_timeline/containers/conversations_list_container.js +++ b/app/javascript/mastodon/features/direct_timeline/containers/conversations_list_container.js @@ -3,7 +3,7 @@ import ConversationsList from '../components/conversations_list'; import { expandConversations } from '../../../actions/conversations'; const mapStateToProps = state => ({ - conversationIds: state.getIn(['conversations', 'items']).map(x => x.get('id')), + conversations: state.getIn(['conversations', 'items']), isLoading: state.getIn(['conversations', 'isLoading'], true), hasMore: state.getIn(['conversations', 'hasMore'], false), }); diff --git a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js index 36351ec02..164fdcc0b 100644 --- a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js +++ b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js @@ -2,7 +2,7 @@ // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js import data from './emoji_mart_data_light'; -import { getData, getSanitizedData, intersect } from './emoji_utils'; +import { getData, getSanitizedData, uniq, intersect } from './emoji_utils'; let originalPool = {}; let index = {}; @@ -103,7 +103,7 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo } } - allResults = values.map((value) => { + const searchValue = (value) => { let aPool = pool, aIndex = index, length = 0; @@ -150,15 +150,23 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo } return aIndex.results; - }).filter(a => a); + }; - if (allResults.length > 1) { - results = intersect.apply(null, allResults); - } else if (allResults.length) { - results = allResults[0]; + if (values.length > 1) { + results = searchValue(value); } else { results = []; } + + allResults = values.map(searchValue).filter(a => a); + + if (allResults.length > 1) { + allResults = intersect.apply(null, allResults); + } else if (allResults.length) { + allResults = allResults[0]; + } + + results = uniq(results.concat(allResults)); } if (results) { diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index b52f3c4fa..9a87f7a3f 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -59,10 +59,12 @@ export default class Card extends React.PureComponent { card: ImmutablePropTypes.map, maxDescription: PropTypes.number, onOpenMedia: PropTypes.func.isRequired, + compact: PropTypes.boolean, }; static defaultProps = { maxDescription: 50, + compact: false, }; state = { @@ -131,25 +133,25 @@ export default class Card extends React.PureComponent { } render () { - const { card, maxDescription } = this.props; - const { width, embedded } = this.state; + const { card, maxDescription, compact } = this.props; + const { width, embedded } = this.state; if (card === null) { return null; } const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); - const horizontal = card.get('width') > card.get('height') && (card.get('width') + 100 >= width) || card.get('type') !== 'link'; - const className = classnames('status-card', { horizontal }); + const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded; const interactive = card.get('type') !== 'link'; + const className = classnames('status-card', { horizontal, compact, interactive }); const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>; - const ratio = card.get('width') / card.get('height'); + const ratio = compact ? 16 / 9 : card.get('width') / card.get('height'); const height = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio); const description = ( <div className='status-card__content'> {title} - {!horizontal && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>} + {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>} <span className='status-card__host'>{provider}</span> </div> ); @@ -174,7 +176,7 @@ export default class Card extends React.PureComponent { <div className='status-card__actions'> <div> <button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button> - <a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a> + {horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a>} </div> </div> </div> @@ -184,7 +186,7 @@ export default class Card extends React.PureComponent { return ( <div className={className} ref={this.setRef}> {embed} - {description} + {!compact && description} </div> ); } else if (card.get('image')) { diff --git a/app/javascript/mastodon/features/status/containers/card_container.js b/app/javascript/mastodon/features/status/containers/card_container.js index a97404de1..6170d9fd8 100644 --- a/app/javascript/mastodon/features/status/containers/card_container.js +++ b/app/javascript/mastodon/features/status/containers/card_container.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import Card from '../components/card'; const mapStateToProps = (state, { statusId }) => ({ - card: state.getIn(['cards', statusId], null), + card: state.getIn(['statuses', statusId, 'card'], null), }); export default connect(mapStateToProps)(Card); diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js index e98566e26..2c98af1db 100644 --- a/app/javascript/mastodon/reducers/index.js +++ b/app/javascript/mastodon/reducers/index.js @@ -14,7 +14,6 @@ import relationships from './relationships'; import settings from './settings'; import push_notifications from './push_notifications'; import status_lists from './status_lists'; -import cards from './cards'; import mutes from './mutes'; import reports from './reports'; import contexts from './contexts'; @@ -46,7 +45,6 @@ const reducers = { relationships, settings, push_notifications, - cards, mutes, reports, contexts, diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js index 6e3d830da..2c58969f3 100644 --- a/app/javascript/mastodon/reducers/statuses.js +++ b/app/javascript/mastodon/reducers/statuses.js @@ -10,6 +10,7 @@ import { STATUS_REVEAL, STATUS_HIDE, } from '../actions/statuses'; +import { STATUS_CARD_FETCH_SUCCESS } from '../actions/cards'; import { TIMELINE_DELETE } from '../actions/timelines'; import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer'; import { Map as ImmutableMap, fromJS } from 'immutable'; @@ -65,6 +66,8 @@ export default function statuses(state = initialState, action) { }); case TIMELINE_DELETE: return deleteStatus(state, action.id, action.references); + case STATUS_CARD_FETCH_SUCCESS: + return state.setIn([action.id, 'card'], fromJS(action.card)); default: return state; } diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index a62974ec0..9cf783c84 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -5,7 +5,6 @@ import { start } from '../mastodon/common'; start(); function main() { - const { length } = require('stringz'); const IntlMessageFormat = require('intl-messageformat').default; const { timeAgoString } = require('../mastodon/components/relative_timestamp'); const { delegate } = require('rails-ujs'); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f8eb37c58..f778ba06b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1669,6 +1669,7 @@ a.account__display-name { padding: 4px 0; border-radius: 4px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + z-index: 9999; ul { list-style: none; @@ -2560,6 +2561,9 @@ a.status-card { display: block; margin-top: 5px; font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .status-card__image { @@ -2584,6 +2588,31 @@ a.status-card { } } +.status-card.compact { + border-color: lighten($ui-base-color, 4%); + + &.interactive { + border: 0; + } + + .status-card__content { + padding: 8px; + padding-top: 10px; + } + + .status-card__title { + white-space: nowrap; + } + + .status-card__image { + flex: 0 0 60px; + } +} + +a.status-card.compact:hover { + background-color: lighten($ui-base-color, 4%); +} + .status-card__image-image { border-radius: 4px 0 0 4px; display: block; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index a86e3e632..176fb5ce0 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -130,17 +130,6 @@ body.rtl { float: left; } - .activity-stream .detailed-status.light .detailed-status__display-name > div { - float: right; - margin-right: 0; - margin-left: 10px; - } - - .activity-stream .detailed-status.light .detailed-status__meta span > span { - margin-left: 0; - margin-right: 6px; - } - .status__action-bar { &__counter { @@ -174,6 +163,10 @@ body.rtl { margin-right: 0; } + .detailed-status__display-name .display-name { + text-align: right; + } + .detailed-status__display-avatar { margin-right: 0; margin-left: 10px; @@ -359,4 +352,22 @@ body.rtl { margin-right: 15px; text-align: right; } + + .fa-chevron-left::before { + content: "\F054"; + } + + .fa-chevron-right::before { + content: "\F053"; + } + + .column-back-button__icon { + margin-right: 0; + margin-left: 5px; + } + + .column-header__setting-arrows .column-header__setting-btn:last-child { + padding-left: 0; + padding-right: 10px; + } } |