drag n drop cleanup

This commit is contained in:
Kyle Spearrin 2019-03-28 11:59:53 -04:00
parent 9685f2c2b3
commit 322bc90920
3 changed files with 64 additions and 67 deletions

View File

@ -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>

View File

@ -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"
}, },

View File

@ -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;
} }