refs #5900 User avatar with sticky position

front/salix/components/log/index.html

@@ -24,7 +24,8 @@
         </div>
         <div class="user-log vn-mb-sm" ng-repeat="userLog in ::originLog.logs">
             <div class="timeline">
-                <vn-avatar
+                <div class="user-avatar">
+                    <vn-avatar
                     ng-class="::{system: !userLog.user}"
                     val="{{::userLog.user ? userLog.user.nickname : $ctrl.$t('System')}}"
                     ng-click="$ctrl.showWorkerDescriptor($event, userLog)">
@@ -33,6 +34,7 @@
                         ng-src="/api/Images/user/160x160/{{::userLog.userFk}}/download?access_token={{::$ctrl.vnToken.token}}">
                     </img>
                 </vn-avatar>
+                </div>
                 <div class="arrow bg-panel" ng-if="::$ctrl.byRecord"></div>
                 <div class="line"></div>
             </div>

front/salix/components/log/index.js

@@ -115,23 +115,21 @@ export default class Controller extends Section {
             // User
 
             const userChanged = originChanged
-                || log.userFk != prevLog.userFk
-                || nLogs >= 5;
+                || log.userFk != prevLog.userFk;
             if (userChanged) {
                 originLog.logs.push(userLog = {
                     user: log.user,
                     userFk: log.userFk,
                     logs: []
                 });
-                nLogs = 0;
             }
-            nLogs++;
 
             // Model
 
             const modelChanged = userChanged
                 || log.changedModel != prevLog.changedModel
-                || log.changedModelId != prevLog.changedModelId;
+                || log.changedModelId != prevLog.changedModelId
+                || nLogs >= 6;
             if (modelChanged) {
                 userLog.logs.push(modelLog = {
                     model: log.changedModel,
@@ -140,7 +138,9 @@ export default class Controller extends Section {
                     showValue: log.changedModelValue,
                     logs: []
                 });
+                nLogs = 0;
             }
+            nLogs++;
 
             modelLog.logs.push(log);
 

front/salix/components/log/style.scss

@@ -44,11 +44,21 @@ vn-log {
                 right: -4px;
                 z-index: 1;
             }
-            & > vn-avatar {
-                cursor: pointer;
+            & > .user-avatar {
+                background-color: $color-bg;
+                padding: $spacing-sm 0;
+                margin-top: -$spacing-sm;
+                position: relative; // Compatibility with old browsers
+                position: sticky;
+                top: 72px;
 
-                &.system {
-                    background-color: $color-main !important;
+                & > vn-avatar {
+                    cursor: pointer;
+                    display: block;
+
+                    &.system {
+                        background-color: $color-main !important;
+                    }
                 }
             }
             & > .line {
@@ -57,8 +67,8 @@ vn-log {
                 width: 2px;
                 left: 18px;
                 z-index: -1;
-                top: 44px;
-                bottom: -2px;
+                top: 0;
+                bottom: -$spacing-sm;
             }
         }
         &:last-child > .timeline > .line {