proposition for person/thirparty rounded-pill badge appearance

This commit is contained in:
Mathieu Jaumotte 2021-12-06 15:41:53 +01:00
parent 0617014e91
commit b888211ef9
4 changed files with 42 additions and 26 deletions

View File

@ -162,6 +162,13 @@ div.activity-list {
}
/*
* Specific badge rounded-pill
*/
.badge {
&.bg-person {
//@extend .$chill-ll-gray;
background-color: $chill-ll-gray;
color: $chill-green;
}
}

View File

@ -23,7 +23,7 @@
</span>
<span v-if="options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
<span v-if="options.addEntity == true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
<span v-if="options.addEntity == true" class="badge rounded-pill bg-person">{{ $t('renderbox.person') }}</span>
</div>

View File

@ -1,21 +1,28 @@
@import 'ChillMainAssets/module/bootstrap/shared';
/// Specific badge rounded-pill
.badge {
&.bg-thirdparty-company {
//@extend .bg-info;
background-color: $yellow;
}
// Personne de contact
&.bg-thirdparty-child {
//@extend .bg-chill-blue;
background-color: $chill-blue;
//@extend .$chill-ll-gray;
background-color: $chill-ll-gray;
color: $chill-pink;
}
// Personne morale
&.bg-thirdparty-company {
//@extend .$chill-ll-gray;
background-color: $chill-ll-gray;
color: $chill-pink;
}
// Personne physique
&.bg-thirdparty-contact {
//@extend .bg-secondary;
background-color: $secondary;
//@extend .$chill-ll-gray;
background-color: $chill-ll-gray;
color: $chill-pink;
}
}
///
/// force first column width in list
div.thirdparty-list {
div.flex-table {
div.item-bloc {

View File

@ -7,24 +7,26 @@
<div class="entity-label">
<div :class="'denomination h' + options.hLevel">
<a v-if="this.options.addLink === true" href="#">
<a v-if="this.options.addLink === true" href="#">
<span class="name">{{ thirdparty.text }}</span>
</a>
<span class="name">{{ thirdparty.text }}</span>
<span class="name" v-else>{{ thirdparty.text }}</span>
<span class="badge rounded-pill bg-thirdparty-child" v-if="thirdparty.kind == 'child'">
{{ $t('thirdparty.child')}}
</span>
<span class="badge rounded-pill bg-thirdparty-company" v-else-if="thirdparty.kind == 'company'">
{{ $t('thirdparty.company')}}
</span>
<span class="badge rounded-pill bg-thirdparty-contact" v-else>
{{ $t('thirdparty.contact')}}
<span v-if="options.addId == true" class="id-number" :title="'n° ' + thirdparty.id">
{{ thirdparty.id }}
</span>
<span v-if="options.addId == true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
<span v-if="options.addEntity == true && thirdparty.type === 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
<template v-if="options.addEntity === true">
<span class="badge rounded-pill bg-thirdparty-child" v-if="thirdparty.kind === 'child'">
{{ $t('tparty.child')}}
</span>
<span class="badge rounded-pill bg-thirdparty-company" v-else-if="thirdparty.kind === 'company'">
{{ $t('tparty.company')}}
</span>
<span class="badge rounded-pill bg-thirdparty-contact" v-else>
{{ $t('tparty.contact')}}
</span>
</template>
</div>
<div v-if="hasParent">
@ -38,7 +40,6 @@
</div>
</div>
<div class="item-col">
<div class="float-button bottom">
<div class="box">
@ -96,8 +97,9 @@ const i18n = {
messages: {
fr: {
tparty: {
child: "Personne de contact",
company: "Personne morale",
contact: "Personne physique",
company: "Personne morale"
}
}
}