-
Notifications
You must be signed in to change notification settings - Fork 467
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(block-editor): Use the new angular syntax (#29449)
### Parent Issue #29448 ### Proposed Changes - Use the new Angular syntax to improve performance and code maintainability. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable)
- Loading branch information
Showing
15 changed files
with
256 additions
and
232 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 9 additions & 7 deletions
16
...components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,13 @@ | ||
| <ng-container [ngSwitch]="type"> | ||
| <ng-container *ngSwitchCase="'image'"> | ||
| @switch (type) { | ||
| @case ('image') { | ||
| <img [src]="src || file.objectURL" [alt]="file.name" /> | ||
| </ng-container> | ||
| <ng-container *ngSwitchCase="'video'"> | ||
| } | ||
| @case ('video') { | ||
| <video controls preload="metadata"> | ||
| <source [src]="src || file.objectURL" /> | ||
| </video> | ||
| </ng-container> | ||
| <p *ngSwitchDefault>Select an accepted asset type</p> | ||
| </ng-container> | ||
| } | ||
| @default { | ||
| <p>Select an accepted asset type</p> | ||
| } | ||
| } |
39 changes: 21 additions & 18 deletions
39
...extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,23 @@ | ||
| <ng-container [ngSwitch]="type"> | ||
| <div *ngSwitchCase="'video'" class="placeholder-container"> | ||
| <div class="preview-container__video"> | ||
| <video class="video" src="" controls></video> | ||
| </div> | ||
|
|
||
| <div class="preview-container__loading"> | ||
| <div> | ||
| <dot-spinner size="30px"></dot-spinner> | ||
| Uploading video, wait until finished. | ||
| @switch (type) { | ||
| @case ('video') { | ||
| <div class="placeholder-container"> | ||
| <div class="preview-container__video"> | ||
| <video class="video" src="" controls></video> | ||
| </div> | ||
| <div class="preview-container__loading"> | ||
| <div> | ||
| <dot-spinner size="30px"></dot-spinner> | ||
| Uploading video, wait until finished. | ||
| </div> | ||
| <button | ||
| (click)="cancel.emit(true)" | ||
| class="p-button-md p-button-outlined" | ||
| pButton | ||
| label="Cancel"></button> | ||
| </div> | ||
| <button | ||
| (click)="cancel.emit(true)" | ||
| class="p-button-md p-button-outlined" | ||
| pButton | ||
| label="Cancel"></button> | ||
| </div> | ||
| </div> | ||
| <span *ngSwitchDefault class="default-message">Uploading...</span> | ||
| </ng-container> | ||
| } | ||
| @default { | ||
| <span class="default-message">Uploading...</span> | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 57 additions & 54 deletions
111
core-web/libs/block-editor/src/lib/extensions/bubble-form/bubble-form.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,57 @@ | ||
| <form *ngIf="form" (ngSubmit)="onSubmit()" [ngClass]="options?.customClass" [formGroup]="form"> | ||
| <div *ngFor="let control of dynamicControls" [ngClass]="control.type" class="field form-row"> | ||
| <ng-container [ngSwitch]="control.type"> | ||
| <ng-container *ngSwitchCase="'checkbox'"> | ||
| <p-checkbox | ||
| [formControlName]="control.key" | ||
| [binary]="true" | ||
| [id]="control.key"></p-checkbox> | ||
| <label [checkIsRequiredControl]="control.key" [for]="control.key" dotFieldRequired> | ||
| {{ control.label | titlecase }} | ||
| </label> | ||
| </ng-container> | ||
| <ng-container *ngSwitchDefault> | ||
| <label | ||
| [ngClass]="{ 'p-label-input-required': control.required }" | ||
| [for]="control.key"> | ||
| {{ control.label | titlecase }} | ||
| </label> | ||
| <input | ||
| *ngSwitchDefault | ||
| [formControlName]="control.key" | ||
| [id]="control.key" | ||
| [type]="control.type" | ||
| [min]="control.min" | ||
| [style]="{ width: '100%', fontSize: '14px', height: '40px' }" | ||
| #group | ||
| pInputText | ||
| type="control.type" /> | ||
| </ng-container> | ||
| </ng-container> | ||
| <span | ||
| *ngIf="form.controls[control.key].invalid && form.controls[control.key].dirty" | ||
| class="error-message"> | ||
| This field is required | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="form-action"> | ||
| <button | ||
| (click)="hide.emit(true)" | ||
| [style]="{ width: '120px' }" | ||
| class="p-button-outlined" | ||
| pButton | ||
| type="button" | ||
| label="CANCEL"></button> | ||
| <button | ||
| [disabled]="form.invalid" | ||
| [style]="{ padding: '11.5px 24px' }" | ||
| class="p-button" | ||
| pButton | ||
| type="submit" | ||
| label="APPLY"></button> | ||
| </div> | ||
| </form> | ||
| @if (form) { | ||
| <form (ngSubmit)="onSubmit()" [ngClass]="options?.customClass" [formGroup]="form"> | ||
| @for (control of dynamicControls; track control) { | ||
| <div [ngClass]="control.type" class="field form-row"> | ||
| @switch (control.type) { | ||
| @case ('checkbox') { | ||
| <p-checkbox | ||
| [formControlName]="control.key" | ||
| [binary]="true" | ||
| [id]="control.key"></p-checkbox> | ||
| <label | ||
| [checkIsRequiredControl]="control.key" | ||
| [for]="control.key" | ||
| dotFieldRequired> | ||
| {{ control.label | titlecase }} | ||
| </label> | ||
| } | ||
| @default { | ||
| <label | ||
| [ngClass]="{ 'p-label-input-required': control.required }" | ||
| [for]="control.key"> | ||
| {{ control.label | titlecase }} | ||
| </label> | ||
| <input | ||
| [formControlName]="control.key" | ||
| [id]="control.key" | ||
| [type]="control.type" | ||
| [min]="control.min" | ||
| [style]="{ width: '100%', fontSize: '14px', height: '40px' }" | ||
| #group | ||
| pInputText | ||
| type="control.type" /> | ||
| } | ||
| } | ||
| @if (form.controls[control.key].invalid && form.controls[control.key].dirty) { | ||
| <span class="error-message">This field is required</span> | ||
| } | ||
| </div> | ||
| } | ||
| <div class="form-action"> | ||
| <button | ||
| (click)="hide.emit(true)" | ||
| [style]="{ width: '120px' }" | ||
| class="p-button-outlined" | ||
| pButton | ||
| type="button" | ||
| label="CANCEL"></button> | ||
| <button | ||
| [disabled]="form.invalid" | ||
| [style]="{ padding: '11.5px 24px' }" | ||
| class="p-button" | ||
| pButton | ||
| type="submit" | ||
| label="APPLY"></button> | ||
| </div> | ||
| </form> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 19 additions & 17 deletions
36
...r/src/lib/extensions/bubble-link-form/components/form-actions/form-actions.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,20 @@ | ||
| <div *ngIf="link.length"> | ||
| <div class="form-actions"> | ||
| <button | ||
| (click)="copy()" | ||
| [style]="{ width: '50%' }" | ||
| pButton | ||
| type="button" | ||
| label="COPY LINK" | ||
| class="p-button-outlined"></button> | ||
| <button | ||
| (click)="remove.emit(true)" | ||
| [style]="{ width: '50%' }" | ||
| pButton | ||
| type="button" | ||
| label="REMOVE LINK" | ||
| class="p-button-outlined p-button-danger"></button> | ||
| @if (link.length) { | ||
| <div> | ||
| <div class="form-actions"> | ||
| <button | ||
| (click)="copy()" | ||
| [style]="{ width: '50%' }" | ||
| pButton | ||
| type="button" | ||
| label="COPY LINK" | ||
| class="p-button-outlined"></button> | ||
| <button | ||
| (click)="remove.emit(true)" | ||
| [style]="{ width: '50%' }" | ||
| pButton | ||
| type="button" | ||
| label="REMOVE LINK" | ||
| class="p-button-outlined p-button-danger"></button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } |
44 changes: 21 additions & 23 deletions
44
...lib/extensions/bubble-link-form/components/suggestion-page/suggestion-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,21 @@ | ||
| <div *ngIf="items.length; else loading ? loadingBlock : emptyBlock"> | ||
| <dot-suggestion-list #list> | ||
| <dot-suggestions-list-item | ||
| *ngFor="let item of items; let i = index" | ||
| [command]="item.command" | ||
| [index]="i" | ||
| [label]="item.label" | ||
| [url]="item.icon" | ||
| [data]="item.data" | ||
| [page]="true"></dot-suggestions-list-item> | ||
| </dot-suggestion-list> | ||
| </div> | ||
|
|
||
| <ng-template #loadingBlock> | ||
| <dot-suggestion-loading-list></dot-suggestion-loading-list> | ||
| </ng-template> | ||
|
|
||
| <ng-template #emptyBlock> | ||
| <dot-empty-message | ||
| (back)="handleBackButton()" | ||
| [title]="title" | ||
| [showBackBtn]="true"></dot-empty-message> | ||
| </ng-template> | ||
| @if (items.length) { | ||
| <div> | ||
| <dot-suggestion-list #list> | ||
| @for (item of items; track item; let i = $index) { | ||
| <dot-suggestions-list-item | ||
| [command]="item.command" | ||
| [index]="i" | ||
| [label]="item.label" | ||
| [url]="item.icon" | ||
| [data]="item.data" | ||
| [page]="true"></dot-suggestions-list-item> | ||
| } | ||
| </dot-suggestion-list> | ||
| </div> | ||
| } @else { | ||
| @if (loading) { | ||
| <dot-suggestion-loading-list /> | ||
| } @else { | ||
| <dot-empty-message (back)="handleBackButton()" [title]="title" [showBackBtn]="true" /> | ||
| } | ||
| } |
12 changes: 7 additions & 5 deletions
12
core-web/libs/block-editor/src/lib/extensions/bubble-menu/bubble-menu.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,15 @@ | ||
| <div (mousedown)="preventDeSelection($event)" class="bubble-menu" id="bubble-menu"> | ||
| <ng-container *ngIf="selected"> | ||
| @if (selected) { | ||
| <button (click)="toggleChangeTo.emit()" class="btn-dropdown">{{ selected }}</button> | ||
| <div class="divider"></div> | ||
| </ng-container> | ||
| <ng-container *ngFor="let item of items; let i = index"> | ||
| } | ||
| @for (item of items; track item; let i = $index) { | ||
| <dot-bubble-menu-button | ||
| (click)="command.emit(item)" | ||
| [active]="item.active" | ||
| [item]="item"></dot-bubble-menu-button> | ||
| <div *ngIf="item.divider" class="divider"></div> | ||
| </ng-container> | ||
| @if (item.divider) { | ||
| <div class="divider"></div> | ||
| } | ||
| } | ||
| </div> |
Oops, something went wrong.