Open gashcrumb opened 6 years ago
Couple options here at least with html-beautify
when it comes to aligning attributes, first is force-align
which looks like:
# command so I don't forget :-)
yarn html-beautify -I -A force-aligned -s 2 ./src/app/integrations/list/list.component.html
<div class="integrations list">
<syndesis-modal [title]="'Confirm ' + getActionTitle()"
[message]="'Are you sure you would like to ' + getAction() + ' the \'' + selectedIntegration?.name + '\' integration?'">
</syndesis-modal>
<!-- List Container -->
<pfng-list [items]="integrations"
[config]="listConfig"
[itemTemplate]="itemTemplate"
[actionTemplate]="actionTemplate"
(onActionSelect)="handleAction($event, undefined)"
(onClick)="handleClick($event)">
<ng-template #itemTemplate
let-integration="item"
let-index="index">
<div class="list-pf-left integration-icons">
<span *ngIf="getStart(integration).connection; let connection">
<img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
</span>
<span class="fa fa-angle-right"></span>
<span *ngIf="getFinish(integration).connection; let connection">
<img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
</span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content integration-content">
<div *ngIf="complete"
class="list-pf-title name">{{ integration.name }}</div>
<div class="list-pf-description description">
{{ complete ? integration.description : integration.name }}
</div>
</div>
And then force
which just indents attributes 1 tab width:
yarn html-beautify -I -A force -s 2 ./src/app/integrations/list/list.component.html
<div class="integrations list">
<syndesis-modal [title]="'Confirm ' + getActionTitle()"
[message]="'Are you sure you would like to ' + getAction() + ' the \'' + selectedIntegration?.name + '\' integration?'">
</syndesis-modal>
<!-- List Container -->
<pfng-list [items]="integrations"
[config]="listConfig"
[itemTemplate]="itemTemplate"
[actionTemplate]="actionTemplate"
(onActionSelect)="handleAction($event, undefined)"
(onClick)="handleClick($event)">
<ng-template #itemTemplate
let-integration="item"
let-index="index">
<div class="list-pf-left integration-icons">
<span *ngIf="getStart(integration).connection; let connection">
<img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
</span>
<span class="fa fa-angle-right"></span>
<span *ngIf="getFinish(integration).connection; let connection">
<img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
</span>
</div>
<div class="list-pf-content-wrapper">
<div class="list-pf-main-content integration-content">
<div *ngIf="complete"
class="list-pf-title name">{{ integration.name }}</div>
<div class="list-pf-description description">
{{ complete ? integration.description : integration.name }}
</div>
</div>
I also thought diffable-html looked interesting as well in that the goal was to make it easier to see HTML diffs. @kahboom @deeleman @seanforyou23 thoughts?
@gashcrumb thanks for creating this! I kinda like the way it looks pre-force
but that's just a matter of opinion. I'm happy with either.
As for diffable-html, do you mean so that we can use inline templates instead of external HTML files, or could you provide a specific use case? Sorry, Monday brain on a Tuesday.. it happens.
As for diffable-html, do you mean so that we can use inline templates instead of external HTML files, or could you provide a specific use case? Sorry, Monday brain on a Tuesday.. it happens.
The goal here is to make it easier to see changes done to HTML files, i.e. when attributes are added/deleted or the text content of a tag changes etc. Mostly handy for the person reviewing a PR than anything I think.
I think @deeleman's preference was for the force
behavior instead of force-aligned
where attributes are aligned vertically with the first attribute, but I can wait until he gets back to voice his opinion :-)
@gashcrumb Ah that makes sense, then I don't see any major disadvantage to trying it out if nobody has objections.
As for the force
behavior, I don't really have a strong opinion about it, just happy to see attributes on separate lines tbh. I don't mind if we stuck with force
.
Now that we have it for typescript, json, css and scss files, we should have the same for HTML files to help @kahboom maintain sanity.