hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-12 12:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

[CST-3782] Style refinements and qualdrop moves fixed

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
View File

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

6
src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
View File

@@ -12,6 +12,12 @@
[ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
cdkDrag cdkDragHandle> cdkDrag cdkDragHandle>
<!-- Item content --> <!-- 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> <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> <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group" <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"

14
src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
View File

@@ -5,7 +5,7 @@
} }
.cdk-drag { .cdk-drag {
margin-left: -(2 * $spacer); margin-left: -(2.3 * $spacer);
margin-right: -(0.5 * $spacer); margin-right: -(0.5 * $spacer);
padding-right: (0.5 * $spacer); padding-right: (0.5 * $spacer);
.drag-icon { .drag-icon {
@@ -37,17 +37,11 @@
} }
.cdk-drag-preview { .cdk-drag-preview {
background-color: white; margin: 0px;
border-radius: $border-radius-sm; padding: 0px;
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;
}
} }
.cdk-drag-placeholder { .cdk-drag-placeholder {
opacity: 0; opacity: 0;
} }

3
src/app/submission/sections/form/section-form-operations.service.ts
View File

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

1
src/assets/i18n/en.json5
View File

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