From d2b82bfa1b2e303f4dc47c56a4b2100f113b64a1 Mon Sep 17 00:00:00 2001 From: Dominic Villemure Date: Fri, 23 Aug 2024 18:23:41 -0400 Subject: [PATCH 1/7] Save locale in local storage to keep it --- src/views/main/Header.vue | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue index 275890c..e75c0ac 100644 --- a/src/views/main/Header.vue +++ b/src/views/main/Header.vue @@ -152,13 +152,8 @@ const router = useRouter(); const searchQuery = ref(""); const showSearch = ref(false); -// List of available languages -const selectedLanguage = ref(locale.value); - -function changeLanguage(lang) { - locale.value = lang; - selectedLanguage.value = lang; -} +let selectedLanguage = ref('fr'); +initializeLocale(); const onSearch = () => { const query = searchQuery.value.trim(); @@ -196,6 +191,18 @@ onBeforeUnmount(() => { document.removeEventListener('click', handleClickOutside); }); +function initializeLocale(){ + const preferredLocale = localStorage.getItem('preferredLocale'); + selectedLanguage = ref(preferredLocale === null ? locale.value : preferredLocale); + locale.value = selectedLanguage.value; +} + +function changeLanguage(lang) { + locale.value = lang; + selectedLanguage.value = lang; + localStorage.setItem('preferredLocale', lang); +} + diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue index 50a8acf..96f396c 100644 --- a/src/views/contents/contentcards/NContentCard.vue +++ b/src/views/contents/contentcards/NContentCard.vue @@ -64,12 +64,8 @@
- - mdi-thumb-up-outline - - - mdi-thumb-down-outline - + +
- - mdi-thumb-up-outline - - - mdi-thumb-down-outline - + +
- - mdi-thumb-up-outline - - - mdi-thumb-down-outline - + { try { const response = await client.get(`/api/contents/${contentId}`); data.value = response.data; - console.table(data.value) } catch (error) { console.error(`Error fetching content: ${error}`); } diff --git a/src/views/contents/contentfullscreen/FullScreenContentSm.vue b/src/views/contents/contentfullscreen/FullScreenContentSm.vue index 4b1efc7..bd2db26 100644 --- a/src/views/contents/contentfullscreen/FullScreenContentSm.vue +++ b/src/views/contents/contentfullscreen/FullScreenContentSm.vue @@ -53,12 +53,7 @@
- - mdi-thumb-up-outline - - - mdi-thumb-down-outline - + { try { const response = await client.get(`/api/contents/${contentId}`); data.value = response.data; - console.table(data.value) } catch (error) { console.error(`Error fetching content: ${error}`); } diff --git a/src/views/creators/DonationButton.vue b/src/views/creators/DonationButton.vue index 9b66620..361f94f 100644 --- a/src/views/creators/DonationButton.vue +++ b/src/views/creators/DonationButton.vue @@ -76,12 +76,12 @@ import {loadStripe} from '@stripe/stripe-js'; import {computed, onMounted, ref} from 'vue'; const props = defineProps({ - colorBorder: {type: String, required: true}, - colorAccent: {type: String, required: true}, + colorBorder: {required: true}, + colorAccent: {required: true}, creatorId: {type: String, required: true}, creatorName: {type: String, required: true}, - creatorLogo: {type: String, required: true}, - iconColorClass: {type: String, default: 'text-black'} + creatorLogo: {required: true}, + iconColorClass: {default: 'text-black'} }); const colorBorder = computed(() => props.colorBorder) From b6e4fa1b6c65eb84744eb5632d604a48c08d6b27 Mon Sep 17 00:00:00 2001 From: Dominic Villemure Date: Sat, 24 Aug 2024 18:44:47 -0400 Subject: [PATCH 3/7] fixed delay --- src/views/contents/Reaction.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/contents/Reaction.vue b/src/views/contents/Reaction.vue index 6dc6577..3ac96a1 100644 --- a/src/views/contents/Reaction.vue +++ b/src/views/contents/Reaction.vue @@ -187,11 +187,11 @@ function showReactions() { function hideReactions() { hideTimeout.value = setTimeout(() => { menuVisible.value = false; - }, 1500); // Delay for 0.5 seconds before hiding + }, 250); } function onMouseDown() { - holdTimeout.value = setTimeout(showReactions, 1500); + holdTimeout.value = setTimeout(showReactions, 250); } function onMouseUp() { From 3536122206431c56354592302cb23895fc8971e6 Mon Sep 17 00:00:00 2001 From: Dominic Villemure Date: Sat, 24 Aug 2024 18:55:56 -0400 Subject: [PATCH 4/7] touchTimeout for mobile --- src/views/contents/Reaction.vue | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/views/contents/Reaction.vue b/src/views/contents/Reaction.vue index 3ac96a1..1919688 100644 --- a/src/views/contents/Reaction.vue +++ b/src/views/contents/Reaction.vue @@ -28,6 +28,7 @@ const angryCount = ref(0); const menuVisible = ref(false); const holdTimeout = ref(null); const hideTimeout = ref(null); +const touchTimeout = ref(null); initializeReactions(); @@ -75,6 +76,9 @@ async function reactToContent(reaction) { hasReacted.value = false; console.log("Reaction to content removed."); } + setTimeout(() => { + menuVisible.value = false; + }, 500); } function adjustReactionCount(newReaction) { @@ -190,8 +194,13 @@ function hideReactions() { }, 250); } -function onMouseDown() { - holdTimeout.value = setTimeout(showReactions, 250); +function onTouchStart() { + touchTimeout.value = setTimeout(() => { + menuVisible.value = true; + }, 250); +} +function onTouchEnd() { + clearTimeout(touchTimeout.value); } function onMouseUp() { @@ -235,7 +244,8 @@ function isMobileDevice() { v-bind="attrs" :on="on" variant="plain" - @mousedown="onMouseDown" + @touchstart="onTouchStart" + @touchend="onTouchEnd" @mouseup="onMouseUp" @mouseover="onMouseOver" @mouseleave="onMouseLeave" From 28d2de8b7b1eff16682910891a022047aa733b97 Mon Sep 17 00:00:00 2001 From: Dominic Villemure Date: Sat, 24 Aug 2024 18:59:55 -0400 Subject: [PATCH 5/7] attach to element instead --- src/views/contents/Reaction.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/contents/Reaction.vue b/src/views/contents/Reaction.vue index 1919688..63bbc92 100644 --- a/src/views/contents/Reaction.vue +++ b/src/views/contents/Reaction.vue @@ -237,7 +237,7 @@ function isMobileDevice() { offset-y :close-on-content-click="false" transition="scale-transition" - attach=".reaction-wrapper" + :attach="$el" > @@ -260,26 +260,52 @@ function isMobileDevice() { @mouseover="keepReactionMenuOpen" @mouseleave="hideReactions" > - - mdi-heart-outline - {{ loveCount }} - - - mdi-emoticon-excited-outline - {{ hahaCount }} - - - mdi-emoticon-happy-outline - {{ wowCount }} - - - mdi-emoticon-sad-outline - {{ sadCount }} - - - mdi-emoticon-angry-outline - {{ angryCount }} - + + mdi-thumb-down-outline + + + + mdi-heart-outline + {{ loveCount }} + + + + mdi-emoticon-excited-outline + {{ hahaCount }} + + + + mdi-emoticon-happy-outline + {{ wowCount }} + + + + mdi-emoticon-sad-outline + {{ sadCount }} + + + + mdi-emoticon-angry-outline + {{ angryCount }} +
@@ -293,4 +319,9 @@ function isMobileDevice() { margin-top: -35px; margin-left: 50px; } + +.active-icon { + color: blue; + stroke: blue; +}