refs #5667 Style improved

front/core/components/avatar/index.js

@@ -1,5 +1,6 @@
 import ngModule from '../../module';
 import Component from 'core/lib/component';
+import {hashToColor} from '../../lib/string';
 import './style.scss';
 
 /**
@@ -16,13 +17,8 @@ export default class Avatar extends Component {
         this._val = value;
 
         const val = value || '';
-        let hash = 0;
-        for (let i = 0; i < val.length; i++)
-            hash += val.charCodeAt(i);
-        const color = '#' + colors[hash % colors.length];
-
         const el = this.element;
-        el.style.backgroundColor = color;
+        el.style.backgroundColor = hashToColor(val);
         el.title = val;
     }
 }
@@ -35,29 +31,3 @@ ngModule.vnComponent('vnAvatar', {
     },
     transclude: true
 });
-
-const colors = [
-    'e2553d', // Coral
-    'FFA07A', // Salmon
-    'FFDAB9', // Peach
-    'a17077', // Pink
-    'bf0e99', // Pink light
-    '52a500', // Green chartreuse
-    '00aeae', // Cian
-    'b754cf', // Purple middle
-    '8a69cd', // Blue lavender
-    '1fa8a1', // Green ocean
-    'DC143C', // Red crimson
-    '5681cf', // Blue steel
-    'FF1493', // Ping intense
-    '02ba02', // Green lime
-    '1E90FF', // Blue sky
-    '8B008B', // Purple dark
-    'cc7000', // Orange bright
-    '00b5b8', // Turquoise
-    '8B0000', // Red dark
-    '008080', // Green bluish
-    '2F4F4F', // Gray board
-    '7e7e7e', // Gray
-    '5d5d5d', // Gray dark
-];

front/core/lib/string.js

@@ -30,3 +30,37 @@ export function camelToKebab(str) {
 export function firstUpper(str) {
     return str.charAt(0).toUpperCase() + str.substr(1);
 }
+
+export function hashToColor(value) {
+    value = value || '';
+    let hash = 0;
+    for (let i = 0; i < value.length; i++)
+        hash += value.charCodeAt(i);
+    return '#' + colors[hash % colors.length];
+}
+
+const colors = [
+    'FFA07A', // Salmon
+    'FFDAB9', // Peach
+    'a17077', // Pink
+    'e2553d', // Coral
+    'bf0e99', // Pink light
+    '52a500', // Green chartreuse
+    '00aeae', // Cian
+    'b754cf', // Purple middle
+    '8a69cd', // Blue lavender
+    '1fa8a1', // Green ocean
+    'DC143C', // Red crimson
+    '5681cf', // Blue steel
+    'FF1493', // Ping intense
+    '02ba02', // Green lime
+    '1E90FF', // Blue sky
+    '8B008B', // Purple dark
+    'cc7000', // Orange bright
+    '00b5b8', // Turquoise
+    '8B0000', // Red dark
+    '008080', // Green bluish
+    '2F4F4F', // Gray board
+    '7e7e7e', // Gray
+    '5d5d5d', // Gray dark
+];

front/salix/components/log/index.html

@@ -33,24 +33,30 @@
         </div>
         <vn-card class="detail">
             <div class="header vn-pa-sm">
+                <div class="action-model">
+                    <div class="action" ng-class="::$ctrl.actionsClass[log.action]">
+                        <vn-icon
+                            icon="{{::$ctrl.actionsIcon[log.action]}}"
+                            title="{{::$ctrl.actionsText[log.action] | translate}}">
+                        </vn-icon>
+                    </div>
+                    <div class="model-name"
+                        ng-if="::$ctrl.showModelName"
+                        ng-style="::{backgroundColor: $ctrl.hashToColor(log.changedModel)}"
+                        title="{{::log.changedModel}}">
+                        {{::log.changedModelI18n}}
+                    </div>
+                </div>
                 <div
-                    class="date text-secondary text-caption"
+                    class="date text-secondary text-caption vn-ml-sm"
                     title="{{::log.creationDate | date:'dd/MM/yyyy HH:mm:ss'}}">
                     {{::$ctrl.relativeDate(log.creationDate)}}
                 </div>
-                <span class="chip" ng-class="::$ctrl.actionsClass[log.action]" translate>
-                    {{::$ctrl.actionsText[log.action]}}
-                </span>
             </div>
             <div
                 class="model vn-pb-sm vn-px-sm"
                 title="{{::log.changedModelValue}}"
-                ng-if="::log.changedModel || log.changedModelValue">
+                ng-if="::log.changedModelId || log.changedModelValue">
-                <span class="model-name"
-                    ng-if="::$ctrl.showModelName"
-                    title="{{::log.changedModel}}">
-                    {{::log.changedModelI18n}}
-                </span>
                 <span class="model-id"
                     ng-if="::log.changedModelId">
                     #{{::log.changedModelId}}

front/salix/components/log/index.js

@@ -1,5 +1,6 @@
 import ngModule from '../../module';
 import Section from '../section';
+import {hashToColor} from 'core/lib/string';
 import './style.scss';
 
 const validDate = /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;
@@ -7,6 +8,7 @@ const validDate = /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[
 export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
+        this.hashToColor = hashToColor;
         this.actionsText = {
             insert: 'Creates',
             update: 'Updates',
@@ -19,6 +21,12 @@ export default class Controller extends Section {
             delete: 'alert',
             select: 'notice'
         };
+        this.actionsIcon = {
+            insert: 'add',
+            update: 'update',
+            delete: 'remove',
+            select: 'search'
+        };
         this.filter = {
             include: [{
                 relation: 'user',

front/salix/components/log/style.scss

@@ -45,42 +45,64 @@ vn-log {
             overflow: hidden;
 
             & > .header {
+                display: flex;
+                justify-content: space-between;
                 overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
 
-                & > .chip {
+                & > .action-model {
-                    display: inline-block;
+                    display: inline-flex;
-                    padding: 1px 5px;
+                    align-items: stretch;
-                    border-radius: 8px;
+                    height: 22px;
-                    color: $color-font-bg;
+                    column-gap: 2px;
+                    overflow: hidden;
+                    max-width: 100%;
 
-                    &.notice {
+                    & > .action {
-                        background-color: $color-notice-medium;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: $color-font-bg;
+                        vertical-align: middle;
+                        border-radius: 8px 0 0 8px;
+                        min-width: 22px;
+
+                        &.notice {
+                            background-color: $color-notice-medium
+                        }
+                        &.success {
+                            background-color: $color-success-medium;
+                        }
+                        &.warning {
+                            background-color: $color-main-medium;
+                        }
+                        &.alert {
+                            background-color: lighten($color-alert, 5%);
+                        }
+                        & > vn-icon {
+                            font-size: 1.2em;
+                        }
                     }
-                    &.success {
+                    & > .model-name {
-                        background-color: $color-success-medium;
+                        display: flex;
-                    }
+                        flex-grow: 1;
-                    &.warning {
+                        align-items: center;
-                        background-color: $color-main-medium;
+                        padding: 2px 6px;
-                    }
+                        color: $color-font-dark;
-                    &.alert {
+                        border-radius: 0 8px 8px 0;
-                        background-color: lighten($color-alert, 5%);
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
                     }
                 }
                 .date {
-                    float: right;
+                    white-space: nowrap;
                 }
             }
             & > .model {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
-                color: lighten($color-primary, 10%);
 
-                & > .model-name {
-                    color: $color-font;
-                }
                 & > .model-value {
                     font-style: italic;
                 }