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 {
|
||||
--site-max-width: @site-max-width;
|
||||
--site-background-meta: initial;
|
||||
--site-background-meta: no-repeat center / cover;
|
||||
--site-background-image: initial;
|
||||
|
||||
--accent-colour: @default-accent-colour;
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ function deleteAllFilesInDir(string $dir, string $pattern): void
|
|||
$files = globDir($dir, $pattern);
|
||||
|
||||
foreach ($files as $file) {
|
||||
safe_delete($file);
|
||||
unlink($file);
|
||||
misuzu_log("Deleted '{$file}'");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,21 @@ switch ($mode) {
|
|||
echo file_get_contents($avatar_filename);
|
||||
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':
|
||||
default:
|
||||
$getProfile = Database::prepare('
|
||||
|
|
@ -80,7 +95,10 @@ switch ($mode) {
|
|||
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');
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ $userPerms = perms_get_user(MSZ_PERMS_USER, $app->getUserId());
|
|||
$perms = [
|
||||
'edit_profile' => perms_check($userPerms, MSZ_PERM_USER_EDIT_PROFILE),
|
||||
'edit_avatar' => perms_check($userPerms, MSZ_PERM_USER_CHANGE_AVATAR),
|
||||
'edit_background' => perms_check($userPerms, MSZ_PERM_USER_CHANGE_BACKGROUND),
|
||||
];
|
||||
|
||||
if (!$app->hasActiveSession()) {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ use Misuzu\IO\File;
|
|||
|
||||
define('MSZ_PERM_USER_EDIT_PROFILE', 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_ROLES', 1 << 21);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,13 @@
|
|||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{% if site_background_url is defined %}
|
||||
<style>
|
||||
:root {
|
||||
--site-background-image: url('{{ site_background_url|raw }}');
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
</head>
|
||||
<body class="main">
|
||||
{% include '_layout/header.twig' %}
|
||||
|
|
|
|||
|
|
@ -134,7 +134,6 @@
|
|||
<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 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">Will be centre cropped to be <strong>200x200</strong>.</li>
|
||||
<li class="settings__images__requirement">Animated gif images are allowed.</li>
|
||||
|
|
@ -192,4 +191,70 @@
|
|||
});
|
||||
</script>
|
||||
{% 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 %}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
|
||||
{% 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 = {
|
||||
'twitter': {
|
||||
'title': 'Twitter',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue