From 37247b982c20f6a9984b8ecf9e29f5cf8145ebf3 Mon Sep 17 00:00:00 2001
From: Ivan Dossi <ivan.dossi@knobs.it>
Date: Tue, 7 Sep 2021 12:05:19 +0200
Subject: [PATCH] chore(UI): applied  the glowing effect to the buttons

---
 components/interactables/Button/Button.html   |  4 ++-
 components/interactables/Button/Button.less   |  3 +-
 components/interactables/Button/Button.vue    |  6 ++++
 components/tailored/core/sidebar/Sidebar.html |  4 +++
 .../ui/CustomCursorArea/CustomCursorArea.html |  4 ---
 .../ui/CustomCursorArea/CustomCursorArea.vue  | 31 -------------------
 .../GlowingCursorArea/GlowingCursorArea.html  |  4 +++
 .../GlowingCursorArea.less}                   | 30 +++++++++++++-----
 .../GlowingCursorArea/GlowingCursorArea.vue   | 29 +++++++++++++++++
 9 files changed, 69 insertions(+), 46 deletions(-)
 delete mode 100644 components/ui/CustomCursorArea/CustomCursorArea.html
 delete mode 100644 components/ui/CustomCursorArea/CustomCursorArea.vue
 create mode 100644 components/ui/GlowingCursorArea/GlowingCursorArea.html
 rename components/ui/{CustomCursorArea/CustomCursorArea.less => GlowingCursorArea/GlowingCursorArea.less} (52%)
 create mode 100644 components/ui/GlowingCursorArea/GlowingCursorArea.vue

diff --git a/components/interactables/Button/Button.html b/components/interactables/Button/Button.html
index edbb2ad50f..1d8c2ddab0 100644
--- a/components/interactables/Button/Button.html
+++ b/components/interactables/Button/Button.html
@@ -1,6 +1,7 @@
 <button 
   :class="`button is-button is-${size} is-${type} ${outlined ? 'is-outlined' : ''} is-${fullWidth ? 'full-width' : 'normal-width'} ${inactive ? 'is-inactive' : ''}`"
   v-on:click="action" :disabled="loading">
+  <UiGlowingCursorArea :class="`${!glow ? 'hide' : ''}`">
   <!-- If the button is in the loading state -->
   <div v-if="loading">
     <!-- Loading Spinner -->
@@ -15,4 +16,5 @@
     <font-awesome-icon v-if="icon" :icon="[icon.style, icon.name]" :class="`button-icon ${text.length ? 'button-icon-padded' : ''}`" />
     <span v-if="text.length">{{ text }}</span>
   </div>
-</button>
\ No newline at end of file
+</UiGlowingCursorArea>
+</button>
diff --git a/components/interactables/Button/Button.less b/components/interactables/Button/Button.less
index 771fe72f16..44cd65245b 100644
--- a/components/interactables/Button/Button.less
+++ b/components/interactables/Button/Button.less
@@ -1,5 +1,6 @@
 .button {
   min-width: 35px;
+  overflow: hidden;
   .button-icon-padded {
     margin-right: 0.25rem;
   }
@@ -7,5 +8,3 @@
 .is-full-width {
   width: 100%;
 }
-
-
diff --git a/components/interactables/Button/Button.vue b/components/interactables/Button/Button.vue
index dca75e093c..0246650a53 100644
--- a/components/interactables/Button/Button.vue
+++ b/components/interactables/Button/Button.vue
@@ -80,6 +80,12 @@ export default Vue.extend({
      */
     fullWidth: Boolean,
     inactive: Boolean,
+
+    //glowing effetc
+    glow: {
+      type: Boolean,
+      default: false,
+    },
   },
 })
 </script>
diff --git a/components/tailored/core/sidebar/Sidebar.html b/components/tailored/core/sidebar/Sidebar.html
index 98036abe44..5ab6d5a967 100644
--- a/components/tailored/core/sidebar/Sidebar.html
+++ b/components/tailored/core/sidebar/Sidebar.html
@@ -31,6 +31,7 @@
           :icon="{ style: 'far', name: 'user-friends' }"
           :action="() => $router.push('/friends/list')"
           :text="$t('global.friends')"
+          :glow="true"
         />
         <span :class="$route.path.includes('/friends/list') ? 'label tag-inverted' : 'label'">
           14
@@ -44,6 +45,7 @@
         :action="() => $router.push('/files/browse')"
         :icon="{ style: 'far', name: 'folder' }"
         :text="$t('global.files')"
+        :glow="true"
       />
     </div>
 
@@ -55,6 +57,7 @@
         :icon="{ style: 'far', name: 'comment-alt-lines' }"
         :text="$t('global.messages')"
         :action="() => $store.commit('showSidebarUsers', true)"
+        :glow="true"
       />
       <InteractablesButton
         full-width
@@ -63,6 +66,7 @@
         :icon="{ style: 'far', name: 'users' }"
         :text="$t('global.groups')"
         :action="() => $store.commit('showSidebarUsers', false)"
+        :glow="true"
       />
     </div>
     <div
diff --git a/components/ui/CustomCursorArea/CustomCursorArea.html b/components/ui/CustomCursorArea/CustomCursorArea.html
deleted file mode 100644
index f86ff66b8c..0000000000
--- a/components/ui/CustomCursorArea/CustomCursorArea.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div id="custom-cursor-area" @mouseover="hideCursor = false" @mouseleave="hideCursor = true">
-    <div v-if="!hideCursor" id="custom-cursor" ref="point" :style="cursorPoint"></div>
-    <slot />
-</div>
\ No newline at end of file
diff --git a/components/ui/CustomCursorArea/CustomCursorArea.vue b/components/ui/CustomCursorArea/CustomCursorArea.vue
deleted file mode 100644
index f10178f1ca..0000000000
--- a/components/ui/CustomCursorArea/CustomCursorArea.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template src="./CustomCursorArea.html"></template>
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  data() {
-    return { xChild: 0, yChild: 0, xParent: 0, yParent: 0, hideCursor: true }
-  },
-  computed: {
-    cursorPoint(): string {
-      return `transform: translateX(${this.xChild - 15}px) translateY(${
-        this.yChild - 15
-      }px) translateZ(0) translate3d(0, 0, 0);`
-    },
-  },
-  methods: {
-    moveCursor(e: Event | any) {
-      this.xChild = e.clientX
-      this.yChild = e.clientY
-      setTimeout(() => {
-        this.xParent = e.clientX - 15
-        this.yParent = e.clientY - 15
-      }, 1000)
-    },
-  },
-  mounted() {
-    document.addEventListener('mousemove', this.moveCursor)
-  },
-})
-</script>
-<style scoped lang="less" src="./CustomCursorArea.less"></style>
diff --git a/components/ui/GlowingCursorArea/GlowingCursorArea.html b/components/ui/GlowingCursorArea/GlowingCursorArea.html
new file mode 100644
index 0000000000..c6174b6a28
--- /dev/null
+++ b/components/ui/GlowingCursorArea/GlowingCursorArea.html
@@ -0,0 +1,4 @@
+<div id="custom-cursor-area" @mousemove="moveCursor" @mouseover="hideCursor = false" @mouseleave="hideCursor = true">
+    <div v-if="!hideCursor" id="custom-cursor" ref="point" :style="cursorPoint"></div>
+    <slot />
+</div>
\ No newline at end of file
diff --git a/components/ui/CustomCursorArea/CustomCursorArea.less b/components/ui/GlowingCursorArea/GlowingCursorArea.less
similarity index 52%
rename from components/ui/CustomCursorArea/CustomCursorArea.less
rename to components/ui/GlowingCursorArea/GlowingCursorArea.less
index 7979cdffea..cfa11869f4 100644
--- a/components/ui/CustomCursorArea/CustomCursorArea.less
+++ b/components/ui/GlowingCursorArea/GlowingCursorArea.less
@@ -1,23 +1,37 @@
+#custom-cursor-area {
+  width: 100%;
+  height: 100%;
+  > * {
+    pointer-events: none;
+  }
+  &.hide {
+    #custom-cursor {
+      display: none;
+    }
+  }
+}
+
 #custom-cursor {
   top: 0;
   left: 0;
-  position: fixed;
-  width: 30px;
-  height: 30px;
+  position: absolute;
+  width: 80px;
+  height: 80px;
   pointer-events: none;
   user-select: none;
   border-radius: 100%;
   z-index: 55555555;
   backface-visibility: hidden;
   will-change: transform;
-  box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
-  -webkit-animation: pulse 2s linear 1s infinite;
+  // box-shadow: 0 0 8px #fff, inset 0 0 8px #fff;
+  // -webkit-animation: pulse 2s linear 1s infinite;
   background: -webkit-radial-gradient(
+    rgba(255, 255, 255, 1),
     rgba(255, 255, 255, 0.2),
-    rgba(255, 255, 255, 0.4),
-    rgba(255, 255, 255, 0.7)
+    rgba(134, 86, 86, 0.1)
   );
-  opacity: 0.4;
+  box-shadow: 120px 80px 40px 20px #000;
+  opacity: 0.1;
 }
 
 @-webkit-keyframes pulse {
diff --git a/components/ui/GlowingCursorArea/GlowingCursorArea.vue b/components/ui/GlowingCursorArea/GlowingCursorArea.vue
new file mode 100644
index 0000000000..ac105eaf54
--- /dev/null
+++ b/components/ui/GlowingCursorArea/GlowingCursorArea.vue
@@ -0,0 +1,29 @@
+<template src="./GlowingCursorArea.html"></template>
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return { xChild: 0, yChild: 0, hideCursor: true }
+  },
+  computed: {
+    cursorPoint(): string {
+      return `transform: translateX(${this.xChild - 25}px) translateY(${
+        this.yChild - 25
+      }px) translateZ(0) translate3d(0, 0, 0);`
+    },
+  },
+  methods: {
+    moveCursor(e: Event | any) {
+      let bounds = e.target.getBoundingClientRect()
+
+      this.xChild = e.clientX - bounds.left
+      this.yChild = e.clientY - bounds.top
+    },
+  },
+  mounted() {
+    // document.addEventListener('mousemove', this.moveCursor)
+  },
+})
+</script>
+<style scoped lang="less" src="./GlowingCursorArea.less"></style>