refactor: username color

This commit is contained in:
Baoshuo Ren 2023-02-23 19:46:33 +08:00
parent b98edf87b0
commit 87e0fd62f5
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
6 changed files with 161 additions and 28 deletions

View File

@ -299,7 +299,7 @@ if ($cur_tab == 'profile') {
$update_profile_form->appendHTML(<<<EOD
<div class="mb-3">
<label for="input-username_color" class="form-label">用户名颜色</label>
<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="棕色 - #996600" disabled>
<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="棕色" disabled>
<div id="help-username_color" class="form-text">被封禁的用户无法修改用户名颜色。</div>
</div>
EOD);
@ -307,29 +307,22 @@ if ($cur_tab == 'profile') {
$update_profile_form->appendHTML(<<<EOD
<div class="mb-3">
<label for="input-username_color" class="form-label">用户名颜色</label>
<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="灰色 - #707070" disabled>
<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="灰色" disabled>
<div id="help-username_color" class="form-text">临时用户无法修改用户名颜色。</div>
</div>
EOD);
} else {
$additional_colors = [];
$username_colors = UOJUser::USERNAME_COLORS['user'];
if (isSuperUser($user)) {
$additional_colors['#9d3dcf'] = '紫色 - #9d3dcf';
$username_colors += UOJUser::USERNAME_COLORS['admin'];
}
$update_profile_form->addSelect('username_color', [
'div_class' => 'mb-3',
'label' => '用户名颜色',
'default_value' => $extra['username_color'],
'options' => $additional_colors + [
'#0d6efd' => '蓝色 - #0d6efd',
'#2da44e' => '绿色 - #2da44e',
'#e85aad' => '粉色 - #e85aad',
'#f32a38' => '红色 - #f32a38',
'#f57c00' => '橙色 - #f57c00',
'#00acc1' => '青色 - #00acc1',
],
'options' => $username_colors,
]);
}
$update_profile_form->handle = function (&$vdata) use ($user, $extra) {

View File

@ -1,4 +1,29 @@
<?php
class CustomClassDef extends HTMLPurifier_AttrDef {
private $classes, $prefixes;
public function __construct($classes, $prefixes) {
$this->classes = $classes;
$this->prefixes = is_array($prefixes) ? join('|', $prefixes) : $prefixes;
}
public function validate($string, $config, $context) {
$classes = preg_split('/\s+/', $string);
$valid_classes = [];
foreach ($classes as $class) {
if (
in_array($class, $this->classes) ||
preg_match("/^({$this->prefixes})/i", $class)
) {
$valid_classes[] = $class;
}
}
return join(' ', $valid_classes);
}
}
class HTML {
public static function escape(?string $str, $cfg = []) {
@ -454,7 +479,7 @@ class HTML {
'data-src' => 'URI',
],
'span' => [
'class' => 'Enum#uoj-username',
'class' => new CustomClassDef(['uoj-username'], ['uoj-username-']),
'data-realname' => 'Text',
'data-color' => 'Color',
],
@ -485,7 +510,7 @@ class HTML {
'del' => [],
'br' => [],
'span' => [
'class' => 'Enum#uoj-username',
'class' => new CustomClassDef(['uoj-username'], ['uoj-username-']),
'data-realname' => 'Text',
'data-color' => 'Color',
],

View File

@ -11,6 +11,21 @@ class UOJUser {
const MAX_UA_LEN = 300;
const MAX_HISTORY_LEN = 20;
// Don't forget to change values in `models/HTML.php` and `css/uoj-bs5.css`
const USERNAME_COLORS = [
'user' => [
'blue' => 'Blue',
'green' => 'Green',
'pink' => 'Pink',
'red' => 'Red',
'orange' => 'Orange',
'cyan' => 'Cyan',
],
'admin' => [
'purple' => 'Purple',
],
];
public static $visibility_codes = [
'all' => [
'html' => '',
@ -277,23 +292,23 @@ class UOJUser {
public static function getUserColor2($usergroup, $custom_color = null) {
if ($usergroup == 'B') {
return '#996600';
return 'brown';
}
if ($usergroup == 'T') {
return '#707070';
return 'gray';
}
if ($usergroup == 'S') {
return $custom_color ?: '#9d3dcf';
return $custom_color ?: 'purple';
}
// 前管理员设置颜色为紫色的,颜色改为蓝色
if ($custom_color == '#9d3dcf') {
return '#0d6efd';
if ($custom_color == 'purple') {
return 'blue';
}
return $custom_color ?: '#0d6efd';
return $custom_color ?: 'blue';
}
public static function getLink($user, $cfg = []) {
@ -318,10 +333,12 @@ class UOJUser {
$realname = '';
}
$color = $cfg['color'] ? UOJUser::getUserColor($user) : '';
return HTML::tag('span', [
'class' => 'uoj-username',
'data-color' => $cfg['color'] ? UOJUser::getUserColor($user) : '',
'class' => "uoj-username uoj-username-{$color}",
'data-realname' => trim(HTML::escape($realname)),
'data-color' => $color,
], $user['username']);
}

View File

@ -0,0 +1,60 @@
<?php
return function ($type) {
if ($type == 'up') {
DB::init();
function getColorName($color) {
switch ($color) {
case '#0d6efd':
case 'blue':
return 'blue';
case '#2da44e':
case 'green':
return 'green';
case '#e85aad':
case 'pink':
return 'pink';
case '#f32a38':
case 'red':
return 'red';
case '#f57c00':
case 'orange':
return 'orange';
case '#00acc1':
case 'cyan':
return 'cyan';
case '#9d3dcf':
case 'purple':
return 'purple';
case '#707070':
case 'gray':
return 'gray';
case '#996600':
case 'brown':
return 'brown';
default:
return 'blue';
}
}
$users = DB::selectAll("select * from user_info");
foreach ($users as $user) {
$extra = UOJUser::getExtra($user);
$original_color = $extra['username_color'];
$new_color = getColorName($original_color);
$extra['username_color'] = $new_color;
DB::update([
"update user_info",
"set", [
"extra" => json_encode($extra)
],
"where", [
"username" => $user['username']
],
]);
echo "{$user['username']}: {$original_color} -> {$new_color}\n";
}
}
};

View File

@ -541,3 +541,41 @@ form.form-horizontal {
grid-column: 2;
grid-row: 2;
}
/* Username color */
.uoj-username-blue {
color: #0d6efd;
}
.uoj-username-green {
color: #2da44e;
}
.uoj-username-pink {
color: #e85aad;
}
.uoj-username-red {
color: #f32a38;
}
.uoj-username-orange {
color: #f57c00;
}
.uoj-username-cyan {
color: #00acc1;
}
.uoj-username-purple {
color: #9d3dcf;
}
.uoj-username-gray {
color: #707070;
}
.uoj-username-brown {
color: #996600;
}

View File

@ -123,7 +123,7 @@ function getUserLink(username, realname, color) {
return '';
}
var text = username;
var style = '';
var className = 'uoj-username';
if (username.charAt(0) == '@') {
username = username.substr(1);
}
@ -131,16 +131,16 @@ function getUserLink(username, realname, color) {
text = text + ' <span class="uoj-realname d-inline-block">(' + realname + ')</span>';
}
if (color) {
style += 'color: ' + color + ';';
className += ' uoj-username-' + color;
}
return '<a class="uoj-username" href="' + uojHome + '/user/' + username + '" ' + 'style="' + style + '">' + text + '</a>';
return '<a class="' + className + '" href="' + uojHome + '/user/' + username + '">' + text + '</a>';
}
function getUserSpan(username, realname, color) {
if (!username) {
return '';
}
var text = username;
var style = '';
var className = 'uoj-username';
if (username.charAt(0) == '@') {
username = username.substr(1);
}
@ -148,9 +148,9 @@ function getUserSpan(username, realname, color) {
text = text + ' <span class="uoj-realname d-inline-block">(' + realname + ')</span>';
}
if (color) {
style += 'color: ' + color + ';';
className += ' uoj-username-' + color;
}
return '<span class="uoj-username" ' + 'style="' + style + '">' + text + '</span>';
return '<span class="' + className + '">' + text + '</span>';
}
function replaceWithHighlightUsername() {