Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* Task #49295, optimize UI for avatar.

Browse Source
This commit is contained in:
Hao Sun
2022-03-01 13:24:13 +08:00
parent 44be255e67
commit aa30172fea
11 changed files with 72 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/lite/project/ext/view/execution.html.php
+1 -1
View File
@@ -80,7 +80,7 @@
<?php $teams = $memberGroup[$kanban->id];?>
<?php foreach($teams as $member):?>
<div title="<?php echo zget($users, $member->account);?>">
<?php echo html::smallAvatar(array('avatar' => zget($usersAvatar, $member->account), 'account' => $member->account)); ?>
<?php echo html::smallAvatar(array('avatar' => zget($usersAvatar, $member->account), 'account' => $member->account, 'name' => isset($member->realname) ? $member->realname : '')); ?>
</div>
<?php endforeach;?>
</div>
lib/front/front.class.php
+53 -2
View File
@@ -254,6 +254,14 @@ class html extends baseHTML
{
$userObj->avatar = $user['avatar'];
$userObj->account = $user['account'];
$userObj->name = isset($user['name']) ? $user['name'] : (isset($user['realname']) ? $user['realname'] : $user['account']);
$user = $userObj;
}
elseif(is_object($user))
{
$userObj->avatar = $user->avatar;
$userObj->account = $user->account;
$userObj->name = isset($user->name) ? $user->name : (isset($user->realname) ? $user->realname : $user->account);
$user = $userObj;
}
@@ -272,13 +280,40 @@ class html extends baseHTML
{
$colorHue = (html::stringToCode($user->account) * $hueDistance) % 360;
$style .= "background: hsl($colorHue, $saturation, $lightness);";
if(is_numeric($size)) $style .= 'font-size: ' . round($size * 2 / 3) . 'px;';
if(is_numeric($size)) $style .= 'font-size: ' . round($size / 2) . 'px;';
}
if(!empty($style)) $style = "style='$style'";
$html = "<$tag class='avatar$extraClassName $className' $attrib $style>";
$html .= $hasImage ? html::image($user->avatar) : '<span>' . strtoupper($user->account[0]) . '</span>';
if($hasImage)
{
$html .= html::image($user->avatar);
}
else
{
$mbLength = mb_strlen($user->name, 'utf-8');
$strLength = strlen($user->name);
$text = '';
if($strLength === $mbLength)
{
/* Pure alphabet or numbers 纯英文情况 */
$text .= strtoupper($user->name[0]);
}
else if($strLength % $mbLength == 0 && $strLength % 3 == 0)
{
/* Pure chinese characters 纯中文的情况 */
$text .= $mbLength <= 2 ? $user->name : mb_substr($user->name, $mbLength - 2, $mbLength, 'utf-8');
}
else
{
/* Mix of Chinese and English 中英文混合的情况 */
$text .= $mbLength <= 2 ? $user->name : mb_substr($user->name, $mbLength - 2, $mbLength, 'utf-8');
}
$textLength = mb_strlen($text, 'utf-8');
$html .= "<span class='text text-len-$textLength'>$text</span>";
}
$html .= "</$tag>";
return $html;
@@ -300,6 +335,22 @@ class html extends baseHTML
return html::avatar($user, 'sm', $className, $attrib, $tag);
}
/**
* Create a middle size user avatar.
*
* @param string|object $user User object or user avatar url or user account
* @param string $className Avatar element class name, default is "avatar-circle"
* @param string $attrib Extra attributes on avatar element
* @param string $tag Avatar element tag name, default is "div"
* @static
* @access public
* @return string
*/
static public function middleAvatar($user, $className = 'avatar-circle', $attrib = '', $tag = 'div')
{
return html::avatar($user, 'md', $className, $attrib, $tag);
}
/**
* Create a large user avatar.
*
module/kanban/css/space.css
+1 -1
View File
@@ -26,7 +26,7 @@
.kanbans .kanban-members {float: left; height: 24px; line-height: 24px;}
.kanbans .kanban-members > div {display: inline-block; height: 24px;}
.kanbans .kanban-members > div + div {margin-left: -5px;}
.kanbans .kanban-members > div > .avatar {display: inline-block; width: 24px; height: 24px; line-height: 24px; margin-right: 1px;}
.kanbans .kanban-members > div > .avatar {display: inline-block; margin-right: 1px;}
.kanbans .kanban-members > span {display: inline-block; color: transparent; width: 2px; height: 2px; background-color: #8990a2; position: relative; border-radius: 50%; top: 3px; margin: 0 3px;}
.kanbans .kanban-members > span:before,
.kanbans .kanban-members > span:after {content: ''; display: block; position: absolute; width: 2px; height: 2px; background-color: #8990a2; top: 0; border-radius: 50%}
module/kanban/js/view.js
+2 -1
View File
@@ -237,7 +237,7 @@ function renderLaneName($lane, lane, $kanban, columns, kanban)
*/
function renderUsersAvatar(users, itemID, size)
{
var avatarSizeClass = 'avatar-' + (size || 'sm');
var avatarSizeClass = 'avatar-' + (size || 'md');
//var link = createLink('kanban', 'assigncard', 'id=' + itemID, '', true);
if(users.length == 0 || (users.length == 1 && users[0] == ''))
@@ -263,6 +263,7 @@ function renderUsersAvatar(users, itemID, size)
if(typeof user === 'string') user = {account: user};
if(!user.avatar && window.userList && window.userList[user.account]) user = window.userList[user.account];
if(!user.name && window.users && window.users[user.account]) user.name = window.users[user.account];
assignees.push($('<div class="avatar has-text ' + avatarSizeClass + ' avatar-circle iframe"></div>').avatar({user: user}));
}
module/kanban/view/space.html.php
+2 -2
View File
@@ -127,13 +127,13 @@
$count ++;
?>
<div title="<?php echo $users[$member];?>">
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$member], 'account' => $member), 'avatar-circle avatar-' . zget($userIdPairs, $member)); ?>
<?php echo html::middleAvatar(array('avatar' => $usersAvatar[$member], 'account' => $member, 'name' => $users[$member]), 'avatar-circle avatar-' . zget($userIdPairs, $member)); ?>
</div>
<?php endforeach;?>
<?php if($teamCount > 3):?>
<?php if($teamCount > 4) echo '<span>…</span>';?>
<div title="<?php echo $users[end($teamPairs)];?>">
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[end($teamPairs)], 'account' => end($teamPairs)), 'avatar-circle avatar-' . zget($userIdPairs, end($teamPairs))); ?>
<?php echo html::middleAvatar(array('avatar' => $usersAvatar[end($teamPairs)], 'account' => end($teamPairs), 'name' => $users[end($teamPairs)]), 'avatar-circle avatar-' . zget($userIdPairs, end($teamPairs))); ?>
</div>
<?php endif;?>
</div>
module/program/css/browse.css
+1 -1
View File
@@ -2,7 +2,7 @@
.main-table tbody>tr>td:first-child, .main-table thead>tr>th:first-child {padding-left: 8px;}
.table tbody>tr>td .dropdown {display: inline-block; line-height: 1;}
tbody.sortable > tr > td.sort-handler .table-nest-toggle:before {cursor: pointer !important;}
.table .avatar {display: inline-block; width: 20px; height: 20px; line-height: 20px; top: 6px;}
.table .avatar {display: inline-block; top: 6px;}
label[for^="projectIdList"]:before {top: 1px; width:14px; height:14px;}
label[for^="projectIdList"]:after {width: 14px; height:14px;}
module/program/view/browsebylist.html.php
+2 -2
View File
@@ -66,9 +66,9 @@
<td class='c-status'><span class="status-program status-<?php echo $program->status?>"><?php echo zget($lang->project->statusList, $program->status, '');?></span></td>
<td>
<?php if(!empty($program->PM)):?>
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$program->PM], 'account' => $program->PM), 'avatar-circle avatar-' . zget($userIdPairs, $program->PM)); ?>
<?php $userID = isset($PMList[$program->PM]) ? $PMList[$program->PM]->id : '';?>
<?php $userName = zget($users, $program->PM);?>
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$program->PM], 'account' => $program->PM, 'name' => $userName), 'avatar-circle avatar-' . zget($userIdPairs, $program->PM)); ?>
<?php $userID = isset($PMList[$program->PM]) ? $PMList[$program->PM]->id : '';?>
<?php echo html::a($this->createLink('user', 'profile', "userID=$userID", '', true), $userName, '', "title='{$userName}' data-toggle='modal' data-type='iframe' data-width='600'");?>
<?php endif;?>
</td>
module/project/view/browsebycard.html.php
+3 -3
View File
@@ -42,7 +42,7 @@
#cards .project-members {float: left; height: 24px; line-height: 24px;}
#cards .project-members > a {display: inline-block; height: 24px;}
#cards .project-members > a + a {margin-left: -5px;}
#cards .project-members > a > .avatar {display: inline-block; width: 24px; height: 24px; line-height: 24px; margin-right: 1px;}
#cards .project-members > a > .avatar {display: inline-block; margin-right: 1px;}
#cards .project-members > span {display: inline-block; color: transparent; width: 2px; height: 2px; background-color: #8990a2; position: relative; border-radius: 50%; top: 3px; margin: 0 3px;}
#cards .project-members > span:before,
#cards .project-members > span:after {content: ''; display: block; position: absolute; width: 2px; height: 2px; background-color: #8990a2; top: 0; border-radius: 50%}
@@ -155,13 +155,13 @@
$count ++;
?>
<a href='<?php echo helper::createLink('project', 'team', "projectID=$projectID");?>' title="<?php echo $users[$member];?>">
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$member], 'account' => $member), 'avatar-circle avatar-' . zget($userIdPairs, $member)); ?>
<?php echo html::middleAvatar(array('avatar' => $usersAvatar[$member], 'account' => $member, 'name' => $users[$member]), 'avatar-circle avatar-' . zget($userIdPairs, $member)); ?>
</a>
<?php endforeach;?>
<?php if($project->teamCount > 3):?>
<?php if($project->teamCount > 4) echo '<span>…</span>';?>
<a href='<?php echo helper::createLink('project', 'team', "projectID=$projectID");?>' title="<?php echo $users[$member];?>">
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[end($project->teamMembers)], 'account' => $member), 'avatar-circle avatar-' . zget($userIdPairs, $member)); ?>
<?php echo html::middleAvatar(array('avatar' => $usersAvatar[end($project->teamMembers)], 'account' => $member, 'name' => $users[$member]), 'avatar-circle avatar-' . zget($userIdPairs, $member)); ?>
</a>
<?php endif;?>
</div>
module/project/view/index.html.php
+2 -2
View File
@@ -93,7 +93,7 @@
<?php if($count > 2) break;?>
<?php $count ++;?>
<div title="<?php echo $member->realname;?>">
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$member->account], 'account' => $member->account), 'avatar-circle avatar-' . zget($userIdPairs, $member->account)); ?>
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$member->account], 'account' => $member->account, 'name' => $member->realname), 'avatar-circle avatar-' . zget($userIdPairs, $member->account)); ?>
</div>
<?php endforeach;?>
<?php if(count($members) > 4):?>
@@ -102,7 +102,7 @@
<?php if(count($members) > 3):?>
<?php $lastMember = end($members);?>
<div title="<?php echo $lastMember->realname;?>">
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$lastMember->account], 'account' => $lastMember->account), 'avatar-circle avatar-' . zget($userIdPairs, $lastMember->account)); ?>
<?php echo html::smallAvatar(array('avatar' => $usersAvatar[$lastMember->account], 'account' => $lastMember->account, 'name' => $lastMember->realname), 'avatar-circle avatar-' . zget($userIdPairs, $lastMember->account)); ?>
</div>
<?php endif;?>
</div>
www/js/zui/min.js
+2 -2
View File
File diff suppressed because one or more lines are too long
www/theme/zui/css/min.css
+3 -3
View File
File diff suppressed because one or more lines are too long