mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
(refactoring) Move *ngFor directives to their own <ng-container> elements. This is mostly a personal preference but it's a good habit to have as you cannot put more than one structural directive on a single element. This way our main repeated element is free of any common structural directives so we can use ours on them if needed.
This commit is contained in:
sercan
parent
7e430a269c
commit
2bea991ba3
|
|
@ -31,14 +31,15 @@
|
|||
*ngIf="results && !results.length">
|
||||
No results found!
|
||||
</mat-option>
|
||||
<ng-container *ngFor="let result of results">
|
||||
<mat-option
|
||||
class="group relative h-14 px-6 py-0 sm:px-8 text-md"
|
||||
*ngFor="let result of results"
|
||||
[routerLink]="result.link">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="searchResult"
|
||||
[ngTemplateOutletContext]="{$implicit: result}"></ng-container>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-autocomplete>
|
||||
<button
|
||||
class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
|
||||
|
|
@ -72,14 +73,15 @@
|
|||
*ngIf="results && !results.length">
|
||||
No results found!
|
||||
</mat-option>
|
||||
<ng-container *ngFor="let result of results">
|
||||
<mat-option
|
||||
class="group relative h-14 px-5 py-0 text-md"
|
||||
*ngFor="let result of results"
|
||||
[routerLink]="result.link">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="searchResult"
|
||||
[ngTemplateOutletContext]="{$implicit: result}"></ng-container>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -319,9 +319,8 @@
|
|||
[ngClass]="getCalendar(eventForm.get('calendarId').value)?.color"></span>
|
||||
<span class="ml-3">{{getCalendar(eventForm.get('calendarId').value)?.title}}</span>
|
||||
</mat-select-trigger>
|
||||
<mat-option
|
||||
*ngFor="let calendar of calendars"
|
||||
[value]="calendar.id">
|
||||
<ng-container *ngFor="let calendar of calendars">
|
||||
<mat-option [value]="calendar.id">
|
||||
<div class="inline-flex items-center">
|
||||
<span
|
||||
class="w-3 h-3 rounded-full"
|
||||
|
|
@ -329,6 +328,7 @@
|
|||
<span class="ml-3">{{calendar.title}}</span>
|
||||
</div>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,14 +35,15 @@
|
|||
class="mt-1.5 border-0 space-x-1"
|
||||
[formControlName]="'byDay'"
|
||||
[multiple]="true">
|
||||
<ng-container *ngFor="let weekday of weekdays">
|
||||
<mat-button-toggle
|
||||
class="w-10 h-10 border-0 rounded-full"
|
||||
*ngFor="let weekday of weekdays"
|
||||
[disableRipple]="true"
|
||||
[value]="weekday.value"
|
||||
[matTooltip]="weekday.label">
|
||||
{{weekday.abbr}}
|
||||
</mat-button-toggle>
|
||||
</ng-container>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@
|
|||
[svgIcon]="'heroicons_solid:plus-circle'"
|
||||
(click)="addCalendar()"></mat-icon>
|
||||
</div>
|
||||
<div
|
||||
class="group flex items-center justify-between mt-2"
|
||||
*ngFor="let calendar of calendars">
|
||||
<ng-container *ngFor="let calendar of calendars">
|
||||
<div class="group flex items-center justify-between mt-2">
|
||||
<div
|
||||
class="flex items-center"
|
||||
(click)="toggleCalendarVisibility(calendar)">
|
||||
|
|
@ -28,6 +27,7 @@
|
|||
[svgIcon]="'heroicons_solid:pencil-alt'"
|
||||
(click)="openEditPanel(calendar)"></mat-icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="-mx-4 mt-auto">
|
||||
|
|
@ -62,9 +62,9 @@
|
|||
</mat-select-trigger>
|
||||
<div class="px-4 pt-5 text-xl font-semibold">Calendar color</div>
|
||||
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
||||
<ng-container *ngFor="let color of calendarColors">
|
||||
<mat-option
|
||||
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
|
||||
*ngFor="let color of calendarColors"
|
||||
[value]="color"
|
||||
#matOption="matOption">
|
||||
<mat-icon
|
||||
|
|
@ -75,6 +75,7 @@
|
|||
class="flex w-10 h-10 m-1 rounded-full"
|
||||
[ngClass]="color"></span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
|
|||
|
|
@ -330,8 +330,8 @@
|
|||
class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="!tagsEditMode">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<div
|
||||
*ngFor="let tag of filteredTags; trackBy: trackByFn"
|
||||
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
|
||||
(click)="toggleContactTag(tag)"
|
||||
matRipple>
|
||||
|
|
@ -344,12 +344,12 @@
|
|||
<div class="ml-1">{{tag.title}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<!-- Tags editing -->
|
||||
<ng-container *ngIf="tagsEditMode">
|
||||
<div class="py-2 space-y-2">
|
||||
<div
|
||||
class="flex items-center"
|
||||
*ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<div class="flex items-center">
|
||||
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
|
||||
<input
|
||||
matInput
|
||||
|
|
@ -365,6 +365,7 @@
|
|||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Create tag -->
|
||||
|
|
@ -496,9 +497,8 @@
|
|||
<span class="sm:mx-0.5 font-medium text-default">{{getCountryByIso(phoneNumber.get('country').value).code}}</span>
|
||||
</span>
|
||||
</mat-select-trigger>
|
||||
<mat-option
|
||||
*ngFor="let country of countries; trackBy: trackByFn"
|
||||
[value]="country.iso">
|
||||
<ng-container *ngFor="let country of countries; trackBy: trackByFn">
|
||||
<mat-option [value]="country.iso">
|
||||
<span class="flex items-center">
|
||||
<span
|
||||
class="w-6 h-4 overflow-hidden"
|
||||
|
|
@ -509,6 +509,7 @@
|
|||
<span class="ml-2 font-medium">{{country.code}}</span>
|
||||
</span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
|
||||
|
|
|
|||
|
|
@ -309,31 +309,31 @@
|
|||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>Category</mat-label>
|
||||
<mat-select [formControlName]="'category'">
|
||||
<mat-option
|
||||
*ngFor="let category of categories"
|
||||
[value]="category.id">
|
||||
<ng-container *ngFor="let category of categories">
|
||||
<mat-option [value]="category.id">
|
||||
{{category.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 px-2">
|
||||
<mat-label>Brand</mat-label>
|
||||
<mat-select [formControlName]="'brand'">
|
||||
<mat-option
|
||||
*ngFor="let brand of brands"
|
||||
[value]="brand.id">
|
||||
<ng-container *ngFor="let brand of brands">
|
||||
<mat-option [value]="brand.id">
|
||||
{{brand.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 pl-2">
|
||||
<mat-label>Vendor</mat-label>
|
||||
<mat-select [formControlName]="'vendor'">
|
||||
<mat-option
|
||||
*ngFor="let vendor of vendors"
|
||||
[value]="vendor.id">
|
||||
<ng-container *ngFor="let vendor of vendors">
|
||||
<mat-option [value]="vendor.id">
|
||||
{{vendor.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,12 +18,14 @@
|
|||
<ng-container *ngFor="let faqCategory of faqCategories; trackBy: trackByFn">
|
||||
<div class="mt-12 sm:mt-16 text-3xl font-bold leading-tight tracking-tight">{{faqCategory.title}}</div>
|
||||
<mat-accordion class="max-w-4xl mt-8">
|
||||
<mat-expansion-panel *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header [collapsedHeight]="'56px'">
|
||||
<mat-panel-title class="font-medium leading-tight">{{faq.question}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
{{faq.answer}}
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
</mat-accordion>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -93,12 +93,14 @@
|
|||
<div class="mt-24 text-3xl sm:text-5xl font-extrabold leading-tight tracking-tight text-center">Most frequently asked questions</div>
|
||||
<div class="mt-2 text-xl text-center text-secondary">Here are the most frequently asked questions you may check before getting started</div>
|
||||
<mat-accordion class="max-w-4xl mt-12">
|
||||
<mat-expansion-panel *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header [collapsedHeight]="'56px'">
|
||||
<mat-panel-title>{{faq.question}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
{{faq.answer}}
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,9 +42,9 @@
|
|||
</mat-select-trigger>
|
||||
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
||||
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
||||
<ng-container *ngFor="let color of labelColors">
|
||||
<mat-option
|
||||
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
|
||||
*ngFor="let color of labelColors"
|
||||
[value]="color"
|
||||
#matOption="matOption">
|
||||
<mat-icon
|
||||
|
|
@ -55,6 +55,7 @@
|
|||
class="flex w-10 h-10 m-1 rounded-full"
|
||||
[ngClass]="labelColorDefs[color].bg"></span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-select>
|
||||
<button
|
||||
|
|
@ -90,9 +91,9 @@
|
|||
</mat-select-trigger>
|
||||
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
||||
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
||||
<ng-container *ngFor="let color of labelColors">
|
||||
<mat-option
|
||||
class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
|
||||
*ngFor="let color of labelColors"
|
||||
[value]="color"
|
||||
#matOption="matOption">
|
||||
<mat-icon
|
||||
|
|
@ -103,6 +104,7 @@
|
|||
class="flex w-10 h-10 m-1 rounded-full"
|
||||
[ngClass]="labelColorDefs[color].bg"></span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-select>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -142,8 +142,8 @@
|
|||
class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="!tagsEditMode">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<div
|
||||
*ngFor="let tag of filteredTags; trackBy: trackByFn"
|
||||
class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
|
||||
(click)="toggleTaskTag(tag)"
|
||||
matRipple>
|
||||
|
|
@ -155,12 +155,12 @@
|
|||
<div class="ml-1">{{tag.title}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<!-- Tags editing -->
|
||||
<ng-container *ngIf="tagsEditMode">
|
||||
<div class="py-2 space-y-2">
|
||||
<div
|
||||
class="flex items-center"
|
||||
*ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<div class="flex items-center">
|
||||
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
|
||||
<input
|
||||
matInput
|
||||
|
|
@ -176,6 +176,7 @@
|
|||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Create tag -->
|
||||
|
|
|
|||
|
|
@ -25,14 +25,16 @@
|
|||
<div class="font-semibold text-md text-secondary ml-4">{{item.releaseDate}}</div>
|
||||
</div>
|
||||
<hr class="mt-6">
|
||||
<div
|
||||
class="mt-8"
|
||||
*ngFor="let change of item.changes">
|
||||
<ng-container *ngFor="let change of item.changes">
|
||||
<div class="mt-8">
|
||||
<span class="inline-flex bg-default rounded px-3 py-1 text-secondary font-bold">{{change.type}}</span>
|
||||
<ul>
|
||||
<li *ngFor="let listItem of change.list">{{listItem}}</li>
|
||||
<ng-container *ngFor="let listItem of change.list">
|
||||
<li>{{listItem}}</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user