tauri-apps/tauri-docs

[docs] Improve window customization guide

cangSDARM opened this issue · 13 comments

cangSDARM commented

Maybe this should be used as a feat? idk

Describe the bug

https://github.com/tauri-apps/tauri/blob/45d427e44c0e06194079426c2690019643e03277/core/tauri/scripts/core.js#L136

here is my dom hierarchy:

import React from "react";
import classes from "./index.module.scss";
import clsx from "clsx";
import { Icon } from "@rsuite/icons";
import {
  VscChromeClose,
  VscChromeMinimize,
  VscChromeMaximize,
  VscChromeRestore,
} from "react-icons/vsc";
import { appWindow } from "@tauri-apps/api/window";
import { IoLogoChrome } from "react-icons/io5";

const AppBar: React.FC = () => {
  const [isMaxsize, setIsMaxsize] = React.useState(false);

  React.useEffect(() => {
    appWindow.isMaximized().then(setIsMaxsize);
  }, []);

  return (
    <div className={classes.titlebar}>
      <div data-tauri-drag-region className={classes["drag-region"]}>
        <div>
          <Icon as={IoLogoChrome} />
          <span>{appWindow.label}</span>
        </div>
        <div className={classes["window-controls"]}>
          <div
            className={classes.button}
            onClick={() => {
              appWindow.minimize();
            }}
          >
            <Icon as={VscChromeMinimize} />
          </div>
          <div
            className={classes.button}
            onClick={() => {
              appWindow
                .toggleMaximize()
                .then(() => appWindow.isMaximized())
                .then(setIsMaxsize);
            }}
          >
            <Icon as={isMaxsize ? VscChromeRestore : VscChromeMaximize} />
          </div>
          <div
            className={clsx(classes.button, classes["close-button"])}
            onClick={() => {
              appWindow.close();
            }}
          >
            <Icon as={VscChromeClose} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default AppBar;

It renders like this:
image

I can't properly trigger the window's drag unless I add data-tauri-drag-region to every element.

Perhapes

Customize an event and allow tauri users to bind it themselves

Reproduction

No response

Expected behavior

No response

Platform and versions

> tauri "info"


Operating System - Windows, version 10.0.19044 X64
Webview2 - 99.0.1150.55
Visual Studio Build Tools:
   - Visual Studio Community 2019

Node.js environment
  Node.js - 14.17.6
  @tauri-apps/cli - 1.0.0-rc.5 (outdated, latest: 1.0.0-rc.8)
  @tauri-apps/api - 1.0.0-rc.3

Global packages
  npm - 6.14.11
  pnpm - 6.23.6
  yarn - 1.22.17

Rust environment
  rustup - 1.24.3
  rustc - 1.59.0
  cargo - 1.59.0
  toolchain - stable-x86_64-pc-windows-msvc 

App directory structure
/.git
/.parcel-cache
/client
/dist
/node_modules
/server

App
  tauri - 1.0.0-rc.6
  tauri-build - 1.0.0-rc.5
  tao - 0.7.0
  wry - 0.14.0
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../dist
  devPath - http://localhost:3000/
  framework - React

Stack trace

No response

Additional context

No response

cangSDARM commented

A less elegant solution from before

tauri-apps/tauri#3031

Customize an event and allow tauri users to bind it themselves may better

  • 👍1
FabianLars commented

See here for the reasons why we can't change it: tauri-apps/tauri#3031.
So yes you need to add the attribute to the actual click target (which generally should be the innermost element)

Edit: Unlucky timing 😂

  • 👍1
cangSDARM commented

See here for the reasons why we can't change it: tauri-apps/tauri#3031. So yes you need to add the attribute to the actual click target (which generally should be the innermost element)

I saw. So I suggest using a custom event to let the user bind himself

  • 👍1
FabianLars commented

Customize an event and allow tauri users to bind it themselves may better

You can already do that by using startDragging yourself.

cangSDARM commented

Customize an event and allow tauri users to bind it themselves may better

You can already do that by using startDragging yourself.

It would be better to implement in tauri to avoid other potential bugs.
Or give a hint in the documentation? 😂

amrbashir commented

Yeah that guide needs to highlight data-tauri-drag-region more and also include a manual implementation of it using window.startDragging and mousedown event.

  • 👍3
JonasKruckenberg commented

Yeah that guide needs to highlight data-tauri-drag-region more and also include a manual implementation of it using window.startDragging and mousedown event.

Suggestion noted

Uninen commented

Not sure if this should be different issue or no but the search on the documentation site doesn't find anything with "drag", "dragging", or "data-tauri-drag-region" even though the string data-tauri-drag-region clearly is on this page: https://tauri.app/v1/guides/features/window-customization/

Is there something I could do to help improving the docs (or the search)?

FabianLars commented

The search is currently not nearly as optimized enough and basically only picks up headers right now :/
And code blocks will probably never be indexed, not sure

Is there something I could do to help improving the docs (or the search)?

We always appreciate PRs adding or rewriting guides, or improving the api docs. We know that all that is far from perfect.

The search itself is a spicy topic and still needs a lot of work :/

  • 👍2
simonhyll commented

We'll be making a new recipe on the topic for 2.0 that hopefully addresses this, with best practises for the various platforms. Tracking this for 2.0.

FabianLars commented

For the v2 guide: tauri-apps/tauri#10279 (reply in thread) Nevermind, got a PR for it already 🥳