mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 10:04:11 +00:00
drag drop styling
This commit is contained in:
lotte
@@ -51,7 +51,6 @@ export class LookupRelationService {
|
||||
if (setSearchConfig) {
|
||||
this.searchConfig = newConfig;
|
||||
}
|
||||
console.log(newConfig);
|
||||
return this.searchService.search(newConfig).pipe(
|
||||
/* Make sure to only listen to the first x results, until loading is finished */
|
||||
/* TODO: in Rxjs 6.4.0 and up, we can replace this with takeWhile(predicate, true) - see https://stackoverflow.com/a/44644237 */
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
|
||||
<div [class.form-group]="asBootstrapFormGroup"
|
||||
[formGroup]="group"
|
||||
[ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
|
||||
|
||||
<label *ngIf="!isCheckbox && hasLabel"
|
||||
[for]="model.id"
|
||||
[innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
|
||||
|
||||
@@ -172,7 +172,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
|
||||
@Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
|
||||
|
||||
@Input() formId: string;
|
||||
@Input() asBootstrapFormGroup = true;
|
||||
@Input() asBootstrapFormGroup = false;
|
||||
@Input() bindId = true;
|
||||
@Input() context: any | null = null;
|
||||
@Input() group: FormGroup;
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
[model]="model"
|
||||
[ngClass]="[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]"
|
||||
[templates]="templates"
|
||||
[asBootstrapFormGroup]="true"
|
||||
(dfBlur)="onEvent($event, 'blur')"
|
||||
(dfChange)="onEvent($event, 'change')"
|
||||
(dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div *ngIf="metadataRepresentation" class="mt-2 mb-4 d-flex">
|
||||
<span class="d-inline-block align-middle ml-1 mr-auto">
|
||||
<div *ngIf="metadataRepresentation" class="d-flex">
|
||||
<span class="mr-auto text-contents">
|
||||
<ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation"></ds-metadata-representation-loader>
|
||||
</span>
|
||||
<button type="button" class="btn btn-secondary"
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
span.text-contents{
|
||||
padding: $btn-padding-y 0;
|
||||
}
|
||||
|
||||
@@ -10,11 +10,9 @@
|
||||
</div>
|
||||
<div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
|
||||
<div *ngFor="let groupModel of model.groups; let idx = index" role="group"
|
||||
[formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" cdkDrag>
|
||||
[formGroupName]="idx" [ngClass]="{'pt-2 pb-2': idx > 0}" cdkDrag cdkDragHandle [class]="getClass('element', 'group') + ' ' + getClass('grid', 'group')">
|
||||
<ng-container *ngIf="idx > 0">
|
||||
<button type="button" class="close float-left drag-button" cdkDragHandle>
|
||||
<i class="fas fa-grip-vertical fa-fw"></i>
|
||||
</button>
|
||||
<i class="drag-icon fas fa-grip-vertical fa-fw"></i>
|
||||
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: idx}"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
|
||||
|
||||
@@ -1,5 +1,45 @@
|
||||
@import './../../../../../../../styles/variables';
|
||||
|
||||
button.drag-button {
|
||||
height: $button-height;
|
||||
.cdk-drag {
|
||||
margin-left: -(1.5 * $spacer);
|
||||
.drag-icon {
|
||||
visibility: hidden;
|
||||
width: (1.5 * $spacer);
|
||||
color: $gray-600;
|
||||
margin: $btn-padding-y 0;
|
||||
line-height: $btn-line-height;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
cursor: grab;
|
||||
.drag-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cdk-drop-list-dragging {
|
||||
.cdk-drag {
|
||||
cursor: grabbing;
|
||||
.drag-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
[ngClass]="getClass('element','control')">
|
||||
|
||||
<ds-dynamic-form-control-container *ngFor="let _model of model.group"
|
||||
[asBootstrapFormGroup]="true"
|
||||
[formId]="formId"
|
||||
[group]="control"
|
||||
[hasErrorMessaging]="model.hasErrorMessages"
|
||||
@@ -20,5 +19,4 @@
|
||||
(dfFocus)="onFocus($event)"
|
||||
(ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -56,7 +56,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{(resultsRD$ | async)?.state}}
|
||||
<ds-search-results [searchResults]="(resultsRD$ | async)"
|
||||
[sortConfig]="this.lookupRelationService.searchConfig?.sort"
|
||||
[searchConfig]="this.lookupRelationService.searchConfig"
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="btn-group" role="group" aria-label="Add and remove button">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
[disabled]="isItemReadOnly(context, index)"
|
||||
(click)="insertItem($event, group.context, group.index + 1)">
|
||||
(click)="insertItem($event, group.context, group.index)">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -327,7 +327,6 @@ export class SectionFormOperationsService {
|
||||
this.operationsBuilder.remove(pathCombiner.getPath(path));
|
||||
}
|
||||
} else if (hasValue(event.$event) && hasValue(event.$event.previousIndex)) {
|
||||
console.log(event, path);
|
||||
this.operationsBuilder.move(
|
||||
pathCombiner.getPath(path),
|
||||
pathCombiner.getPath(segmentedPath + '/' + event.$event.previousIndex).path
|
||||
|
||||
Reference in New Issue
Block a user