drag n drop cleanup
This commit is contained in:
Kyle Spearrin
parent
9685f2c2b3
commit
322bc90920
|
|
@ -125,8 +125,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ng-container *ngIf="cipher.login.hasUris">
|
<ng-container *ngIf="cipher.login.hasUris">
|
||||||
<div class="row" appBoxRow
|
<div class="row" *ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
|
||||||
*ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
|
|
||||||
<div class="col-7 form-group">
|
<div class="col-7 form-group">
|
||||||
<label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
|
<label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
|
|
@ -361,71 +360,70 @@
|
||||||
class="form-control"></textarea>
|
class="form-control"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="mt-4">{{'customFields' | i18n}}</h3>
|
<h3 class="mt-4">{{'customFields' | i18n}}</h3>
|
||||||
<ng-container *ngIf="cipher.hasFields">
|
<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
|
||||||
<div cdkDropList (cdkDropListDropped)="drop($event)">
|
<div class="row" cdkDrag *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction">
|
||||||
<div class="row" appBoxRow cdkDrag
|
<div class="col-5 form-group">
|
||||||
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction" >
|
<div class="d-flex">
|
||||||
<div class="col-5 form-group">
|
<label for="fieldName{{i}}">{{'name' | i18n}}</label>
|
||||||
<div class="d-flex">
|
<a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
|
||||||
<label for="fieldName{{i}}">{{'name' | i18n}}</label>
|
target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
|
||||||
<a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
|
<i class="fa fa-question-circle-o"></i>
|
||||||
target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
|
</a>
|
||||||
<i class="fa fa-question-circle-o"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
|
|
||||||
class="form-control" appInputVerbatim>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-7 form-group">
|
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
|
||||||
<label for="fieldValue{{i}}">{{'value' | i18n}}</label>
|
class="form-control" appInputVerbatim>
|
||||||
<div class="d-flex align-items-center">
|
</div>
|
||||||
<div class="input-group" *ngIf="f.type === fieldType.Text">
|
<div class="col-7 form-group">
|
||||||
<input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
|
<label for="fieldValue{{i}}">{{'value' | i18n}}</label>
|
||||||
[(ngModel)]="f.value" appInputVerbatim>
|
<div class="d-flex align-items-center">
|
||||||
<div class="input-group-append">
|
<div class="input-group" *ngIf="f.type === fieldType.Text">
|
||||||
<button type="button" class="btn btn-outline-secondary"
|
<input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
|
||||||
title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
|
[(ngModel)]="f.value" appInputVerbatim>
|
||||||
tabindex="-1">
|
<div class="input-group-append">
|
||||||
<i class="fa fa-lg fa-clipboard"></i>
|
<button type="button" class="btn btn-outline-secondary"
|
||||||
</button>
|
title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
|
||||||
</div>
|
tabindex="-1">
|
||||||
|
<i class="fa fa-lg fa-clipboard"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group" *ngIf="f.type === fieldType.Hidden">
|
|
||||||
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
|
|
||||||
name="Field.Value{{i}}" [(ngModel)]="f.value"
|
|
||||||
class="form-control text-monospace" appInputVerbatim
|
|
||||||
autocomplete="new-password">
|
|
||||||
<div class="input-group-append">
|
|
||||||
<button type="button" class="btn btn-outline-secondary"
|
|
||||||
title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
|
|
||||||
tabindex="-1">
|
|
||||||
<i class="fa fa-lg"
|
|
||||||
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="btn btn-outline-secondary"
|
|
||||||
title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
|
|
||||||
tabindex="-1">
|
|
||||||
<i class="fa fa-lg fa-clipboard"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-fill">
|
|
||||||
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
|
|
||||||
[(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean" appTrueFalseValue
|
|
||||||
trueValue="true" falseValue="false">
|
|
||||||
</div>
|
|
||||||
<button type="button" class="btn btn-link text-danger ml-2" (click)="removeField(f)"
|
|
||||||
title="{{'remove' | i18n}}">
|
|
||||||
<i class="fa fa-minus-circle fa-lg"></i>
|
|
||||||
</button>
|
|
||||||
<span class="text-muted cursor-move" title="{{'dragToSort' | i18n}}">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="input-group" *ngIf="f.type === fieldType.Hidden">
|
||||||
|
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
|
||||||
|
name="Field.Value{{i}}" [(ngModel)]="f.value"
|
||||||
|
class="form-control text-monospace" appInputVerbatim
|
||||||
|
autocomplete="new-password">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-outline-secondary"
|
||||||
|
title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
|
||||||
|
tabindex="-1">
|
||||||
|
<i class="fa fa-lg"
|
||||||
|
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}">
|
||||||
|
</i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary"
|
||||||
|
title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
|
||||||
|
tabindex="-1">
|
||||||
|
<i class="fa fa-lg fa-clipboard"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-fill">
|
||||||
|
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
|
||||||
|
[(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean" appTrueFalseValue
|
||||||
|
trueValue="true" falseValue="false">
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-link text-danger ml-2" (click)="removeField(f)"
|
||||||
|
title="{{'remove' | i18n}}">
|
||||||
|
<i class="fa fa-minus-circle fa-lg"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-link text-muted cursor-move"
|
||||||
|
title="{{'dragToSort' | i18n}}">
|
||||||
|
<i class="fa fa-bars fa-lg"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</div>
|
||||||
<a href="#" appStopClick (click)="addField()" class="d-inline-block mb-2">
|
<a href="#" appStopClick (click)="addField()" class="d-inline-block mb-2">
|
||||||
<i class="fa fa-plus-circle fa-fw"></i> {{'newCustomField' | i18n}}
|
<i class="fa fa-plus-circle fa-fw"></i> {{'newCustomField' | i18n}}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -151,6 +151,9 @@
|
||||||
"value": {
|
"value": {
|
||||||
"message": "Value"
|
"message": "Value"
|
||||||
},
|
},
|
||||||
|
"dragToSort": {
|
||||||
|
"message": "Drag to sort"
|
||||||
|
},
|
||||||
"cfTypeText": {
|
"cfTypeText": {
|
||||||
"message": "Text"
|
"message": "Text"
|
||||||
},
|
},
|
||||||
|
|
@ -406,9 +409,6 @@
|
||||||
"unselectAll": {
|
"unselectAll": {
|
||||||
"message": "Unselect All"
|
"message": "Unselect All"
|
||||||
},
|
},
|
||||||
"value": {
|
|
||||||
"message": "Value"
|
|
||||||
},
|
|
||||||
"launch": {
|
"launch": {
|
||||||
"message": "Launch"
|
"message": "Launch"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -788,12 +788,11 @@ img.logo {
|
||||||
|
|
||||||
.cdk-drag-preview {
|
.cdk-drag-preview {
|
||||||
z-index: $zindex-tooltip !important;
|
z-index: $zindex-tooltip !important;
|
||||||
padding: $spacer / 2;
|
opacity: 0.8;
|
||||||
opacity: .8;
|
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cursor-move {
|
.cursor-move {
|
||||||
cursor: move;
|
cursor: move !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue