1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-27 12:36:14 +01:00

Drag n drop sorting for custom fields (#237)

* Implement sorting for custom fields

Adds angular/cdk to sources and makes DragDropModule globally available.
Updates the add-edit component with necessary tags.
Restructures and updates the box styling for drag 'n drop handling.

* Set the correct Angular CDK version

* Remove unused class for drag handle

* Add missing locale entry for drag handle

* Fix styling of the drag handle

* Move drag handle to right side of custom fields

* Revert changes in package-lock.json

* Update reference for jslib
This commit is contained in:
Kovah 2019-03-28 04:52:15 +01:00 committed by Kyle Spearrin
parent e9beb0bcae
commit c70ed27271
7 changed files with 372 additions and 323 deletions

2
jslib

@ -1 +1 @@
Subproject commit 593870e9365d68e924955f1ec192a70216b63621 Subproject commit f39bdc4269c1105211ac901b7d2d51978375b222

15
package-lock.json generated
View File

@ -413,6 +413,15 @@
"tslib": "^1.9.0" "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": { "@angular/common": {
"version": "7.2.1", "version": "7.2.1",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.1.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.1.tgz",
@ -9278,6 +9287,12 @@
"integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=", "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
"dev": true "dev": true
}, },
"parse5": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
"integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
"optional": true
},
"pascalcase": { "pascalcase": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",

View File

@ -232,6 +232,7 @@
}, },
"dependencies": { "dependencies": {
"@angular/animations": "7.2.1", "@angular/animations": "7.2.1",
"@angular/cdk": "7.2.1",
"@angular/common": "7.2.1", "@angular/common": "7.2.1",
"@angular/compiler": "7.2.1", "@angular/compiler": "7.2.1",
"@angular/core": "7.2.1", "@angular/core": "7.2.1",

View File

@ -9,6 +9,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { ServicesModule } from './services.module'; import { ServicesModule } from './services.module';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
@ -138,6 +139,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
}), }),
ToasterModule.forRoot(), ToasterModule.forRoot(),
InfiniteScrollModule, InfiniteScrollModule,
DragDropModule,
], ],
declarations: [ declarations: [
AddEditComponent, AddEditComponent,

View File

@ -261,36 +261,42 @@
{{'customFields' | i18n}} {{'customFields' | i18n}}
</div> </div>
<div class="box-content"> <div class="box-content">
<ng-container *ngIf="cipher.hasFields"> <div cdkDropList (cdkDropListDropped)="drop($event)">
<div class="box-content-row box-content-row-multi" appBoxRow <ng-container *ngIf="cipher.hasFields">
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction" <div class="box-content-row box-content-row-multi box-draggable-row" cdkDrag
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}"> *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
<a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}"> [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
<i class="fa fa-minus-circle fa-lg"></i> <a href="#" appStopClick (click)="removeField(f)"
</a> title="{{'remove' | i18n}}">
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label> <i class="fa fa-minus-circle fa-lg"></i>
<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> </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> </div>
</div> </ng-container>
</ng-container> </div>
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<a href="#" appStopClick (click)="addField()"> <a href="#" appStopClick (click)="addField()">
<i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}} <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}

View File

@ -297,6 +297,9 @@
"value": { "value": {
"message": "Value" "message": "Value"
}, },
"dragToSort": {
"message": "Drag to sort"
},
"cfTypeText": { "cfTypeText": {
"message": "Text" "message": "Text"
}, },

View File

@ -1,6 +1,7 @@
@import "variables.scss"; @import "variables.scss";
.box { .box {
position: relative;
width: 100%; width: 100%;
.box-header { .box-header {
@ -34,300 +35,6 @@
padding: 10px 15px; padding: 10px 15px;
} }
.box-content-row {
display: block;
padding: 10px 15px;
position: relative;
z-index: 1;
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: calc(100% - 10px);
border-bottom: 1px solid #000000;
@include themify($themes) {
border-bottom-color: themed('boxBorderColor');
}
}
&:first-child, &:last-child {
border-radius: $border-radius;
.progress {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
&:last-child {
&:before {
border: none;
height: 0;
}
}
&:after {
content: "";
display: table;
clear: both;
}
&:hover, &:focus, &.active {
@include themify($themes) {
background-color: themed('boxBackgroundHoverColor');
}
}
&.pre {
white-space: pre;
overflow-x: auto;
}
&.pre-line {
white-space: pre-line;
overflow-x: auto;
}
.row-label, label {
font-size: $font-size-small;
display: block;
width: 100%;
margin-bottom: 5px;
@include themify($themes) {
color: themed('mutedColor');
}
.sub-label {
margin-left: 10px;
}
}
.text, .detail {
display: block;
@include themify($themes) {
color: themed('textColor');
}
}
.detail {
font-size: $font-size-small;
@include themify($themes) {
color: themed('mutedColor');
}
}
.img-right {
float: right;
margin-left: 10px;
}
.row-main {
flex-grow: 1;
}
&.box-content-row-flex, .box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
&.box-content-row-slider, &.box-content-row-multi {
display: flex;
align-items: center;
word-break: break-word;
}
&.box-content-row-multi {
width: 100%;
input:not([type="checkbox"]) {
width: 100%;
}
input + label.sr-only + select {
margin-top: 5px;
}
> a {
padding: 8px 8px 8px 4px;
margin: 0;
@include themify($themes) {
color: themed('dangerColor');
}
}
}
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
label, .row-label {
font-size: $font-size-base;
display: inline;
width: initial;
margin-bottom: 0;
@include themify($themes) {
color: themed('textColor');
}
}
> span {
@include themify($themes) {
color: themed('mutedColor');
}
}
> input {
margin: 0 0 0 auto;
padding: 0;
}
> * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
&.box-content-row-input {
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
input {
text-align: right;
width: 45px !important;
}
}
&.box-content-row-slider {
input[type="range"] {
height: 10px;
width: 110px !important;
}
input[type="number"] {
text-align: right;
width: 45px !important;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
input:not([type="checkbox"]), textarea {
border: none;
width: 100%;
background-color: transparent;
&::-webkit-input-placeholder {
@include themify($themes) {
color: themed('inputPlaceholderColor');
}
}
&:focus {
outline: none;
}
}
select {
width: 100%;
border: 1px solid #000000;
border-radius: $border-radius;
@include themify($themes) {
border-color: themed('inputBorderColor');
}
}
.action-buttons {
display: flex;
margin-left: 5px;
.row-btn {
cursor: pointer;
padding: 10px 8px;
background: none;
border: none;
@include themify($themes) {
color: themed('boxRowButtonColor');
}
&:hover, &:focus {
@include themify($themes) {
color: themed('boxRowButtonHoverColor');
}
}
&.disabled {
@include themify($themes) {
color: themed('disabledIconColor');
}
&:hover {
@include themify($themes) {
color: themed('disabledIconColor');
}
}
}
&:last-child {
padding-right: 2px !important;
}
}
&.no-pad .row-btn {
padding-top: 0;
padding-bottom: 0;
}
}
select.field-type {
margin: 5px 0 0 25px;
width: calc(100% - 25px);
}
.row-sub-icon {
@include themify($themes) {
color: themed('disabledIconColor');
}
}
.row-sub-label {
margin: 0 15px;
white-space: nowrap;
@include themify($themes) {
color: themed('mutedColor');
}
}
.progress {
display: flex;
height: 5px;
overflow: hidden;
margin: 5px -15px -10px;
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
white-space: nowrap;
background-color: $brand-primary;
}
}
}
&.condensed .box-content-row, .box-content-row.condensed { &.condensed .box-content-row, .box-content-row.condensed {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
@ -349,3 +56,318 @@
} }
} }
} }
.box-content-row {
display: block;
padding: 10px 15px;
position: relative;
z-index: 1;
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: calc(100% - 10px);
border-bottom: 1px solid #000000;
@include themify($themes) {
border-bottom-color: themed('boxBorderColor');
}
}
&:first-child, &:last-child {
border-radius: $border-radius;
.progress {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
&:last-child {
&:before {
border: none;
height: 0;
}
}
&:after {
content: "";
display: table;
clear: both;
}
&:hover, &:focus, &.active {
@include themify($themes) {
background-color: themed('boxBackgroundHoverColor');
}
}
&.pre {
white-space: pre;
overflow-x: auto;
}
&.pre-line {
white-space: pre-line;
overflow-x: auto;
}
.row-label, label {
font-size: $font-size-small;
display: block;
width: 100%;
margin-bottom: 5px;
@include themify($themes) {
color: themed('mutedColor');
}
.sub-label {
margin-left: 10px;
}
}
.text, .detail {
display: block;
@include themify($themes) {
color: themed('textColor');
}
}
.detail {
font-size: $font-size-small;
@include themify($themes) {
color: themed('mutedColor');
}
}
.img-right {
float: right;
margin-left: 10px;
}
.row-main {
flex-grow: 1;
}
&.box-content-row-flex, .box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
&.box-content-row-slider, &.box-content-row-multi {
display: flex;
align-items: center;
word-break: break-word;
}
&.box-content-row-multi {
width: 100%;
input:not([type="checkbox"]) {
width: 100%;
}
input + label.sr-only + select {
margin-top: 5px;
}
> a {
padding: 8px 8px 8px 4px;
margin: 0;
@include themify($themes) {
color: themed('dangerColor');
}
}
}
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
label, .row-label {
font-size: $font-size-base;
display: inline;
width: initial;
margin-bottom: 0;
@include themify($themes) {
color: themed('textColor');
}
}
> span {
@include themify($themes) {
color: themed('mutedColor');
}
}
> input {
margin: 0 0 0 auto;
padding: 0;
}
> * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
&.box-content-row-input {
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
input {
text-align: right;
width: 45px !important;
}
}
&.box-content-row-slider {
input[type="range"] {
height: 10px;
width: 110px !important;
}
input[type="number"] {
text-align: right;
width: 45px !important;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
input:not([type="checkbox"]), textarea {
border: none;
width: 100%;
background-color: transparent;
&::-webkit-input-placeholder {
@include themify($themes) {
color: themed('inputPlaceholderColor');
}
}
&:focus {
outline: none;
}
}
select {
width: 100%;
border: 1px solid #000000;
border-radius: $border-radius;
@include themify($themes) {
border-color: themed('inputBorderColor');
}
}
.action-buttons {
display: flex;
margin-left: 5px;
.row-btn {
cursor: pointer;
padding: 10px 8px;
background: none;
border: none;
@include themify($themes) {
color: themed('boxRowButtonColor');
}
&:hover, &:focus {
@include themify($themes) {
color: themed('boxRowButtonHoverColor');
}
}
&.disabled {
@include themify($themes) {
color: themed('disabledIconColor');
}
&:hover {
@include themify($themes) {
color: themed('disabledIconColor');
}
}
}
&:last-child {
padding-right: 2px !important;
}
}
&.no-pad .row-btn {
padding-top: 0;
padding-bottom: 0;
}
}
select.field-type {
margin: 5px 0 0 25px;
width: calc(100% - 25px);
}
.row-sub-icon {
@include themify($themes) {
color: themed('disabledIconColor');
}
}
.row-sub-label {
margin: 0 15px;
white-space: nowrap;
@include themify($themes) {
color: themed('mutedColor');
}
}
.progress {
display: flex;
height: 5px;
overflow: hidden;
margin: 5px -15px -10px;
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
white-space: nowrap;
background-color: $brand-primary;
}
}
}
.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');
}
}