Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for custom dialog window type #10

Closed
wants to merge 1 commit into from
Closed

Added support for custom dialog window type #10

wants to merge 1 commit into from

Conversation

danielmeloalencar
Copy link
Contributor

@danielmeloalencar danielmeloalencar commented Apr 27, 2024

Sometimes we want to add a different style or decoration for different types of windows, this PR adds initial support for this.
In my example, the window title have a height of 15, in addition to the more obvious customizations.
Maybe this could be the essential change to allow the creation of a start menu.
image

@wnayes
Copy link
Owner

wnayes commented Apr 27, 2024

I think it makes sense to want to style different kinds of windows in different ways, but I imagine this being done in "user land" rather than implementing a new page.

For example, in your config, you could render differently based on the kind of window. Here is some example code for something like this:

frame.tsx

import React from "react";
import { WindowFrame, WindowClientArea, ThemeContextProvider, useWindow } from "@bond-wm/react";
import {
  TitleBar,
  TitleBarCloseButton,
  TitleBarIcon,
  TitleBarMaximizeButton,
  TitleBarMinimizeButton,
  TitleBarText,
} from "@bond-wm/react-titlebar";
import { MyTheme } from "../theme";
import { WindowType } from "@bond-wm/shared";

export default () => {
  return (
    <ThemeContextProvider theme={MyTheme}>
      <WindowFrame>
        <MyWindow />
      </WindowFrame>
    </ThemeContextProvider>
  );
};

function MyWindow() {
  const win = useWindow();
  if (!win) {
    return;
  }

  if (win.type === WindowType.Dialog) {
    return <MyDialogWindow />;
  }
  else {
    return <MyRegularWindow />;
  }
}

function MyRegularWindow() {
  return <>
    <TitleBar>
      <TitleBarIcon />
      <TitleBarText />
      <TitleBarMinimizeButton />
      <TitleBarMaximizeButton />
      <TitleBarCloseButton />
    </TitleBar>
    <WindowClientArea />
  </>;
}

function MyDialogWindow() {
  // This is identical, but could be changed up as desired.
  return <>
    <TitleBar>
      <TitleBarIcon />
      <TitleBarText />
      <TitleBarMinimizeButton />
      <TitleBarMaximizeButton />
      <TitleBarCloseButton />
    </TitleBar>
    <WindowClientArea />
  </>;
}

@danielmeloalencar danielmeloalencar closed this by deleting the head repository Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants