drag n drop adjustments
This commit is contained in:
Kyle Spearrin
parent
99da914f20
commit
3fa7e976fb
|
|
@ -377,10 +377,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-pad .row-btn {
|
||||
|
|
@ -389,6 +385,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:not(.box-draggable-row) {
|
||||
.action-buttons .row-btn:last-child {
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-draggable-row {
|
||||
&.box-content-row-checkbox {
|
||||
input[type="checkbox"] + .drag-handle {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
padding: 10px 2px 10px 8px;
|
||||
user-select: none;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
&.cdk-drag-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('boxBackgroundColor');
|
||||
}
|
||||
}
|
||||
|
||||
select.field-type {
|
||||
margin: 5px 0 0 25px;
|
||||
width: calc(100% - 25px);
|
||||
|
|
@ -504,24 +535,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-drag-handle {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
margin-left: 5px;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('mutedColor');
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: .8;
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('boxBackgroundColor');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -275,39 +275,37 @@
|
|||
{{'customFields' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div cdkDropList (cdkDropListDropped)="drop($event)">
|
||||
<ng-container *ngIf="cipher.hasFields">
|
||||
<div class="box-content-row box-content-row-multi" appBoxRow cdkDrag
|
||||
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
|
||||
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
|
||||
<a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
|
||||
<i class="fa fa-minus-circle fa-lg"></i>
|
||||
</a>
|
||||
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
|
||||
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
|
||||
<div class="row-main">
|
||||
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
|
||||
class="row-label" placeholder="{{'name' | i18n}}" appInputVerbatim>
|
||||
<input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
|
||||
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}" appInputVerbatim>
|
||||
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
|
||||
name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced" appInputVerbatim
|
||||
*ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
|
||||
</div>
|
||||
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value"
|
||||
*ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
|
||||
<div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
|
||||
(click)="toggleFieldValue(f)">
|
||||
<i class="fa fa-lg"
|
||||
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="box-drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
|
||||
<i class="fa fa-bars"></i>
|
||||
</span>
|
||||
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
|
||||
<div class="box-content-row box-content-row-multi box-draggable-row" appBoxRow cdkDrag
|
||||
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
|
||||
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
|
||||
<a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
|
||||
<i class="fa fa-minus-circle fa-lg"></i>
|
||||
</a>
|
||||
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
|
||||
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
|
||||
<div class="row-main">
|
||||
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
|
||||
class="row-label" placeholder="{{'name' | i18n}}" appInputVerbatim>
|
||||
<input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
|
||||
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}" appInputVerbatim>
|
||||
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
|
||||
name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced" appInputVerbatim
|
||||
*ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
|
||||
</div>
|
||||
</ng-container>
|
||||
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value"
|
||||
*ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
|
||||
<div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
|
||||
(click)="toggleFieldValue(f)">
|
||||
<i class="fa fa-lg"
|
||||
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
|
||||
<i class="fa fa-bars"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-row box-content-row-newmulti" appBoxRow>
|
||||
<a href="#" appStopClick (click)="addField()">
|
||||
|
|
|
|||
Loading…
Reference in New Issue