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
commit
a60a600a10
9 changed files with 174 additions and 104 deletions
|
|
@ -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,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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue