heuzef
/
lesspass
mirror of https://github.com/lesspass/lesspass.git
1
0
Fork 0
Code Issues 0 Releases 67 Wiki Activity
Browse Source

change password profile delete button to be more user friendly

pull/342/head
Guillaume Vincent 8 years ago
parent
2de0a83158
commit
e373e9a38d
3 changed files with 61 additions and 115 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +29
    -78
      src/components/DeleteButton.vue
  2. +7
    -5
      src/views/PasswordGenerator.vue
  3. +25
    -32
      src/views/Passwords.vue

+ 29
- 78
src/components/DeleteButton.vue View File

@@ -1,41 +1,18 @@
<style>
.fa-white {
color: #ffffff;
}

#delete-button {
position: relative;
}

.btn-progress:before {
content: "";
position: absolute;
background: #D9534F;
bottom: 0;
left: 0;
top: 80%;
z-index: 1;
animation: 2s progress;
}

@keyframes progress {
0% {
right: 100%;
}
100% {
right: 0;
}
}
</style>
<template> <template>
<div id="delete-button"> <div id="delete-button">
<button type="button" class="btn btn-danger"
v-bind:class="{ 'btn-progress': progress}"
v-on:mouseup="click"
v-on:mousedown="start"
v-on:mouseout="cancel">
<i class="fa-white fa fa-trash fw"></i>
{{ confirmHelp }}
<div class="form-group has-danger" v-if="confirm">
<button type="button" class="btn btn-danger btn-sm" v-on:click.prevent="confirmDelete">
{{ confirmButton }}
</button>
<button type="button" class="btn btn-secondary btn-sm" v-on:click.prevent="confirm=false">
{{ cancelButton }}
</button>
<div class="form-control-feedback">{{ confirmText }}</div>
</div>
<button type="button" class="btn btn-outline-danger btn-sm"
v-if="!confirm"
v-on:click.prevent="confirm=true">
<i class="fa-white fa fa-trash fa-fw text-danger"></i>
</button> </button>
</div> </div>
</template> </template>
@@ -43,53 +20,27 @@
export default { export default {
data() { data() {
return { return {
progress: false,
pressTimer: null,
longPress: false,
confirmHelp: ''
confirm: false
} }
}, },
props: { props: {
action: {type: Function, required: true},
text: {type: String, required: true},
object: {type: Object, required: true}
},
methods: {
start(event){
if (event.type === "click" && event.button !== 0) {
return;
}
this.longPress = false;
this.progress = true;
this.pressTimer = setTimeout(() => {
this.longPress = true;
this.deleteConfirmed();
}, 2000);
return false;
},
click(){
if (this.longPress) {
return;
}
if (this.pressTimer !== null) {
clearTimeout(this.pressTimer);
this.pressTimer = null;
}
this.progress = false;
this.confirmHelp = 'Long Press To Confirm';
confirmText: {
type: String,
default: 'Are you sure you want to delete this?'
}, },
cancel(){
if (this.pressTimer !== null) {
clearTimeout(this.pressTimer);
this.pressTimer = null;
this.confirmHelp = '';
}
this.progress = false;
confirmButton: {
type: String,
default: 'Sure delete it'
}, },
deleteConfirmed(){
setTimeout(() => {
this.action(this.object);
}, 1000);
cancelButton: {
type: String,
default: 'Oups no!'
}
},
methods: {
confirmDelete(){
this.confirm = false;
this.$emit('remove');
} }
} }
} }


+ 7
- 5
src/views/PasswordGenerator.vue View File

@@ -151,15 +151,17 @@
This is a password in version&nbsp;1. This is a password in version&nbsp;1.
You should update your password and use version&nbsp;2 You should update your password and use version&nbsp;2
<br> <br>
<a href="#" v-on:click.prevent="showOptions=!showOptions" v-if="!showOptions"> show me the options</a>
<a href="#" v-on:click.prevent="showOptions=!showOptions" v-if="!showOptions"> show me the options</a>
</div> </div>
</div> </div>
<div class="form-group" v-if="version === 1 && !showError"> <div class="form-group" v-if="version === 1 && !showError">
<div class="alert alert-warning" role="alert"> <div class="alert alert-warning" role="alert">
You are using LessPass <strong>version&nbsp;1</strong> which is deprecated.
We will load the <strong>version&nbsp;2</strong> by default on january 1st, 2017.
<br>You can still use version 1 in options after this period.
<br> <a href="#" v-on:click.prevent="changeVersion(2)">Use version 2 now</a>
<small>
You are using LessPass <strong>version&nbsp;1</strong> which is deprecated.
We will load the <strong>version&nbsp;2</strong> by default on january 1st, 2017.
<br>You can still use version 1 in options after this period.
<br> <a href="#" v-on:click.prevent="changeVersion(2)">Use version 2 now</a>
</small>
</div> </div>
</div> </div>
</form> </form>


+ 25
- 32
src/views/Passwords.vue View File

@@ -1,40 +1,33 @@
<template> <template>
<div> <div>
<form>
<div class="form-group row">
<div class="col-xs-12">
<div class="inner-addon left-addon">
<i class="fa fa-search"></i>
<input class="form-control" name="search" placeholder="Search" v-model="searchQuery">
</div>
</div>
</div>
</form>
<div id="passwords">
<div class="row" v-for="password in filteredPasswords">
<div class="col-xs-9">
<ul class="list-unstyled">
<li>
<router-link :to="{ name: 'password', params: { id: password.id }}">
{{password.site}}
</router-link>
</li>
<li>
{{password.login}}
</li>
</ul>
</div>
<div class="col-xs-3">
<delete-button class="float-xs-right"
style="position: absolute; right: 1em;margin-top: 3px;"
:action="deletePassword"
:object="password"
text="Are you sure you want to delete this password ?">
</delete-button>
<div class="form-group row">
<div class="col-xs-12">
<div class="inner-addon left-addon">
<i class="fa fa-search"></i>
<input class="form-control" name="search" placeholder="Search" v-model="searchQuery">
</div> </div>
</div> </div>
</div> </div>
</div>
<ul class="list-group">
<li class="list-group-item" v-for="password in filteredPasswords">
<delete-button class="float-xs-right mt-1"
confirmText="Are you sure you want to delete this password profile?"
confirmButton="Sure delete it"
cancelButton="Oups no!"
v-on:remove="deletePassword(password)">
</delete-button>
<ul class="list-unstyled">
<li>
<router-link :to="{ name: 'password', params: { id: password.id }}">
{{password.site}}
</router-link>
</li>
<li>
{{password.login}}
</li>
</ul>
</li>
</ul>
</div> </div>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">


Write Preview
Loading…
Cancel
Save