From 14ca559705285432f06d9343dc2d00c0b009184b Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <dafri.nochiterov8@gmail.com>
Date: Fri, 24 Jan 2020 14:50:49 -0500
Subject: Evenly spread space between tabs (#12944)

This commit fixes uneven spread of space between the tabs in profiles
or notifications (filters). The problem was that links and buttons
shown as blocks had their width determined according to the content
inside of them, so if one tab has more text content than another, it
is going to take over others space, which is uneven and results in
incorrectly aligned (?) tabs display.

By specifying the size of 100% for each tab, parent container will be
forced to divide available space by the number of elements and evenly
give each child fixed space, "text-align: center" then doing its best
job to keep tabs text centered in that space. This relatively fixes
the problem, but will introduce another one - when the block has more
content that its width allows to have, in this scenario the text should
be wrapped or will be displayed over the other elements, but I see this
more as translators' problem. Still, for this case "overflow: hidden"
is added and any unfitting text will be cut out.
---
 app/javascript/styles/mastodon/components.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'app/javascript')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 922d48ad7..8147ef28d 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5731,6 +5731,8 @@ a.status-card.compact:hover {
     text-align: center;
     text-decoration: none;
     position: relative;
+    overflow: hidden;
+    width: 100%;
 
     &.active {
       color: $secondary-text-color;
-- 
cgit 


From 0dfba0884e8885cf242010e0d9da6b328b3560a6 Mon Sep 17 00:00:00 2001
From: Ben Lubar <ben.lubar@gmail.com>
Date: Fri, 24 Jan 2020 13:51:33 -0600
Subject: minor server-sent events fixes (#12945)

* Send output on the server-sent events stream immediately so the client sees that it was successfully opened even if it doesn't have any messages.

Fix transparent SSE streaming for the public:local and hashtag:local stream types.

* Tell caches to never store server-sent events.
---
 app/javascript/mastodon/stream.js | 1 +
 streaming/index.js                | 3 +++
 2 files changed, 4 insertions(+)

(limited to 'app/javascript')

diff --git a/app/javascript/mastodon/stream.js b/app/javascript/mastodon/stream.js
index fe965bcb0..0cb2b228f 100644
--- a/app/javascript/mastodon/stream.js
+++ b/app/javascript/mastodon/stream.js
@@ -92,6 +92,7 @@ export default function getStream(streamingAPIBaseURL, accessToken, stream, { co
     return ws;
   }
 
+  stream = stream.replace(/:/g, '/');
   params.push(`access_token=${accessToken}`);
   const es = new EventSource(`${streamingAPIBaseURL}/api/v1/streaming/${stream}?${params.join('&')}`);
 
diff --git a/streaming/index.js b/streaming/index.js
index 304e7e046..0a19c74a6 100644
--- a/streaming/index.js
+++ b/streaming/index.js
@@ -436,8 +436,11 @@ const startWorker = (workerId) => {
     const accountId = req.accountId || req.remoteAddress;
 
     res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-store');
     res.setHeader('Transfer-Encoding', 'chunked');
 
+    res.write(':)\n');
+
     const heartbeat = setInterval(() => res.write(':thump\n'), 15000);
 
     req.on('close', () => {
-- 
cgit 


From 1268e3b5726b0650afda20410a714995aa9aeae7 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <dafri.nochiterov8@gmail.com>
Date: Fri, 24 Jan 2020 16:37:04 -0500
Subject: Fix unlocalized dropdown button title (#12947)

In detailed status component, "More" action bar button wasn't
localized. This commit fixes it according to previously used code.
---
 app/javascript/mastodon/features/status/components/action_bar.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'app/javascript')

diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index bf6469f2f..657d2bb1c 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -19,6 +19,7 @@ const messages = defineMessages({
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
+  more: { id: 'status.more', defaultMessage: 'More' },
   mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
@@ -275,7 +276,7 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton className='bookmark-icon' active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
         <div className='detailed-status__action-bar-dropdown'>
-          <DropdownMenuContainer size={18} icon='ellipsis-h' status={status} items={menu} direction='left' title='More' />
+          <DropdownMenuContainer size={18} icon='ellipsis-h' status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>
       </div>
     );
-- 
cgit 


From b89e6cfe7071901a43d1bfbde9dc7b872443e1b2 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 Jan 2020 04:20:06 +0100
Subject: Change font size of announcements to be the same as statuses (#12949)

---
 app/javascript/styles/mastodon/components.scss | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'app/javascript')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 8147ef28d..6c412bc89 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -6654,6 +6654,10 @@ noscript {
     padding: 15px;
     padding-right: 15px + 18px;
     position: relative;
+    font-size: 15px;
+    line-height: 20px;
+    word-wrap: break-word;
+    font-weight: 400;
 
     &__range {
       display: block;
-- 
cgit 


From 76f1ed834efd3b58b6ebc8e951b661bbc1b7bf9b Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 Jan 2020 05:23:05 +0100
Subject: Add number animations (#12948)

---
 .../mastodon/components/animated_number.js         | 47 ++++++++++++++++++++++
 .../getting_started/components/announcements.js    |  5 ++-
 .../features/status/components/detailed_status.js  | 11 ++---
 app/javascript/styles/mastodon/components.scss     | 12 +++++-
 4 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 app/javascript/mastodon/components/animated_number.js

(limited to 'app/javascript')

diff --git a/app/javascript/mastodon/components/animated_number.js b/app/javascript/mastodon/components/animated_number.js
new file mode 100644
index 000000000..2d359fbc6
--- /dev/null
+++ b/app/javascript/mastodon/components/animated_number.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedNumber } from 'react-intl';
+import TransitionMotion from 'react-motion/lib/TransitionMotion';
+import spring from 'react-motion/lib/spring';
+import { reduceMotion } from 'mastodon/initial_state';
+
+export default class AnimatedNumber extends React.PureComponent {
+
+  static propTypes = {
+    value: PropTypes.number.isRequired,
+  };
+
+  willEnter () {
+    return { y: -1 };
+  }
+
+  willLeave () {
+    return { y: spring(1, { damping: 35, stiffness: 400 }) };
+  }
+
+  render () {
+    const { value } = this.props;
+
+    if (reduceMotion) {
+      return <FormattedNumber value={value} />;
+    }
+
+    const styles = [{
+      key: value,
+      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+    }];
+
+    return (
+      <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
+        {items => (
+          <span className='animated-number'>
+            {items.map(({ key, style }) => (
+              <span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={key} /></span>
+            ))}
+          </span>
+        )}
+      </TransitionMotion>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.js b/app/javascript/mastodon/features/getting_started/components/announcements.js
index ee444e3f0..18b1de127 100644
--- a/app/javascript/mastodon/features/getting_started/components/announcements.js
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.js
@@ -5,13 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import IconButton from 'mastodon/components/icon_button';
 import Icon from 'mastodon/components/icon';
-import { defineMessages, injectIntl, FormattedMessage, FormattedDate, FormattedNumber } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
 import { autoPlayGif } from 'mastodon/initial_state';
 import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
 import { mascot } from 'mastodon/initial_state';
 import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light';
 import classNames from 'classnames';
 import EmojiPickerDropdown from 'mastodon/features/compose/containers/emoji_picker_dropdown_container';
+import AnimatedNumber from 'mastodon/components/animated_number';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -225,7 +226,7 @@ class Reaction extends ImmutablePureComponent {
     return (
       <button className={classNames('reactions-bar__item', { active: reaction.get('me') })} onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} title={`:${shortCode}:`}>
         <span className='reactions-bar__item__emoji'><Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} /></span>
-        <span className='reactions-bar__item__count'><FormattedNumber value={reaction.get('count')} /></span>
+        <span className='reactions-bar__item__count'><AnimatedNumber value={reaction.get('count')} /></span>
       </button>
     );
   }
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index d5bc82735..2fec247c1 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name';
 import StatusContent from '../../../components/status_content';
 import MediaGallery from '../../../components/media_gallery';
 import { Link } from 'react-router-dom';
-import { FormattedDate, FormattedNumber } from 'react-intl';
+import { FormattedDate } from 'react-intl';
 import Card from './card';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Video from '../../video';
@@ -14,6 +14,7 @@ import Audio from '../../audio';
 import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
+import AnimatedNumber from 'mastodon/components/animated_number';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -172,7 +173,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
           <Icon id={reblogIcon} />
           <span className='detailed-status__reblogs'>
-            <FormattedNumber value={status.get('reblogs_count')} />
+            <AnimatedNumber value={status.get('reblogs_count')} />
           </span>
         </Link>
       );
@@ -181,7 +182,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
           <Icon id={reblogIcon} />
           <span className='detailed-status__reblogs'>
-            <FormattedNumber value={status.get('reblogs_count')} />
+            <AnimatedNumber value={status.get('reblogs_count')} />
           </span>
         </a>
       );
@@ -192,7 +193,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
           <Icon id='star' />
           <span className='detailed-status__favorites'>
-            <FormattedNumber value={status.get('favourites_count')} />
+            <AnimatedNumber value={status.get('favourites_count')} />
           </span>
         </Link>
       );
@@ -201,7 +202,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
           <Icon id='star' />
           <span className='detailed-status__favorites'>
-            <FormattedNumber value={status.get('favourites_count')} />
+            <AnimatedNumber value={status.get('favourites_count')} />
           </span>
         </a>
       );
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 6c412bc89..1e1000ff3 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3,6 +3,14 @@
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
+.animated-number {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+  position: relative;
+}
+
 .link-button {
   display: block;
   font-size: 15px;
@@ -6754,10 +6762,10 @@ noscript {
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
-      background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 90%);
+      background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
 
       .reactions-bar__item__count {
-        color: $highlight-text-color;
+        color: lighten($highlight-text-color, 8%);
       }
     }
   }
-- 
cgit 


From f816da9c6474ddf437681fbf7f5346672436ccdf Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 Jan 2020 05:23:33 +0100
Subject: Add limit of 8 different reaction types per announcement (#12950)

---
 .../mastodon/features/getting_started/components/announcements.js  | 2 +-
 app/validators/reaction_validator.rb                               | 7 +++++++
 config/locales/en.yml                                              | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

(limited to 'app/javascript')

diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.js b/app/javascript/mastodon/features/getting_started/components/announcements.js
index 18b1de127..975db0265 100644
--- a/app/javascript/mastodon/features/getting_started/components/announcements.js
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.js
@@ -265,7 +265,7 @@ class ReactionsBar extends ImmutablePureComponent {
           />
         ))}
 
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />
+        {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />}
       </div>
     );
   }
diff --git a/app/validators/reaction_validator.rb b/app/validators/reaction_validator.rb
index de0f2c94b..be899c89d 100644
--- a/app/validators/reaction_validator.rb
+++ b/app/validators/reaction_validator.rb
@@ -3,10 +3,13 @@
 class ReactionValidator < ActiveModel::Validator
   SUPPORTED_EMOJIS = Oj.load(File.read(Rails.root.join('app', 'javascript', 'mastodon', 'features', 'emoji', 'emoji_map.json'))).keys.freeze
 
+  LIMIT = 8
+
   def validate(reaction)
     return if reaction.name.blank? || reaction.custom_emoji_id.present?
 
     reaction.errors.add(:name, I18n.t('reactions.errors.unrecognized_emoji')) unless unicode_emoji?(reaction.name)
+    reaction.errors.add(:base, I18n.t('reactions.errors.limit_reached')) if limit_reached?(reaction)
   end
 
   private
@@ -14,4 +17,8 @@ class ReactionValidator < ActiveModel::Validator
   def unicode_emoji?(name)
     SUPPORTED_EMOJIS.include?(name)
   end
+
+  def limit_reached?(reaction)
+    reaction.announcement.announcement_reactions.where.not(name: reaction.name).count('distinct name') >= LIMIT
+  end
 end
diff --git a/config/locales/en.yml b/config/locales/en.yml
index bb9084b32..0ba573020 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -951,6 +951,7 @@ en:
     public_timelines: Public timelines
   reactions:
     errors:
+      limit_reached: Limit of different reactions reached
       unrecognized_emoji: is not a recognized emoji
   relationships:
     activity: Account activity
-- 
cgit 


From 05351cbffba260816ddaa5ac3715e3831f0f1706 Mon Sep 17 00:00:00 2001
From: Ben Lubar <ben.lubar@gmail.com>
Date: Fri, 24 Jan 2020 13:51:33 -0600
Subject: [Glitch] minor server-sent events fixes

Port front-end changes from 0dfba0884e8885cf242010e0d9da6b328b3560a6 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 app/javascript/flavours/glitch/util/stream.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/util/stream.js b/app/javascript/flavours/glitch/util/stream.js
index fe965bcb0..0cb2b228f 100644
--- a/app/javascript/flavours/glitch/util/stream.js
+++ b/app/javascript/flavours/glitch/util/stream.js
@@ -92,6 +92,7 @@ export default function getStream(streamingAPIBaseURL, accessToken, stream, { co
     return ws;
   }
 
+  stream = stream.replace(/:/g, '/');
   params.push(`access_token=${accessToken}`);
   const es = new EventSource(`${streamingAPIBaseURL}/api/v1/streaming/${stream}?${params.join('&')}`);
 
-- 
cgit 


From 1f8563c256a05439f47780857fc0cbc736c30670 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Sat, 25 Jan 2020 10:17:13 +0100
Subject: Rename DropdownMenu's ariaLabel to title, to reduce unnecessary
 changes with upstream

---
 app/javascript/flavours/glitch/components/dropdown_menu.js        | 8 ++++----
 .../flavours/glitch/features/status/components/action_bar.js      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.js b/app/javascript/flavours/glitch/components/dropdown_menu.js
index ab5b7a572..cc4d714e8 100644
--- a/app/javascript/flavours/glitch/components/dropdown_menu.js
+++ b/app/javascript/flavours/glitch/components/dropdown_menu.js
@@ -184,7 +184,7 @@ export default class Dropdown extends React.PureComponent {
     icon: PropTypes.string.isRequired,
     items: PropTypes.array.isRequired,
     size: PropTypes.number.isRequired,
-    ariaLabel: PropTypes.string,
+    title: PropTypes.string,
     disabled: PropTypes.bool,
     status: ImmutablePropTypes.map,
     isUserTouching: PropTypes.func,
@@ -197,7 +197,7 @@ export default class Dropdown extends React.PureComponent {
   };
 
   static defaultProps = {
-    ariaLabel: 'Menu',
+    title: 'Menu',
   };
 
   state = {
@@ -277,14 +277,14 @@ export default class Dropdown extends React.PureComponent {
   }
 
   render () {
-    const { icon, items, size, ariaLabel, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard } = this.props;
+    const { icon, items, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
       <div>
         <IconButton
           icon={icon}
-          title={ariaLabel}
+          title={title}
           active={open}
           disabled={disabled}
           size={size}
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index c48bfaccd..8f6f358d8 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -207,7 +207,7 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton className='bookmark-icon' active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
         <div className='detailed-status__action-bar-dropdown'>
-          <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' ariaLabel='More' />
+          <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title='More' />
         </div>
       </div>
     );
-- 
cgit 


From 2bde217ea5faf574098fa705839ea0fe7887e6d7 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <dafri.nochiterov8@gmail.com>
Date: Fri, 24 Jan 2020 16:37:04 -0500
Subject: [Glitch] Fix unlocalized dropdown button title

Port 1268e3b5726b0650afda20410a714995aa9aeae7 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../flavours/glitch/features/status/components/action_bar.js           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index 8f6f358d8..d71a3ae08 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -18,6 +18,7 @@ const messages = defineMessages({
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
+  more: { id: 'status.more', defaultMessage: 'More' },
   mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
@@ -207,7 +208,7 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton className='bookmark-icon' active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
         <div className='detailed-status__action-bar-dropdown'>
-          <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title='More' />
+          <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>
       </div>
     );
-- 
cgit 


From 3c4bd039495ed542d8f928c051f51e8bcd5e3392 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 Jan 2020 04:20:06 +0100
Subject: [Glitch] Change font size of announcements to be the same as statuses

Port b89e6cfe7071901a43d1bfbde9dc7b872443e1b2 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 app/javascript/flavours/glitch/styles/components/announcements.scss | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss
index 0d1f1837b..2e559b1d7 100644
--- a/app/javascript/flavours/glitch/styles/components/announcements.scss
+++ b/app/javascript/flavours/glitch/styles/components/announcements.scss
@@ -68,6 +68,10 @@
     padding: 15px;
     padding-right: 15px + 18px;
     position: relative;
+    font-size: 15px;
+    line-height: 20px;
+    word-wrap: break-word;
+    font-weight: 400;
 
     &__range {
       display: block;
-- 
cgit 


From f1e4738f8111a11005b1f00affb6678c16059ee5 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 Jan 2020 05:23:05 +0100
Subject: [Glitch] Add number animations

Port 76f1ed834efd3b58b6ebc8e951b661bbc1b7bf9b to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../flavours/glitch/components/animated_number.js  | 47 ++++++++++++++++++++++
 .../getting_started/components/announcements.js    |  5 ++-
 .../features/status/components/detailed_status.js  | 11 ++---
 .../glitch/styles/components/announcements.scss    |  4 +-
 .../flavours/glitch/styles/components/index.scss   |  8 ++++
 5 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/animated_number.js

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/components/animated_number.js b/app/javascript/flavours/glitch/components/animated_number.js
new file mode 100644
index 000000000..4d14d2924
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/animated_number.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedNumber } from 'react-intl';
+import TransitionMotion from 'react-motion/lib/TransitionMotion';
+import spring from 'react-motion/lib/spring';
+import { reduceMotion } from 'flavours/glitch/util/initial_state';
+
+export default class AnimatedNumber extends React.PureComponent {
+
+  static propTypes = {
+    value: PropTypes.number.isRequired,
+  };
+
+  willEnter () {
+    return { y: -1 };
+  }
+
+  willLeave () {
+    return { y: spring(1, { damping: 35, stiffness: 400 }) };
+  }
+
+  render () {
+    const { value } = this.props;
+
+    if (reduceMotion) {
+      return <FormattedNumber value={value} />;
+    }
+
+    const styles = [{
+      key: value,
+      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+    }];
+
+    return (
+      <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
+        {items => (
+          <span className='animated-number'>
+            {items.map(({ key, style }) => (
+              <span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={key} /></span>
+            ))}
+          </span>
+        )}
+      </TransitionMotion>
+    );
+  }
+
+}
diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
index 010778727..52c95441b 100644
--- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
+++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
@@ -5,13 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import IconButton from 'flavours/glitch/components/icon_button';
 import Icon from 'flavours/glitch/components/icon';
-import { defineMessages, injectIntl, FormattedMessage, FormattedDate, FormattedNumber } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
 import { autoPlayGif } from 'flavours/glitch/util/initial_state';
 import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
 import { mascot } from 'flavours/glitch/util/initial_state';
 import unicodeMapping from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light';
 import classNames from 'classnames';
 import EmojiPickerDropdown from 'flavours/glitch/features/emoji_picker';
+import AnimatedNumber from 'flavours/glitch/components/animated_number';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -225,7 +226,7 @@ class Reaction extends ImmutablePureComponent {
     return (
       <button className={classNames('reactions-bar__item', { active: reaction.get('me') })} onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} title={`:${shortCode}:`}>
         <span className='reactions-bar__item__emoji'><Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} /></span>
-        <span className='reactions-bar__item__count'><FormattedNumber value={reaction.get('count')} /></span>
+        <span className='reactions-bar__item__count'><AnimatedNumber value={reaction.get('count')} /></span>
       </button>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 898011c88..c4ac8f0a6 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -7,7 +7,7 @@ import StatusContent from 'flavours/glitch/components/status_content';
 import MediaGallery from 'flavours/glitch/components/media_gallery';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { Link } from 'react-router-dom';
-import { FormattedDate, FormattedNumber } from 'react-intl';
+import { FormattedDate } from 'react-intl';
 import Card from './card';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Video from 'flavours/glitch/features/video';
@@ -17,6 +17,7 @@ import scheduleIdleTask from 'flavours/glitch/util/schedule_idle_task';
 import classNames from 'classnames';
 import PollContainer from 'flavours/glitch/containers/poll_container';
 import Icon from 'flavours/glitch/components/icon';
+import AnimatedNumber from 'flavours/glitch/components/animated_number';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -204,7 +205,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
           <Icon id={reblogIcon} />
           <span className='detailed-status__reblogs'>
-            <FormattedNumber value={status.get('reblogs_count')} />
+            <AnimatedNumber value={status.get('reblogs_count')} />
           </span>
         </Link>
       );
@@ -213,7 +214,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
           <Icon id={reblogIcon} />
           <span className='detailed-status__reblogs'>
-            <FormattedNumber value={status.get('reblogs_count')} />
+            <AnimatedNumber value={status.get('reblogs_count')} />
           </span>
         </a>
       );
@@ -224,7 +225,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
           <Icon id='star' />
           <span className='detailed-status__favorites'>
-            <FormattedNumber value={status.get('favourites_count')} />
+            <AnimatedNumber value={status.get('favourites_count')} />
           </span>
         </Link>
       );
@@ -233,7 +234,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         <a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
           <Icon id='star' />
           <span className='detailed-status__favorites'>
-            <FormattedNumber value={status.get('favourites_count')} />
+            <AnimatedNumber value={status.get('favourites_count')} />
           </span>
         </a>
       );
diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss
index 2e559b1d7..11d29931d 100644
--- a/app/javascript/flavours/glitch/styles/components/announcements.scss
+++ b/app/javascript/flavours/glitch/styles/components/announcements.scss
@@ -168,10 +168,10 @@
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
-      background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 90%);
+      background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
 
       .reactions-bar__item__count {
-        color: $highlight-text-color;
+        color: lighten($highlight-text-color, 8%);
       }
     }
   }
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index abe933860..d97ab436d 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -3,6 +3,14 @@
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
+.animated-number {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+  position: relative;
+}
+
 .link-button {
   display: block;
   font-size: 15px;
-- 
cgit 


From 4e1efacfac29cbd4ba3ff675abaa923bb53fcbc8 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 25 Jan 2020 05:23:33 +0100
Subject: [Glitch] Add limit of 8 different reaction types per announcement

Port f816da9c6474ddf437681fbf7f5346672436ccdf to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../glitch/features/getting_started/components/announcements.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/javascript')

diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
index 52c95441b..71b54b060 100644
--- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
+++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js
@@ -265,7 +265,7 @@ class ReactionsBar extends ImmutablePureComponent {
           />
         ))}
 
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />
+        {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />}
       </div>
     );
   }
-- 
cgit