Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Redesign public profiles and toots (#8068)

Browse source
This commit is contained in:
Eugen Rochko 2018-07-28 19:25:33 +02:00 • committed by GitHub
parent e23b26178a
commit bb71538bb5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
93 changed files with 1388 additions and 1423 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/javascript/packs/public.js
View file

@ -22,15 +22,15 @@ window.addEventListener('message', e => {
function main() {
const { length } = require('stringz');
const IntlRelativeFormat = require('intl-relativeformat').default;
const IntlMessageFormat = require('intl-messageformat').default;
const { timeAgoString } = require('../mastodon/components/relative_timestamp');
const { delegate } = require('rails-ujs');
const emojify = require('../mastodon/features/emoji/emoji').default;
const { getLocale } = require('../mastodon/locales');
const { localeData } = getLocale();
const { messages } = getLocale();
const React = require('react');
const ReactDOM = require('react-dom');
localeData.forEach(IntlRelativeFormat.__addLocaleData);
const Rellax = require('rellax');
ready(() => {
const locale = document.documentElement.lang;
@ -43,8 +43,6 @@ function main() {
minute: 'numeric',
});
const relativeFormat = new IntlRelativeFormat(locale);
[].forEach.call(document.querySelectorAll('.emojify'), (content) => {
content.innerHTML = emojify(content.innerHTML);
});
@ -59,12 +57,16 @@ function main() {
[].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
const datetime = new Date(content.getAttribute('datetime'));
const now = new Date();
content.title = dateTimeFormat.format(datetime);
content.textContent = relativeFormat.format(datetime);
content.textContent = timeAgoString({
formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values),
formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
}, datetime, now, datetime.getFullYear());
});
[].forEach.call(document.querySelectorAll('.logo-button'), (content) => {
[].forEach.call(document.querySelectorAll('.modal-button'), (content) => {
content.addEventListener('click', (e) => {
e.preventDefault();
window.open(e.target.href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
@ -82,6 +84,8 @@ function main() {
})
.catch(error => console.error(error));
}
new Rellax('.parallax', { speed: -1 });
});
delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
@ -106,15 +110,20 @@ function main() {
return false;
});
delegate(document, '.account_display_name', 'input', ({ target }) => {
delegate(document, '#account_display_name', 'input', ({ target }) => {
const nameCounter = document.querySelector('.name-counter');
const name = document.querySelector('.card .display-name strong');
if (nameCounter) {
nameCounter.textContent = 30 - length(target.value);
}
if (name) {
name.innerHTML = emojify(target.value);
}
});
delegate(document, '.account_note', 'input', ({ target }) => {
delegate(document, '#account_note', 'input', ({ target }) => {
const noteCounter = document.querySelector('.note-counter');
if (noteCounter) {
@ -123,7 +132,7 @@ function main() {
});
delegate(document, '#account_avatar', 'change', ({ target }) => {
const avatar = document.querySelector('.card.compact .avatar img');
const avatar = document.querySelector('.card .avatar img');
const [file] = target.files || [];
const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
@ -131,11 +140,21 @@ function main() {
});
delegate(document, '#account_header', 'change', ({ target }) => {
const header = document.querySelector('.card.compact');
const header = document.querySelector('.card .card__img img');
const [file] = target.files || [];
const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
header.style.backgroundImage = `url(${url})`;
header.src = url;
});
delegate(document, '#account_locked', 'change', ({ target }) => {
const lock = document.querySelector('.card .display-name i');
if (target.checked) {
lock.style.display = 'inline';
} else {
lock.style.display = 'none';
}
});
}