From 07176fed374b0ef94aacd1f3ea95b6dec2eb79dd Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 4 Apr 2018 01:11:26 +0200 Subject: [PATCH 1/3] Add contact account to landing page ("Administered by") (#6984) --- app/javascript/styles/mastodon/about.scss | 48 +++++++++++++++++++++++ app/views/about/show.html.haml | 22 +++++++++++ config/locales/en.yml | 1 + spec/views/about/show.html.haml_spec.rb | 1 + 4 files changed, 72 insertions(+) diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index c484f074b..03211036c 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/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; } diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index 85e5442af..12213cda2 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -108,6 +108,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' diff --git a/config/locales/en.yml b/config/locales/en.yml index 51d9c906d..945faa1e2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -4,6 +4,7 @@ en: about_hashtag_html: These are public toots tagged with #%{hashtag}. 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 diff --git a/spec/views/about/show.html.haml_spec.rb b/spec/views/about/show.html.haml_spec.rb index 03d6fb7ab..cbe5aa93b 100644 --- a/spec/views/about/show.html.haml_spec.rb +++ b/spec/views/about/show.html.haml_spec.rb @@ -19,6 +19,7 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do hero: nil, user_count: 0, status_count: 0, + contact_account: nil, closed_registrations_message: 'yes') assign(:instance_presenter, instance_presenter) render From 7a810827040f31fb3936047f444efb77b743ed85 Mon Sep 17 00:00:00 2001 From: Emelia Smith Date: Wed, 4 Apr 2018 11:58:15 +0200 Subject: [PATCH 2/3] Revert "Add double-tap zoom functionary to `ZoomableImage` (#6944)" (#7035) Unfortunately the new hammer.js functionality wasn't correctly tested and didn't work across devices and browsers, as such, it's best to revert PR #6944 until we can revisit this functionality and make it work across all devices and browsers that are supported by Mastodon. This reverts commit 5021c4e9ca78881f5379a18185a46e580b8f2c34. --- .../features/ui/components/zoomable_image.js | 167 ++++++++---------- .../styles/mastodon/components.scss | 3 + package.json | 1 - yarn.lock | 4 - 4 files changed, 76 insertions(+), 99 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/zoomable_image.js b/app/javascript/mastodon/features/ui/components/zoomable_image.js index 0cae0862d..0a0a4d41a 100644 --- a/app/javascript/mastodon/features/ui/components/zoomable_image.js +++ b/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; - zoomCenter = null; + lastTouchEndTime = 0; + lastDistance = 0; componentDidMount () { - // register pinch event handlers to the container - let hammer = new Hammer.Manager(this.container, { - // required to make container scrollable by touch - touchAction: 'pan-x pan-y', - }); - hammer.add(new Hammer.Pinch()); - hammer.on('pinchstart', this.handlePinchStart); - hammer.on('pinchmove', this.handlePinchMove); - 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')); + let handler = this.handleTouchStart; + this.container.addEventListener('touchstart', handler); + this.removers.push(() => this.container.removeEventListener('touchstart', handler)); + handler = this.handleTouchMove; + // on Chrome 56+, touch event listeners will default to passive + // https://www.chromestatus.com/features/5093566007214080 + this.container.addEventListener('touchmove', handler, { passive: false }); + this.removers.push(() => this.container.removeEventListener('touchend', handler)); } 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 => { - // prevent the click event propagated to parent + handleTouchStart = e => { + 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, - // so we don't need to execute the onClick handler here + const distance = getDistance(...e.touches); + 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 = () => { - this.lastScale = this.state.scale; + zoom(nextScale, midpoint) { + 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 => { - const scale = clamp(MIN_SCALE, MAX_SCALE, this.lastScale * e.scale); - this.zoom(scale, e.center); - } - - handleTap = () => { + handleClick = e => { + // don't propagate event to MediaModal + e.stopPropagation(); 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,18 +126,6 @@ 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 (
-
- {alt} -
+ {alt}
); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6a83be452..d76dc10f1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/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; diff --git a/package.json b/package.json index d4de3a157..9858d28d4 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,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", diff --git a/yarn.lock b/yarn.lock index 866b24c7a..fba2cb9a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3096,10 +3096,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" From 1c1042556d21e4c2eb22b7c5cbc11aa88087ca60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcin=20Miko=C5=82ajczak?= Date: Wed, 4 Apr 2018 20:13:43 +0200 Subject: [PATCH 3/3] i18n: Update Polish translation (#7037) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * i18n: Update Polish translation Signed-off-by: Marcin Mikołajczak * i18n: Update Polish translation Signed-off-by: Marcin Mikołajczak --- config/locales/pl.yml | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/config/locales/pl.yml b/config/locales/pl.yml index e92742ef4..c62636081 100644 --- a/config/locales/pl.yml +++ b/config/locales/pl.yml @@ -4,6 +4,7 @@ pl: about_hashtag_html: Znajdują się tu publiczne wpisy oznaczone hashtagiem #%{hashtag}. 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: