refs #5517 Hide worker image on error

front/salix/components/log/index.html

@@ -19,19 +19,18 @@
         <div class="user-wrapper">
             <div
                 class="user vn-mt-xs"
+                ng-class="::{system: !log.user}"
+                ng-style="::$ctrl.userBgColor(log.user)"
                 title="{{::log.user.nickname || 'System'}}">
+                <div class="user-letter">
+                    {{::log.user ? log.user.name.charAt(0).toUpperCase() : 'S'}}
+                </div>
                 <img
                     ng-if="::log.user.worker"
                     src="/api/Images/user/160x160/{{::log.user.worker.id}}/download?access_token={{::$ctrl.vnToken.token}}"
-                    ng-click="$ctrl.showWorkerDescriptor($event, log.user.worker.id)">
+                    ng-click="$ctrl.showWorkerDescriptor($event, log.user.worker.id)"
+                    onload="this.style.display = 'block'">
                 </img>
-                <div
-                    ng-if="::!log.user.worker"
-                    ng-class="::{system: !log.user}"
-                    ng-style="::$ctrl.userBgColor(log.user)"
-                    class="user-icon">
-                    {{::log.user ? log.user.name.charAt(0).toUpperCase() : 'S'}}
-                </div>
             </div>
             <div class="arrow bg-panel"></div>
             <div class="line"></div>

front/salix/components/log/index.js

@@ -23,7 +23,7 @@ export default class Controller extends Section {
             include: [{
                 relation: 'user',
                 scope: {
-                    fields: ['nickname'],
+                    fields: ['nickname', 'name'],
                     include: {
                         relation: 'worker',
                         scope: {
@@ -229,7 +229,7 @@ const colors = [
     'DC143C', // Red crimson
     '5681cf', // Blue steel
     'FF1493', // Ping intense
-    '00d700', // Green lime
+    '02ba02', // Green lime
     '1E90FF', // Blue sky
     '8B008B', // Purple dark
     'cc7000', // Orange bright

front/salix/components/log/style.scss

@@ -9,6 +9,7 @@ vn-log {
             padding-right: 10px;
 
             & > .user {
+                position: relative;
                 border-radius: 50%;
                 height: 36px;
                 width: 36px;
@@ -21,19 +22,21 @@ vn-log {
                     width: 100%;
                     height: 100%;
                 }
-                img {
-                    display: block;
-                    cursor: pointer;
+                &.system {
+                    background-color: $color-main;
                 }
-                .user-icon {
+                .user-letter {
                     font-size: 22px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
-
-                    &.system {
-                        background-color: $color-main;
-                    }
+                }
+                img {
+                    display: none;
+                    cursor: pointer;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
                 }
             }
             & > .arrow {