sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-126] moved images to use the icon component in the ui library

Browse Source
This commit is contained in:
Eraldo Hasanaj
2019-03-14 23:21:02 +01:00
parent 86f4f4ad59
commit d6c363c53d
8 changed files with 44 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@@ -6,5 +6,5 @@
"prettier.trailingComma": "es5",
"prettier.tabWidth": 4,
"prettier.semi": true,
"prettier.printWidth": 160
"prettier.printWidth": 140
}

73
apps/sales/src/app/components/product-review/product-review.component.html
View File

@@ -1,12 +1,7 @@
<app-modal id="product-review-modal">
<div class="modal-wrapper" *ngIf="review">
<div class="header">
<img
(click)="closeDialog()"
class="close-icon"
src="assets/images/close.svg"
alt="close"
/>
<lib-icon (click)="closeDialog()" height="21px" class="close-icon" name="close" alt="close"></lib-icon>
</div>
<div class="content">
<div class="content-header">
@@ -15,13 +10,13 @@
</div>
<div class="review-stars-wrapper align-center">
<ng-container *ngFor="let star of (fullStars | async)">
<img src="../../../assets/images/Star_full.png" />
<lib-icon width="17px" name="Star_full" type="png"></lib-icon>
</ng-container>
<ng-container *ngFor="let star of (halfStars | async)">
<img src="../../../assets/images/Star_half.png" />
<lib-icon width="17px" name="Star_half" type="png"></lib-icon>
</ng-container>
<ng-container *ngFor="let star of (emptyStars | async)">
<img src="../../../assets/images/Star_empty.png" />
<lib-icon width="17px" name="Star_empty" type="png"></lib-icon>
</ng-container>
<span>{{ review.stars | decimalSeparator: ',' }} Sterne</span>
</div>
@@ -33,20 +28,14 @@
<div class="review">
<div class="stars-title">
<div class="stars">
<ng-container
*ngFor="let star of getFullStarsFromRate(item.stars)"
>
<img src="../../../assets/images/Star_full.png" />
<ng-container *ngFor="let star of getFullStarsFromRate(item.stars)">
<lib-icon width="12px" name="Star_full" type="png"></lib-icon>
</ng-container>
<ng-container
*ngFor="let star of getHalfStarsFromRate(item.stars)"
>
<img src="../../../assets/images/Star_half.png" />
<ng-container *ngFor="let star of getHalfStarsFromRate(item.stars)">
<lib-icon width="12px" name="Star_half" type="png"></lib-icon>
</ng-container>
<ng-container
*ngFor="let star of getEmptyStarsFromRate(item.stars)"
>
<img src="../../../assets/images/Star_empty.png" />
<ng-container *ngFor="let star of getEmptyStarsFromRate(item.stars)">
<lib-icon width="12px" name="Star_empty" type="png"></lib-icon>
</ng-container>
</div>
<div class="title">
@@ -61,44 +50,26 @@
<span>{{ item.date | date: 'dd.MM.yy' }}</span>
</div>
</div>
<div
class="desciption"
id="details-container"
[ngClass]="{ 'mb-26': item.content.length <= 150 }"
*ngIf="!getMoreBtn(i)"
>
<span id="details-text">{{
reviewDescriptionText(item.content)
}}</span>
<span
class="more-btn"
(click)="toggleMore(i)"
*ngIf="item.content.length > 150"
>Mehr<img
src="../../../assets/images/Arrow_Next-with-body.svg"
alt="more"
/></span>
<div class="desciption" id="details-container" [ngClass]="{ 'mb-26': item.content.length <= 150 }" *ngIf="!getMoreBtn(i)">
<span id="details-text">{{ reviewDescriptionText(item.content) }}</span>
<span class="more-btn img" (click)="toggleMore(i)" *ngIf="item.content.length > 150"
>Mehr
<lib-icon pl="8px" name="Arrow_Next-with-body" alt="more"></lib-icon>
</span>
</div>
<div
class="desciption-full"
id="details-container"
*ngIf="getMoreBtn(i)"
>
<div class="desciption-full" id="details-container" *ngIf="getMoreBtn(i)">
<span id="details-text">{{ item.content }}</span>
<span class="more-btn" (click)="toggleMore(i)"
>Weniger<img
src="../../../assets/images/Arrow_back.svg"
alt="more"
/></span>
<span class="more-btn img" (click)="toggleMore(i)"
>Weniger
<lib-icon pl="8px" name="Arrow_back" alt="less"></lib-icon>
</span>
</div>
</div>
</ng-container>
<div class="separator"></div>
</div>
<div class="add-review align-center">
<app-button [primary]="true" (action)="openAddReview()"
>Rezension schreiben</app-button
>
<app-button [primary]="true" (action)="openAddReview()">Rezension schreiben</app-button>
</div>
</div>
<app-add-product-review #addReview></app-add-product-review>

10
apps/sales/src/app/components/product-review/product-review.component.scss
View File

@@ -11,7 +11,6 @@
position: absolute;
top: 25px;
right: 25px;
height: 21px;
}
.close-icon:hover {
@@ -33,10 +32,6 @@
}
.review-stars-wrapper {
img {
width: 17px;
}
span {
font-size: 18px;
font-weight: bold;
@@ -59,9 +54,6 @@
.stars-title {
display: flex;
.stars img {
width: 12px;
}
.title {
margin-left: 20px;
@@ -108,7 +100,7 @@
position: relative;
right: -91%;
img {
.img {
padding-left: 8px;
}
}

25
apps/sales/src/app/modules/article-search/article-search.module.ts
View File

@@ -9,28 +9,11 @@ import { ArticleSearchComponent } from './article-search.component';
import { FilterComponent } from './components/filter/filter.component';
import { FilterItemComponent } from './components/filter-item/filter-item.component';
import { SelectedFilterItemComponent } from './components/selected-filter-item/selected-filter-item.component';
import { CardModule, SearchInputModule } from '@libs/ui';
import { CardModule, SearchInputModule, IconModule } from '@libs/ui';
@NgModule({
declarations: [
TextSearchComponent,
ArticleSearchComponent,
FilterComponent,
FilterItemComponent,
SelectedFilterItemComponent
],
exports: [
ArticleSearchComponent,
FilterComponent,
SelectedFilterItemComponent
],
imports: [
CommonModule,
FormsModule,
SharedModule,
BarcodeSearchModule,
CardModule,
SearchInputModule
]
declarations: [TextSearchComponent, ArticleSearchComponent, FilterComponent, FilterItemComponent, SelectedFilterItemComponent],
exports: [ArticleSearchComponent, FilterComponent, SelectedFilterItemComponent],
imports: [CommonModule, FormsModule, SharedModule, BarcodeSearchModule, CardModule, SearchInputModule, IconModule],
})
export class ArticleSearchModule {}

23
apps/sales/src/app/modules/article-search/components/filter-item/filter-item.component.html
View File

@@ -1,29 +1,14 @@
<div
class="filter-item"
[class.expand]="filter.expanded"
(click)="toggleMenu(filter.id)"
>
<div class="filter-item" [class.expand]="filter.expanded" (click)="toggleMenu(filter.id)">
<span class="filter-name">{{ filter.name }}</span>
<img
class="icon"
[class.expand]="filter.expanded"
src="/assets/images/Arrow_Down_2.svg"
/>
<img class="icon" [class.expand]="filter.expanded" src="/assets/images/Arrow_Down_2.svg" />
</div>
<div class="filter-menu" *ngIf="filter.expanded" [@fadeIn]="filter.expanded">
<div class="item-container">
<div
class="item"
(click)="selectItem(item)"
[class.active]="item.selected"
*ngFor="let item of filter.items"
>
<div class="item" (click)="selectItem(item)" [class.active]="item.selected" *ngFor="let item of filter.items">
{{ item.name }}
</div>
</div>
<div class="button">
<a class="active" (click)="filterConfirm(filter)"
>Filtern</a
>
<a class="active" (click)="filterConfirm(filter)">Filtern</a>
</div>
</div>

2
apps/sales/src/app/modules/article-search/components/filter/filter.component.scss
View File

@@ -56,7 +56,7 @@
.more-filters-container {
// padding-top: 3px;
padding-left: 20px;
padding-left: 12px;
}
.more-icon {

6
apps/sales/src/app/modules/article-search/components/selected-filter-item/selected-filter-item.component.html
View File

@@ -1,6 +1,6 @@
<div class="selected-filter-item">
<span class="filter-name">{{filterItem.name.substring(0, 11) + '...'}}</span>
<span class="filter-name">{{ filterItem.name.substring(0, 11) + '...' }}</span>
<div class="icon-wrapper">
<img (click)="deleteFilter(filterItem)" class="icon" src="/assets/images/Delete.svg" />
<lib-icon (click)="deleteFilter(filterItem)" width="15px" name="Delete"></lib-icon>
</div>
</div>
</div>

20
apps/sales/src/app/modules/article-search/components/selected-filter-item/selected-filter-item.component.scss
View File

@@ -1,19 +1,15 @@
.filter-name {
font-size: 16px;
font-weight: bold;
color: #5a728a;
}
.icon {
width: 15px;
font-size: 16px;
font-weight: bold;
color: #5a728a;
}
.icon-wrapper {
padding-top: 2px;
padding-top: 2px;
}
.selected-filter-item {
display: grid;
grid-template-columns: max-content auto;
grid-gap: 5px;
}
display: grid;
grid-template-columns: max-content auto;
grid-gap: 5px;
}