Mikayla Maki created
Increase the indent size on channels
Switch font UI mono
Release Notes:
- Switch the collaboration panel font to Zed's sans-mono (preview only)
- Switch the default dock side to the left (preview-only)
- Increase the indent size on the channels panel (preview-only)assets/settings/default.json | 2
crates/collab_ui/src/collab_panel.rs | 13 ++++--
crates/gpui/examples/components.rs | 4 +-
crates/gpui/src/elements/component.rs | 55 ++++++++++++++++++++++++++++
crates/search/src/search.rs | 2
styles/src/style_tree/collab_panel.ts | 32 ++++++++--------
styles/src/style_tree/context_menu.ts | 2
7 files changed, 83 insertions(+), 27 deletions(-)
@@ -126,7 +126,7 @@
// Whether to show the collaboration panel button in the status bar.
"button": true,
// Where to dock channels panel. Can be 'left' or 'right'.
- "dock": "right",
+ "dock": "left",
// Default width of the channels panel.
"default_width": 240
},
@@ -86,7 +86,7 @@ impl_actions!(
]
);
-const CHANNELS_PANEL_KEY: &'static str = "ChannelsPanel";
+const COLLABORATION_PANEL_KEY: &'static str = "CollaborationPanel";
pub fn init(_client: Arc<Client>, cx: &mut AppContext) {
settings::register::<panel_settings::CollaborationPanelSettings>(cx);
@@ -464,7 +464,7 @@ impl CollabPanel {
cx.spawn(|mut cx| async move {
let serialized_panel = if let Some(panel) = cx
.background()
- .spawn(async move { KEY_VALUE_STORE.read_kvp(CHANNELS_PANEL_KEY) })
+ .spawn(async move { KEY_VALUE_STORE.read_kvp(COLLABORATION_PANEL_KEY) })
.await
.log_err()
.flatten()
@@ -493,7 +493,7 @@ impl CollabPanel {
async move {
KEY_VALUE_STORE
.write_kvp(
- CHANNELS_PANEL_KEY.into(),
+ COLLABORATION_PANEL_KEY.into(),
serde_json::to_string(&SerializedChannelsPanel { width })?,
)
.await?;
@@ -2354,7 +2354,7 @@ impl View for CollabPanel {
.into_any()
})
.on_click(MouseButton::Left, |_, _, cx| cx.focus_self())
- .into_any_named("channels panel")
+ .into_any_named("collab panel")
}
}
@@ -2404,7 +2404,10 @@ impl Panel for CollabPanel {
}
fn icon_tooltip(&self) -> (String, Option<Box<dyn gpui::Action>>) {
- ("Channels Panel".to_string(), Some(Box::new(ToggleFocus)))
+ (
+ "Collaboration Panel".to_string(),
+ Some(Box::new(ToggleFocus)),
+ )
}
fn should_change_position_on_event(event: &Self::Event) -> bool {
@@ -72,7 +72,7 @@ impl View for TestView {
TextStyle::for_color(Color::blue()),
)
.with_style(ButtonStyle::fill(Color::yellow()))
- .into_element(),
+ .element(),
)
.with_child(
ToggleableButton::new(self.is_doubling, move |_, v: &mut Self, cx| {
@@ -84,7 +84,7 @@ impl View for TestView {
inactive: ButtonStyle::fill(Color::red()),
active: ButtonStyle::fill(Color::green()),
})
- .into_element(),
+ .element(),
)
.expanded()
.contained()
@@ -9,6 +9,12 @@ use super::Empty;
pub trait GeneralComponent {
fn render<V: View>(self, v: &mut V, cx: &mut ViewContext<V>) -> AnyElement<V>;
+ fn element<V: View>(self) -> ComponentAdapter<V, Self>
+ where
+ Self: Sized,
+ {
+ ComponentAdapter::new(self)
+ }
}
pub trait StyleableComponent {
@@ -36,7 +42,7 @@ impl StyleableComponent for () {
pub trait Component<V: View> {
fn render(self, v: &mut V, cx: &mut ViewContext<V>) -> AnyElement<V>;
- fn into_element(self) -> ComponentAdapter<V, Self>
+ fn element(self) -> ComponentAdapter<V, Self>
where
Self: Sized,
{
@@ -50,6 +56,53 @@ impl<V: View, C: GeneralComponent> Component<V> for C {
}
}
+// StylableComponent -> GeneralComponent
+pub struct StylableComponentAdapter<C: Component<V>, V: View> {
+ component: C,
+ phantom: std::marker::PhantomData<V>,
+}
+
+impl<C: Component<V>, V: View> StylableComponentAdapter<C, V> {
+ pub fn new(component: C) -> Self {
+ Self {
+ component,
+ phantom: std::marker::PhantomData,
+ }
+ }
+}
+
+impl<C: GeneralComponent, V: View> StyleableComponent for StylableComponentAdapter<C, V> {
+ type Style = ();
+
+ type Output = C;
+
+ fn with_style(self, _: Self::Style) -> Self::Output {
+ self.component
+ }
+}
+
+// Element -> Component
+pub struct ElementAdapter<V: View> {
+ element: AnyElement<V>,
+ _phantom: std::marker::PhantomData<V>,
+}
+
+impl<V: View> ElementAdapter<V> {
+ pub fn new(element: AnyElement<V>) -> Self {
+ Self {
+ element,
+ _phantom: std::marker::PhantomData,
+ }
+ }
+}
+
+impl<V: View> Component<V> for ElementAdapter<V> {
+ fn render(self, _: &mut V, _: &mut ViewContext<V>) -> AnyElement<V> {
+ self.element
+ }
+}
+
+// Component -> Element
pub struct ComponentAdapter<V: View, E> {
component: Option<E>,
element: Option<AnyElement<V>>,
@@ -98,7 +98,7 @@ impl SearchOptions {
.with_contents(Svg::new(self.icon()))
.toggleable(active)
.with_style(button_style)
- .into_element()
+ .element()
.into_any()
}
}
@@ -37,7 +37,7 @@ export default function contacts_panel(): any {
width: 14,
},
name: {
- ...text(layer, "ui_sans", { size: "sm" }),
+ ...text(layer, "sans", { size: "sm" }),
margin: {
left: NAME_MARGIN,
right: 4,
@@ -69,7 +69,7 @@ export default function contacts_panel(): any {
const subheader_row = toggleable({
base: interactive({
base: {
- ...text(layer, "ui_sans", { size: "sm" }),
+ ...text(layer, "sans", { size: "sm" }),
padding: {
left: SPACING,
right: SPACING,
@@ -87,7 +87,7 @@ export default function contacts_panel(): any {
state: {
active: {
default: {
- ...text(theme.lowest, "ui_sans", { size: "sm" }),
+ ...text(theme.lowest, "sans", { size: "sm" }),
background: background(theme.lowest),
},
clicked: {
@@ -100,8 +100,8 @@ export default function contacts_panel(): any {
const filter_input = {
background: background(layer, "on"),
corner_radius: 6,
- text: text(layer, "ui_sans", "base"),
- placeholder_text: text(layer, "ui_sans", "base", "disabled", {
+ text: text(layer, "sans", "base"),
+ placeholder_text: text(layer, "sans", "base", "disabled", {
size: "xs",
}),
selection: theme.players[0],
@@ -140,7 +140,7 @@ export default function contacts_panel(): any {
},
active: {
default: {
- ...text(theme.lowest, "ui_sans", { size: "sm" }),
+ ...text(theme.lowest, "sans", { size: "sm" }),
background: background(theme.lowest),
},
clicked: {
@@ -194,10 +194,10 @@ export default function contacts_panel(): any {
add_channel_button: header_icon_button,
leave_call_button: header_icon_button,
row_height: ITEM_HEIGHT,
- channel_indent: INDENT_SIZE,
+ channel_indent: INDENT_SIZE * 2,
section_icon_size: 14,
header_row: {
- ...text(layer, "ui_sans", { size: "sm", weight: "bold" }),
+ ...text(layer, "sans", { size: "sm", weight: "bold" }),
margin: { top: SPACING },
padding: {
left: SPACING,
@@ -251,7 +251,7 @@ export default function contacts_panel(): any {
},
active: {
default: {
- ...text(theme.lowest, "ui_sans", { size: "sm" }),
+ ...text(theme.lowest, "sans", { size: "sm" }),
background: background(theme.lowest),
},
clicked: {
@@ -262,7 +262,7 @@ export default function contacts_panel(): any {
}),
channel_row: item_row,
channel_name: {
- ...text(layer, "ui_sans", { size: "sm" }),
+ ...text(layer, "sans", { size: "sm" }),
margin: {
left: NAME_MARGIN,
},
@@ -279,7 +279,7 @@ export default function contacts_panel(): any {
list_empty_state: toggleable({
base: interactive({
base: {
- ...text(layer, "ui_sans", "variant", { size: "sm" }),
+ ...text(layer, "sans", "variant", { size: "sm" }),
padding: {
top: SPACING / 2,
bottom: SPACING / 2,
@@ -301,7 +301,7 @@ export default function contacts_panel(): any {
},
active: {
default: {
- ...text(theme.lowest, "ui_sans", { size: "sm" }),
+ ...text(theme.lowest, "sans", { size: "sm" }),
background: background(theme.lowest),
},
clicked: {
@@ -325,12 +325,12 @@ export default function contacts_panel(): any {
right: 4,
},
background: background(layer, "hovered"),
- ...text(layer, "ui_sans", "hovered", { size: "xs" })
+ ...text(layer, "sans", "hovered", { size: "xs" })
},
contact_status_free: indicator({ layer, color: "positive" }),
contact_status_busy: indicator({ layer, color: "negative" }),
contact_username: {
- ...text(layer, "ui_sans", { size: "sm" }),
+ ...text(layer, "sans", { size: "sm" }),
margin: {
left: NAME_MARGIN,
},
@@ -347,7 +347,7 @@ export default function contacts_panel(): any {
color: foreground(layer, "on"),
},
calling_indicator: {
- ...text(layer, "mono", "variant", { size: "xs" }),
+ ...text(layer, "sans", "variant", { size: "xs" }),
},
tree_branch: toggleable({
base: interactive({
@@ -380,7 +380,7 @@ export default function contacts_panel(): any {
},
name: {
...project_row.name,
- ...text(layer, "mono", { size: "sm" }),
+ ...text(layer, "sans", { size: "sm" }),
},
},
state: {
@@ -19,7 +19,7 @@ export default function context_menu(): any {
icon_width: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 },
corner_radius: 6,
- label: text(theme.middle, "ui_sans", { size: "sm" }),
+ label: text(theme.middle, "sans", { size: "sm" }),
keystroke: {
...text(theme.middle, "sans", "variant", {
size: "sm",