Merge remote-tracking branch 'origin/master' into gs-master

Conflicts:
 	spec/views/about/show.html.haml_spec.rb

app/javascript/mastodon/features/ui/components/zoomable_image.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Hammer from 'hammerjs';
 
 const MIN_SCALE = 1;
 const MAX_SCALE = 4;
-const DOUBLE_TAP_SCALE = 2;
+
+const getMidpoint = (p1, p2) => ({
+  x: (p1.clientX + p2.clientX) / 2,
+  y: (p1.clientY + p2.clientY) / 2,
+});
+
+const getDistance = (p1, p2) =>
+  Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2));
 
 const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
 
@@ -31,97 +37,83 @@ export default class ZoomableImage extends React.PureComponent {
   removers = [];
   container = null;
   image = null;
-  lastScale = null;
+  lastTouchEndTime = 0;
-  zoomCenter = null;
+  lastDistance = 0;
 
   componentDidMount () {
-    // register pinch event handlers to the container
+    let handler = this.handleTouchStart;
-    let hammer = new Hammer.Manager(this.container, {
+    this.container.addEventListener('touchstart', handler);
-      // required to make container scrollable by touch
+    this.removers.push(() => this.container.removeEventListener('touchstart', handler));
-      touchAction: 'pan-x pan-y',
+    handler = this.handleTouchMove;
-    });
+    // on Chrome 56+, touch event listeners will default to passive
-    hammer.add(new Hammer.Pinch());
+    // https://www.chromestatus.com/features/5093566007214080
-    hammer.on('pinchstart', this.handlePinchStart);
+    this.container.addEventListener('touchmove', handler, { passive: false });
-    hammer.on('pinchmove', this.handlePinchMove);
+    this.removers.push(() => this.container.removeEventListener('touchend', handler));
-    this.removers.push(() => hammer.off('pinchstart pinchmove'));
-
-    // register tap event handlers
-    hammer = new Hammer.Manager(this.image);
-    // NOTE the order of adding is also the order of gesture recognition
-    hammer.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
-    hammer.add(new Hammer.Tap());
-    // prevent the 'tap' event handler be fired on double tap
-    hammer.get('tap').requireFailure('doubletap');
-    // NOTE 'tap' and 'doubletap' events are fired by touch and *mouse*
-    hammer.on('tap', this.handleTap);
-    hammer.on('doubletap', this.handleDoubleTap);
-    this.removers.push(() => hammer.off('tap doubletap'));
   }
 
   componentWillUnmount () {
     this.removeEventListeners();
   }
 
-  componentDidUpdate (prevProps, prevState) {
-    if (!this.zoomCenter) return;
-
-    const { x: cx, y: cy } = this.zoomCenter;
-    const { scale: prevScale } = prevState;
-    const { scale: nextScale } = this.state;
-    const { scrollLeft, scrollTop } = this.container;
-
-    // math memo:
-    // x = (scrollLeft + cx) / scrollWidth
-    // x' = (nextScrollLeft + cx) / nextScrollWidth
-    // scrollWidth = clientWidth * prevScale
-    // scrollWidth' = clientWidth * nextScale
-    // Solve x = x' for nextScrollLeft
-    const nextScrollLeft = (scrollLeft + cx) * nextScale / prevScale - cx;
-    const nextScrollTop = (scrollTop + cy) * nextScale / prevScale - cy;
-
-    this.container.scrollLeft = nextScrollLeft;
-    this.container.scrollTop = nextScrollTop;
-  }
-
   removeEventListeners () {
     this.removers.forEach(listeners => listeners());
     this.removers = [];
   }
 
-  handleClick = e => {
+  handleTouchStart = e => {
-    // prevent the click event propagated to parent
+    if (e.touches.length !== 2) return;
+
+    this.lastDistance = getDistance(...e.touches);
+  }
+
+  handleTouchMove = e => {
+    const { scrollTop, scrollHeight, clientHeight } = this.container;
+    if (e.touches.length === 1 && scrollTop !== scrollHeight - clientHeight) {
+      // prevent propagating event to MediaModal
+      e.stopPropagation();
+      return;
+    }
+    if (e.touches.length !== 2) return;
+
+    e.preventDefault();
     e.stopPropagation();
 
-    // the tap event handler is executed at the same time by touch and mouse,
+    const distance = getDistance(...e.touches);
-    // so we don't need to execute the onClick handler here
+    const midpoint = getMidpoint(...e.touches);
+    const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance);
+
+    this.zoom(scale, midpoint);
+
+    this.lastMidpoint = midpoint;
+    this.lastDistance = distance;
   }
 
-  handlePinchStart = () => {
+  zoom(nextScale, midpoint) {
-    this.lastScale = this.state.scale;
+    const { scale } = this.state;
+    const { scrollLeft, scrollTop } = this.container;
+
+    // math memo:
+    // x = (scrollLeft + midpoint.x) / scrollWidth
+    // x' = (nextScrollLeft + midpoint.x) / nextScrollWidth
+    // scrollWidth = clientWidth * scale
+    // scrollWidth' = clientWidth * nextScale
+    // Solve x = x' for nextScrollLeft
+    const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x;
+    const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y;
+
+    this.setState({ scale: nextScale }, () => {
+      this.container.scrollLeft = nextScrollLeft;
+      this.container.scrollTop = nextScrollTop;
+    });
   }
 
-  handlePinchMove = e => {
+  handleClick = e => {
-    const scale = clamp(MIN_SCALE, MAX_SCALE, this.lastScale * e.scale);
+    // don't propagate event to MediaModal
-    this.zoom(scale, e.center);
+    e.stopPropagation();
-  }
-
-  handleTap = () => {
     const handler = this.props.onClick;
     if (handler) handler();
   }
 
-  handleDoubleTap = e => {
-    if (this.state.scale === MIN_SCALE)
-      this.zoom(DOUBLE_TAP_SCALE, e.center);
-    else
-      this.zoom(MIN_SCALE, e.center);
-  }
-
-  zoom (scale, center) {
-    this.zoomCenter = center;
-    this.setState({ scale });
-  }
-
   setContainerRef = c => {
     this.container = c;
   }
@@ -134,38 +126,25 @@ export default class ZoomableImage extends React.PureComponent {
     const { alt, src } = this.props;
     const { scale } = this.state;
     const overflow = scale === 1 ? 'hidden' : 'scroll';
-    const marginStyle = {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      transform: `scale(${scale})`,
-      transformOrigin: '0 0',
-    };
 
     return (
       <div
         className='zoomable-image'
         ref={this.setContainerRef}
         style={{ overflow }}
-      >
-        <div
-          className='zoomable-image__margin'
-          style={marginStyle}
       >
         <img
-            ref={this.setImageRef}
           role='presentation'
+          ref={this.setImageRef}
           alt={alt}
           src={src}
+          style={{
+            transform: `scale(${scale})`,
+            transformOrigin: '0 0',
+          }}
           onClick={this.handleClick}
         />
       </div>
-      </div>
     );
   }
 

app/javascript/styles/mastodon/about.scss

@@ -681,6 +681,54 @@ $small-breakpoint: 960px;
       margin-bottom: 0;
     }
 
+    .account {
+      border-bottom: 0;
+      padding: 0;
+
+      &__display-name {
+        align-items: center;
+        display: flex;
+        margin-right: 5px;
+      }
+
+      div.account__display-name {
+        &:hover {
+          .display-name strong {
+            text-decoration: none;
+          }
+        }
+
+        .account__avatar {
+          cursor: default;
+        }
+      }
+
+      &__avatar-wrapper {
+        margin-left: 0;
+        flex: 0 0 auto;
+      }
+
+      &__avatar {
+        width: 44px;
+        height: 44px;
+        background-size: 44px 44px;
+      }
+
+      .display-name {
+        font-size: 15px;
+
+        &__account {
+          font-size: 14px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $small-breakpoint) {
+      .contact {
+        margin-top: 30px;
+      }
+    }
+
     @media screen and (max-width: $column-breakpoint) {
       padding: 25px 20px;
     }

app/javascript/styles/mastodon/components.scss

@@ -1483,6 +1483,9 @@
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   img {
     max-width: $media-modal-media-max-width;

app/views/about/show.html.haml

@@ -107,6 +107,28 @@
               %div
                 %h3= t 'about.what_is_mastodon'
                 %p= t 'about.about_mastodon_html'
+              %div.contact
+                %h3= t 'about.administered_by'
+
+                .account
+                  .account__wrapper
+                    - if @instance_presenter.contact_account
+                      = link_to TagManager.instance.url_for(@instance_presenter.contact_account), class: 'account__display-name' do
+                        .account__avatar-wrapper
+                          .account__avatar{ style: "background-image: url(#{@instance_presenter.contact_account.avatar.url})" }
+                        %span.display-name
+                          %bdi
+                            %strong.display-name__html.emojify= display_name(@instance_presenter.contact_account)
+                          %span.display-name__account @#{@instance_presenter.contact_account.acct}
+                    - else
+                      .account__display-name
+                        .account__avatar-wrapper
+                          .account__avatar{ style: "background-image: url(#{full_asset_url('avatars/original/missing.png', skip_pipeline: true)})" }
+                        %span.display-name
+                          %strong= t 'about.contact_missing'
+                          %span.display-name__account= t 'about.contact_unavailable'
+
+                    = link_to t('about.learn_more'), about_more_path, class: 'button button-alternative'
 
             = render 'features'
 

config/locales/en.yml

@@ -4,6 +4,7 @@ en:
     about_hashtag_html: These are public toots tagged with <strong>#%{hashtag}</strong>. You can interact with them if you have an account anywhere in the fediverse.
     about_mastodon_html: Mastodon is a social network based on open web protocols and free, open-source software. It is decentralized like e-mail.
     about_this: About
+    administered_by: 'Administered by:'
     closed_registrations: Registrations are currently closed on this instance. However! You can find a different instance to make an account on and get access to the very same network from there.
     contact: Contact
     contact_missing: Not set

config/locales/pl.yml

@@ -4,6 +4,7 @@ pl:
     about_hashtag_html: Znajdują się tu publiczne wpisy oznaczone hashtagiem <strong>#%{hashtag}</strong>. Możesz dołączyć do dyskusji, jeżeli posiadasz konto gdziekolwiek w Fediwersum.
     about_mastodon_html: Mastodon jest wolną i otwartą siecią społecznościową, zdecentralizowaną alternatywą dla zamkniętych, komercyjnych platform.
     about_this: O tej instancji
+    administered_by: 'Administrowana przez:'
     closed_registrations: Rejestracja na tej instancji jest obecnie zamknięta. Możesz jednak zarejestrować się na innej instancji, uzyskując dostęp do tej samej sieci.
     contact: Kontakt
     contact_missing: Nie ustawiono
@@ -60,6 +61,7 @@ pl:
       destroyed_msg: Pomyślnie usunięto notatkę moderacyjną!
     accounts:
       are_you_sure: Jesteś tego pewien?
+      avatar: Awatar
       by_domain: Domena
       confirm: Potwierdź
       confirmed: Potwierdzono
@@ -108,6 +110,7 @@ pl:
       public: Publiczne
       push_subscription_expires: Subskrypcja PuSH wygasa
       redownload: Odśwież awatar
+      remove_avatar: Usun awatar
       reset: Resetuj
       reset_password: Resetuj hasło
       resubscribe: Ponów subskrypcję
@@ -135,6 +138,7 @@ pl:
       web: Sieć
     action_logs:
       actions:
+        assigned_to_self_report: "%{name} przypisał sobie zgłoszenie %{target}"
         confirm_user: "%{name} potwierdził adres e-mail użytkownika %{target}"
         create_custom_emoji: "%{name} dodał nowe emoji %{target}"
         create_domain_block: "%{name} zablokował domenę %{target}"
@@ -150,10 +154,13 @@ pl:
         enable_user: "%{name} przywrócił możliwość logowania użytkownikowi %{target}"
         memorialize_account: "%{name} nadał kontu %{target} status in memoriam"
         promote_user: "%{name} podniósł uprawnienia użytkownikowi %{target}"
+        remove_avatar_user: "%{name} usunął awatar użytkownikowi %{target}"
+        reopen_report: "%{name} otworzył ponownie zgłoszenie %{target}"
         reset_password_user: "%{name} przywrócił hasło użytkownikowi %{target}"
-        resolve_report: "%{name} odrzucił zgłoszenie %{target}"
+        resolve_report: "%{name} rozwiązał zgłoszenie %{target}"
         silence_account: "%{name} wyciszył konto %{target}"
         suspend_account: "%{name} zawiesił konto %{target}"
+        unassigned_report: "%{name} cofnął przypisanie zgłoszenia %{target}"
         unsilence_account: "%{name} cofnął wyciszenie konta %{target}"
         unsuspend_account: "%{name} cofnął zawieszenie konta %{target}"
         update_custom_emoji: "%{name} zaktualizował emoji %{target}"
@@ -240,15 +247,26 @@ pl:
         expired: Wygasłe
         title: Filtruj
       title: Zaproszenia
+    report_notes:
+      created_msg: Pomyslnie utworzono notatkę moderacyjną.
+      destroyed_msg: Pomyślnie usunięto notatkę moderacyjną.
     reports:
       action_taken_by: Działanie podjęte przez
       are_you_sure: Czy na pewno?
+      assign_to_self: Przypisz do siebie
+      assigned: Przypisany moderator
       comment:
-        label: Komentarz
+        label: Komentarz do zgłoszenia
         none: Brak
       delete: Usuń
       id: ID
       mark_as_resolved: Oznacz jako rozwiązane
+      mark_as_unresolved: Oznacz jako nierozwiązane
+      notes:
+        create: Utwórz notatkę
+        create_and_resolve: Rozwiąż i pozostaw notatkę
+        delete: Usuń
+        label: Notatki
       nsfw:
         'false': Nie oznaczaj jako NSFW
         'true': Oznaczaj jako NSFW
@@ -257,12 +275,16 @@ pl:
       reported_account: Zgłoszone konto
       reported_by: Zgłaszający
       resolved: Rozwiązane
+      resolved_msg: Pomyślnie rozwiązano zgłoszenie.
       silence_account: Wycisz konto
       status: Stan
+      statuses: Zgłoszone wpisy
       suspend_account: Zawieś konto
       target: Cel
       title: Zgłoszenia
+      unassign: Cofnij przypisanie
       unresolved: Nierozwiązane
+      updated_at: Zaktualizowano
       view: Wyświetl
     settings:
       activity_api_enabled:

package.json

@@ -55,7 +55,6 @@
     "file-loader": "^0.11.2",
     "font-awesome": "^4.7.0",
     "glob": "^7.1.1",
-    "hammerjs": "^2.0.8",
     "http-link-header": "^0.8.0",
     "immutable": "^3.8.2",
     "imports-loader": "^0.8.0",

spec/views/about/show.html.haml_spec.rb

@@ -21,9 +21,9 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do
                                 hero: nil,
                                 user_count: 0,
                                 status_count: 0,
-                                closed_registrations_message: 'yes',
+                                commit_hash: commit_hash,
-                                commit_hash: commit_hash)
+                                contact_account: nil,
-
+                                closed_registrations_message: 'yes')
     assign(:instance_presenter, instance_presenter)
     render
 

yarn.lock

@@ -3100,10 +3100,6 @@ gzip-size@^3.0.0:
   dependencies:
     duplexer "^0.1.1"
 
-hammerjs@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
-
 handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"