Browse Source

Minor UI improvements.

pull/1047/head
Sebastian 3 years ago
parent
commit
36440eb494
  1. 2
      backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml
  2. 4
      frontend/src/app/features/administration/routes.ts
  3. 2
      frontend/src/app/features/apps/pages/apps-page.component.html
  4. 4
      frontend/src/app/features/content/shared/forms/array-editor.component.html
  5. 3
      frontend/src/app/features/content/shared/forms/array-editor.component.ts
  6. 1
      frontend/src/app/features/content/shared/forms/array-item.component.html
  7. 4
      frontend/src/app/features/content/shared/forms/array-item.component.scss
  8. 3
      frontend/src/app/features/content/shared/forms/array-item.component.ts
  9. 1
      frontend/src/app/features/content/shared/forms/component-section.component.html
  10. 3
      frontend/src/app/features/content/shared/forms/component-section.component.ts
  11. 1
      frontend/src/app/features/content/shared/forms/component.component.html
  12. 3
      frontend/src/app/features/content/shared/forms/component.component.ts
  13. 2
      frontend/src/app/features/content/shared/forms/content-field.component.html
  14. 5
      frontend/src/app/features/content/shared/forms/field-editor.component.html
  15. 7
      frontend/src/app/features/content/shared/forms/field-editor.component.ts
  16. 8
      frontend/src/app/framework/angular/scroll-active.directive.ts
  17. 2
      frontend/src/app/shell/pages/home/home-page.component.html
  18. 8
      frontend/src/app/theme/_common.scss
  19. 2
      frontend/src/app/theme/_mixins.scss

2
backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml

@ -72,7 +72,7 @@
<input type="password" class="form-control" name="password" id="password" placeholder="@T.Get("users.login.passwordPlaceholder")" />
</div>
<button type="submit" class="btn btn-block btn-primary">@action</button>
<button type="submit" data-testid="login-button" class="btn btn-block btn-primary">@action</button>
</form>
}
else

4
frontend/src/app/features/administration/routes.ts

@ -6,10 +6,10 @@
*/
import { Routes } from '@angular/router';
import { HelpComponent, UsersService } from '@app/shared';
import { HelpComponent } from '@app/shared';
import { AdministrationAreaComponent } from './administration-area.component';
import { userMustExistGuard } from './guards/user-must-exist.guard';
import { EventConsumersService, EventConsumersState, UsersState } from './internal';
import { EventConsumersService, EventConsumersState, UsersService, UsersState } from './internal';
import { EventConsumersPageComponent } from './pages/event-consumers/event-consumers-page.component';
import { RestorePageComponent } from './pages/restore/restore-page.component';
import { UserPageComponent } from './pages/users/user-page.component';

2
frontend/src/app/features/apps/pages/apps-page.component.html

@ -32,7 +32,7 @@
</ng-container>
<div class="apps-section" *ngIf="(uiState.settings | async)?.canCreateApps">
<div class="card card-template card-href" (click)="createNewApp()" sqxTourStep="addApp">
<div class="card card-template card-href" data-testid="new-app" (click)="createNewApp()" sqxTourStep="addApp">
<div class="card-body">
<div class="card-image">
<img src="./images/add-app.svg">

4
frontend/src/app/features/content/shared/forms/array-editor.component.html

@ -11,7 +11,6 @@
[class.first]="isFirst"
[class.last]="isLast">
<sqx-array-item
[canUnset]="canUnset"
(clone)="addCopy(itemForm)"
[form]="form"
[formContext]="formContext"
@ -28,7 +27,7 @@
[hasChatBot]="hasChatBot"
[language]="language"
[languages]="languages">
<i cdkDragHandle class="icon-drag2" [class.hidden]="isDisabled | async"></i>
<i cdkDragHandle class="icon-drag2" [class.disabled]="isDisabled | async"></i>
</sqx-array-item>
</div>
</div>
@ -39,7 +38,6 @@
[class.first]="scroll.viewPortInfo.startIndexWithBuffer + i === 0"
[class.last]="scroll.viewPortInfo.startIndexWithBuffer + i === items.length - 1">
<sqx-array-item
[canUnset]="canUnset"
(clone)="addCopy(itemForm)"
[form]="form"
[formContext]="formContext"

3
frontend/src/app/features/content/shared/forms/array-editor.component.ts

@ -59,9 +59,6 @@ export class ArrayEditorComponent {
@Input({ transform: booleanAttribute })
public isExpanded = false;
@Input({ transform: booleanAttribute })
public canUnset?: boolean | null;
@Input({ required: true })
public language!: AppLanguageDto;

1
frontend/src/app/features/content/shared/forms/array-item.component.html

@ -45,7 +45,6 @@
<div class="card-body" *sqxIfOnce="!(isCollapsed | async)" [class.hidden]="isCollapsed | async">
<div class="form-group" *ngFor="let section of formModel.sectionsChanges | async">
<sqx-component-section
[canUnset]="canUnset"
[form]="form"
[formContext]="formContext"
[formLevel]="formLevel"

4
frontend/src/app/features/content/shared/forms/array-item.component.scss

@ -18,6 +18,10 @@
line-height: 2.2rem;
}
&-body {
padding-top: 1.75rem;
}
.header-index {
@include force-width(3rem);
display: inline-block;

3
frontend/src/app/features/content/shared/forms/array-item.component.ts

@ -57,9 +57,6 @@ export class ArrayItemComponent {
@Input({ required: true })
public formModel!: ObjectFormBase;
@Input({ transform: booleanAttribute })
public canUnset?: boolean | null;
@Input({ required: true, transform: booleanAttribute })
public isComparing = false;

1
frontend/src/app/features/content/shared/forms/component-section.component.html

@ -12,7 +12,6 @@
[class.col-12]="isComparing || !child.field.properties.isHalfWidth"
[class.col-6]="!isComparing && child.field.properties.isHalfWidth">
<sqx-field-editor *ngIf="!(child.hiddenChanges | async)"
[canUnset]="canUnset"
[comments]="null"
[form]="form"
[formContext]="formContext"

3
frontend/src/app/features/content/shared/forms/component-section.component.ts

@ -53,9 +53,6 @@ export class ComponentSectionComponent {
@Input({ transform: numberAttribute })
public index: number | null | undefined;
@Input({ transform: booleanAttribute })
public canUnset?: boolean | null;
@ViewChildren(FieldEditorComponent)
public editors!: QueryList<FieldEditorComponent>;

1
frontend/src/app/features/content/shared/forms/component.component.html

@ -6,7 +6,6 @@
<div class="form-group" *ngFor="let section of formModel.sectionsChanges | async">
<sqx-component-section
[canUnset]="canUnset"
[form]="form"
[formContext]="formContext"
[formLevel]="formLevel + 1"

3
frontend/src/app/features/content/shared/forms/component.component.ts

@ -35,9 +35,6 @@ export class ComponentComponent {
@Input({ required: true })
public hasChatBot!: boolean;
@Input({ transform: booleanAttribute })
public canUnset?: boolean | null;
@Input({ required: true })
public form!: EditContentForm;

2
frontend/src/app/features/content/shared/forms/content-field.component.html

@ -26,7 +26,6 @@
<ng-container *ngIf="showAllControls; else singleControl">
<div class="form-group" *ngFor="let language of languages">
<sqx-field-editor
[canUnset]="!(isDisabled | async)"
[comments]="commentsState"
[displaySuffix]="prefix(language)"
[form]="form"
@ -43,7 +42,6 @@
<ng-template #singleControl>
<sqx-field-editor
[canUnset]="!(isDisabled | async)"
[comments]="commentsState"
[form]="form"
[formContext]="formContext"

5
frontend/src/app/features/content/shared/forms/field-editor.component.html

@ -1,5 +1,5 @@
<div class="field" [class.expanded]="isExpanded" *ngIf="formModel">
<div class="buttons-container" *ngIf="canUnset">
<div class="buttons-container" *ngIf="!(isDisabled | async)">
<div class="buttons">
<button *ngIf="hasChatBot" type="button" class="btn btn-sm btn-outline-secondary force no-focus-shadow" (click)="chatDialog.show()" tabindex="-1">
AI
@ -48,7 +48,6 @@
<ng-container [ngSwitch]="field.properties.fieldType">
<ng-container *ngSwitchCase="'Array'">
<sqx-array-editor
[canUnset]="canUnset"
[form]="form"
[formLevel]="formLevel"
[formModel]="$any(formModel)"
@ -78,7 +77,6 @@
</ng-container>
<ng-container *ngSwitchCase="'Component'">
<sqx-component
[canUnset]="canUnset"
[form]="form"
[formContext]="formContext"
[formLevel]="formLevel"
@ -91,7 +89,6 @@
</ng-container>
<ng-container *ngSwitchCase="'Components'">
<sqx-array-editor
[canUnset]="canUnset"
[form]="form"
[formLevel]="formLevel"
[formModel]="$any(formModel)"

7
frontend/src/app/features/content/shared/forms/field-editor.component.ts

@ -9,7 +9,7 @@ import { AsyncPipe, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { booleanAttribute, Component, ElementRef, EventEmitter, Input, numberAttribute, Output, ViewChild } from '@angular/core';
import { AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs';
import { AbstractContentForm, AnnotationCreate, AnnotationsSelect, AppLanguageDto, ChatDialogComponent, CheckboxGroupComponent, CodeEditorComponent, ColorPickerComponent, CommentsState, ConfirmClickDirective, ControlErrorsComponent, DateTimeEditorComponent, DialogModel, EditContentForm, FieldDto, FormHintComponent, GeolocationEditorComponent, hasNoValue$, IndeterminateValueDirective, MarkdownDirective, MathHelper, MessageBus, ModalDirective, RadioGroupComponent, ReferenceInputComponent, RichEditorComponent, StarsComponent, TagEditorComponent, ToggleComponent, TooltipDirective, TransformInputDirective, TypedSimpleChanges, Types } from '@app/shared';
import { AbstractContentForm, AnnotationCreate, AnnotationsSelect, AppLanguageDto, ChatDialogComponent, CheckboxGroupComponent, CodeEditorComponent, ColorPickerComponent, CommentsState, ConfirmClickDirective, ControlErrorsComponent, DateTimeEditorComponent, DialogModel, disabled$, EditContentForm, FieldDto, FormHintComponent, GeolocationEditorComponent, hasNoValue$, IndeterminateValueDirective, MarkdownDirective, MathHelper, MessageBus, ModalDirective, RadioGroupComponent, ReferenceInputComponent, RichEditorComponent, StarsComponent, TagEditorComponent, ToggleComponent, TooltipDirective, TransformInputDirective, TypedSimpleChanges, Types } from '@app/shared';
import { ReferenceDropdownComponent } from '../references/reference-dropdown.component';
import { ReferencesCheckboxesComponent } from '../references/references-checkboxes.component';
import { ReferencesEditorComponent } from '../references/references-editor.component';
@ -100,9 +100,6 @@ export class FieldEditorComponent {
@Input({ required: true, transform: booleanAttribute })
public isComparing = false;
@Input({ transform: booleanAttribute })
public canUnset?: boolean | null;
@Input()
public displaySuffix = '';
@ -111,6 +108,7 @@ export class FieldEditorComponent {
public isEmpty?: Observable<boolean>;
public isExpanded = false;
public isDisabled?: Observable<boolean>;
public chatDialog = new DialogModel();
@ -132,6 +130,7 @@ export class FieldEditorComponent {
public ngOnChanges(changes: TypedSimpleChanges<this>) {
if (changes.formModel) {
this.isEmpty = hasNoValue$(this.formModel.form);
this.isDisabled = disabled$(this.formModel.form);
}
if (changes.formModel || changes.comments) {

8
frontend/src/app/framework/angular/scroll-active.directive.ts

@ -8,7 +8,7 @@
/* eslint-disable @angular-eslint/no-input-rename */
import { AfterViewInit, booleanAttribute, Directive, ElementRef, Input, numberAttribute, Renderer2 } from '@angular/core';
import { Types } from '../internal';
import { TypedSimpleChanges, Types } from '../internal';
@Directive({
selector: '[sqxScrollActive]',
@ -34,8 +34,10 @@ export class ScrollActiveDirective implements AfterViewInit {
this.check();
}
public ngOnChanges() {
this.check();
public ngOnChanges(changes: TypedSimpleChanges<ScrollActiveDirective>) {
if (changes.isActive) {
this.check();
}
}
private check() {

2
frontend/src/app/shell/pages/home/home-page.component.html

@ -4,7 +4,7 @@
<img alt="Logo" class="login-icon login-element" src="./images/logo.svg">
<div>
<button type="button" class="btn btn-success btn-lg login-button login-element" (click)="login()">
<button type="button" data-testid="login" class="btn btn-success btn-lg login-button login-element" (click)="login()">
{{ 'start.login' | sqxTranslate }}
</button>
</div>

8
frontend/src/app/theme/_common.scss

@ -281,6 +281,14 @@ hr {
display: none !important;
}
.disabled {
pointer-events: none;
& {
opacity: .5;
}
}
// Hidden helper (fast *ngIf replacement)
.invisible {
visibility: hidden;

2
frontend/src/app/theme/_mixins.scss

@ -28,7 +28,7 @@
&:disabled,
&.disabled {
border: none;
border-color: transparent;
border-radius: 0;
opacity: .4;
}

Loading…
Cancel
Save