FIX: Drag drop, ui/ux
This commit is contained in:
@@ -2,34 +2,30 @@ import { Link } from "@tanstack/react-router";
|
||||
import useModalStore from "@/stores/modalStore";
|
||||
import { Blend, BookOpen, Diff, Home, Info, Languages, Minus, Puzzle, Settings, TrendingUpDown, Wrench, X } from "lucide-react";
|
||||
import { AppService } from "@bindings/firefly-launcher/internal/app-service";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function Header() {
|
||||
const { setIsOpenSettingModal } = useModalStore()
|
||||
|
||||
const controlButtons = [
|
||||
{
|
||||
icon: <Settings className="w-5 h-5 text-white" />,
|
||||
icon: <Settings className="w-5 h-5" />,
|
||||
action: () => setIsOpenSettingModal(true),
|
||||
tip: "Settings",
|
||||
hover: { rotate: 20, color: "#ffffff" },
|
||||
},
|
||||
{
|
||||
icon: <Minus className="w-5 h-5 text-white" />,
|
||||
icon: <Minus className="w-5 h-5" />,
|
||||
action: () => AppService.MinimizeApp(),
|
||||
tip: "Minimize",
|
||||
hover: { rotate: 20, color: "#ffffff" },
|
||||
},
|
||||
{
|
||||
icon: <X className="w-5 h-5 text-white" />,
|
||||
icon: <X className="w-5 h-5" />,
|
||||
action: () => AppService.CloseApp(),
|
||||
tip: "Close",
|
||||
hover: {color: "#ffffff", rotate: -10 },
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="navbar sticky top-0 z-50 px-3">
|
||||
<div className="navbar sticky top-0 z-50 px-3" style={{ '--wails-draggable': 'drag' } as any}>
|
||||
<div className="navbar-start">
|
||||
<div className="dropdown">
|
||||
<div tabIndex={0} role="button" className="btn btn-ghost md:hidden">
|
||||
@@ -58,17 +54,32 @@ export default function Header() {
|
||||
<li><Link to="/about">About</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<Link to="/" className="grid grid-cols-1 items-start text-left gap-0 hover:scale-105 px-2">
|
||||
<Link to="/" className="grid grid-cols-1 items-start text-left gap-0">
|
||||
<div className="flex items-center justify-center">
|
||||
<img src="/appicon.png" alt="Logo" className='w-13 h-13 rounded-lg mx-2' />
|
||||
<div className="flex flex-col justify-center items-start">
|
||||
<h1 className="text-xl font-bold">
|
||||
<span className="text-emerald-500">Firefly </span>
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-orange-500 to-red-500">
|
||||
<span className="text-emerald-500"
|
||||
style={{
|
||||
textShadow: '0 1px 2px rgba(255, 255, 255, 0.2)',
|
||||
}}
|
||||
>Firefly </span>
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-orange-500 to-red-500"
|
||||
style={{
|
||||
textShadow: '0 1px 2px rgba(255, 255, 255, 0.2)',
|
||||
}}
|
||||
>
|
||||
Launcher
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">By Kain</p>
|
||||
<p
|
||||
className="text-white text-sm"
|
||||
style={{
|
||||
textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
|
||||
}}
|
||||
>
|
||||
By Kain
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -135,14 +146,14 @@ export default function Header() {
|
||||
<div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm rounded-lg">
|
||||
{controlButtons.map((btn, i) => (
|
||||
<div key={i} className="tooltip tooltip-bottom" data-tip={btn.tip}>
|
||||
<motion.button
|
||||
whileHover={btn.hover}
|
||||
transition={{ type: "spring"}}
|
||||
<button
|
||||
onClick={btn.action}
|
||||
className="btn btn-ghost btn-circle bg-transparent border-none flex items-center justify-center"
|
||||
>
|
||||
{btn.icon}
|
||||
</motion.button>
|
||||
<div className="hover:text-cyan-300 transition-colors">
|
||||
{btn.icon}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -280,11 +280,11 @@ export default function LauncherPage() {
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<header className="hidden sm:flex fixed z-10 items-center justify-between p-6 ">
|
||||
<div className="text-2xl font-bold text-white bg-black/5 backdrop-blur-md rounded-full p-2">Firefly GO</div>
|
||||
<header className="hidden sm:flex fixed z-10 items-center justify-between py-6 px-4 ">
|
||||
<div className="text-2xl font-bold text-white bg-gray-500/5 rounded-full p-1">Firefly GO</div>
|
||||
</header>
|
||||
|
||||
<div className="hidden sm:flex fixed top-1/4 right-4 z-10 flex-col space-y-3 bg-black/30 backdrop-blur-md rounded-xl p-3 shadow-lg">
|
||||
<div className="hidden sm:flex fixed top-1/4 right-4 z-10 flex-col space-y-3 bg-white/5 rounded-xl p-3 shadow-lg">
|
||||
{widgetLinks.map((link, idx) => (
|
||||
<div key={idx} className="tooltip tooltip-left" data-tip={link.tooltip}>
|
||||
<a
|
||||
@@ -399,7 +399,7 @@ export default function LauncherPage() {
|
||||
|| !updateData.proxy.isExists
|
||||
|| !updateData.server.isExists
|
||||
) && (
|
||||
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-10 w-[60vw] bg-black/20 backdrop-blur-sm rounded-lg p-4 shadow-lg">
|
||||
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-10 w-[60vw] bg-black/20 backdrop-blur-sm rounded-lg p-4 shadow-lg">
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-center items-center text-sm text-white/80">
|
||||
<span>{downloadType}</span>
|
||||
@@ -468,10 +468,50 @@ export default function LauncherPage() {
|
||||
|
||||
{/* Version Info */}
|
||||
{serverReady && proxyReady && !isDownloading && (
|
||||
<div className="hidden md:block fixed bottom-4 left-4 z-10 text-sm font-bold bg-black/5 backdrop-blur-md rounded-lg p-2 shadow">
|
||||
<p className="text-primary">Version server: {serverVersion}</p>
|
||||
<p className="mt-2 text-secondary">Version proxy: {proxyVersion}</p>
|
||||
<p className="mt-2 text-success">Version launcher: {launcherVersion}</p>
|
||||
<div className="hidden md:block fixed bottom-4 left-4 z-10 text-sm font-bold bg-white/5 rounded-lg p-2 shadow">
|
||||
<p className="text-pink-600 "
|
||||
style={{
|
||||
textShadow: `
|
||||
0.5px 0 rgba(255, 255, 255, 0.5),
|
||||
-0.5px 0 rgba(255, 255, 255, 0.5),
|
||||
0 0.5px rgba(255, 255, 255, 0.5),
|
||||
0 -0.5px rgba(255, 255, 255, 0.5),
|
||||
0.5px 0.5px rgba(255, 255, 255, 0.5),
|
||||
-0.5px -0.5px rgba(255, 255, 255, 0.5),
|
||||
0.5px -0.5px rgba(255, 255, 255, 0.5),
|
||||
-0.5px 0.5px rgba(255, 255, 255, 0.5)
|
||||
`,
|
||||
}}
|
||||
>Version server: {serverVersion}</p>
|
||||
<p
|
||||
className="mt-2 text-purple-600"
|
||||
style={{
|
||||
textShadow: `
|
||||
0.5px 0 rgba(255, 255, 255, 0.5),
|
||||
-0.5px 0 rgba(255, 255, 255, 0.5),
|
||||
0 0.5px rgba(255, 255, 255, 0.5),
|
||||
0 -0.5px rgba(255, 255, 255, 0.5),
|
||||
0.5px 0.5px rgba(255, 255, 255, 0.5),
|
||||
-0.5px -0.5px rgba(255, 255, 255, 0.5),
|
||||
0.5px -0.5px rgba(255, 255, 255, 0.5),
|
||||
-0.5px 0.5px rgba(255, 255, 255, 0.5)
|
||||
`,
|
||||
}}
|
||||
>Version proxy: {proxyVersion}</p>
|
||||
<p className="mt-2 text-cyan-600 "
|
||||
style={{
|
||||
textShadow: `
|
||||
0.5px 0 rgba(255, 255, 255, 0.5),
|
||||
-0.5px 0 rgba(255, 255, 255, 0.5),
|
||||
0 0.5px rgba(255, 255, 255, 0.5),
|
||||
0 -0.5px rgba(255, 255, 255, 0.5),
|
||||
0.5px 0.5px rgba(255, 255, 255, 0.5),
|
||||
-0.5px -0.5px rgba(255, 255, 255, 0.5),
|
||||
0.5px -0.5px rgba(255, 255, 255, 0.5),
|
||||
-0.5px 0.5px rgba(255, 255, 255, 0.5)
|
||||
`,
|
||||
}}
|
||||
>Version launcher: {launcherVersion}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -61,4 +61,3 @@ func (a *AppService) RestoreApp() (bool, string) {
|
||||
window.Restore()
|
||||
return true, ""
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ const ProxyZipFile = "64bit.zip"
|
||||
const LauncherFile = "firefly-launcher.exe"
|
||||
const TempUrl = "./temp"
|
||||
|
||||
const CurrentLauncherVersion = "2.2.0"
|
||||
const CurrentLauncherVersion = "2.2.1"
|
||||
|
||||
type ToolFile string
|
||||
|
||||
|
||||
Reference in New Issue
Block a user