Merge branch 'master' into glitch-soc/merge-upstream

Conflicts: - app/controllers/statuses_controller.rb - app/controllers/stream_entries_controller.rb
2019-06-07 17:00:36 +02:00
parent 8360019896 a60364ca7d
commit 34b8346e7f
63 changed files with 239 additions and 535 deletions
--- 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) => {
--- 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}
--- 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})` }}>
--- 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();
--- 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);
--- 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);

--- 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;
          }
        }
      }
--- 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;
--- 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 {
--- 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;
--- 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 {
--- 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 {
--- 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;
--- 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;
  }

--- 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;
  }
--- 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;
--- 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;
--- 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;
  }