Styling fix for date-editor.

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -49,8 +49,12 @@
                     </tbody>
                 </table>
                 
-                <ng-container>
+                <ng-container *ngIf="contributorsState.canCreate | async">
-                    <div class="table-items-footer" *ngIf="contributorsState.canCreate | async">
+                    <div class="table-items-footer">
+                        <sqx-form-alert marginTop="0" marginBottom="2" white="true">
+                            Just enter the email address to invite someone with no account to the app.
+                        </sqx-form-alert>
+
                         <form [formGroup]="assignContributorForm.form" (ngSubmit)="assignContributor()">
                             <div class="row no-gutters">
                                 <div class="col">

src/Squidex/app/framework/angular/forms/date-time-editor.component.html

@@ -2,8 +2,11 @@
     <div class="form-inline">
         <div class="form-group mr-1">
             <div class="input-group">
-                <input type="text" class="form-control" [formControl]="dateControl" placeholder="Date" (blur)="callTouched()" #dateInput />
+                <input type="text" class="form-control form-date" [formControl]="dateControl" placeholder="Date" [class.form-date-only]="!showTime"
-                <input type="text" class="form-control" [formControl]="timeControl" placeholder="Time" (blur)="callTouched()" *ngIf="showTime" />
+                    (blur)="callTouched()" maxlength="10" #dateInput />
+
+                <input type="text" class="form-control form-time" [formControl]="timeControl" placeholder="Time" 
+                    (blur)="callTouched()" *ngIf="showTime" />
             </div>
 
             <button type="button" class="btn btn-text-secondary btn-sm btn-clear" [class.hidden]="!hasValue" [disabled]="snapshot.isDisabled" (click)="reset()" *ngIf="!hideClear">
@@ -11,10 +14,14 @@
             </button>
         </div>
         <div class="form-group" *ngIf="showTime">
-            <button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="Use Now (UTC)">Now</button>
+            <button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="Use Now (UTC)">
+                Now
+            </button>
         </div>
         <div class="form-group" *ngIf="!showTime">
-            <button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="Use Today (UTC)">Today</button>
+            <button type="button" class="btn btn-text-secondary" [disabled]="snapshot.isDisabled" (click)="writeNow()" title="Use Today (UTC)">
+                Today
+            </button>
         </div>
     </div>
 </div>

src/Squidex/app/framework/angular/forms/date-time-editor.component.scss

@@ -22,13 +22,23 @@
 
 .input-group {
     .form-control {
-        width: 7.5rem;
-
         &:last-child {
             position: relative;
             padding-right: 2rem;
         }
     }
+
+    .form-date {
+        width: 7rem;
+    }
+
+    .form-date-only {
+        width: 8.5rem;
+    }
+
+    .form-time {
+        width: 7rem;
+    }
 }
 
 .btn-clear {

src/Squidex/app/framework/angular/forms/form-alert.component.ts

@@ -15,9 +15,13 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
             min-width: 100%;
             max-width: 100%;
         }
+
+        .white {
+            background: #fff;
+        }
     `],
     template: `
-        <div class="alert alert-hint mt-{{marginTop}} mb-{{marginBottom}} {{class}}">
+        <div class="alert alert-hint mt-{{marginTop}} mb-{{marginBottom}} {{class}}" [class.white]="white">
             <i class="icon-info-outline"></i> <ng-content></ng-content>
         </div>`,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -31,4 +35,7 @@ export class FormAlertComponent {
 
     @Input()
     public marginBottom = 4;
+
+    @Input()
+    public white = false;
 }

src/Squidex/app/shared/components/app-form.component.html

@@ -30,7 +30,7 @@
 
                 <sqx-code>{{apiUrl.buildUrl("api/content/")}}{{createForm.appName | async}}</sqx-code>
 
-                <sqx-form-alert class="mt-4">
+                <sqx-form-alert marginTop="2">
                     The app name cannot be changed later.
                 </sqx-form-alert>
             </div>

src/Squidex/app/shared/components/pipes.ts

@@ -70,10 +70,11 @@ class UserAsyncPipe implements OnDestroy {
     private lastValue: string | null = null;
     private subscription: Subscription;
 
-    constructor(
+    constructor(loading: string,
         private readonly users: UsersProviderService,
         private readonly changeDetector: ChangeDetectorRef
     ) {
+        this.lastValue = loading;
     }
 
     public ngOnDestroy() {
@@ -107,7 +108,7 @@ class UserAsyncPipe implements OnDestroy {
 })
 export class UserNamePipe extends UserAsyncPipe implements PipeTransform {
     constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) {
-        super(users, changeDetector);
+        super('Loading...', users, changeDetector);
     }
 
     public transform(userId: string, placeholder = 'Me'): string | null {
@@ -121,7 +122,7 @@ export class UserNamePipe extends UserAsyncPipe implements PipeTransform {
 })
 export class UserNameRefPipe extends UserAsyncPipe implements PipeTransform {
     constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef) {
-        super(users, changeDetector);
+        super('Loading...', users, changeDetector);
     }
 
     public transform(userId: string, placeholder: string | null = 'Me'): string | null {
@@ -179,7 +180,7 @@ export class UserPicturePipe extends UserAsyncPipe implements PipeTransform {
     constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef,
         private readonly apiUrl: ApiUrlConfig
     ) {
-        super(users, changeDetector);
+        super('', users, changeDetector);
     }
 
     public transform(userId: string): string | null {
@@ -195,7 +196,7 @@ export class UserPictureRefPipe extends UserAsyncPipe implements PipeTransform {
     constructor(users: UsersProviderService, changeDetector: ChangeDetectorRef,
         private readonly apiUrl: ApiUrlConfig
     ) {
-        super(users, changeDetector);
+        super('', users, changeDetector);
     }
 
     public transform(userId: string): string | null {