refs #5900 User avatar with sticky position

front/salix/components/log/index.html

@@ -24,6 +24,7 @@
         </div>
         <div class="user-log vn-mb-sm" ng-repeat="userLog in ::originLog.logs">
             <div class="timeline">
+                <div class="user-avatar">
                     <vn-avatar
                     ng-class="::{system: !userLog.user}"
                     val="{{::userLog.user ? userLog.user.nickname : $ctrl.$t('System')}}"
@@ -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,21 +44,31 @@ vn-log {
                 right: -4px;
                 z-index: 1;
             }
+            & > .user-avatar {
+                background-color: $color-bg;
+                padding: $spacing-sm 0;
+                margin-top: -$spacing-sm;
+                position: relative; // Compatibility with old browsers
+                position: sticky;
+                top: 72px;
+
                 & > vn-avatar {
                     cursor: pointer;
+                    display: block;
 
                     &.system {
                         background-color: $color-main !important;
                     }
                 }
+            }
             & > .line {
                 position: absolute;
                 background-color: $color-main;
                 width: 2px;
                 left: 18px;
                 z-index: -1;
-                top: 44px;
-                bottom: -2px;
+                top: 0;
+                bottom: -$spacing-sm;
             }
         }
         &:last-child > .timeline > .line {