Introduce YaruWindowTitleBar & YaruDialogTitleBar #455

jpnurmi · 2022-12-06T08:16:46Z

YaruWindowTitleBar and YaruDialogTitleBar are based on YaruTitleBar but provide slightly different behavior. The dialog variant has no minimize and maximize buttons by default, doesn't react to double clicks, and calls Navigator.maybePop when closed.

Active	Inactive

Feichtmeier · 2022-12-06T09:47:19Z

For the window titlebar I would recommend

#222222 (Color0xFF222222)
It would be nice to have a color arg though and just make 222222 the default

I would leave the dialogbar as it is

Thank you very much for making this happen!
We could add this to the appbar of the pages on the right side in the xample

Jupi007 · 2022-12-06T10:26:38Z

Awesome 😍

Jupi007 · 2022-12-06T17:33:40Z

Here is my design point of view on this:

The title should use: TextStyle(fontSize: 14, fontWeight: FontWeight.w500).
AppBar background should use Colors.black with 0.075 of opacity on the light theme, and 0.2 on the dark theme.
AppBar bottom border should use Colors.black with 0.1 of opacity on the light theme, and 0.2 on the dark theme.
Window controls should be spaced of 10 from the window edge, and of 14 from each others.

	Light theme	Dark Theme
`TitleBar`
`DialogBar`

Also, I really like the idea of DialogBar which can control window position, with the same look as the TitleBar. This behaviour "emulate" a second window, while still being in the same one. Also, as the title bar is now flutter, we cannot move the window when a dialog is open, so it is important that dialog can do this action.

Another point, it would be nice to add a backdrop state to the title bar, so we can identify which window is focused more easily.

jpnurmi · 2022-12-06T18:11:28Z

Here is my design point of view on this

Thank you! Looks very nice!

Another point, it would be nice to add a backdrop state to the title bar, so we can identify which window is focused more easily.

Is it enough to have different colors for active and inactive states or does it need some sort of backdrop effect?

Feichtmeier · 2022-12-06T18:19:53Z

Do we really always need a background for dialog titlebars? I think even the gnomers are stepping away from this. Maybe we could have an option to remove both border and background color without too many hacks?

Jupi007 · 2022-12-06T18:19:57Z

Is it enough to have different colors for active and inactive states or does it need some sort of backdrop effect?

Maybe can we do like Libadwaita, by remove titlebar background and tone down everything inside?

jpnurmi · 2022-12-06T18:23:09Z

Maybe we could have an option to remove both border and background color without too many hacks?

We can make the colors etc. themable so one can change the values in one place

Jupi007 · 2022-12-06T18:32:36Z

Do we really always need a background for dialog titlebars? I think even the gnomers are stepping away from this. Maybe we could have an option to remove both border and background color without too many hacks?

In fact I like both solutions 🙂
So the best imo would be to have a titlebar style for dialogs by default, but leave the option for a fully transparent one.
With a named controller, and/or with theming options like said @jpnurmi

jpnurmi · 2022-12-06T19:34:26Z

How's this? All of our theme classes can be used as Flutter theme extensions:

YaruTheme(
  extensions: [
    YaruTitleBarThemeData(
      backgroundColor: MaterialStateProperty.all(Colors.transparent),
    ),
    YaruFooBarThemeData(
      ...
    ),
  ]
  builder: (context, yaru, child) => MaterialApp(
    theme: yaru.theme,
    darkTheme: yaru.darkTheme,
    home: ...
  ),
)

jpnurmi · 2022-12-06T19:43:11Z

Any ideas on how to deal with different platforms?

Leave it up to the user to only create a YaruWindowTitleBar on Linux? It's pretty straightforward to delete the GtkHeaderBar from my_application.cc on Linux but on other platforms, you'd have to make the window frameless and then you lose resizing. Oh, and on Web you don't want anything there.

jpnurmi · 2022-12-06T20:20:49Z

macOS 🙃

jpnurmi · 2022-12-06T20:42:17Z

Both Windows and macOS need some minor tweaks but we might be able to make this work somewhat sensibly on all desktop platforms.

Feichtmeier · 2022-12-06T20:52:28Z

How's this? All of our theme classes can be used as Flutter theme extensions:

YaruTheme(
  extensions: [
    YaruTitleBarThemeData(
      backgroundColor: MaterialStateProperty.all(Colors.transparent),
    ),
    YaruFooBarThemeData(
      ...
    ),
  ]
  builder: (context, yaru, child) => MaterialApp(
    theme: yaru.theme,
    darkTheme: yaru.darkTheme,
    home: ...
  ),
)

Very nice

Feichtmeier · 2022-12-06T21:14:58Z

Any ideas on how to deal with different platforms?

Leave it up to the user to only create a YaruWindowTitleBar on Linux? It's pretty straightforward to delete the GtkHeaderBar from my_application.cc on Linux but on other platforms, you'd have to make the window frameless and then you lose resizing. Oh, and on Web you don't want anything there.

Depends on you 🙂
Currently this lib targets Linux and web
But if you can make it work on Windows and MacOS too why not . The design works on all desktops

jpnurmi · 2022-12-07T20:19:31Z

This PR makes it possible to call windowManager.setTitleBarStyle(TitleBarStyle.hidden) to hide the GTK or Handy header bar out of the way on Linux without touching my_application.cc.

Linux: make setTitleBarStyle() GTK/HDY/CSD/SSD compatible leanflutter/window_manager#249

I used the same WindowManager API when testing Windows and macOS earlier. This could be a nice and cross-platform way to set things up.

Feichtmeier · 2022-12-07T20:24:11Z

without touching my_application.cc

That's pretty awesome!

whiskeyPeak · 2022-12-18T07:59:36Z

Wow! This looks absolutely gorgeous!

larsb24 · 2022-12-26T22:21:04Z

Looks awesome!

One potential problem I could see though is the expected behaviour when dialogs are opened. I don't know where the intention lies, which is why I'm saying “potential” but not being able to access the titlebar or it's functions while dialogs are open could be unexpected by some users.

jpnurmi · 2022-12-27T09:41:10Z

Thanks. The way it currently behaves is that dialog title bars allow moving the entire window and opening the popup menu. This makes dialogs feel almost like top-level windows. :)

Jupi007 · 2022-12-27T09:59:06Z

Yes, and this is a really good idea, because as the headerbar is now a flutter widget, it is hidden when you open a dialog.
Be able to drag the window from the dialog fix this issue.

Changes extracted from #455, leaving out YaruWindow/DialogTitleBar etc.

jpnurmi · 2023-01-03T16:31:50Z

This PR makes it possible to call windowManager.setTitleBarStyle(TitleBarStyle.hidden) to hide the GTK or Handy header bar out of the way on Linux without touching my_application.cc.

Linux: make setTitleBarStyle() GTK/HDY/CSD/SSD compatible leanflutter/window_manager#249

I used the same WindowManager API when testing Windows and macOS earlier. This could be a nice and cross-platform way to set things up.

I have to eat my words. It's not possible to hide the native title/header bar from Dart early enough. It's visible for a brief moment during startup.

Feichtmeier · 2023-01-03T21:41:31Z

I have to eat my words. It's not possible to hide the native title/header bar from Dart early enough. It's visible for a brief moment during startup.

does this mean that the version where you do not touch my_application.cc shows the bar for a short moment or is it even shown when you make the known changes from handy_window?

jpnurmi · 2023-01-09T15:43:43Z

@Jupi007 What about flutter pub upgrade (in the example)? Does it make any difference? Also, which yaru_widgets.dart commit are you on, and which Flutter version are you using?

Jupi007 · 2023-01-09T15:46:41Z

@jpnurmi I had already tried pub upgrade, without success.

My flutter version is:

[✓] Flutter (Channel stable, 3.3.10, on Ubuntu 22.10 5.19.0-28-generic, locale fr_FR.UTF-8)

Looks like I'm using the latest stable version.

Forcing opacity for the whole titlebar makes it hard to set a custom background color.

jpnurmi · 2023-01-09T16:46:52Z

Testing YaruWindowTitleBar with Workshops 👍

Feichtmeier · 2023-01-09T16:57:58Z

Wonder why it worked for me 🤔
Maybe just delete the local repo and clone again?

Jupi007 · 2023-01-09T17:13:52Z

Wonder why it worked for me 🤔
Maybe just delete the local repo and clone again?

Will try this once back home 👍

Jupi007 · 2023-01-09T19:28:39Z

Nope, I re-cloned the project, and the exception is still present...

Feichtmeier · 2023-01-09T19:45:07Z

then the only difference that comes to my mind that is left is maybe the locale? try running flutter run with en_US

LANGUAGE=en_US flutter run

Jupi007 · 2023-01-09T20:32:47Z

Found the problem: it is broken in debug mode.
It runs fine with flutter run, and from VS code with the no debug mode.

I can perfectly run the example app in both mode from main, it is only this PR who is broken in debug.

jpnurmi · 2023-01-09T20:55:32Z

Gotcha, so

isMovable().catchError((_) => true),

doesn't actually end up catching the error because WindowManager.isMovable() internally awaits the method channel invocation...

jpnurmi · 2023-01-09T21:09:08Z

@Jupi007 Ok, should be fixed now. Please give it a try when you have time. 🙏

Jupi007 · 2023-01-09T21:10:50Z

Works 🥳
This is really awesome, thank you so much 😃

Jupi007

LGFM 🚀

jpnurmi · 2023-01-09T22:45:40Z

is that yaru_widgets 2.0?

Feichtmeier · 2023-01-09T23:03:09Z

Yes 🖐️👍 I'll do a release tomorrow if you aren't faster 😉 thank you JP

jpnurmi marked this pull request as draft December 6, 2022 08:18

This comment was marked as outdated.

Sign in to view

jpnurmi mentioned this pull request Dec 12, 2022

Use gtk_window to replace native headerBar ubuntu-flutter-community/settings#418

Closed

Feichtmeier mentioned this pull request Dec 13, 2022

YaruNavigationPage: add optional space to the rail #458

Closed

jpnurmi mentioned this pull request Dec 14, 2022

Add splash screen canonical/workshops#290

Closed

This was referenced Jan 1, 2023

YaruTitleBar: make themable and use window controls #464

Merged

The decoration title is cut when selecting another language canonical/ubuntu-desktop-installer#670

Closed

Feichtmeier pushed a commit that referenced this pull request Jan 3, 2023

YaruTitleBar: make themable and use window controls (#464)

8cfb53c

Changes extracted from #455, leaving out YaruWindow/DialogTitleBar etc.

jpnurmi added 2 commits January 9, 2023 15:56

Expose titleSpacing as a widget-level property

4e5c083

Fix another missing titleSpacing assignment

ed28cff

jpnurmi added 4 commits January 9, 2023 17:12

Move AnimatedOpacity inside AppBar for the fake backdrop effect

96f8ef2

Forcing opacity for the whole titlebar makes it hard to set a custom background color.

Update goldens

5dcbd93

Nullable backdrop effect

b4fe3fb

Back to 0.75

731bdd3

jpnurmi added 3 commits January 9, 2023 19:01

Drop YaruWindowController & hide YaruWindowState

f0562c6

Revert extra line break in the example

1a1f37c

Platform defaults

943623b

jpnurmi marked this pull request as ready for review January 9, 2023 21:08

Await & catch MissingPluginException

1760bfc

Jupi007 approved these changes Jan 9, 2023

View reviewed changes

Feichtmeier merged commit dbb5b6d into ubuntu:main Jan 9, 2023

jpnurmi deleted the title-bar branch January 9, 2023 22:42

This was referenced Jan 10, 2023

Release 2.0.0-beta-4 #480

Closed

Release 2.0.0-beta-4 #498

Merged

Release 2.0.0-beta-4 #528

Merged

Introduce YaruWindowTitleBar & YaruDialogTitleBar #455

Introduce YaruWindowTitleBar & YaruDialogTitleBar #455

Conversation

jpnurmi commented Dec 6, 2022 • edited

This comment was marked as outdated.

Feichtmeier commented Dec 6, 2022

Jupi007 commented Dec 6, 2022

Jupi007 commented Dec 6, 2022

jpnurmi commented Dec 6, 2022

Feichtmeier commented Dec 6, 2022

Jupi007 commented Dec 6, 2022

jpnurmi commented Dec 6, 2022

Jupi007 commented Dec 6, 2022

jpnurmi commented Dec 6, 2022

jpnurmi commented Dec 6, 2022 • edited

jpnurmi commented Dec 6, 2022 • edited

jpnurmi commented Dec 6, 2022

Feichtmeier commented Dec 6, 2022

Feichtmeier commented Dec 6, 2022

jpnurmi commented Dec 7, 2022

Feichtmeier commented Dec 7, 2022

whiskeyPeak commented Dec 18, 2022

larsb24 commented Dec 26, 2022

jpnurmi commented Dec 27, 2022

Jupi007 commented Dec 27, 2022

jpnurmi commented Jan 3, 2023

Feichtmeier commented Jan 3, 2023

jpnurmi commented Jan 9, 2023 • edited

Jupi007 commented Jan 9, 2023 • edited

jpnurmi commented Jan 9, 2023

Feichtmeier commented Jan 9, 2023

Jupi007 commented Jan 9, 2023

Jupi007 commented Jan 9, 2023

Feichtmeier commented Jan 9, 2023 • edited

Jupi007 commented Jan 9, 2023 • edited

jpnurmi commented Jan 9, 2023

jpnurmi commented Jan 9, 2023

Jupi007 commented Jan 9, 2023

Jupi007 left a comment

Choose a reason for hiding this comment

jpnurmi commented Jan 9, 2023

Feichtmeier commented Jan 9, 2023

jpnurmi commented Dec 6, 2022 •

edited

jpnurmi commented Dec 6, 2022 •

edited

jpnurmi commented Dec 6, 2022 •

edited

jpnurmi commented Jan 9, 2023 •

edited

Jupi007 commented Jan 9, 2023 •

edited

Feichtmeier commented Jan 9, 2023 •

edited

Jupi007 commented Jan 9, 2023 •

edited