mirror of
https://github.com/yamadashy/repomix.git
synced 2025-06-11 00:25:54 +03:00
fix(website): Address PR review feedback for tooltip functionality
- Use onUnmounted for proper event listener cleanup instead of return function - Move mouseenter event to tooltip-container to handle disabled button cases - Remove duplicate CSS definition for .desktop-only class - Ensure v-if condition is properly applied to mobile-only spacer div 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,7 +4,7 @@ import themeTomorrowUrl from 'ace-builds/src-noconflict/theme-tomorrow?url';
|
|||||||
import themeTomorrowNightUrl from 'ace-builds/src-noconflict/theme-tomorrow_night?url';
|
import themeTomorrowNightUrl from 'ace-builds/src-noconflict/theme-tomorrow_night?url';
|
||||||
import { BarChart2, Copy, Download, GitFork, HeartHandshake, PackageSearch, Share, Star } from 'lucide-vue-next';
|
import { BarChart2, Copy, Download, GitFork, HeartHandshake, PackageSearch, Share, Star } from 'lucide-vue-next';
|
||||||
import { useData } from 'vitepress';
|
import { useData } from 'vitepress';
|
||||||
import { computed, onMounted, ref, watch } from 'vue';
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||||
import { VAceEditor } from 'vue3-ace-editor';
|
import { VAceEditor } from 'vue3-ace-editor';
|
||||||
import type { PackResult } from '../api/client';
|
import type { PackResult } from '../api/client';
|
||||||
import {
|
import {
|
||||||
@@ -73,6 +73,12 @@ const handleShare = async (event: Event) => {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
|
// Only allow sharing on mobile devices with Web Share API support
|
||||||
|
if (!isMobile.value || !canShare.value) {
|
||||||
|
console.log('Share is only available on mobile devices');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const success = await shareResult(props.result.content, props.result.format, props.result);
|
const success = await shareResult(props.result.content, props.result.format, props.result);
|
||||||
if (success) {
|
if (success) {
|
||||||
shared.value = true;
|
shared.value = true;
|
||||||
@@ -125,18 +131,17 @@ const supportMessage = computed(() => ({
|
|||||||
color: messages[currentMessageIndex.value].color,
|
color: messages[currentMessageIndex.value].color,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
isMobile.value = window.innerWidth <= 768;
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
isMobile.value = window.innerWidth <= 768;
|
isMobile.value = window.innerWidth <= 768;
|
||||||
|
|
||||||
const handleResize = () => {
|
|
||||||
isMobile.value = window.innerWidth <= 768;
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
|
||||||
return () => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', handleResize);
|
window.removeEventListener('resize', handleResize);
|
||||||
};
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -198,14 +203,13 @@ onMounted(() => {
|
|||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
<div v-if="canShare" class="mobile-only" style="flex-basis: 100%"></div>
|
<div v-if="canShare" class="mobile-only" style="flex-basis: 100%"></div>
|
||||||
<div v-if="canShare" class="tooltip-container" ref="tooltipContainer">
|
<div v-if="canShare" class="tooltip-container" ref="tooltipContainer" @mouseenter="updateTooltipPosition">
|
||||||
<button
|
<button
|
||||||
class="action-button"
|
class="action-button"
|
||||||
@click="handleShare"
|
@click="handleShare"
|
||||||
:class="{ shared }"
|
:class="{ shared }"
|
||||||
:disabled="!isMobile"
|
:disabled="!isMobile"
|
||||||
aria-label="Share output via mobile apps"
|
aria-label="Share output via mobile apps"
|
||||||
@mouseenter="updateTooltipPosition"
|
|
||||||
>
|
>
|
||||||
<Share :size="16" />
|
<Share :size="16" />
|
||||||
{{ shared ? 'Shared!' : 'Open with your app' }}
|
{{ shared ? 'Shared!' : 'Open with your app' }}
|
||||||
@@ -454,10 +458,6 @@ dd {
|
|||||||
.mobile-only {
|
.mobile-only {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desktop-only {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-container {
|
.tooltip-container {
|
||||||
|
|||||||
Reference in New Issue
Block a user