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

Conflicts:
 	spec/views/about/show.html.haml_spec.rb
This commit is contained in:
David Yip 2018-04-04 13:56:58 -05:00
commit 3ab6a8b8be
No known key found for this signature in database
GPG key ID: 7DA0036508FCC0CC
9 changed files with 174 additions and 104 deletions

View file

@ -1,10 +1,16 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Hammer from 'hammerjs';
const MIN_SCALE = 1; const MIN_SCALE = 1;
const MAX_SCALE = 4; 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)); const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
@ -31,97 +37,83 @@ export default class ZoomableImage extends React.PureComponent {
removers = []; removers = [];
container = null; container = null;
image = null; image = null;
lastScale = null; lastTouchEndTime = 0;
zoomCenter = null; lastDistance = 0;
componentDidMount () { 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 () { componentWillUnmount () {
this.removeEventListeners(); 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 () { removeEventListeners () {
this.removers.forEach(listeners => listeners()); this.removers.forEach(listeners => listeners());
this.removers = []; 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(); 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; const handler = this.props.onClick;
if (handler) handler(); 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 => { setContainerRef = c => {
this.container = c; this.container = c;
} }
@ -134,38 +126,25 @@ export default class ZoomableImage extends React.PureComponent {
const { alt, src } = this.props; const { alt, src } = this.props;
const { scale } = this.state; const { scale } = this.state;
const overflow = scale === 1 ? 'hidden' : 'scroll'; 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 ( return (
<div <div
className='zoomable-image' className='zoomable-image'
ref={this.setContainerRef} ref={this.setContainerRef}
style={{ overflow }} style={{ overflow }}
>
<div
className='zoomable-image__margin'
style={marginStyle}
> >
<img <img
ref={this.setImageRef}
role='presentation' role='presentation'
ref={this.setImageRef}
alt={alt} alt={alt}
src={src} src={src}
style={{
transform: `scale(${scale})`,
transformOrigin: '0 0',
}}
onClick={this.handleClick} onClick={this.handleClick}
/> />
</div> </div>
</div>
); );
} }

View file

@ -681,6 +681,54 @@ $small-breakpoint: 960px;
margin-bottom: 0; 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) { @media screen and (max-width: $column-breakpoint) {
padding: 25px 20px; padding: 25px 20px;
} }

View file

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

View file

@ -107,6 +107,28 @@
%div %div
%h3= t 'about.what_is_mastodon' %h3= t 'about.what_is_mastodon'
%p= t 'about.about_mastodon_html' %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' = render 'features'

View file

@ -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_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_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 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. 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: Contact
contact_missing: Not set contact_missing: Not set

View file

@ -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_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_mastodon_html: Mastodon jest wolną i otwartą siecią społecznościową, zdecentralizowaną alternatywą dla zamkniętych, komercyjnych platform.
about_this: O tej instancji 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. 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: Kontakt
contact_missing: Nie ustawiono contact_missing: Nie ustawiono
@ -60,6 +61,7 @@ pl:
destroyed_msg: Pomyślnie usunięto notatkę moderacyjną! destroyed_msg: Pomyślnie usunięto notatkę moderacyjną!
accounts: accounts:
are_you_sure: Jesteś tego pewien? are_you_sure: Jesteś tego pewien?
avatar: Awatar
by_domain: Domena by_domain: Domena
confirm: Potwierdź confirm: Potwierdź
confirmed: Potwierdzono confirmed: Potwierdzono
@ -108,6 +110,7 @@ pl:
public: Publiczne public: Publiczne
push_subscription_expires: Subskrypcja PuSH wygasa push_subscription_expires: Subskrypcja PuSH wygasa
redownload: Odśwież awatar redownload: Odśwież awatar
remove_avatar: Usun awatar
reset: Resetuj reset: Resetuj
reset_password: Resetuj hasło reset_password: Resetuj hasło
resubscribe: Ponów subskrypcję resubscribe: Ponów subskrypcję
@ -135,6 +138,7 @@ pl:
web: Sieć web: Sieć
action_logs: action_logs:
actions: actions:
assigned_to_self_report: "%{name} przypisał sobie zgłoszenie %{target}"
confirm_user: "%{name} potwierdził adres e-mail użytkownika %{target}" confirm_user: "%{name} potwierdził adres e-mail użytkownika %{target}"
create_custom_emoji: "%{name} dodał nowe emoji %{target}" create_custom_emoji: "%{name} dodał nowe emoji %{target}"
create_domain_block: "%{name} zablokował domenę %{target}" create_domain_block: "%{name} zablokował domenę %{target}"
@ -150,10 +154,13 @@ pl:
enable_user: "%{name} przywrócił możliwość logowania użytkownikowi %{target}" enable_user: "%{name} przywrócił możliwość logowania użytkownikowi %{target}"
memorialize_account: "%{name} nadał kontu %{target} status in memoriam" memorialize_account: "%{name} nadał kontu %{target} status in memoriam"
promote_user: "%{name} podniósł uprawnienia użytkownikowi %{target}" 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}" 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}" silence_account: "%{name} wyciszył konto %{target}"
suspend_account: "%{name} zawiesił konto %{target}" suspend_account: "%{name} zawiesił konto %{target}"
unassigned_report: "%{name} cofnął przypisanie zgłoszenia %{target}"
unsilence_account: "%{name} cofnął wyciszenie konta %{target}" unsilence_account: "%{name} cofnął wyciszenie konta %{target}"
unsuspend_account: "%{name} cofnął zawieszenie konta %{target}" unsuspend_account: "%{name} cofnął zawieszenie konta %{target}"
update_custom_emoji: "%{name} zaktualizował emoji %{target}" update_custom_emoji: "%{name} zaktualizował emoji %{target}"
@ -240,15 +247,26 @@ pl:
expired: Wygasłe expired: Wygasłe
title: Filtruj title: Filtruj
title: Zaproszenia title: Zaproszenia
report_notes:
created_msg: Pomyslnie utworzono notatkę moderacyjną.
destroyed_msg: Pomyślnie usunięto notatkę moderacyjną.
reports: reports:
action_taken_by: Działanie podjęte przez action_taken_by: Działanie podjęte przez
are_you_sure: Czy na pewno? are_you_sure: Czy na pewno?
assign_to_self: Przypisz do siebie
assigned: Przypisany moderator
comment: comment:
label: Komentarz label: Komentarz do zgłoszenia
none: Brak none: Brak
delete: Usuń delete: Usuń
id: ID id: ID
mark_as_resolved: Oznacz jako rozwiązane 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: nsfw:
'false': Nie oznaczaj jako NSFW 'false': Nie oznaczaj jako NSFW
'true': Oznaczaj jako NSFW 'true': Oznaczaj jako NSFW
@ -257,12 +275,16 @@ pl:
reported_account: Zgłoszone konto reported_account: Zgłoszone konto
reported_by: Zgłaszający reported_by: Zgłaszający
resolved: Rozwiązane resolved: Rozwiązane
resolved_msg: Pomyślnie rozwiązano zgłoszenie.
silence_account: Wycisz konto silence_account: Wycisz konto
status: Stan status: Stan
statuses: Zgłoszone wpisy
suspend_account: Zawieś konto suspend_account: Zawieś konto
target: Cel target: Cel
title: Zgłoszenia title: Zgłoszenia
unassign: Cofnij przypisanie
unresolved: Nierozwiązane unresolved: Nierozwiązane
updated_at: Zaktualizowano
view: Wyświetl view: Wyświetl
settings: settings:
activity_api_enabled: activity_api_enabled:

View file

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

View file

@ -21,9 +21,9 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do
hero: nil, hero: nil,
user_count: 0, user_count: 0,
status_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) assign(:instance_presenter, instance_presenter)
render render

View file

@ -3100,10 +3100,6 @@ gzip-size@^3.0.0:
dependencies: dependencies:
duplexer "^0.1.1" 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: handle-thing@^1.2.5:
version "1.2.5" version "1.2.5"
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"