diff options
Diffstat (limited to 'app/javascript')
23 files changed, 134 insertions, 62 deletions
diff --git a/app/javascript/flavours/glitch/components/autosuggest_textarea.js b/app/javascript/flavours/glitch/components/autosuggest_textarea.js index e1ded2b3a..cf3907fbf 100644 --- a/app/javascript/flavours/glitch/components/autosuggest_textarea.js +++ b/app/javascript/flavours/glitch/components/autosuggest_textarea.js @@ -138,8 +138,11 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { this.setState({ suggestionsHidden: true, focused: false }); } - onFocus = () => { + onFocus = (e) => { this.setState({ focused: true }); + if (this.props.onFocus) { + this.props.onFocus(e); + } } onSuggestionClick = (e) => { diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index cc82a50d4..0120be28f 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -28,6 +28,10 @@ const messages = defineMessages({ export default @injectIntl class ComposeForm extends ImmutablePureComponent { + setRef = c => { + this.composeForm = c; + }; + static contextTypes = { router: PropTypes.object, }; @@ -208,6 +212,10 @@ class ComposeForm extends ImmutablePureComponent { } } + handleFocus = () => { + this.composeForm.scrollIntoView(); + } + // This statement does several things: // - If we're beginning a reply, and, // - Replying to zero or one users, places the cursor at the end @@ -302,7 +310,7 @@ class ComposeForm extends ImmutablePureComponent { let disabledButton = isSubmitting || isUploading || isChangingUpload || (!text.trim().length && !anyMedia); return ( - <div className='composer'> + <div className='composer' ref={this.setRef}> <WarningContainer /> <ReplyIndicatorContainer /> @@ -337,6 +345,7 @@ class ComposeForm extends ImmutablePureComponent { value={this.props.text} onChange={this.handleChange} suggestions={this.props.suggestions} + onFocus={this.handleFocus} onKeyDown={this.handleKeyDown} onSuggestionsFetchRequested={onFetchSuggestions} onSuggestionsClearRequested={onClearSuggestions} diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js index ef829b937..0405073c5 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.js +++ b/app/javascript/flavours/glitch/features/list_timeline/index.js @@ -75,6 +75,23 @@ export default class ListTimeline extends React.PureComponent { this.disconnect = dispatch(connectListStream(id)); } + componentWillReceiveProps (nextProps) { + const { dispatch } = this.props; + const { id } = nextProps.params; + + if (id !== this.props.params.id) { + if (this.disconnect) { + this.disconnect(); + this.disconnect = null; + } + + dispatch(fetchList(id)); + dispatch(expandListTimeline(id)); + + this.disconnect = dispatch(connectListStream(id)); + } + } + componentWillUnmount () { if (this.disconnect) { this.disconnect(); diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js index 51a341c42..36dfb8f15 100644 --- a/app/javascript/flavours/glitch/reducers/compose.js +++ b/app/javascript/flavours/glitch/reducers/compose.js @@ -442,6 +442,7 @@ export default function compose(state = initialState, action) { map.set('focusDate', new Date()); map.set('caretPosition', null); map.set('idempotencyKey', uuid()); + map.set('sensitive', action.status.get('sensitive')); if (action.status.get('spoiler_text').length > 0) { map.set('spoiler', true); diff --git a/app/javascript/flavours/glitch/reducers/timelines.js b/app/javascript/flavours/glitch/reducers/timelines.js index cb233de1c..440b370e6 100644 --- a/app/javascript/flavours/glitch/reducers/timelines.js +++ b/app/javascript/flavours/glitch/reducers/timelines.js @@ -35,7 +35,9 @@ const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, is if (!next && !isLoadingRecent) mMap.set('hasMore', false); - if (!statuses.isEmpty()) { + if (timeline.endsWith(':pinned')) { + mMap.set('items', statuses.map(status => status.get('id'))); + } else if (!statuses.isEmpty()) { mMap.update('items', ImmutableList(), oldIds => { const newIds = statuses.map(status => status.get('id')); const lastIndex = oldIds.findLastIndex(id => id !== null && compareId(id, newIds.last()) >= 0) + 1; diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index 5cad43e82..4c50294ba 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -138,8 +138,11 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { this.setState({ suggestionsHidden: true, focused: false }); } - onFocus = () => { + onFocus = (e) => { this.setState({ focused: true }); + if (this.props.onFocus) { + this.props.onFocus(e); + } } onSuggestionClick = (e) => { diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index ff6c521f2..ff22a2953 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -34,6 +34,10 @@ const messages = defineMessages({ export default @injectIntl class ComposeForm extends ImmutablePureComponent { + setRef = c => { + this.composeForm = c; + }; + static contextTypes = { router: PropTypes.object, }; @@ -115,6 +119,10 @@ class ComposeForm extends ImmutablePureComponent { this.props.onChangeSpoilerText(e.target.value); } + handleFocus = () => { + this.composeForm.scrollIntoView(); + } + componentDidUpdate (prevProps) { // This statement does several things: // - If we're beginning a reply, and, @@ -178,7 +186,7 @@ class ComposeForm extends ImmutablePureComponent { } return ( - <div className='compose-form'> + <div className='compose-form' ref={this.setRef}> <WarningContainer /> <ReplyIndicatorContainer /> @@ -201,7 +209,7 @@ class ComposeForm extends ImmutablePureComponent { /> </div> - <div className='emoji-picker-wrapper'> + <div className={`emoji-picker-wrapper ${this.props.showSearch ? 'emoji-picker-wrapper--hidden' : ''}`}> <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} /> </div> @@ -212,6 +220,7 @@ class ComposeForm extends ImmutablePureComponent { value={this.props.text} onChange={this.handleChange} suggestions={this.props.suggestions} + onFocus={this.handleFocus} onKeyDown={this.handleKeyDown} onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested} diff --git a/app/javascript/mastodon/features/compose/components/search.js b/app/javascript/mastodon/features/compose/components/search.js index 6833c43ef..7f9edfeee 100644 --- a/app/javascript/mastodon/features/compose/components/search.js +++ b/app/javascript/mastodon/features/compose/components/search.js @@ -21,7 +21,7 @@ class SearchPopout extends React.PureComponent { const { style } = this.props; const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />; return ( - <div style={{ ...style, position: 'absolute', width: 285 }}> + <div style={{ ...style, position: 'absolute', width: 285, zIndex: 2 }}> <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}> {({ opacity, scaleX, scaleY }) => ( <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}> diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js index b6722e91a..ad7d16f95 100644 --- a/app/javascript/mastodon/features/list_timeline/index.js +++ b/app/javascript/mastodon/features/list_timeline/index.js @@ -75,6 +75,23 @@ class ListTimeline extends React.PureComponent { this.disconnect = dispatch(connectListStream(id)); } + componentWillReceiveProps (nextProps) { + const { dispatch } = this.props; + const { id } = nextProps.params; + + if (id !== this.props.params.id) { + if (this.disconnect) { + this.disconnect(); + this.disconnect = null; + } + + dispatch(fetchList(id)); + dispatch(expandListTimeline(id)); + + this.disconnect = dispatch(connectListStream(id)); + } + } + componentWillUnmount () { if (this.disconnect) { this.disconnect(); diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js index 708272591..29c691144 100644 --- a/app/javascript/mastodon/reducers/compose.js +++ b/app/javascript/mastodon/reducers/compose.js @@ -338,6 +338,7 @@ export default function compose(state = initialState, action) { map.set('focusDate', new Date()); map.set('caretPosition', null); map.set('idempotencyKey', uuid()); + map.set('sensitive', action.status.get('sensitive')); if (action.status.get('spoiler_text').length > 0) { map.set('spoiler', true); diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index 6a972f967..309a95a19 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -35,14 +35,12 @@ const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, is if (!next && !isLoadingRecent) mMap.set('hasMore', false); - if (!statuses.isEmpty()) { + if (timeline.endsWith(':pinned')) { + mMap.set('items', statuses.map(status => status.get('id'))); + } else if (!statuses.isEmpty()) { mMap.update('items', ImmutableList(), oldIds => { const newIds = statuses.map(status => status.get('id')); - if (timeline.indexOf(':pinned') !== -1) { - return newIds; - } - const lastIndex = oldIds.findLastIndex(id => id !== null && compareId(id, newIds.last()) >= 0) + 1; const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0); diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index f78e60597..5a40e7d79 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -5,7 +5,7 @@ &-description { input { &::placeholder { - opacity: 1.0; + opacity: 1; } } } diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index f6cadf029..cfe3b21db 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.scss @@ -20,5 +20,5 @@ $highlight-text-color: $classic-highlight-color !default; $action-button-color: #8d9ac2; $inverted-text-color: $black !default; -$lighter-text-color: darken($ui-base-color,6%) !default; +$lighter-text-color: darken($ui-base-color, 6%) !default; $light-text-color: darken($ui-primary-color, 40%) !default; diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 74d1df8ed..b4fb1d709 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -279,6 +279,8 @@ h5 { } .hero-with-button { + padding-bottom: 16px; + h1 { margin-bottom: 4px; } @@ -286,8 +288,6 @@ h5 { p.lead { margin-bottom: 32px; } - - padding-bottom: 16px; } .header { diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index 08806599e..faaffb30f 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -1,21 +1,21 @@ -@mixin avatar-radius() { +@mixin avatar-radius { border-radius: 4px; background: transparent no-repeat; background-position: 50%; background-clip: padding-box; } -@mixin avatar-size($size:48px) { +@mixin avatar-size($size: 48px) { width: $size; height: $size; background-size: $size $size; } -@mixin search-input() { +@mixin search-input { outline: 0; box-sizing: border-box; width: 100%; - border: none; + border: 0; box-shadow: none; font-family: inherit; background: $ui-base-color; @@ -42,7 +42,7 @@ } } -@mixin search-popout() { +@mixin search-popout { background: $simple-background-color; border-radius: 4px; padding: 10px 14px; diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 74f91599a..692d86852 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -171,7 +171,7 @@ $content-width: 840px; text-transform: none; padding-bottom: 0; margin-bottom: 0; - border-bottom: none; + border-bottom: 0; } & > p { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 4411ca0b4..b5a77ce94 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -2,7 +2,8 @@ @if type-of($color) == 'color' { $color: str-slice(ie-hex-str($color), 4); } - @return '%23' + unquote($color) + + @return '%23' + unquote($color); } body { @@ -15,7 +16,7 @@ body { text-rendering: optimizelegibility; font-feature-settings: "kern"; text-size-adjust: none; - -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; &.system-font { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index cd5ff35a4..63c38ff42 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -128,7 +128,7 @@ display: inline-block; padding: 0; color: $action-button-color; - border: none; + border: 0; background: transparent; cursor: pointer; transition: color 100ms ease-in; @@ -196,7 +196,7 @@ .text-icon-button { color: $lighter-text-color; - border: none; + border: 0; background: transparent; cursor: pointer; font-weight: 600; @@ -353,12 +353,12 @@ .spoiler-input { height: 0; transform-origin: bottom; - opacity: 0.0; + opacity: 0; &.spoiler-input--visible { height: 36px; margin-bottom: 11px; - opacity: 1.0; + opacity: 1; } } @@ -408,12 +408,20 @@ } } - .emoji-picker-wrapper, .autosuggest-textarea__suggestions-wrapper { position: relative; height: 0; } + .emoji-picker-wrapper { + position: relative; + height: 0; + + &.emoji-picker-wrapper--hidden { + display: none; + } + } + .autosuggest-textarea__suggestions { box-sizing: border-box; display: none; @@ -1185,7 +1193,7 @@ } .account__avatar { - @include avatar-radius(); + @include avatar-radius; position: relative; &-inline { @@ -1195,11 +1203,11 @@ } &-composite { - @include avatar-radius(); + @include avatar-radius; overflow: hidden; & > div { - @include avatar-radius(); + @include avatar-radius; float: left; position: relative; box-sizing: border-box; @@ -1215,12 +1223,12 @@ a .account__avatar { @include avatar-size(48px); &-base { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(36px); } &-overlay { - @include avatar-radius(); + @include avatar-radius; @include avatar-size(24px); position: absolute; @@ -1598,13 +1606,13 @@ a.account__display-name { .icon-button.close { position: absolute; pointer-events: none; - transform: scale(0.0, 1.0) translate(-100%, 0); + transform: scale(0, 1) translate(-100%, 0); opacity: 0; } .compose__action-bar .icon-button { pointer-events: auto; - transform: scale(1.0, 1.0) translate(0, 0); + transform: scale(1, 1) translate(0, 0); opacity: 1; } } @@ -2071,6 +2079,10 @@ a.account__display-name { .account { padding: 15px 10px; + + &__header__bio { + margin: 0 -10px; + } } .notification { @@ -2699,7 +2711,7 @@ a.account__display-name { .setting-text { color: $darker-text-color; background: transparent; - border: none; + border: 0; border-bottom: 2px solid $ui-primary-color; box-sizing: border-box; display: block; @@ -3037,7 +3049,7 @@ a.status-card.compact:hover { & > button { margin: 0; - border: none; + border: 0; padding: 15px 0 15px 15px; color: inherit; background: transparent; @@ -3202,11 +3214,11 @@ a.status-card.compact:hover { } .no-reduce-motion .loading-indicator span { - animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } .no-reduce-motion .loading-indicator__figure { - animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } @keyframes loader-figure { @@ -3373,7 +3385,7 @@ a.status-card.compact:hover { .column-select { &__control { - @include search-input(); + @include search-input; } &__placeholder { @@ -3424,7 +3436,7 @@ a.status-card.compact:hover { } &__menu { - @include search-popout(); + @include search-popout; padding: 0; background: $ui-secondary-color; } @@ -3585,7 +3597,7 @@ a.status-card.compact:hover { .no-reduce-motion .shake-bottom { transform-origin: 50% 100%; - animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both; + animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both; } .emoji-picker-dropdown__menu { @@ -3880,10 +3892,11 @@ a.status-card.compact:hover { } .search__input { + @include search-input; + display: block; padding: 10px; padding-right: 30px; - @include search-input(); } .search__icon { @@ -4491,14 +4504,14 @@ a.status-card.compact:hover { } .actions-modal { + max-height: 80vh; + max-width: 80vw; + .status { overflow-y: auto; max-height: 300px; } - max-height: 80vh; - max-width: 80vw; - .actions-modal__item-label { font-weight: 500; } @@ -4713,7 +4726,7 @@ a.status-card.compact:hover { } .media-gallery__item { - border: none; + border: 0; box-sizing: border-box; display: block; float: left; @@ -5173,7 +5186,7 @@ a.status-card.compact:hover { } .account-gallery__item { - border: none; + border: 0; box-sizing: border-box; display: block; position: relative; @@ -5247,7 +5260,7 @@ a.status-card.compact:hover { } .search-popout { - @include search-popout(); + @include search-popout; } noscript { @@ -5349,14 +5362,14 @@ noscript { .icon-button.close { pointer-events: auto; opacity: 1; - transform: scale(1.0, 1.0) translate(0, 0); + transform: scale(1, 1) translate(0, 0); bottom: 5px; } .compose__action-bar .icon-button { pointer-events: none; opacity: 0; - transform: scale(0.0, 1.0) translate(100%, 0); + transform: scale(0, 1) translate(100%, 0); } } } @@ -5386,7 +5399,7 @@ noscript { box-sizing: border-box; display: block; width: 100%; - border: none; + border: 0; padding: 10px; font-family: $font-monospace, monospace; background: $ui-base-color; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 0eae4939f..2d68d2b70 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -121,7 +121,7 @@ grid-auto-rows: max-content; .column-0 { - grid-column: 1/3; + grid-column: 1 / 3; grid-row: 1; } @@ -136,7 +136,7 @@ } .column-3 { - grid-column: 1/3; + grid-column: 1 / 3; grid-row: 3; } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index e49084b5f..4bfd66504 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -1,14 +1,14 @@ .emoji-mart { + font-size: 13px; + display: inline-block; + color: $inverted-text-color; + &, * { box-sizing: border-box; line-height: 1.15; } - font-size: 13px; - display: inline-block; - color: $inverted-text-color; - .emoji-mart-emoji { padding: 6px; } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 2b8d7a682..f3de87791 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -553,7 +553,7 @@ code { box-sizing: border-box; display: block; width: 100%; - border: none; + border: 0; padding: 10px; font-family: $font-monospace, monospace; background: $ui-base-color; diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 0d55afda4..12f57b7a9 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -47,7 +47,6 @@ width: 100%; font-size: 14px; color: $inverted-text-color; - display: block; outline: 0; font-family: inherit; background: $simple-background-color; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 940dc8af2..a59f59f59 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -180,7 +180,6 @@ body.rtl { } .fa-ul { - margin-left: 0; margin-left: 2.14285714em; } |