btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

✨ Added show/hide button for password input

Browse Source 
⚡ Updated vector icons
This commit is contained in:
Liyas Thomas
2019-09-13 10:32:49 +05:30
parent d67e22e57b
commit 2f39f7f68b
3 changed files with 144 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/history.vue
View File

@@ -29,7 +29,7 @@
<label :for="'delete-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm6.605-17.581l-10.677 10.68 5.658 5.659 10.676-10.682-5.657-5.657z" />
<path d="M19 24h-14c-1.104 0-2-.896-2-2v-17h-1v-2h6v-1.5c0-.827.673-1.5 1.5-1.5h5c.825 0 1.5.671 1.5 1.5v1.5h6v2h-1v17c0 1.104-.896 2-2 2zm0-19h-14v16.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-16.5zm-9 4c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm6 0c0-.552-.448-1-1-1s-1 .448-1 1v9c0 .552.448 1 1 1s1-.448 1-1v-9zm-2-7h-4v1h4v-1z"/>
</svg>
</button>
</li>

115
components/modal.vue
View File

@@ -1,60 +1,58 @@
<template>
<div label="import_modal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
<transition name="modal-fade">
<div class="modal-backdrop">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</transition>
</div>
</div>
</transition>
</template>
<style scoped>
.modal-mask {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-backdrop {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
max-width: 800px;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
max-width: 800px;
}
.modal-container {
display: flex;
flex-grow: 1;
flex-direction: column;
margin: 8px;
padding: 12px;
transition: all 0.2s ease;
background-color: var(--bg-color);
border: 2px solid var(--ac-color);
border-radius: 4px;
}
.modal-container {
display: flex;
flex-grow: 1;
flex-direction: column;
margin: 8px;
padding: 12px;
transition: all 0.2s ease;
background-color: var(--bg-color);
border: 2px solid var(--ac-color);
border-radius: 4px;
}
/*
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
@@ -63,17 +61,14 @@
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.modal-fade-enter .modal-container,
.modal-fade-leave-active .modal-container {
transform: scale(0.9);
transition: all .2s ease;
}
</style>