mozzie/hamster-desktop
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: layout

Browse Source
This commit is contained in:
mozzie 2024-07-18 11:47:59 +08:00
parent 0346d4b964
commit 375876ad77
2 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/Layout.css
View File

@ -1,15 +1,18 @@
/* Layout.css */ /* Layout.css */
.custom-tab-strip{ .custom-tab-strip {
border-bottom-color: hsl(var(--border)); border-bottom-color: hsl(var(--border));
padding-left: 0;
} }
/* 覆盖默认的 FlexLayout 分割线选中颜色 */ .flexlayout__tabset_tabbar_inner_tab_container {
.custom-layout-class .flexlayout__splitter_drag { border-top: 0;
background-color: blue; padding-left: 0;
/* 选中时的颜色 */
} }
.custom-layout-class .flexlayout__splitter:hover { .flexlayout__tab_button--selected {
background-color: lightblue; background: hsl(var(--secondary));
/* 鼠标悬停时的颜色 */ }
.flexlayout__tabset-selected {
background: transparent;
} }

32
src/pages/Layout.tsx
View File

@ -2,31 +2,27 @@ import { Button } from "@/components/ui/button";
import { CommandDialogDemo } from "./CommandDialogDemo"; import { CommandDialogDemo } from "./CommandDialogDemo";
import FlexLayoutComponent from "./FlexLayoutDemo"; import FlexLayoutComponent from "./FlexLayoutDemo";
import { VscLayoutSidebarLeftOff } from "react-icons/vsc"; import { VscLayoutSidebarLeftOff } from "react-icons/vsc";
import { useEffect, useState } from "react";
const LayoutMain = () => { const LayoutMain = () => {
const platform = document.querySelector('html')?.getAttribute('platform') const platform =
const titlebarStyles = platform === 'macos' ? 'pl-[10rem] pr-[2rem]' : 'pr-[10rem] pl-[2rem]' document.querySelector("html")?.getAttribute("platform") ?? "macos";
const titleBarStyles =
platform === "macos" ? "pl-[5rem] pr-[.5rem]" : "pr-[10rem] pl-[2rem]";
return ( return (
<div className="h-screen"> <div className="h-full">
{/* 此处height和 new BrowserWindow的titleBar设置一致 */} <div className={`title-bar drag border h-[36px] ${titleBarStyles}`}>
<div 标题栏
className={`drag bg ${titlebarStyles} flex items-center justify-between`}
style={{ height: 36 }}
>
<div className="left">1</div>
<div className="no-drag inline-flex">
<CommandDialogDemo />
</div> </div>
<div className="right no-drag"> <div className="relative h-[calc(100%-36px)]">
<button className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-6 w-6"> <div className="flex h-full">
<VscLayoutSidebarLeftOff /> <div className="workspace w-[36px] h-full border-r">123</div>
</button> <div className="relative w-[calc(100%-36px)] h-full">
</div>
</div>
<div className="h-[calc(100%-36px)] relative">
<FlexLayoutComponent /> <FlexLayoutComponent />
</div> </div>
</div> </div>
</div>
</div>
); );
}; };