Some initial stuff for profile backgrounds.
This commit is contained in:
parent
52ecf12fd9
commit
be861868f2
8 changed files with 100 additions and 4 deletions
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--site-max-width: @site-max-width;
|
--site-max-width: @site-max-width;
|
||||||
--site-background-meta: initial;
|
--site-background-meta: no-repeat center / cover;
|
||||||
--site-background-image: initial;
|
--site-background-image: initial;
|
||||||
|
|
||||||
--accent-colour: @default-accent-colour;
|
--accent-colour: @default-accent-colour;
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ function deleteAllFilesInDir(string $dir, string $pattern): void
|
||||||
$files = globDir($dir, $pattern);
|
$files = globDir($dir, $pattern);
|
||||||
|
|
||||||
foreach ($files as $file) {
|
foreach ($files as $file) {
|
||||||
safe_delete($file);
|
unlink($file);
|
||||||
misuzu_log("Deleted '{$file}'");
|
misuzu_log("Deleted '{$file}'");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,21 @@ switch ($mode) {
|
||||||
echo file_get_contents($avatar_filename);
|
echo file_get_contents($avatar_filename);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case 'background':
|
||||||
|
$user_background = build_path(
|
||||||
|
create_directory(build_path($app->getStoragePath(), 'backgrounds/original')),
|
||||||
|
"{$user_id}.msz"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!is_file($user_background)) {
|
||||||
|
echo render_error(404);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
header('Content-Type: ' . mime_content_type($user_background));
|
||||||
|
echo file_get_contents($user_background);
|
||||||
|
break;
|
||||||
|
|
||||||
case 'view':
|
case 'view':
|
||||||
default:
|
default:
|
||||||
$getProfile = Database::prepare('
|
$getProfile = Database::prepare('
|
||||||
|
|
@ -80,7 +95,10 @@ switch ($mode) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
tpl_vars(compact('profile'));
|
tpl_vars([
|
||||||
|
'profile' => $profile,
|
||||||
|
'has_background' => is_file(build_path($app->getStoragePath(), 'backgrounds/original', "{$profile['user_id']}.msz")),
|
||||||
|
]);
|
||||||
echo tpl_render('user.view');
|
echo tpl_render('user.view');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ $userPerms = perms_get_user(MSZ_PERMS_USER, $app->getUserId());
|
||||||
$perms = [
|
$perms = [
|
||||||
'edit_profile' => perms_check($userPerms, MSZ_PERM_USER_EDIT_PROFILE),
|
'edit_profile' => perms_check($userPerms, MSZ_PERM_USER_EDIT_PROFILE),
|
||||||
'edit_avatar' => perms_check($userPerms, MSZ_PERM_USER_CHANGE_AVATAR),
|
'edit_avatar' => perms_check($userPerms, MSZ_PERM_USER_CHANGE_AVATAR),
|
||||||
|
'edit_background' => perms_check($userPerms, MSZ_PERM_USER_CHANGE_BACKGROUND),
|
||||||
];
|
];
|
||||||
|
|
||||||
if (!$app->hasActiveSession()) {
|
if (!$app->hasActiveSession()) {
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ use Misuzu\IO\File;
|
||||||
|
|
||||||
define('MSZ_PERM_USER_EDIT_PROFILE', 1);
|
define('MSZ_PERM_USER_EDIT_PROFILE', 1);
|
||||||
define('MSZ_PERM_USER_CHANGE_AVATAR', 1 << 1);
|
define('MSZ_PERM_USER_CHANGE_AVATAR', 1 << 1);
|
||||||
|
define('MSZ_PERM_USER_CHANGE_BACKGROUND', 1 << 2);
|
||||||
|
|
||||||
define('MSZ_PERM_USER_MANAGE_USERS', 1 << 20);
|
define('MSZ_PERM_USER_MANAGE_USERS', 1 << 20);
|
||||||
define('MSZ_PERM_USER_MANAGE_ROLES', 1 << 21);
|
define('MSZ_PERM_USER_MANAGE_ROLES', 1 << 21);
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,13 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% if site_background_url is defined %}
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--site-background-image: url('{{ site_background_url|raw }}');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endif %}
|
||||||
</head>
|
</head>
|
||||||
<body class="main">
|
<body class="main">
|
||||||
{% include '_layout/header.twig' %}
|
{% include '_layout/header.twig' %}
|
||||||
|
|
|
||||||
|
|
@ -134,7 +134,6 @@
|
||||||
<li class="settings__images__requirement settings__images__requirement--header">Guidelines</li>
|
<li class="settings__images__requirement settings__images__requirement--header">Guidelines</li>
|
||||||
<li class="settings__images__requirement">Keep things sane and suitable for all ages.</li>
|
<li class="settings__images__requirement">Keep things sane and suitable for all ages.</li>
|
||||||
<li class="settings__images__requirement">Image may not exceed the <strong>{{ avatar_max_filesize|byte_symbol(true) }}</strong> filesize limit.</li>
|
<li class="settings__images__requirement">Image may not exceed the <strong>{{ avatar_max_filesize|byte_symbol(true) }}</strong> filesize limit.</li>
|
||||||
<li class="settings__images__requirement settings__images__requirement--header">Avatar</li>
|
|
||||||
<li class="settings__images__requirement">May not be larger than <strong>{{ avatar_max_width }}x{{ avatar_max_height }}</strong>.</li>
|
<li class="settings__images__requirement">May not be larger than <strong>{{ avatar_max_width }}x{{ avatar_max_height }}</strong>.</li>
|
||||||
<li class="settings__images__requirement">Will be centre cropped to be <strong>200x200</strong>.</li>
|
<li class="settings__images__requirement">Will be centre cropped to be <strong>200x200</strong>.</li>
|
||||||
<li class="settings__images__requirement">Animated gif images are allowed.</li>
|
<li class="settings__images__requirement">Animated gif images are allowed.</li>
|
||||||
|
|
@ -192,4 +191,70 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if settings_perms.edit_background %}
|
||||||
|
<div class="container">
|
||||||
|
<div class="container__title">Background</div>
|
||||||
|
<form action="" method="post" class="settings__images" enctype="multipart/form-data">
|
||||||
|
<input type="hidden" name="MAX_FILE_SIZE" value="{{ avatar_max_filesize }}">
|
||||||
|
<input type="hidden" name="csrf" value="{{ csrf_token() }}">
|
||||||
|
|
||||||
|
<div class="settings__images__sections">
|
||||||
|
<div class="settings__images__requirements">
|
||||||
|
<ul class="settings__images__requirements__list">
|
||||||
|
<li class="settings__images__requirement settings__images__requirement--header">Guidelines</li>
|
||||||
|
<li class="settings__images__requirement">Keep things sane and suitable for all ages.</li>
|
||||||
|
<li class="settings__images__requirement">Image may not exceed the <strong>{{ avatar_max_filesize|byte_symbol(true) }}</strong> filesize limit.</li>
|
||||||
|
<li class="settings__images__requirement">May not be larger than <strong>{{ avatar_max_width }}x{{ avatar_max_height }}</strong>.</li>
|
||||||
|
<li class="settings__images__requirement">Animated gif images are <strong>not</strong> allowed.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="settings__avatar">
|
||||||
|
<label class="settings__avatar__label">
|
||||||
|
<input
|
||||||
|
class="settings__avatar__input"
|
||||||
|
accept="image/png,image/jpeg,image/gif"
|
||||||
|
type="file"
|
||||||
|
name="background[file]"
|
||||||
|
id="background-selection">
|
||||||
|
<div class="settings__avatar__name" id="background-name">
|
||||||
|
Click to select a file!
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="settings__avatar__buttons">
|
||||||
|
<button
|
||||||
|
class="settings__avatar__button"
|
||||||
|
name="background[mode]"
|
||||||
|
value="upload">
|
||||||
|
Upload
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="settings__avatar__button settings__avatar__button--delete{{ user_has_avatar ? '' : ' settings__avatar__button--disabled' }}"
|
||||||
|
{{ user_has_avatar ? '' : 'disabled' }}
|
||||||
|
name="background[mode]"
|
||||||
|
value="delete">
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function updateBackgroundPreview(name, url, previewEl, nameEl) {
|
||||||
|
url = url || "/profile.php?u={{ avatar_user_id }}&m=background";
|
||||||
|
previewEl = previewEl || document.body;
|
||||||
|
nameEl = nameEl || document.getElementById('background-name');
|
||||||
|
previewEl.style.setProperty('--site-background-image', 'url(\'{0}\')'.replace('{0}', url));
|
||||||
|
nameEl.textContent = name;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('background-selection').addEventListener('change', function (ev) {
|
||||||
|
updateBackgroundPreview(ev.target.files[0].name, URL.createObjectURL(ev.target.files[0]));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,10 @@
|
||||||
|
|
||||||
{% set youtube_is_channel_id = profile.user_youtube|slice(0, 2) == 'UC' and profile.user_youtube|length == 24 %}
|
{% set youtube_is_channel_id = profile.user_youtube|slice(0, 2) == 'UC' and profile.user_youtube|length == 24 %}
|
||||||
|
|
||||||
|
{% if has_background %}
|
||||||
|
{% set site_background_url = '/profile.php?m=background&u=' ~ profile.user_id %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% set profile_fields = {
|
{% set profile_fields = {
|
||||||
'twitter': {
|
'twitter': {
|
||||||
'title': 'Twitter',
|
'title': 'Twitter',
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue