ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: define drag areas in electron

Browse Source
This commit is contained in:
Tristan Yang
2023-07-04 11:33:35 +08:00
parent 69df0ccb1d
commit 976e4ce7ed
11 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/index.css
+7
View File
@@ -7,6 +7,13 @@
}
}
@layer utilities {
/* for electron */
.app-drag {
-webkit-app-region: drag;
}
.app-no-drag {
-webkit-app-region: no-drag;
}
/* word break */
.wb {
word-break: break-word;
src/components/BlankPlaceholder.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleUserListVisible;
return (
<>
<div className="flex flex-col gap-8 -mt-[50px] dark:bg-gray-700">
<div className="flex flex-col gap-8 -mt-[50px] dark:bg-gray-700 app-no-drag">
<div className="flex flex-col gap-2 items-center group px-4">
<h2 className="text-center text-3xl text-slate-700 dark:text-white font-bold">
{t("title", { name: server.name })}
src/components/Modal.tsx
+1
View File
@@ -17,6 +17,7 @@ const Modal: FC<PropsWithChildren<Props>> = ({ id = "root-modal", mask = true, c
}
const wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
wrapper.classList.add("app-no-drag");
modalRoot.appendChild(wrapper);
setWrapper(wrapper);
return () => {
src/components/StyledSettingContainer.tsx
+6 -4
View File
@@ -36,13 +36,14 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
<div className="w-screen h-screen flex">
<div
className={clsx(
"app-drag",
"h-full w-full overflow-y-scroll md:max-w-[212px] px-4 py-8 bg-neutral-100 dark:bg-gray-800",
nav && "hidden md:block"
)}
>
<h2
onClick={closeModal}
className="hidden md:flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white"
className="app-no-drag hidden md:flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white"
>
<IconBack className="dark:fill-gray-400" /> {title}
</h2>
@@ -51,7 +52,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
<ul
key={title}
data-title={title}
className="flex flex-col gap-0.5 mb-5 md:mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400"
className="app-no-drag flex flex-col gap-0.5 mb-5 md:mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400"
>
{items.map(({ name, link, title }) => {
if (link)
@@ -91,7 +92,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
);
})}
{dangers.length ? (
<ul className="flex flex-col gap-2 mb-9 md:text-sm font-semibold text-red-500 dark:text-red-400">
<ul className="app-no-drag flex flex-col gap-2 mb-9 md:text-sm font-semibold text-red-500 dark:text-red-400">
{dangers.map((d) => {
if (typeof d === "boolean" || !d) return null;
const { title, handler } = d;
@@ -110,6 +111,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
</div>
<div
className={clsx(
"app-drag",
"relative bg-white w-full max-h-full overflow-auto px-4 md:px-8 py-2 md:py-8 dark:bg-gray-700",
!nav ? "hidden md:block" : "!pb-4"
)}
@@ -121,7 +123,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
</h4>
)}
{/* <ErrorCatcher> */}
{children}
<div className="app-no-drag">{children}</div>
{/* </ErrorCatcher> */}
</div>
</div>
src/routes/chat/GuestBlankPlaceholder.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const GuestBlankPlaceholder = () => {
};
const qrUrl = BASE_ORIGIN;
return (
<section className="flex flex-col items-center text-center">
<section className="flex flex-col items-center text-center app-no-drag">
<h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold">
{t("welcome", { name: serverName })}
</h2>
src/routes/chat/Layout/index.tsx
+4 -4
View File
@@ -94,10 +94,10 @@ const Layout: FC<Props> = ({
return (
<>
<ImagePreview container={messagesContainer.current} />
<section ref={drop} className={`relative h-full w-full rounded-r-2xl flex`}>
<main className="flex flex-col flex-1">
<section ref={drop} className={`app-no-drag relative h-full w-full rounded-r-2xl flex`}>
<main className="app-drag flex flex-col flex-1">
{header}
<div className="w-full h-full flex items-start justify-between relative">
<div className="app-no-drag w-full h-full flex items-start justify-between relative">
<div
className="rounded-br-2xl flex flex-col absolute bottom-0 w-full h-full"
ref={messagesContainer}
@@ -125,7 +125,7 @@ const Layout: FC<Props> = ({
{aside && (
<div
className={clsx(
"flex z-50 p-3 absolute right-0 top-14 md:right-0 md:top-0 md:translate-x-full flex-col"
"app-no-drag flex z-50 p-3 absolute right-0 top-14 md:right-0 md:top-0 md:translate-x-full flex-col"
)}
>
{aside}
src/routes/chat/VoiceFullscreen.tsx
+2 -2
View File
@@ -63,9 +63,9 @@ const VoiceFullscreen = ({ id, context }: Props) => {
const membersData = voicingMembers.byId;
const hasPin = typeof pinUid !== "undefined";
return (
<div className="h-full bg-black text-gray-300 flex flex-col justify-between rounded-r-2xl">
<div className="app-no-drag h-full bg-black text-gray-300 flex flex-col justify-between rounded-r-2xl">
{/* top */}
<div className="px-7 py-6 flex justify-between">
<div className="app-drag px-7 py-6 flex justify-between">
<span className="text-sm font-semibold">{_name}</span>
</div>
{/* middle */}
src/routes/chat/index.tsx
+3 -1
View File
@@ -77,6 +77,7 @@ function ChatPage() {
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<div
className={clsx(
"app-drag",
`flex h-screen md:h-full md:pt-2 md:pb-2.5 md:pr-1`,
isGuest ? "guest-container md:px-1" : "md:pr-12"
)}
@@ -89,7 +90,7 @@ function ChatPage() {
)}
<div
className={clsx(
"left-container flex-col md:rounded-l-2xl w-full h-screen md:h-full md:max-w-[250px] md:min-w-[268px] shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
"left-container app-no-drag flex-col md:rounded-l-2xl w-full h-screen md:h-full md:max-w-[250px] md:min-w-[268px] shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
isMainPath ? "flex" : "hidden md:flex"
)}
>
@@ -99,6 +100,7 @@ function ChatPage() {
</div>
<div
className={clsx(
"app-drag",
`right-container md:rounded-r-2xl w-full bg-white dark:!bg-gray-700`,
placeholderVisible && "h-full flex-center",
isMainPath && "hidden md:flex"
src/routes/home/Menu.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ type Props = {};
const Menu: FC<Props> = () => {
const { pathname } = useLocation();
return (
<ul className="flex flex-col absolute left-0 bottom-0 w-full px-3 py-2">
<ul className="app-no-drag flex flex-col absolute left-0 bottom-0 w-full px-3 py-2">
<li className="cursor-pointer flex items-center p-2.5 gap-2.5 link_navs">
<NavLink className="link" to={`/setting/overview?f=${pathname}`}>
<Tooltip placement="right" tip="Settings">
src/routes/home/User.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const User: FC<Props> = ({ uid }) => {
if (!user) return null;
return (
<div className="px-3 py-2.5 invisible md:visible">
<div className="app-no-drag px-3 py-2.5 invisible md:visible">
<NavLink to={`/setting/my_account?f=${pathname}`}>
<div className="w-8 h-8">
<Avatar
src/routes/home/index.tsx
+2 -2
View File
@@ -75,10 +75,10 @@ function HomePage() {
>
{!guest && (
<div
className={`hidden md:flex h-full flex-col items-center relative w-16 transition-all`}
className={`app-drag hidden md:flex h-full flex-col items-center relative w-16 transition-all`}
>
{loginUid && <User uid={loginUid} />}
<nav className="flex flex-col gap-1 px-3 py-6">
<nav className="app-no-drag flex flex-col gap-1 px-3 my-6">
<NavLink
className={({ isActive }) =>
`${linkClass} ${