Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

proposition for person/thirparty rounded-pill badge appearance

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
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;
}
}

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
View File

@ -23,7 +23,7 @@
</span> </span>
<span v-if="options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</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> </div>

25
src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss
View File

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

32
src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
View File

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