mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
refactor layout, support windows and linux
This commit is contained in:
parent
7b09dc3147
commit
699a26b3f0
@ -28,7 +28,7 @@ fn main() {
|
|||||||
let main_window = app.get_window("main").unwrap();
|
let main_window = app.get_window("main").unwrap();
|
||||||
|
|
||||||
#[cfg(target_os = "macos")]
|
#[cfg(target_os = "macos")]
|
||||||
main_window.position_traffic_lights(8.0, 16.0); // set inset for traffic lights (macos)
|
main_window.position_traffic_lights(13.0, 17.0); // set inset for traffic lights (macos)
|
||||||
|
|
||||||
Ok(())
|
Ok(())
|
||||||
})
|
})
|
||||||
@ -37,7 +37,7 @@ fn main() {
|
|||||||
let apply_offset = || {
|
let apply_offset = || {
|
||||||
let win = e.window();
|
let win = e.window();
|
||||||
// keep inset for traffic lights when window resize (macos)
|
// keep inset for traffic lights when window resize (macos)
|
||||||
win.position_traffic_lights(8.0, 16.0);
|
win.position_traffic_lights(13.0, 17.0);
|
||||||
};
|
};
|
||||||
#[cfg(target_os = "macos")]
|
#[cfg(target_os = "macos")]
|
||||||
match e.event() {
|
match e.event() {
|
||||||
|
@ -1 +1 @@
|
|||||||
export { LayoutChannel as Layout } from "./layout";
|
export { DefaultLayout as Layout } from "@shared/layout";
|
||||||
|
@ -1,14 +0,0 @@
|
|||||||
import { MultiAccounts } from "@shared/multiAccounts";
|
|
||||||
import { Navigation } from "@shared/navigation";
|
|
||||||
|
|
||||||
export function LayoutChannel({ children }: { children: React.ReactNode }) {
|
|
||||||
return (
|
|
||||||
<div className="flex w-screen h-screen">
|
|
||||||
<div className="relative flex flex-row shrink-0">
|
|
||||||
<MultiAccounts />
|
|
||||||
<Navigation />
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-full">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1 +1 @@
|
|||||||
export { LayoutChat as Layout } from "./layout";
|
export { DefaultLayout as Layout } from "@shared/layout";
|
||||||
|
@ -1,14 +0,0 @@
|
|||||||
import { MultiAccounts } from "@shared/multiAccounts";
|
|
||||||
import { Navigation } from "@shared/navigation";
|
|
||||||
|
|
||||||
export function LayoutChat({ children }: { children: React.ReactNode }) {
|
|
||||||
return (
|
|
||||||
<div className="flex w-screen h-screen">
|
|
||||||
<div className="relative flex flex-row shrink-0">
|
|
||||||
<MultiAccounts />
|
|
||||||
<Navigation />
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-full">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1 +1 @@
|
|||||||
export { LayoutSpace as Layout } from "./layout";
|
export { DefaultLayout as Layout } from "@shared/layout";
|
||||||
|
@ -1,14 +0,0 @@
|
|||||||
import { MultiAccounts } from "@shared/multiAccounts";
|
|
||||||
import { Navigation } from "@shared/navigation";
|
|
||||||
|
|
||||||
export function LayoutSpace({ children }: { children: React.ReactNode }) {
|
|
||||||
return (
|
|
||||||
<div className="flex w-screen h-screen">
|
|
||||||
<div className="relative flex flex-row shrink-0">
|
|
||||||
<MultiAccounts />
|
|
||||||
<Navigation />
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-full">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1 +1 @@
|
|||||||
export { LayoutTrending as Layout } from "./layout";
|
export { DefaultLayout as Layout } from "@shared/layout";
|
||||||
|
@ -1,14 +0,0 @@
|
|||||||
import { MultiAccounts } from "@shared/multiAccounts";
|
|
||||||
import { Navigation } from "@shared/navigation";
|
|
||||||
|
|
||||||
export function LayoutTrending({ children }: { children: React.ReactNode }) {
|
|
||||||
return (
|
|
||||||
<div className="flex w-screen h-screen">
|
|
||||||
<div className="relative flex flex-row shrink-0">
|
|
||||||
<MultiAccounts />
|
|
||||||
<Navigation />
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-full">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1 +1 @@
|
|||||||
export { LayoutUser as Layout } from "./layout";
|
export { DefaultLayout as Layout } from "@shared/layout";
|
||||||
|
@ -1,14 +0,0 @@
|
|||||||
import { MultiAccounts } from "@shared/multiAccounts";
|
|
||||||
import { Navigation } from "@shared/navigation";
|
|
||||||
|
|
||||||
export function LayoutUser({ children }: { children: React.ReactNode }) {
|
|
||||||
return (
|
|
||||||
<div className="flex w-screen h-screen">
|
|
||||||
<div className="relative flex flex-row shrink-0">
|
|
||||||
<MultiAccounts />
|
|
||||||
<Navigation />
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-full">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,6 +1,17 @@
|
|||||||
import { ArrowLeftIcon, ArrowRightIcon } from "@shared/icons";
|
import { ArrowLeftIcon, ArrowRightIcon } from "@shared/icons";
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
const fetcher = async () => {
|
||||||
|
const { platform } = await import("@tauri-apps/api/os");
|
||||||
|
return platform();
|
||||||
|
};
|
||||||
|
|
||||||
export function AppHeader() {
|
export function AppHeader() {
|
||||||
|
const { data: platform } = useSWR(
|
||||||
|
typeof window !== "undefined" ? "platform" : null,
|
||||||
|
fetcher,
|
||||||
|
);
|
||||||
|
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
window.history.back();
|
window.history.back();
|
||||||
};
|
};
|
||||||
@ -12,7 +23,9 @@ export function AppHeader() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
className="flex h-11 w-full items-center justify-between border-b border-zinc-900 px-3 gap-2.5"
|
className={`flex h-11 w-full px-3 border-b border-zinc-900 items-center ${
|
||||||
|
platform === "darwin" ? "justify-end" : "justify-start"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex gap-2.5">
|
<div className="flex gap-2.5">
|
||||||
<button
|
<button
|
||||||
|
27
src/shared/layout.tsx
Normal file
27
src/shared/layout.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { Navigation } from "@shared/navigation";
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
const fetcher = async () => {
|
||||||
|
const { platform } = await import("@tauri-apps/api/os");
|
||||||
|
return platform();
|
||||||
|
};
|
||||||
|
|
||||||
|
export function DefaultLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
const { data: platform } = useSWR(
|
||||||
|
typeof window !== "undefined" ? "platform" : null,
|
||||||
|
fetcher,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`flex w-screen h-screen ${
|
||||||
|
platform === "darwin" ? "flex-row" : "flex-row-reverse"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="relative flex flex-row shrink-0">
|
||||||
|
<Navigation />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-full">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -55,7 +55,7 @@ export function Navigation() {
|
|||||||
<Disclosure defaultOpen={true}>
|
<Disclosure defaultOpen={true}>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className="flex flex-col gap-0.5 px-1.5">
|
<div className="flex flex-col gap-0.5 px-1.5">
|
||||||
<Disclosure.Button className="flex items-center gap-1 px-2.5">
|
<Disclosure.Button className="flex items-center gap-1 px-3">
|
||||||
<div
|
<div
|
||||||
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||||
open ? "" : "rotate-180"
|
open ? "" : "rotate-180"
|
||||||
@ -81,7 +81,7 @@ export function Navigation() {
|
|||||||
<Disclosure defaultOpen={true}>
|
<Disclosure defaultOpen={true}>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className="flex flex-col gap-0.5 px-1.5 pb-6">
|
<div className="flex flex-col gap-0.5 px-1.5 pb-6">
|
||||||
<Disclosure.Button className="flex items-center gap-1 px-2.5">
|
<Disclosure.Button className="flex items-center gap-1 px-3">
|
||||||
<div
|
<div
|
||||||
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||||
open ? "" : "rotate-180"
|
open ? "" : "rotate-180"
|
||||||
|
Loading…
Reference in New Issue
Block a user