mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-28 17:27:50 +01:00
Drag n drop sorting for custom fields (#370)
* Implement custom field ordering with new handle placement * Update reference for jslib
This commit is contained in:
Kovah
Kyle Spearrin
parent
342871a216
commit
9685f2c2b3
15
package-lock.json
generated
15
package-lock.json
generated
@ -407,6 +407,15 @@
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.2.1.tgz",
|
||||
"integrity": "sha512-oU1Pjq3JkDtkXquLxWK84A2jOCeYRf352dVGbQCxWoSOQ5KBtMAd42huGidPiOSHN6/f7xZwL3n4fq3fVIut8A==",
|
||||
"requires": {
|
||||
"parse5": "^5.0.0",
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/common": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.1.tgz",
|
||||
@ -8338,6 +8347,12 @@
|
||||
"integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
|
||||
"dev": true
|
||||
},
|
||||
"parse5": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
|
||||
"integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
|
||||
"optional": true
|
||||
},
|
||||
"parseurl": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
|
||||
|
||||
@ -58,6 +58,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "7.2.1",
|
||||
"@angular/cdk": "7.2.1",
|
||||
"@angular/common": "7.2.1",
|
||||
"@angular/compiler": "7.2.1",
|
||||
"@angular/core": "7.2.1",
|
||||
|
||||
@ -7,6 +7,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
@ -228,6 +229,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
|
||||
}),
|
||||
ToasterModule.forRoot(),
|
||||
InfiniteScrollModule,
|
||||
DragDropModule,
|
||||
],
|
||||
declarations: [
|
||||
AcceptOrganizationComponent,
|
||||
|
||||
@ -362,60 +362,66 @@
|
||||
</div>
|
||||
<h3 class="mt-4">{{'customFields' | i18n}}</h3>
|
||||
<ng-container *ngIf="cipher.hasFields">
|
||||
<div class="row" appBoxRow *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction">
|
||||
<div class="col-5 form-group">
|
||||
<div class="d-flex">
|
||||
<label for="fieldName{{i}}">{{'name' | i18n}}</label>
|
||||
<a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
|
||||
target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
|
||||
<i class="fa fa-question-circle-o"></i>
|
||||
</a>
|
||||
<div cdkDropList (cdkDropListDropped)="drop($event)">
|
||||
<div class="row" appBoxRow cdkDrag
|
||||
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction" >
|
||||
<div class="col-5 form-group">
|
||||
<div class="d-flex">
|
||||
<label for="fieldName{{i}}">{{'name' | i18n}}</label>
|
||||
<a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
|
||||
target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
|
||||
<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>
|
||||
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
|
||||
class="form-control" appInputVerbatim>
|
||||
</div>
|
||||
<div class="col-7 form-group">
|
||||
<label for="fieldValue{{i}}">{{'value' | i18n}}</label>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="input-group" *ngIf="f.type === fieldType.Text">
|
||||
<input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
|
||||
[(ngModel)]="f.value" appInputVerbatim>
|
||||
<div class="input-group-append">
|
||||
<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 class="col-7 form-group">
|
||||
<label for="fieldValue{{i}}">{{'value' | i18n}}</label>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="input-group" *ngIf="f.type === fieldType.Text">
|
||||
<input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}"
|
||||
[(ngModel)]="f.value" appInputVerbatim>
|
||||
<div class="input-group-append">
|
||||
<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>
|
||||
<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 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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -785,3 +785,15 @@ img.logo {
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
z-index: $zindex-tooltip !important;
|
||||
padding: $spacer / 2;
|
||||
opacity: .8;
|
||||
background-color: $white;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.cursor-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user