[CST-3782] Style refinements and qualdrop moves fixed

This commit is contained in:
Alessandro Martelli
2021-02-24 15:34:21 +01:00
parent 8e7fad43b8
commit 975ef7ebd2
5 changed files with 20 additions and 19 deletions

View File

@@ -11,16 +11,15 @@
'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
<div [ngClass]="getClass('grid', 'control')">
<ng-container #componentViewContainer></ng-container>
<!-- In case of repeatable fields show hint only for first element -->
<small *ngIf="hasHint && (model.repeatable === false || context?.index === 0) && (!showErrorMessages || errorMessages.length === 0)"
class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
<!-- In case of repeatable fields show empty space for all elements except the first -->
<div *ngIf="context?.index > 0
<small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
<!-- In case of repeatable fields show empty space for all elements except the first -->
<div *ngIf="context?.index !== null
&& (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
<div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
<small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
</div>
<div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
<small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
</div>
</div>
<div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >

View File

@@ -12,6 +12,12 @@
[ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
cdkDrag cdkDragHandle>
<!-- Item content -->
<div *cdkDragPreview>
<div class="alert alert-info">
<i class="fas fa-sort"></i> {{ 'form.repeatable.sort.tip' | translate }}
</div>
</div>
<i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="model.groups.length === 1"></i>
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"

View File

@@ -5,7 +5,7 @@
}
.cdk-drag {
margin-left: -(2 * $spacer);
margin-left: -(2.3 * $spacer);
margin-right: -(0.5 * $spacer);
padding-right: (0.5 * $spacer);
.drag-icon {
@@ -37,17 +37,11 @@
}
.cdk-drag-preview {
background-color: white;
border-radius: $border-radius-sm;
margin-left: 0;
box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
.drag-icon {
visibility: visible;
}
margin: 0px;
padding: 0px;
}
.cdk-drag-placeholder {
opacity: 0;
}

View File

@@ -349,7 +349,8 @@ export class SectionFormOperationsService {
const segmentedPath = this.getFieldPathSegmentedFromChangeEvent(event);
const value = this.getFieldValueFromChangeEvent(event);
// Detect which operation must be dispatched
if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)) {
if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)
|| this.formBuilder.isQualdropGroup(event.model as DynamicFormControlModel)) {
// It's a qualdrup model
this.dispatchOperationsFromMap(this.getQualdropValueMap(event), pathCombiner, event, previousValue);
} else if (this.formBuilder.isRelationGroup(event.model)) {

View File

@@ -1309,6 +1309,7 @@
"form.submit": "Submit",
"form.repeatable.sort.tip": "Drop the item in the new position",
"home.description": "",