refs #5667 Style improved

2023-05-19 13:51:20 +02:00 · 2023-05-19 13:51:20 +02:00 · 20b3c4f5b8
parent a190f2152b
commit 20b3c4f5b8
5 changed files with 104 additions and 64 deletions
--- a/front/core/components/avatar/index.js
+++ b/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
-];
--- a/front/core/lib/string.js
+++ b/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
+];
--- a/front/salix/components/log/index.html
+++ b/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">
-                <span class="model-name"
-                    ng-if="::$ctrl.showModelName"
-                    title="{{::log.changedModel}}">
-                    {{::log.changedModelI18n}}
-                </span>
+                ng-if="::log.changedModelId || log.changedModelValue">
                <span class="model-id"
                    ng-if="::log.changedModelId">
                    #{{::log.changedModelId}}
--- a/front/salix/components/log/index.js
+++ b/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',
--- a/front/salix/components/log/style.scss
+++ b/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 {
-                    display: inline-block;
-                    padding: 1px 5px;
-                    border-radius: 8px;
-                    color: $color-font-bg;
+                & > .action-model {
+                    display: inline-flex;
+                    align-items: stretch;
+                    height: 22px;
+                    column-gap: 2px;
+                    overflow: hidden;
+                    max-width: 100%;

-                    &.notice {
-                        background-color: $color-notice-medium;
+                    & > .action {
+                        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 {
-                        background-color: $color-success-medium;
-                    }
-                    &.warning {
-                        background-color: $color-main-medium;
-                    }
-                    &.alert {
-                        background-color: lighten($color-alert, 5%);
+                    & > .model-name {
+                        display: flex;
+                        flex-grow: 1;
+                        align-items: center;
+                        padding: 2px 6px;
+                        color: $color-font-dark;
+                        border-radius: 0 8px 8px 0;
+                        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;
                }