lukechilds
/
umbrel-dashboard
mirror of https://github.com/lukechilds/umbrel-dashboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

transitions

readme
Mayank 5 years ago
parent
c62f3551b2
commit
e33ea8e92b
No known key found for this signature in database GPG Key ID: D037D60476CE748C
4 changed files with 82 additions and 176 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      src/components/BitcoinWallet.vue
  2. 98
      src/components/LightningWallet.vue
  3. 24
      src/components/Utility/CircularCheckmark.vue
  4. 52
      src/global-styles/custom.scss

84
src/components/BitcoinWallet.vue
View File

@ -39,7 +39,7 @@
<!-- No transactions -->
<div
class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-transactions-container"
class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-wallet-transactions-container"
v-if="transactions.length === 0"
>
<svg
@ -67,8 +67,8 @@
<small class="align-self-center mt-3 text-muted">No transactions</small>
</div>
<div class="transactions-container" v-else>
<transition-group name="list" class="list-group pb-2 transactions" appear>
<div class="wallet-transactions-container" v-else>
<transition-group name="slide-up" class="list-group pb-2 transactions">
<!-- Transaction -->
<b-list-group-item
v-for="(tx, index) in transactions"
@ -570,73 +570,35 @@ export default {
</script>
<style lang="scss" scoped>
//Transactions
.transactions-container {
position: relative;
//bottom fade
&:before {
//nice faded white so the discarded blocks don't abruptly cut off
content: "";
position: absolute;
height: 2rem;
width: 100%;
bottom: 0;
left: 0;
z-index: 2;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
);
}
//top fade
&:after {
//nice faded white so the discarded blocks don't abruptly cut off
content: "";
position: absolute;
height: 2rem;
width: 100%;
top: 0;
left: 0;
z-index: 2;
background-image: linear-gradient(
to top,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
);
}
}
.transactions {
height: 20rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; //momentum scroll on iOS
}
.zero-transactions-container {
height: 20rem;
}
//transactions list transitions
.list-enter-active,
.list-leave-active {
transition: transform 0.8s, opacity 0.8s ease;
// Transitions between mode/screen changes
.lightning-mode-change-enter-active,
.lightning-mode-change-leave-active {
transition: transform 0.3s, opacity 0.3s linear;
}
.list-enter {
transform: translate3d(0, 10px, 0);
.lightning-mode-change-enter {
transform: translate3d(20px, 0, 0);
opacity: 0;
}
.list-enter-to {
.lightning-mode-change-enter-to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.list-leave {
.lightning-mode-change-leave {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.list-leave-to {
.lightning-mode-change-leave-to {
transform: translate3d(-20px, 0, 0);
opacity: 0;
}
//slide up transition with fade
.slide-up-enter-active,
.slide-up-leave-active {
transition: transform 0.8s, opacity 0.8s ease;
}
.slide-up-enter,
.slide-up-leave-to {
transform: translate3d(0, 10px, 0);
opacity: 0;
}

98
src/components/LightningWallet.vue
View File

@ -39,7 +39,7 @@
<!-- No transactions -->
<div
class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-transactions-container"
class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-wallet-transactions-container"
v-if="transactions.length === 0"
>
<!-- Piggy bank icon -->
@ -68,8 +68,8 @@
</div>
<!-- Actual Transactions -->
<div class="transactions-container" v-else>
<transition-group name="list" class="list-group pb-2 transactions" appear>
<div class="wallet-transactions-container" v-else>
<transition-group name="slide-up" class="list-group pb-2 transactions">
<b-list-group-item
v-for="(tx, index) in transactions"
:key="index"
@ -817,8 +817,6 @@ export default {
transition: transform 0.3s, opacity 0.3s linear;
}
// reverse delay in check mark when leaving (first tick contracts, then the circle)
.lightning-mode-change-enter {
transform: translate3d(20px, 0, 0);
opacity: 0;
@ -854,106 +852,24 @@ export default {
}
}
//Transactions
.transactions-container {
position: relative;
//bottom fade
&:before {
//nice faded white so the discarded blocks don't abruptly cut off
content: "";
position: absolute;
height: 2rem;
width: 100%;
bottom: 0;
left: 0;
z-index: 2;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
);
}
//top fade
&:after {
//nice faded white so the discarded blocks don't abruptly cut off
content: "";
position: absolute;
height: 2rem;
width: 100%;
top: 0;
left: 0;
z-index: 2;
background-image: linear-gradient(
to top,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
);
}
}
.transactions {
height: 20rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; //momentum scroll on iOS
}
.zero-transactions-container {
height: 20rem;
}
//slide up copy invoice field transition
//slide up transition with fade
.slide-up-enter-active,
.slide-up-leave-active {
transition: transform 0.8s, opacity 0.8s ease;
}
.slide-up-enter {
transform: translate3d(0, 10px, 0);
opacity: 0;
}
.slide-up-enter-to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.slide-up-leave {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.slide-up-enter,
.slide-up-leave-to {
transform: translate3d(0, 10px, 0);
opacity: 0;
}
//transactions list transitions
.list-enter-active,
.list-leave-active {
transition: transform 0.8s, opacity 0.8s ease;
}
.list-enter {
transform: translate3d(0, 10px, 0);
opacity: 0;
}
.list-enter-to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.list-leave {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.list-leave-to {
transform: translate3d(0, 10px, 0);
opacity: 0;
}
//fade transition
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

24
src/components/Utility/CircularCheckmark.vue
View File

@ -86,33 +86,9 @@ export default {
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(1); //animated
transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
// transition-delay: 0.3s;
}
}
//reverse delay in check mark when leaving (first tick contracts, then the circle)
// .checkmark-animation-leave-active {
// &.checkmark {
// &:before {
// transition-delay: 0.2s;
// }
// .checkmark-icon {
// transition-delay: 0s;
// }
// }
// }
// .checkmark-animation-enter-active,
// .checkmark-animation-leave-active {
// transition: all 5s ease;
// &.checkmark {
// &:before {
// transition: all 5s ease;
// }
// .checkmark-icon {
// transition: all 5s ease;
// }
// }
// }
.checkmark-animation-enter-active {
&.checkmark {
.checkmark-icon {

52
src/global-styles/custom.scss
View File

@ -338,4 +338,56 @@ svg.icon-clock {
transform: translate(20px, 20px)
rotate(calc(var(--start-hours) * 30deg + 360deg));
}
}
//wallet transactions container
//Transactions
.wallet-transactions-container {
position: relative;
.transactions {
height: 20rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; //momentum scroll on iOS
}
//bottom fade
&:before {
//nice faded white so the discarded blocks don't abruptly cut off
content: "";
position: absolute;
height: 2rem;
width: 100%;
bottom: 0;
left: 0;
z-index: 2;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
);
}
//top fade
&:after {
//nice faded white so the discarded blocks don't abruptly cut off
content: "";
position: absolute;
height: 2rem;
width: 100%;
top: 0;
left: 0;
z-index: 2;
background-image: linear-gradient(
to top,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
);
}
}
.zero-wallet-transactions-container {
height: 20rem;
}
Write Preview
Loading…
Cancel
Save