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/styles')

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 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/styles')

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/styles')

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