refs #5667 Fixes: Style, translations, icons

front/core/lib/string.js

@@ -31,12 +31,15 @@ export function firstUpper(str) {
     return str.charAt(0).toUpperCase() + str.substr(1);
 }
 
+export function djb2a(string) {
+    let hash = 5381;
+    for (let i = 0; i < string.length; i++)
+        hash = ((hash << 5) + hash) ^ string.charCodeAt(i);
+    return hash >>> 0;
+}
+
 export function hashToColor(value) {
-    value = value || '';
+    return '#' + colors[djb2a(value || '') % colors.length];
-    let hash = 0;
-    for (let i = 0; i < value.length; i++)
-        hash += value.charCodeAt(i);
-    return '#' + colors[hash % colors.length];
 }
 
 const colors = [

front/salix/components/log/index.html

@@ -36,12 +36,11 @@
                 <div
                     class="action-date text-secondary text-caption vn-mr-sm"
                     title="{{::log.creationDate | date:'dd/MM/yyyy HH:mm:ss'}}">
-                    <span >
                     <vn-icon
                         class="action vn-mr-xs"
                         ng-class="::$ctrl.actionsClass[log.action]"
                         icon="{{::$ctrl.actionsIcon[log.action]}}"
-                        title="{{::$ctrl.actionsText[log.action] | translate}}">
+                        translate-attr="::{title: $ctrl.actionsText[log.action]}">
                     </vn-icon>
                     {{::$ctrl.relativeDate(log.creationDate)}}
                 </div>
@@ -66,17 +65,14 @@
                     {{::log.changedModelValue}}
                 </span>
             </div>
-            <div class="changes vn-pa-sm" ng-class="{expanded: log.expand}">
+            <div class="changes vn-pa-sm"
-                <div class="icon vn-ml-sm">
+                ng-class="{expanded: log.expand}"
-                    <vn-icon icon="visibility"
+                ng-if="::log.props.length || log.description">
-                        class="expand-button"
+                <vn-icon
-                        ng-click="log.expand = true">
+                    icon="expand_more"
-                    </vn-icon>
+                    translate-attr="{title: 'Details'}"
-                    <vn-icon icon="visibility_off"
+                    ng-click="log.expand = !log.expand">
-                        class="shrink-button"
+                </vn-icon>
-                        ng-click="log.expand = false">
-                    </vn-icon>
-                </div>
                 <span ng-if="::log.props.length"
                     class="attributes">
                     <span ng-if="!log.expand" ng-repeat="prop in ::log.props"
@@ -98,15 +94,9 @@
                         </div>
                     </div>
                 </span>
-                <span ng-if="::!log.props.length"
+                <span ng-if="::!log.props.length" class="description">
-                    class="description">
                     {{::log.description}}
                 </span>
-                <span ng-if="::!log.description && !log.props.length"
-                    class="no-changes"
-                    translate>
-                    No details
-                </span>
             </vn-card>
         </div>
     </div>

front/salix/components/log/index.js

@@ -11,9 +11,9 @@ export default class Controller extends Section {
         this.hashToColor = hashToColor;
         this.actionsText = {
             insert: 'Creates',
-            update: 'Updates',
+            update: 'Edits',
             delete: 'Deletes',
-            select: 'Views'
+            select: 'Accesses'
         };
         this.actionsClass = {
             insert: 'success',
@@ -23,9 +23,9 @@ export default class Controller extends Section {
         };
         this.actionsIcon = {
             insert: 'add',
-            update: 'update',
+            update: 'edit',
             delete: 'remove',
-            select: 'search'
+            select: 'visibility'
         };
         this.filter = {
             include: [{

front/salix/components/log/locale/es.yml

@@ -10,12 +10,12 @@ After: Despues
 History: Historial
 Name: Nombre
 Creates: Crea
-Updates: Actualiza
+Edits: Edita
 Deletes: Elimina
-Views: Visualiza
+Accesses: Accede
 System: Sistema
+Details: Detalles
 note: nota
 Changes: Cambios
-No details: Sin detalles
 today: hoy
 yesterday: ayer

front/salix/components/log/style.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "effects";
 
 vn-log {
     .change {
@@ -47,6 +48,7 @@ vn-log {
             & > .header {
                 display: flex;
                 justify-content: space-between;
+                align-items: center;
                 overflow: hidden;
 
                 & > .action-model {
@@ -63,10 +65,10 @@ vn-log {
                         white-space: nowrap;
                     }
                 }
-                .action-date {
+                & > .action-date {
                     white-space: nowrap;
 
-                    .action {
+                    & > .action {
                         display: inline-flex;
                         align-items: center;
                         justify-content: center;
@@ -75,7 +77,7 @@ vn-log {
                         border-radius: 50%;
                         width: 24px;
                         height: 24px;
-                        font-size: 1.5em;
+                        font-size: 1.4em;
 
                         &.notice {
                             background-color: $color-notice-medium
@@ -111,7 +113,6 @@ vn-log {
         overflow: hidden;
         background-color: rgba(255, 255, 255, .05);
         color: $color-font-light;
-        transition: max-height 1000ms ease-in-out;
         position: relative;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -119,32 +120,23 @@ vn-log {
         min-height: 34px;
         box-sizing: border-box;
 
-        & > .icon {
+        & > vn-icon {
+            @extend %clickable;
             float: right;
             position: relative;
-            cursor: pointer;
+            transition-property: transform, background-color;
-
+            transition-duration: 150ms;
-            & > vn-icon {
+            margin: -5px;
-                font-size: 1.2em;
+            margin-left: 4px;
-            }
+            padding: 1px;
-            & > .expand-button {
+            border-radius: 50%;
-                display: block;
-            }
-            & > .shrink-button {
-                display: none;
-            }
         }
         &.expanded {
             text-overflow: initial;
             white-space: initial;
 
-            & > .icon {
+            & > vn-icon {
-                & > .expand-button {
+                transform: rotate(180deg);
-                    display: none;
-                }
-                & > .shrink-button {
-                    display: block;
-                }
             }
         }
         & > .no-changes {