[Android] Remote access: manage click on main icon
Nicolas Pomepuy
git at videolan.org
Wed Mar 6 07:52:32 UTC 2024
vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Fri Mar 1 10:29:19 2024 +0100| [8400d810271a2566e3e89fd30ebdca801a2ef0c2] | committer: Duncan McNamara
Remote access: manage click on main icon
> https://code.videolan.org/videolan/vlc-android/commit/8400d810271a2566e3e89fd30ebdca801a2ef0c2
---
.../src/components/AppHeader.vue | 107 ++++++++++++++++++++-
1 file changed, 105 insertions(+), 2 deletions(-)
diff --git a/buildsystem/network-sharing-server/src/components/AppHeader.vue b/buildsystem/network-sharing-server/src/components/AppHeader.vue
index a8341758fe..32e2687495 100644
--- a/buildsystem/network-sharing-server/src/components/AppHeader.vue
+++ b/buildsystem/network-sharing-server/src/components/AppHeader.vue
@@ -1,7 +1,7 @@
<template>
<nav class="navbar navbar-light navbar-expand-md shadow-sm sticky-top align-items-center container-fluid main-navbar">
<RouterLink class="flex1" :to="{ name: 'VideoList' }">
- <img id="logo" v-bind:src="$getAppAsset('ic_icon', 48, true)" width="48">
+ <img id="logo" v-bind:src="$getAppAsset('ic_icon', 48, true)" width="48" v-on:click="iconClick()" v-bind:class="this.clicked > 2 && this.clicked % 2 == 1 ? 'animate' : ''">
</RouterLink>
<div class="d-flex justify-content-center">
<RouterLink :to="{ name: 'VideoList' }">
@@ -145,6 +145,11 @@ export default {
components: {
ImageButton,
},
+ data() {
+ return {
+ clicked: 0
+ }
+ },
methods: {
disconnectedClicked() {
this.$root.startWebSocket();
@@ -167,6 +172,9 @@ export default {
},
changeTheme () {
this.appStore.darkTheme = !this.appStore.darkTheme
+ },
+ iconClick() {
+ this.clicked++
}
},
computed: {
@@ -241,4 +249,99 @@ export default {
.cursor-pointer {
cursor: pointer;
-}</style>
\ No newline at end of file
+}
+
+.animate {
+ animation-name: rotating, bounce, jello;
+ animation-duration: 1000ms, 1000ms, 1000ms;
+ animation-delay: 0ms, 1000ms, 1000ms;
+
+}
+
+ at keyframes rotating {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg) translateY(-23px);
+
+ }
+}
+
+ at keyframes bounce {
+ 0% {
+ animation-timing-function: ease-in;
+ opacity: 1;
+ transform: translateY(-23px);
+ }
+
+ 24% {
+ opacity: 1;
+ }
+
+ 40% {
+ animation-timing-function: ease-in;
+ transform: translateY(-12px);
+ }
+
+ 65% {
+ animation-timing-function: ease-in;
+ transform: translateY(-6px);
+ }
+
+ 82% {
+ animation-timing-function: ease-in;
+ transform: translateY(-3px);
+ }
+
+ 93% {
+ animation-timing-function: ease-in;
+ transform: translateY(-2px);
+ }
+
+ 25%,
+ 55%,
+ 75%,
+ 87% {
+ animation-timing-function: ease-out;
+ transform: translateY(0px);
+ }
+
+ 100% {
+ animation-timing-function: ease-out;
+ opacity: 1;
+ transform: translateY(0px);
+ }
+}
+
+ at keyframes jello {
+ 0% {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 30% {
+ transform: scale3d(1.1, 0.9, 1);
+ }
+
+ 40% {
+ transform: scale3d(0.9, 1.1, 1);
+ }
+
+ 50% {
+ transform: scale3d(1.05, 0.95, 1);
+ }
+
+ 65% {
+ transform: scale3d(0.98, 1.02, 1);
+ }
+
+ 75% {
+ transform: scale3d(1.02, 0.98, 1);
+ }
+
+ 100% {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+</style>
\ No newline at end of file
More information about the Android
mailing list