@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1C2.44771 1 2 1.44772 2 2V13C2 13.5523 2.44772 14 3 14H10.5C10.7761 14 11 13.7761 11 13.5C11 13.2239 10.7761 13 10.5 13H3V2L10.5 2C10.7761 2 11 1.77614 11 1.5C11 1.22386 10.7761 1 10.5 1H3ZM12.6036 4.89645C12.4083 4.70118 12.0917 4.70118 11.8964 4.89645C11.7012 5.09171 11.7012 5.40829 11.8964 5.60355L13.2929 7H6.5C6.22386 7 6 7.22386 6 7.5C6 7.77614 6.22386 8 6.5 8H13.2929L11.8964 9.39645C11.7012 9.59171 11.7012 9.90829 11.8964 10.1036C12.0917 10.2988 12.4083 10.2988 12.6036 10.1036L14.8536 7.85355C15.0488 7.65829 15.0488 7.34171 14.8536 7.14645L12.6036 4.89645Z" fill="black"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.70312 4L7.26046 2.97338C7.10239 2.60678 6.74141 2.36933 6.34219 2.36933H2.5C2.22386 2.36933 2 2.59319 2 2.86933V4.375V8" stroke="#11181C" stroke-width="1.25" stroke-linecap="round"/>
@@ -105,6 +105,11 @@ fn box_prefixes() -> Vec<(&'static str, bool, Vec<TokenStream2>)> {
),
("mt", true, vec![quote! { margin.top }]),
("mb", true, vec![quote! { margin.bottom }]),
+ (
+ "my",
+ true,
+ vec![quote! { margin.top }, quote! { margin.bottom }],
+ ),
(
"mx",
true,
@@ -1,6 +1,6 @@
use crate::{collab_panel::collab_panel, theme::theme};
use gpui2::{
- elements::{div, svg},
+ elements::{div, img, svg},
style::{StyleHelpers, Styleable},
Element, IntoElement, ParentElement, ViewContext,
};
@@ -106,59 +106,122 @@ impl TitleBar {
.flex()
.items_center()
.h_full()
- .gap_4()
+ .gap_3()
.px_2()
- // === Comms === //
+ // === Actions === //
.child(
- div()
- .flex()
- .items_center()
- .gap_1()
- .child(
- div()
- .w_6()
- .h_full()
- .flex()
- .items_center()
- .justify_center()
- .child(
- svg()
- .path("icons/microphone.svg")
- .w_4()
- .h_4()
- .fill(theme.lowest.base.default.foreground),
- ),
- )
- .child(
- div()
- .w_6()
- .h_full()
- .flex()
- .items_center()
- .justify_center()
- .child(
- svg()
- .path("icons/screen.svg")
- .w_4()
- .h_4()
- .fill(theme.lowest.base.default.foreground),
- ),
- )
- .child(
- div()
- .w_6()
- .h_full()
- .flex()
- .items_center()
- .justify_center()
- .child(
- svg()
- .path("icons/exit.svg")
- .w_4()
- .h_4()
- .fill(theme.lowest.base.default.foreground),
- ),
+ div().child(
+ div().flex().items_center().gap_1().child(
+ div().size_4().flex().items_center().justify_center().child(
+ svg()
+ .path("icons/exit.svg")
+ .size_4()
+ .fill(theme.lowest.base.default.foreground),
+ ),
),
+ ),
+ )
+ .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
+ // === Comms === //
+ .child(
+ div().child(
+ div()
+ .flex()
+ .items_center()
+ .gap_px()
+ .child(
+ div()
+ .px_2()
+ .py_1()
+ .rounded_md()
+ .h_full()
+ .flex()
+ .items_center()
+ .justify_center()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ svg()
+ .path("icons/microphone.svg")
+ .size_3p5()
+ .fill(theme.lowest.base.default.foreground),
+ ),
+ )
+ .child(
+ div()
+ .px_2()
+ .py_1()
+ .rounded_md()
+ .h_full()
+ .flex()
+ .items_center()
+ .justify_center()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ svg()
+ .path("icons/radix/speaker-loud.svg")
+ .size_3p5()
+ .fill(theme.lowest.base.default.foreground),
+ ),
+ )
+ .child(
+ div()
+ .px_2()
+ .py_1()
+ .rounded_md()
+ .h_full()
+ .flex()
+ .items_center()
+ .justify_center()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ svg()
+ .path("icons/radix/desktop.svg")
+ .size_3p5()
+ .fill(theme.lowest.base.default.foreground),
+ ),
+ ),
+ ),
+ )
+ .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
+ // User Group
+ .child(
+ div().child(
+ div()
+ .px_1()
+ .py_1()
+ .flex()
+ .items_center()
+ .justify_center()
+ .rounded_md()
+ .gap_0p5()
+ .hover()
+ .fill(theme.lowest.base.hovered.background)
+ .active()
+ .fill(theme.lowest.base.pressed.background)
+ .child(
+ img()
+ .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
+ .size_4()
+ .rounded_md()
+ .fill(theme.middle.on.default.foreground),
+ )
+ .child(
+ svg()
+ .path("icons/caret_down_8.svg")
+ .w_2()
+ .h_2()
+ .fill(theme.lowest.variant.default.foreground),
+ ),
+ ),
)
}
}