Skip to content

Commit

Permalink
feat(admin-ui): Restyle form inputs
Browse files Browse the repository at this point in the history 
The single line for input is poor UX in my opinion - it makes inputs look unclear in certain cases. I've restyled form inputs to better match usual styling. Closes #60
  • Loading branch information
@michaelbromley
michaelbromley committed May 6, 2019
1 parent 9cb73ae commit 438802d
Show file tree
Hide file tree
Showing 26 changed files with 428 additions and 351 deletions.
58 changes: 28 additions & 30 deletions admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,37 +32,35 @@
<form class="form" [formGroup]="detailForm" *ngIf="(entity$ | async) as category">
<div class="clr-row">
<div class="clr-col">
<section class="form-block">
<vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
<clr-toggle-wrapper>
<input type="checkbox" clrToggle formControlName="visible" id="visibility" />
<label class="visible-toggle">
{{
detailForm.value.visible
? ('catalog.public' | translate)
: ('catalog.private' | translate)
}}
</label>
</clr-toggle-wrapper>
</vdr-form-field>
<vdr-form-field [label]="'common.name' | translate" for="name">
<input id="name" type="text" formControlName="name" />
</vdr-form-field>
<vdr-rich-text-editor
formControlName="description"
[label]="'common.description' | translate"
></vdr-rich-text-editor>
<vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
<clr-toggle-wrapper>
<input type="checkbox" clrToggle formControlName="visible" id="visibility" />
<label class="visible-toggle">
{{
detailForm.value.visible
? ('catalog.public' | translate)
: ('catalog.private' | translate)
}}
</label>
</clr-toggle-wrapper>
</vdr-form-field>
<vdr-form-field [label]="'common.name' | translate" for="name">
<input id="name" type="text" formControlName="name" />
</vdr-form-field>
<vdr-rich-text-editor
formControlName="description"
[label]="'common.description' | translate"
></vdr-rich-text-editor>

<section formGroupName="customFields" *ngIf="customFields.length">
<label>{{ 'catalog.custom-fields' }}</label>
<ng-container *ngFor="let customField of customFields">
<vdr-custom-field-control
*ngIf="customFieldIsSet(customField.name)"
[customFieldsFormGroup]="detailForm.get(['customFields'])"
[customField]="customField"
></vdr-custom-field-control>
</ng-container>
</section>
<section formGroupName="customFields" *ngIf="customFields.length">
<label>{{ 'catalog.custom-fields' }}</label>
<ng-container *ngFor="let customField of customFields">
<vdr-custom-field-control
*ngIf="customFieldIsSet(customField.name)"
[customFieldsFormGroup]="detailForm.get(['customFields'])"
[customField]="customField"
></vdr-custom-field-control>
</ng-container>
</section>
</div>
<div class="clr-col-md-auto">
Expand Down
30 changes: 13 additions & 17 deletions ...c/app/catalog/components/create-option-group-form/create-option-group-form.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
<form class="form" [formGroup]="optionGroupForm">
<section class="form-block">
<vdr-form-field [label]="'catalog.option-group-name' | translate" for="name">
<input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)" />
</vdr-form-field>
<vdr-form-field [label]="'catalog.option-group-code' | translate" for="code" [readOnlyToggle]="true">
<input id="code" type="text" formControlName="code" />
</vdr-form-field>
<vdr-form-field
[label]="'catalog.option-group-options-label' | translate"
[tooltip]="
'catalog.option-group-options-tooltip' | translate: { defaultLanguage: defaultLanguage }
"
for="options"
>
<textarea id="options" type="text" formControlName="options" rows="10"></textarea>
</vdr-form-field>
</section>
<vdr-form-field [label]="'catalog.option-group-name' | translate" for="name">
<input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)" />
</vdr-form-field>
<vdr-form-field [label]="'catalog.option-group-code' | translate" for="code" [readOnlyToggle]="true">
<input id="code" type="text" formControlName="code" />
</vdr-form-field>
<vdr-form-field
[label]="'catalog.option-group-options-label' | translate"
[tooltip]="'catalog.option-group-options-tooltip' | translate: { defaultLanguage: defaultLanguage }"
for="options"
>
<textarea id="options" type="text" formControlName="options" rows="10"></textarea>
</vdr-form-field>
</form>
4 changes: 4 additions & 0 deletions admin-ui/src/app/catalog/components/product-list/product-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
}
.search-form {
display: flex;
align-items: center;
.search-input {
margin-right: 6px;
}
}
.search-input {
min-width: 300px;
Expand Down
3 changes: 2 additions & 1 deletion ...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@

.details {
display: flex;
height: 36px;
// margin-left: 12px;
> div {
margin-right: 12px;
Expand All @@ -40,7 +41,7 @@
}

::ng-deep .name input {
width: 300px;
min-width: 300px;
}
}

Expand Down
80 changes: 37 additions & 43 deletions admin-ui/src/app/customer/components/customer-detail/customer-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<vdr-ab-right>
<button
class="btn btn-primary"
*ngIf="(isNew$ | async); else: updateButton"
*ngIf="(isNew$ | async); else updateButton"
(click)="create()"
[disabled]="!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))"
>
Expand All @@ -25,49 +25,43 @@
</vdr-action-bar>

<form class="form" [formGroup]="detailForm.get('customer')">
<section class="form-block">
<vdr-form-field
[label]="'customer.title' | translate"
for="title"
[readOnlyToggle]="!(isNew$ | async)"
>
<input id="title" type="text" formControlName="title" />
</vdr-form-field>
<vdr-form-field
[label]="'customer.first-name' | translate"
for="firstName"
[readOnlyToggle]="!(isNew$ | async)"
>
<input id="firstName" type="text" formControlName="firstName" />
</vdr-form-field>
<vdr-form-field
[label]="'customer.last-name' | translate"
for="lastName"
[readOnlyToggle]="!(isNew$ | async)"
>
<input id="lastName" type="text" formControlName="lastName" />
</vdr-form-field>
<vdr-form-field
[label]="'customer.email-address' | translate"
for="emailAddress"
[readOnlyToggle]="!(isNew$ | async)"
>
<input id="emailAddress" type="text" formControlName="emailAddress" />
</vdr-form-field>
<vdr-form-field [label]="'customer.password' | translate" for="password" *ngIf="(isNew$ | async)">
<input id="password" type="password" formControlName="password" />
</vdr-form-field>
<vdr-form-field [label]="'customer.title' | translate" for="title" [readOnlyToggle]="!(isNew$ | async)">
<input id="title" type="text" formControlName="title" />
</vdr-form-field>
<vdr-form-field
[label]="'customer.first-name' | translate"
for="firstName"
[readOnlyToggle]="!(isNew$ | async)"
>
<input id="firstName" type="text" formControlName="firstName" />
</vdr-form-field>
<vdr-form-field
[label]="'customer.last-name' | translate"
for="lastName"
[readOnlyToggle]="!(isNew$ | async)"
>
<input id="lastName" type="text" formControlName="lastName" />
</vdr-form-field>
<vdr-form-field
[label]="'customer.email-address' | translate"
for="emailAddress"
[readOnlyToggle]="!(isNew$ | async)"
>
<input id="emailAddress" type="text" formControlName="emailAddress" />
</vdr-form-field>
<vdr-form-field [label]="'customer.password' | translate" for="password" *ngIf="(isNew$ | async)">
<input id="password" type="password" formControlName="password" />
</vdr-form-field>

<section formGroupName="customFields" *ngIf="customFields.length">
<label>{{ 'common.custom-fields' | translate }}</label>
<ng-container *ngFor="let customField of customFields">
<vdr-custom-field-control
*ngIf="customFieldIsSet(customField.name)"
[customFieldsFormGroup]="detailForm.get('customFields')"
[customField]="customField"
></vdr-custom-field-control>
</ng-container>
</section>
<section formGroupName="customFields" *ngIf="customFields.length">
<label>{{ 'common.custom-fields' | translate }}</label>
<ng-container *ngFor="let customField of customFields">
<vdr-custom-field-control
*ngIf="customFieldIsSet(customField.name)"
[customFieldsFormGroup]="detailForm.get('customFields')"
[customField]="customField"
></vdr-custom-field-control>
</ng-container>
</section>
</form>

Expand Down
14 changes: 6 additions & 8 deletions admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<vdr-ab-right>
<button
class="btn btn-primary"
*ngIf="(isNew$ | async); else: updateButton"
*ngIf="(isNew$ | async); else updateButton"
(click)="create()"
[disabled]="!saveButtonEnabled()"
>
Expand All @@ -19,15 +19,13 @@
</vdr-action-bar>

<form class="form" [formGroup]="detailForm">
<section class="form-block">
<vdr-form-field [label]="'common.name' | translate" for="name">
<input id="name" type="text" formControlName="name" />
</vdr-form-field>
</section>
<vdr-form-field [label]="'common.name' | translate" for="name">
<input id="name" type="text" formControlName="name" />
</vdr-form-field>

<div class="clr-row">
<div class="clr-col" formArrayName="conditions">
<label>{{ 'marketing.conditions' | translate }}</label>
<label class="clr-control-label">{{ 'marketing.conditions' | translate }}</label>
<ng-container *ngFor="let condition of conditions; index as i">
<vdr-configurable-input
(remove)="removeCondition($event)"
Expand Down Expand Up @@ -59,7 +57,7 @@
</div>
</div>
<div class="clr-col" formArrayName="actions">
<label>{{ 'marketing.actions' | translate }}</label>
<label class="clr-control-label">{{ 'marketing.actions' | translate }}</label>
<vdr-configurable-input
*ngFor="let action of actions; index as i"
(remove)="removeAction($event)"
Expand Down
65 changes: 30 additions & 35 deletions admin-ui/src/app/settings/components/admin-detail/admin-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<vdr-ab-right>
<button
class="btn btn-primary"
*ngIf="(isNew$ | async); else: updateButton"
*ngIf="(isNew$ | async); else updateButton"
(click)="create()"
[disabled]="detailForm.invalid || detailForm.pristine"
>
Expand All @@ -22,40 +22,35 @@
</vdr-action-bar>

<form class="form" [formGroup]="detailForm">
<section class="form-block">
<label>{{ 'settings.administrator' | translate }}</label>
<vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
<input id="emailAddress" type="text" formControlName="emailAddress" />
</vdr-form-field>
<vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
<input id="firstName" type="text" formControlName="firstName" />
</vdr-form-field>
<vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
<input id="lastName" type="text" formControlName="lastName" />
</vdr-form-field>
<vdr-form-field *ngIf="(isNew$ | async)" [label]="'settings.password' | translate" for="password">
<input id="password" type="password" formControlName="password" />
</vdr-form-field>
<vdr-form-field
*ngIf="!(isNew$ | async)"
[label]="'settings.password' | translate"
for="password"
[readOnlyToggle]="true"
>
<input id="password" type="password" formControlName="password" />
</vdr-form-field>
</section>
<section class="form-block">
<label>{{ 'settings.roles' | translate }}</label>
<ng-select
[items]="allRoles$ | async"
[multiple]="true"
[hideSelected]="true"
formControlName="roles"
(change)="rolesChanged($event)"
bindLabel="description"
></ng-select>
</section>
<vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
<input id="emailAddress" type="text" formControlName="emailAddress" />
</vdr-form-field>
<vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
<input id="firstName" type="text" formControlName="firstName" />
</vdr-form-field>
<vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
<input id="lastName" type="text" formControlName="lastName" />
</vdr-form-field>
<vdr-form-field *ngIf="(isNew$ | async)" [label]="'settings.password' | translate" for="password">
<input id="password" type="password" formControlName="password" />
</vdr-form-field>
<vdr-form-field
*ngIf="!(isNew$ | async)"
[label]="'settings.password' | translate"
for="password"
[readOnlyToggle]="true"
>
<input id="password" type="password" formControlName="password" />
</vdr-form-field>
<label class="clr-control-label">{{ 'settings.roles' | translate }}</label>
<ng-select
[items]="allRoles$ | async"
[multiple]="true"
[hideSelected]="true"
formControlName="roles"
(change)="rolesChanged($event)"
bindLabel="description"
></ng-select>

<vdr-permission-grid [permissions]="selectedRolePermissions" [readonly]="true"></vdr-permission-grid>
</form>

0 comments on commit 438802d

Please sign in to comment.