Commit 2ac98bc4 authored by Anders B. Clausen's avatar Anders B. Clausen
Browse files

Added two-phase blur-grey-out

parent 5684e80a
Pipeline #52243 passed with stage
in 40 seconds
......@@ -8,7 +8,7 @@
<img v-svg-inline class="icon" src="@/assets/pencil.svg"/>
</button>
</div>
<button class="hidden-row-item remove-block" @mouseover="blurRow(rowIndex)" @mouseleave="unblurRow(rowIndex)" @click="mightRemoveRow(rowIndex)">
<button class="hidden-row-item remove-block" @mouseover="slightlyBlurRow(rowIndex)" @mouseleave="unblurRow(rowIndex)" @click="mightRemoveRow(rowIndex)">
<img v-svg-inline class="icon" src="@/assets/trashcan.svg"/>
</button>
<button class="hidden-row-item cancel-remove" @click="cancelRemoveRow(rowIndex)">
......@@ -71,6 +71,14 @@ export default {
}
},
slightlyBlurRow(rowIndex) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
for (const col of cols) {
col.className = "col animate-slight-blur-grey-out";
col.style.pointerEvents = "none";
}
},
unblurRow(rowIndex) {
if(!this.deleting) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
......@@ -322,6 +330,13 @@ export default {
opacity: 0.3;
}
.animate-slight-blur-grey-out {
animation: slight-blur-grey-out 0.6s;
filter: blur(1px) grayscale(0.5);
opacity: 0.7;
}
@keyframes slide-from-bot {
0% {
top: 10.5px;
......@@ -333,11 +348,12 @@ export default {
}
100% { z-index: inherit; }
}
@keyframes blur-grey-out-zoom {
from {
filter: blur(0px) grayscale(0);
filter: blur(1px) grayscale(0.5);
transform: scale(1.0);
opacity: 1;
opacity: 0.7;
}
to {
filter: blur(2px) grayscale(0.5);
......@@ -345,4 +361,16 @@ export default {
opacity: 0.3;
}
}
@keyframes slight-blur-grey-out {
from {
filter: blur(0px) grayscale(0);
transform: scale(1.0);
opacity: 1;
}
to {
filter: blur(1px) grayscale(0.5);
opacity: 0.7;
}
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment