Commit 8966fdd8 authored by roadscape's avatar roadscape Committed by Valentine Zavgorodnev
Browse files

add cover image support, close #1651 (#1652)

parent bba8635d
......@@ -30,10 +30,11 @@ class Settings extends React.Component {
reactForm({
instance: this,
name: 'accountSettings',
fields: ['profile_image', 'name', 'about', 'location', 'website'],
fields: ['profile_image', 'cover_image', 'name', 'about', 'location', 'website'],
initialValues: props.profile,
validation: values => ({
profile_image: values.profile_image && !/^https?:\/\//.test(values.profile_image) ? tt('settings_jsx.invalid_url') : null,
cover_image: values.cover_image && !/^https?:\/\//.test(values.cover_image) ? tt('settings_jsx.invalid_url') : null,
name: values.name && values.name.length > 20 ? tt('settings_jsx.name_is_too_long') : values.name && /^\s*@/.test(values.name) ? tt('settings_jsx.name_must_not_begin_with') : null,
about: values.about && values.about.length > 160 ? tt('settings_jsx.about_is_too_long') : null,
location: values.location && values.location.length > 30 ? tt('settings_jsx.location_is_too_long') : null,
......@@ -68,10 +69,11 @@ class Settings extends React.Component {
if(!metaData.profile) metaData.profile = {}
delete metaData.user_image; // old field... cleanup
const {profile_image, name, about, location, website} = this.state
const {profile_image, cover_image, name, about, location, website} = this.state
// Update relevant fields
metaData.profile.profile_image = profile_image.value
metaData.profile.cover_image = cover_image.value
metaData.profile.name = name.value
metaData.profile.about = about.value
metaData.profile.location = location.value
......@@ -79,6 +81,7 @@ class Settings extends React.Component {
// Remove empty keys
if(!metaData.profile.profile_image) delete metaData.profile.profile_image;
if(!metaData.profile.cover_image) delete metaData.profile.cover_image;
if(!metaData.profile.name) delete metaData.profile.name;
if(!metaData.profile.about) delete metaData.profile.about;
if(!metaData.profile.location) delete metaData.profile.location;
......@@ -131,7 +134,7 @@ class Settings extends React.Component {
const {submitting, valid, touched} = this.state.accountSettings
const disabled = !props.isOwnAccount || state.loading || submitting || !valid || !touched
const {profile_image, name, about, location, website} = this.state
const {profile_image, cover_image, name, about, location, website} = this.state
const {follow, account, isOwnAccount, locale} = this.props
const following = follow && follow.getIn(['getFollowingAsync', account.name]);
......@@ -158,6 +161,12 @@ class Settings extends React.Component {
</label>
<div className="error">{profile_image.blur && profile_image.touched && profile_image.error}</div>
<label>
{tt('settings_jsx.cover_image_url')}
<input type="url" {...cover_image.props} autoComplete="off" />
</label>
<div className="error">{cover_image.blur && cover_image.touched && cover_image.error}</div>
<label>
{tt('settings_jsx.profile_name')}
<input type="text" {...name.props} maxLength="20" autoComplete="off" />
......
......@@ -375,15 +375,24 @@ export default class UserProfile extends React.Component {
</div>
</div>;
const {name, location, about, website} = normalizeProfile(account);
const {name, location, about, website, cover_image} = normalizeProfile(account);
const website_label = website ? website.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '') : null
let cover_image_style = {}
if(cover_image) {
let cover_image_prefix = '';
if($STM_Config.img_proxy_prefix) {
cover_image_prefix = $STM_Config.img_proxy_prefix + '2048x512/';
}
cover_image_style = {backgroundImage: "url(" + cover_image_prefix + cover_image + ")"}
}
return (
<div className="UserProfile">
<div className="UserProfile__banner row expanded">
<div className="column">
<div className="column" style={cover_image_style}>
<div style={{position: "relative"}}>
<div className="UserProfile__buttons hide-for-small-only">
<Follow follower={username} following={accountname} />
......
......@@ -64,6 +64,9 @@
> div.column {
background: #23579d; /* for older browsers */
background: linear-gradient(to bottom, #1a4072 0%, #23579d 100%);
background-size: 100%;
background-position: 50% 50%;
text-shadow: 1px 1px 4px black;
min-height: 155px;
}
......
......@@ -760,6 +760,7 @@
"muted_users": "Muted Users",
"update": "Update",
"profile_image_url": "Profile picture url",
"cover_image_url": "Cover image url",
"profile_name": "Display Name",
"profile_about": "About",
"profile_location": "Location",
......
......@@ -759,6 +759,7 @@
"muted_users": "Muted Users",
"update": "Update",
"profile_image_url": "Profile picture url",
"cover_image_url": "Cover image url",
"profile_name": "Display Name",
"profile_about": "About",
"profile_location": "Location",
......
......@@ -35,7 +35,7 @@ export default function normalizeProfile(account) {
}
// Read & normalize
let {name, about, location, website, profile_image} = profile
let {name, about, location, website, profile_image, cover_image} = profile
name = truncate(name, 20)
about = truncate(about, 160)
......@@ -55,6 +55,7 @@ export default function normalizeProfile(account) {
}
if(profile_image && !/^https?:\/\//.test(profile_image)) profile_image = null;
if(cover_image && !/^https?:\/\//.test(cover_image)) cover_image = null;
return {
name,
......@@ -62,5 +63,6 @@ export default function normalizeProfile(account) {
location,
website,
profile_image,
cover_image,
};
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment