vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

drag n drop cleanup

This commit is contained in:
Kyle Spearrin 2019-03-28 00:21:01 -04:00
parent c70ed27271
commit 3bab3445d4
2 changed files with 58 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/vault/add-edit.component.html
View File

@ -261,41 +261,38 @@
{{'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 box-draggable-row" 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}}">
<input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
*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" 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}}">
<input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
*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" appBoxRow>
<a href="#" appStopClick (click)="addField()">

52
src/scss/box.scss
View File

@ -303,10 +303,6 @@
}
}
}
&:last-child {
padding-right: 2px !important;
}
}
&.no-pad .row-btn {
@ -315,6 +311,33 @@
}
}
&:not(.box-draggable-row) {
.action-buttons .row-btn:last-child {
padding-right: 2px !important;
}
}
.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);
@ -350,24 +373,3 @@
}
}
}
.box-drag-handle {
cursor: move;
margin-left: 5px;
user-select: none;
@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');
}
}