windows: better looking titlebar (#9053)

~~work in progress. not ready for review. made for visibility only, but
feel free to comment :)~~

TODO:
- [x] add close/min/max buttons (to be rendered with gpui)
- [x] snap layout support
- [x] fix issues with clicking items in titlebar
- [x] cleanup/document

Release Notes:

- Added custom windows titlebar

![](https://media.discordapp.net/attachments/1208481909676576818/1216985375969378324/caption-buttons-working.gif?ex=660260f4&is=65efebf4&hm=53a17af6e2f233eba54302a5adb9efe23900f4d6f6d1d854bec887120789130c&=)

---------

Co-authored-by: Mikayla <mikayla@zed.dev>
This commit is contained in:
Ezekiel Warren 2024-03-14 17:20:30 -07:00 committed by GitHub
parent 6bbc5e2efa
commit 948b3827c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 694 additions and 122 deletions

View file

@ -13,12 +13,12 @@ use rpc::proto;
use std::sync::Arc;
use theme::ActiveTheme;
use ui::{
h_flex, popover_menu, prelude::*, Avatar, AvatarAudioStatusIndicator, Button, ButtonLike,
ButtonStyle, ContextMenu, Icon, IconButton, IconName, TintColor, Tooltip,
h_flex, platform_titlebar, popover_menu, prelude::*, Avatar, AvatarAudioStatusIndicator,
Button, ButtonLike, ButtonStyle, ContextMenu, Icon, IconButton, IconName, TintColor, Tooltip,
};
use util::ResultExt;
use vcs_menu::{build_branch_list, BranchList, OpenRecent as ToggleVcsMenu};
use workspace::{notifications::NotifyResultExt, titlebar_height, Workspace};
use workspace::{notifications::NotifyResultExt, Workspace};
const MAX_PROJECT_NAME_LENGTH: usize = 40;
const MAX_BRANCH_NAME_LENGTH: usize = 40;
@ -58,26 +58,18 @@ impl Render for CollabTitlebarItem {
let project_id = self.project.read(cx).remote_id();
let workspace = self.workspace.upgrade();
h_flex()
.id("titlebar")
platform_titlebar("collab-titlebar")
.titlebar_bg(cx.theme().colors().title_bar_background)
// note: on windows titlebar behaviour is handled by the platform implementation
.when(cfg!(not(windows)), |this| {
this.on_click(|event, cx| {
if event.up.click_count == 2 {
cx.zoom_window();
}
})
})
.px_2()
.justify_between()
.w_full()
.h(titlebar_height(cx))
.map(|this| {
if cx.is_fullscreen() {
this.pl_2()
} else {
// Use pixels here instead of a rem-based size because the macOS traffic
// lights are a static size, and don't scale with the rest of the UI.
this.pl(px(80.))
}
})
.bg(cx.theme().colors().title_bar_background)
.on_click(|event, cx| {
if event.up.click_count == 2 {
cx.zoom_window();
}
})
// left side
.child(
h_flex()