more accurate justification/snapping for controls

agmmnn · Aug 1, 2023 · b8cbde1 · b8cbde1
1 parent 5244bbb
commit b8cbde1
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,21 +16,18 @@ function App() {
             <OnlyControls key={x} platform={x} />
           ))}
         </div>
-
         <span className="w-fit border-b border-slate-400 pb-1 pr-10 dark:border-slate-600">
           WindowTitlebar
         </span>
         {/* Icon+Title Controls */}
         {platforms.map((x) => (
           <IMC key={x} platform={x} />
         ))}
-
         {/* Icon Menu Title Controls */}
         {platforms.map((x) => (
           <IMTC key={x} platform={x} />
         ))}
         <ThemeSwitcher />
-
         <WindowTitlebar
           className="rounded-xl bg-slate-400"
           controlsOrder="platform"
@@ -69,8 +66,52 @@ function App() {
         >
           <Content />
         </WindowTitlebar>
-
-        <WindowTitlebar />
+        before:
+        <WindowTitlebar
+          controlsOrder="right"
+          windowControlsProps={{
+            platform: "macos",
+            className: "bg-rose-700 rounded-full p-2 ml-0",
+          }}
+        >
+          <div className="flex items-center justify-center rounded-full bg-sky-500 px-2">
+            titlebar content without w-full (macos but on the right side)
+          </div>
+        </WindowTitlebar>
+        <WindowTitlebar
+          controlsOrder="left"
+          windowControlsProps={{
+            platform: "windows",
+            className: "bg-rose-700 rounded-full overflow-hidden ml-auto",
+          }}
+        >
+          <div className="flex items-center justify-center rounded-full bg-sky-500 px-2">
+            titlebar content without w-full (windows but on the left side)
+          </div>
+        </WindowTitlebar>
+        after:
+        <WindowTitlebar
+          controlsOrder="right"
+          windowControlsProps={{
+            platform: "macos",
+            className: "bg-rose-700 rounded-full p-2",
+          }}
+        >
+          <div className="flex items-center justify-center rounded-full bg-sky-500 px-2">
+            titlebar content without w-full (macos but on the right side)
+          </div>
+        </WindowTitlebar>
+        <WindowTitlebar
+          controlsOrder="left"
+          windowControlsProps={{
+            platform: "windows",
+            className: "bg-rose-700 rounded-full overflow-hidden",
+          }}
+        >
+          <div className="flex items-center justify-center rounded-full bg-sky-500 px-2">
+            titlebar content without w-full (windows but on the left side)
+          </div>
+        </WindowTitlebar>
       </div>
     </div>
   )

diff --git a/src/tauri-controls/controls/linux/gnome.tsx b/src/tauri-controls/controls/linux/gnome.tsx
@@ -9,10 +9,7 @@ export function Gnome({ className, ...props }: HTMLProps<HTMLDivElement>) {
     useContext(TauriAppWindowContext)
 
   return (
-    <div
-      className={cn("ml-auto h-auto items-center px-2", className)}
-      {...props}
-    >
+    <div className={cn("h-auto items-center px-2", className)} {...props}>
       <Button
         onClick={minimizeWindow}
         className="m-0 mr-4 aspect-square h-6 w-6 cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"

diff --git a/src/tauri-controls/controls/windows.tsx b/src/tauri-controls/controls/windows.tsx
@@ -9,7 +9,7 @@ export function Windows({ className, ...props }: HTMLProps<HTMLDivElement>) {
     useContext(TauriAppWindowContext)
 
   return (
-    <div className={cn("ml-auto h-8", className)} {...props}>
+    <div className={cn("h-8", className)} {...props}>
       <Button
         onClick={minimizeWindow}
         className="max-h-8 w-[46px] cursor-default rounded-none bg-transparent text-black/90 hover:bg-black/[.05] active:bg-black/[.03]  dark:text-white dark:hover:bg-white/[.06] dark:active:bg-white/[.04]"

diff --git a/src/tauri-controls/window-titlebar.tsx b/src/tauri-controls/window-titlebar.tsx
@@ -24,7 +24,11 @@ export function WindowTitlebar({
     controlsOrder === "left" ||
     (controlsOrder === "platform" &&
       windowControlsProps?.platform === "macos") ||
-    osType === "Darwin"
+    (controlsOrder === "system" && osType === "Darwin")
+
+  /* eslint-disable */
+  const { className: windowControlsClassName, ...restProps } =
+    windowControlsProps || {}
 
   return (
     <div
@@ -37,13 +41,19 @@ export function WindowTitlebar({
     >
       {left ? (
         <>
-          <WindowControls {...windowControlsProps} />
+          <WindowControls
+            className={cn("ml-0", windowControlsProps?.className)}
+            {...restProps}
+          />
           {children}
         </>
       ) : (
         <>
           {children}
-          <WindowControls {...windowControlsProps} />
+          <WindowControls
+            className={cn("ml-auto", windowControlsProps?.className)}
+            {...restProps}
+          />
         </>
       )}
     </div>