* refactor the avatar usage with html::avatar.

module/common/model.php

@@ -281,9 +281,7 @@ class commonModel extends model
             $isGuest = $app->user->account == 'guest';
 
             echo "<a class='dropdown-toggle' data-toggle='dropdown'>";
-            echo "<div id='main-avatar' class='avatar avatar bg-secondary avatar-circle'>";
-            echo !empty($app->user->avatar) ? html::image($app->user->avatar) : strtoupper($app->user->account[0]);
-            echo "</div>\n";
+            echo html::avatar($app->user);
             echo '</a>';
             echo "<ul class='dropdown-menu pull-right'>";
             if(!$isGuest)
@@ -291,9 +289,7 @@ class commonModel extends model
                 $noRole = (!empty($app->user->role) && isset($lang->user->roleList[$app->user->role])) ? '' : ' no-role';
                 echo '<li class="user-profile-item">';
                 echo "<a href='" . helper::createLink('my', 'profile', '', '', true) . "' data-width='600' class='iframe $noRole'" . '>';
-                echo "<div id='menu-avatar' class='avatar avatar bg-secondary avatar-circle'>";
-                echo $app->user->avatar ? html::image($app->user->avatar) : strtoupper($app->user->account[0]);
-                echo "</div>\n";
+                echo html::avatar($app->user, '', 'avatar-circle', 'id="menu-avatar"');
                 echo '<div class="user-profile-name">' . (empty($app->user->realname) ? $app->user->account : $app->user->realname) . '</div>';
                 if(isset($lang->user->roleList[$app->user->role])) echo '<div class="user-profile-role">' . $lang->user->roleList[$app->user->role] . '</div>';
                 echo '</a></li><li class="divider"></li>';

module/my/css/profile.css

@@ -5,8 +5,11 @@ table+table {border-top: 1px solid #eee;}
 .row td {width: 33%; text-align: left; font-weight: 700;}
 .main-actions {margin: 5px 0 10px 0; text-align: center;}
 .user-title {margin: 10px 10px -10px 10px; font-size: 14px; font-weight: bold; padding-left: 10px;}
-.avatar {display: inline-block; width: 50px; height: 50px; line-height: 50px;}
-#avatarForm {width: 100%; height: 100%;}
-.avatar .btn-avatar {padding: 0; vertical-align: revert; border: 0; background-color: auto; color: #fff; font-size: 20px;}
 .user-name {margin-left: 15px; font-weight: bold;}
 .user-name, .user-role {line-height: 50px; font-size: 16px; vertical-align: top;}
+
+#avatarUpload {display: inline-block; width: 50px; height: 50px; position: relative;}
+#avatarForm {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
+#avatarUploadBtn {display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
+#avatarUploadBtn {opacity: 0; color: #fff; border-radius: 50%; line-height: 50px;}
+#avatarUploadBtn:hover {opacity: 1; background-color: rgba(0,0,0,.5);}

module/my/js/profile.js

@@ -22,6 +22,8 @@ $(document).ready(function()
     window.parent.$('#main-avatar, #menu-avatar').html('<img src="' + avatar + '"/>');
     window.parent.$('#mainContent>.cell>.main-header>.avatar').html('<img src="' + avatar + '"/>');
     window.parent.$('#mainContent .avatar-' + account).html('<img src="' + avatar + '"/>');
+
+    $('#avatarUploadBtn').tooltip();
 });
 
 function uploadAvatar()

module/my/view/profile.html.php

@@ -16,13 +16,13 @@
 <div id='mainContent'>
   <div class='cell'>
     <div class='main-header text-center'>
-      <span class="avatar avatar bg-secondary avatar-circle">
+      <div id="avatarUpload">
+        <?php echo html::avatar($user, 50); ?>
         <form method='post' class='form-ajax' action=<?php echo inlink('uploadAvatar');?> id='avatarForm' enctype='multipart/form-data'>
           <input type="file" name="files" id="files" class="form-control hidden">
-          <?php $avatar = $user->avatar ? html::image($user->avatar) : strtoupper($user->account[0]);?>
-          <?php echo html::a('javascript:void(0);', $avatar, '', "class='btn-avatar' id='avatarUploadBtn' data-placement='right'");?>
+          <?php echo html::a('javascript:void(0);', '<i class="icon icon-pencil icon-2x"></i>', '', "class='btn-avatar' id='avatarUploadBtn' data-toggle='tooltip' data-container='body' data-placement='bottom' title='{$lang->my->uploadAvatar}'");?>
         </form>
-      </span>
+      </div>
       <span class='user-name'><?php echo $user->realname;?></span>
       <span class='user-role'><?php echo zget($lang->user->roleList, $user->role, '');?></span>
     </div>

module/program/view/browsebylist.html.php

@@ -62,9 +62,7 @@
         <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)):?>
-          <div class="avatar bg-secondary avatar-circle avatar-<?php echo $program->PM;?>">
-            <?php echo !empty($usersAvatar[$program->PM]) ? html::image($usersAvatar[$program->PM]) : strtoupper($program->PM[0]);?>
-          </div>
+          <?php echo html::smallAvatar(array('avatar' => $usersAvatar[$program->PM], 'account' => $program->PM)); ?>
           <?php $userID   = isset($PMList[$program->PM]) ? $PMList[$program->PM]->id : '';?>
           <?php $userName = zget($users, $program->PM);?>
           <?php echo html::a($this->createLink('user', 'profile', "userID=$userID", '', true), $userName, '', "title='{$userName}' data-toggle='modal' data-type='iframe' data-width='600'");?>

module/project/view/browsebycard.html.php

@@ -29,7 +29,7 @@
 #cards .project-infos > span + span {margin-left: 15px;}
 #cards .project-infos > .budget {max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
 #cards .project-detail {position: absolute; top: 75px; left: 16px; right: 16px; font-size: 12px;}
-#cards .project-footer {position: absolute; bottom: 5px;}
+#cards .project-footer {position: absolute; bottom: 10px; right: 10px; left: 15px;}
 #cards .pager {margin: 0; float: right;}
 #cards .pager .btn {border: none}
 #cards .panel .label-wait {background: #EFEFEF !important; color: #838A9D;}
@@ -40,16 +40,18 @@
 #cards .project-infos .text-red {color: #F85A40 !important;}
 #cards .project-detail .progress-pie {width: 24px; position: absolute; top: 18px;}
 #cards .project-detail  .leftTasks, .totalLeft {display:block; margin-top: 8px;}
-#cards .project-members {float: left;}
-#cards .project-members .avatar {display: inline-block; width: 25px; height: 25px; line-height: 25px; margin-right: 1px;}
-#cards .project-members a:not(:first-child) {margin-left: -5px;}
-#cards .totalMembers{display: inline-block; margin-left: 6px; position: absolute; bottom: 8px;}
-#cards .project-actions {float: right;}
-#cards .project-actions .menu-actions {padding-right: 20px;}
-#cards .project-actions ul {min-width: 35px; padding: 5px 6px;}
-#cards .project-actions .dropdown-hover:hover>.dropdown-menu ul,
-#cards .project-actions .open>.dropdown-menu ul {display: flex;}
-#cards .menu-actions .btn.btn-action {margin-bottom: -3px !important; margin-right: 5px;}
+#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 > 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%}
+#cards .project-members > span:before {left: -4px;}
+#cards .project-members > span:after {right: -4px;}
+#cards .project-members-total {display: inline-block; margin-left: 6px; position: relative; top: 3px}
+#cards .project-actions {position: absolute; right: -8px; bottom: -5px; white-space: nowrap;}
+#cards .project-actions ul {padding: 5px 6px;}
 #cards .icon-ellipsis-v {font-size: 13px;}
 #cards .teamTitle {margin-bottom: 30px;}
 </style>
@@ -138,41 +140,39 @@
               </div>
             </div>
           </div>
-          <div class='project-footer table-row'>
+          <div class='project-footer'>
             <?php $titleClass = ($project->teamCount == 0 and !$canActions) ? 'teamTitle' : '';?>
             <?php $count      = 0;?>
             <div class="<?php echo $titleClass?>"><?php echo $lang->project->teamMember;?></div>
-            <?php if(!empty($project->teamMembers)):?>
-            <div class='project-members table-col'>
-              <?php foreach($project->teamMembers as $member):?>
-              <?php
-              if($count > 2) continue;
-              if(!isset($users[$member]))
-              {
-                  $project->teamCount --;
-                  continue;
-              }
-              $count ++;
-              ?>
-              <a href='<?php echo helper::createLink('project', 'team', "projectID=$projectID");?>' title="<?php echo $users[$member];?>">
-                <div class="avatar bg-secondary avatar-circle avatar-<?php echo $member;?>">
-                  <?php echo !empty($usersAvatar[$member]) ? html::image(zget($usersAvatar, $member)) : strtoupper($member[0]);?>
-                </div>
-              </a>
-              <?php endforeach;?>
-              <?php if($project->teamCount > 3):?>
-              <?php echo '...';?>
-              <a href='<?php echo helper::createLink('project', 'team', "projectID=$projectID");?>' title="<?php echo $users[$member];?>">
-                <div class="avatar bg-secondary avatar-circle avatar-<?php echo $member;?>">
-                  <?php echo !empty($usersAvatar[end($project->teamMembers)]) ? html::image(zget($usersAvatar, end($project->teamMembers))) : strtoupper($member[0]);?>
-                </div>
-              </a>
+            <div class="clearfix">
+              <?php if(!empty($project->teamMembers)):?>
+              <div class='project-members pull-left'>
+                <?php foreach($project->teamMembers as $member):?>
+                <?php
+                if($count > 2) continue;
+                if(!isset($users[$member]))
+                {
+                    $project->teamCount --;
+                    continue;
+                }
+                $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)); ?>
+                </a>
+                <?php endforeach;?>
+                <?php if($project->teamCount > 3):?>
+                <?php 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)); ?>
+                </a>
+                <?php endif;?>
+              </div>
               <?php endif;?>
+              <div class='project-members-total  pull-left'><?php echo html::a(helper::createLink('project', 'team', "projectID=$projectID"), sprintf($lang->project->teamSumCount, $project->teamCount));?></div>
             </div>
-            <?php endif;?>
-            <span class='totalMembers'><?php echo html::a(helper::createLink('project', 'team', "projectID=$projectID"), sprintf($lang->project->teamSumCount, $project->teamCount));?></span>
-            <div class='project-actions table-col'>
-              <div class='menu-actions'>
+            <div class='project-actions'>
+              <div class='dropdown'>
                 <?php if($canActions):?>
                 <?php echo html::a('javascript:;', "<i class='icon icon-ellipsis-v'></i>", '', "data-toggle='dropdown' class='btn btn-link'");?>
                 <ul class='dropdown-menu pull-right'>