refactor(tags): unified the style rules for tags under fetched-tags component and all display subName if present
gitea/salix/pipeline/head This commit looks good Details

This commit is contained in:
Carlos Jimenez Ruiz 2021-09-23 17:19:47 +02:00
parent f74d2cc302
commit 368f54b872
20 changed files with 121 additions and 142 deletions

View File

@ -96,24 +96,6 @@ vn-table {
max-width: 400px; max-width: 400px;
min-width: 0; min-width: 0;
} }
&[vn-fetched-tags] {
min-width: 155px;
& > vn-one {
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
}
& > vn-one:nth-child(2) h3 {
color: $color-font-secondary;
text-transform: uppercase;
line-height: initial;
font-size: 0.75rem
}
}
&[vn-fetched-tags][wide] {
width: 430px;
}
vn-icon.bright, i.bright { vn-icon.bright, i.bright {
color: #f7931e; color: #f7931e;
} }

View File

@ -1,6 +1,5 @@
import ngModule from '../module'; import ngModule from '../module';
import Section from 'salix/components/section'; import Section from 'salix/components/section';
import './style.scss';
class Controller extends Section { class Controller extends Section {
constructor($element, $, vnReport, vnEmail) { constructor($element, $, vnReport, vnEmail) {

View File

@ -1,22 +0,0 @@
@import "variables";
vn-client-consumption {
vn-td[vn-fetched-tags] {
& div {
display: flex;
flex-wrap: wrap;
& vn-one {
min-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
& vn-one h3 {
color: $color-font-secondary;
text-transform: uppercase;
line-height: initial;
font-size: 0.75rem
}
}
}
}

View File

@ -38,25 +38,6 @@ vn-entry-buy-index vn-card {
tr { tr {
margin-bottom: 10px; margin-bottom: 10px;
} }
td[vn-fetched-tags] {
& div {
display: flex;
flex-wrap: wrap;
& vn-one {
min-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
& vn-one h3 {
color: $color-font-secondary;
text-transform: uppercase;
line-height: initial;
font-size: 0.75rem
}
}
}
} }
$color-font-link-medium: lighten($color-font-link, 20%) $color-font-link-medium: lighten($color-font-link, 20%)

View File

@ -100,10 +100,12 @@
</vn-td> </vn-td>
<vn-td number>{{::buy.size}}</vn-td> <vn-td number>{{::buy.size}}</vn-td>
<vn-td vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::buy.name}}">{{::buy.name}}</vn-one> <vn-one title="{{::buy.name}}">{{::buy.name}}</vn-one>
<vn-one ng-if="::buy.subName"> <vn-one ng-if="::buy.subName">
<h3 title="{{::buy.subName}}">{{::buy.subName}}</h3> <h3 title="{{::buy.subName}}">{{::buy.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::buy" item="::buy"

View File

@ -156,7 +156,12 @@
</span> </span>
</td> </td>
<td vn-fetched-tags colspan="6"> <td vn-fetched-tags colspan="6">
<vn-one title="{{::line.item.name}}">{{::line.item.name}}</vn-one> <div>
<vn-one title="{{::line.item.concept}}">{{::line.item.name}}</vn-one>
<vn-one ng-if="::line.item.subName">
<h3 title="{{::line.item.subName}}">{{::line.item.subName}}</h3>
</vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::line.item" item="::line.item"

View File

@ -1,5 +1,30 @@
@import "variables"; @import "variables";
[vn-fetched-tags] {
min-width: 155px;
& [wide] {
width: 430px;
}
& div {
display: flex;
flex-wrap: wrap;
align-items: center;
& vn-one {
min-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
}
& vn-one h3 {
color: $color-font-secondary;
text-transform: uppercase;
line-height: initial;
font-size: 0.75rem;
margin-bottom: 0px;
}
}
}
vn-fetched-tags { vn-fetched-tags {
& > vn-horizontal { & > vn-horizontal {
align-items: center; align-items: center;

View File

@ -65,10 +65,12 @@
</vn-autocomplete> </vn-autocomplete>
</vn-td> </vn-td>
<vn-td vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{price.name}}">{{price.name}}</vn-one> <vn-one title="{{price.name}}">{{price.name}}</vn-one>
<vn-one ng-if="price.subName"> <vn-one ng-if="price.subName">
<h3 title="{{price.subName}}">{{price.subName}}</h3> <h3 title="{{price.subName}}">{{price.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="price" item="price"

View File

@ -51,10 +51,12 @@
<vn-td shrink>{{::item.grouping | dashIfEmpty}}</vn-td> <vn-td shrink>{{::item.grouping | dashIfEmpty}}</vn-td>
<vn-td shrink>{{::item.packing | dashIfEmpty}}</vn-td> <vn-td shrink>{{::item.packing | dashIfEmpty}}</vn-td>
<vn-td vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::item.name}}">{{::item.name}}</vn-one> <vn-one title="{{::item.name}}">{{::item.name}}</vn-one>
<vn-one ng-if="::item.subName"> <vn-one ng-if="::item.subName">
<h3 title="{{::item.subName}}">{{::item.subName}}</h3> <h3 title="{{::item.subName}}">{{::item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="item" item="item"

View File

@ -43,10 +43,12 @@
</span> </span>
</vn-td> </vn-td>
<vn-td vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::row.item.name}}">{{::row.item.name}}</vn-one> <vn-one title="{{::row.item.name}}">{{::row.item.name}}</vn-one>
<vn-one ng-if="::row.item.subName"> <vn-one ng-if="::row.item.subName">
<h3 title="{{::row.item.subName}}">{{::row.item.subName}}</h3> <h3 title="{{::row.item.subName}}">{{::row.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::row.item" item="::row.item"

View File

@ -98,11 +98,13 @@
{{::row.itemFk | zeroFill:6}} {{::row.itemFk | zeroFill:6}}
</span> </span>
</vn-td> </vn-td>
<vn-td expand vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::row.item.name}}">{{::row.item.name}}</vn-one> <vn-one title="{{::row.item.name}}">{{::row.item.name}}</vn-one>
<vn-one ng-if="::row.item.subName"> <vn-one ng-if="::row.item.subName">
<h3 title="{{::row.item.subName}}">{{::row.item.subName}}</h3> <h3 title="{{::row.item.subName}}">{{::row.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::row.item" item="::row.item"

View File

@ -39,11 +39,13 @@
{{::row.itemFk}} {{::row.itemFk}}
</span> </span>
</vn-td> </vn-td>
<vn-td wide vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::row.item.name}}">{{::row.item.name}}</vn-one> <vn-one title="{{::row.item.name}}">{{::row.item.name}}</vn-one>
<vn-one ng-if="::row.item.subName"> <vn-one ng-if="::row.item.subName">
<h3 title="{{::row.item.subName}}">{{::row.item.subName}}</h3> <h3 title="{{::row.item.subName}}">{{::row.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::row.item" item="::row.item"

View File

@ -51,11 +51,13 @@
{{::buy.itemName}} {{::buy.itemName}}
</span> </span>
</vn-td> </vn-td>
<vn-td vn-fetched-tags wide> <vn-td vn-fetched-tags>
<div>
<vn-one></vn-one> <vn-one></vn-one>
<vn-one ng-if="::buy.subName"> <vn-one ng-if="::buy.subName">
<h3 title="{{::buy.subName}}">{{::buy.subName}}</h3> <h3 title="{{::buy.subName}}">{{::buy.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::buy" item="::buy"

View File

@ -18,11 +18,13 @@
<vn-tbody> <vn-tbody>
<vn-tr ng-repeat="sale in $ctrl.ticket.sale.items track by sale.id"> <vn-tr ng-repeat="sale in $ctrl.ticket.sale.items track by sale.id">
<vn-td number>{{("000000"+sale.itemFk).slice(-6)}}</vn-td> <vn-td number>{{("000000"+sale.itemFk).slice(-6)}}</vn-td>
<vn-td vn-fetched-tags wide> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one> <vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one>
<vn-one ng-if="::sale.item.subName"> <vn-one ng-if="::sale.item.subName">
<h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3> <h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::sale.item" item="::sale.item"

View File

@ -31,10 +31,12 @@
</span> </span>
</td> </td>
<td rowspan="{{::sale.components.length + 1}}" vn-fetched-tags> <td rowspan="{{::sale.components.length + 1}}" vn-fetched-tags>
<div>
<vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one> <vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one>
<vn-one ng-if="::sale.item.subName"> <vn-one ng-if="::sale.item.subName">
<h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3> <h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::sale.item" item="::sale.item"

View File

@ -35,10 +35,12 @@
</span> </span>
</vn-td> </vn-td>
<vn-td vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one> <vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one>
<vn-one ng-if="::sale.item.subName"> <vn-one ng-if="::sale.item.subName">
<h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3> <h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::sale.item" item="::sale.item"

View File

@ -39,11 +39,13 @@
{{sale.itemFk | zeroFill:6}} {{sale.itemFk | zeroFill:6}}
</span> </span>
</vn-td> </vn-td>
<vn-td vn-fetched-tags wide> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one> <vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one>
<vn-one ng-if="::sale.item.subName"> <vn-one ng-if="::sale.item.subName">
<h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3> <h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::sale.item" item="::sale.item"

View File

@ -23,23 +23,6 @@ vn-ticket-sale {
margin: 3px; margin: 3px;
} }
} }
vn-td-editable[vn-fetched-tags] {
& div {
display: flex;
flex-wrap: wrap;
}
& vn-one {
min-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
& text vn-one:nth-child(2) h3 {
color: $color-font-secondary;
text-transform: uppercase;
line-height: initial;
font-size: 0.75rem
}
}
vn-dialog.edit { vn-dialog.edit {
@extend .edit-popover; @extend .edit-popover;

View File

@ -124,9 +124,9 @@
<vn-th number shrink>Available</vn-th> <vn-th number shrink>Available</vn-th>
<vn-th number shrink>Quantity</vn-th> <vn-th number shrink>Quantity</vn-th>
<vn-th>Description</vn-th> <vn-th>Description</vn-th>
<vn-th number>Price</vn-th> <vn-th shrink number>Price</vn-th>
<vn-th number>Discount</vn-th> <vn-th shrink number>Discount</vn-th>
<vn-th number>Amount</vn-th> <vn-th shrink number>Amount</vn-th>
<vn-th shrink>Packing</vn-th> <vn-th shrink>Packing</vn-th>
</vn-tr> </vn-tr>
</vn-thead> </vn-thead>
@ -191,20 +191,22 @@
</vn-chip> </vn-chip>
</vn-td> </vn-td>
<vn-td number shrink>{{::sale.quantity}}</vn-td> <vn-td number shrink>{{::sale.quantity}}</vn-td>
<vn-td vn-fetched-tags wide> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one> <vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one>
<vn-one ng-if="::sale.item.subName"> <vn-one ng-if="::sale.item.subName">
<h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3> <h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::sale.item" item="::sale.item"
tabindex="-1"> tabindex="-1">
</vn-fetched-tags> </vn-fetched-tags>
</vn-td> </vn-td>
<vn-td number>{{::sale.price | currency: 'EUR':2}}</vn-td> <vn-td shrink number>{{::sale.price | currency: 'EUR':2}}</vn-td>
<vn-td number>{{::sale.discount}} %</vn-td> <vn-td shrink number>{{::sale.discount}} %</vn-td>
<vn-td number>{{::sale.quantity * sale.price * ((100 - sale.discount) / 100) | currency: 'EUR':2}}</vn-td> <vn-td shrink number>{{::sale.quantity * sale.price * ((100 - sale.discount) / 100) | currency: 'EUR':2}}</vn-td>
<vn-td shrink> <vn-td shrink>
{{::sale.item.itemPackingTypeFk | dashIfEmpty}} {{::sale.item.itemPackingTypeFk | dashIfEmpty}}
</vn-td> </vn-td>

View File

@ -43,10 +43,12 @@
</span> </span>
</vn-td> </vn-td>
<vn-td vn-fetched-tags> <vn-td vn-fetched-tags>
<div>
<vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one> <vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one>
<vn-one ng-if="::sale.item.subName"> <vn-one ng-if="::sale.item.subName">
<h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3> <h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3>
</vn-one> </vn-one>
</div>
<vn-fetched-tags <vn-fetched-tags
max-length="6" max-length="6"
item="::sale.item" item="::sale.item"