Koha9/PlexPlaylistSync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Added the OverflowMarquee, implemented auto-scrolling text.

Browse Source
This commit is contained in:
Koha9
2025-12-14 01:04:26 +09:00
parent 5c6b0b0444
commit a7c3b544fa
5 changed files with 174 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/App.tsx
+10 -3
View File
@@ -15,6 +15,7 @@ import { SYNC_BANNER_PADDING_X, SYNC_BANNER_PADDING_Y, SYNC_BANNER_MIN_WIDTH } f
import ServerPanel from './components/ServerPanel';
import StrategySelector from './components/StrategySelector';
import ConnectionModal from './components/ConnectionModal';
import OverflowMarquee from './components/OverflowMarquee';
import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff, Type, Code2, Archive, Languages } from 'lucide-react';
import { useLanguage } from './LanguageContext';
@@ -685,7 +686,9 @@ const App: React.FC = () => {
<span className={`text-[9px] font-bold uppercase tracking-widest transition-colors ${pathMappingInfo.active ? 'text-plex-orange' : 'text-gray-500 group-hover/item:text-gray-400'}`}>{pathMappingInfo.label}</span>
<div className={`flex items-center gap-1.5 text-xs font-medium ${pathMappingInfo.active ? 'text-blue-400' : 'text-gray-600'}`}>
<pathMappingInfo.Icon size={12} strokeWidth={2.5} className="flex-shrink-0" />
<span className="truncate">{pathMappingInfo.active ? pathMappingInfo.value : t('common.none')}</span>
<OverflowMarquee>
{pathMappingInfo.active ? pathMappingInfo.value : t('common.none')}
</OverflowMarquee>
</div>
</div>
@@ -694,7 +697,9 @@ const App: React.FC = () => {
<span className={`text-[9px] font-bold uppercase tracking-widest transition-colors ${backupInfo.active ? 'text-plex-orange' : 'text-gray-500 group-hover/item:text-gray-400'}`}>{backupInfo.label}</span>
<div className={`flex items-center gap-1.5 text-xs font-medium ${backupInfo.active ? 'text-indigo-400' : 'text-gray-600'}`}>
<Archive size={12} strokeWidth={2.5} className="flex-shrink-0" />
<span className="truncate">{backupInfo.active ? t('dashboard.retain', { count: backupSettings.retentionCount }) : backupInfo.value}</span>
<OverflowMarquee>
{backupInfo.active ? t('dashboard.retain', { count: backupSettings.retentionCount }) : backupInfo.value}
</OverflowMarquee>
</div>
</div>
@@ -713,7 +718,9 @@ const App: React.FC = () => {
</div>
<div className={`flex items-center gap-1.5 text-xs font-medium mt-0.5 ${scheduleInfo.active ? 'text-green-400' : 'text-gray-600'}`}>
<Clock size={12} strokeWidth={2.5} className="flex-shrink-0" />
<span className="truncate">{scheduleInfo.active ? scheduleInfo.value : t('common.disabled')}</span>
<OverflowMarquee>
{scheduleInfo.active ? scheduleInfo.value : t('common.disabled')}
</OverflowMarquee>
</div>
</div>
</div>